#karma start
Technologies:
- ES6
- Karma
- Jasmine
- Web Components
- JSPM
- Node
- Git
- Phantom
Getting started:
Clone the
Hit-the-gymrepo on GithubClone [email protected]:matthewharwood/Hit-the-gym.git
Start code editor
code .
Install Packages
npm install jspm -g --savejspm init(press enter 100s times)npm install -g live-server
Add scripts to anywhere in the Package.json object:
"scripts": {
"postinstall": "jspm install",
"start": "live-server --open=client/index.html --port=9090 ./"
},
Create the folder structure:
mkdir client && cd !$
mkdir app
inside the client/app
touch index.html
Edit the index file to test the npm start
add boilerplate to
index.html<html> <head></head> <body> <h1>Hey World</h1> </body> </html>
Start the Server
Return to base directory (should be be 1 back)cd ..
Run: npm start from console.
Install the Testing Framework Packages:
"devDependencies": { "jasmine-core": "^2.3.4", "jspm": "^0.15.6", "karma": "^0.12.35", "karma-chrome-launcher": "^0.1.12", "karma-coverage": "^0.3.1", "karma-jasmine": "^0.3.5", "karma-jspm": "^1.1.5", "karma-phantomjs-launcher": "^0.2.0", "phantomjs": "^1.9.17" }
Initialize the Testing Framework:
karma init (press enter 100 times)
replace frameworks:[],file:[],
frameworks: ['jspm', 'jasmine'],
// list of files / patterns to load in the browser
jspm: {
loadFiles: [
'client/app/**/*.js'
]
},
plugins:[
'karma-jasmine',
'karma-coverage',
'karma-jspm',
'karma-chrome-launcher'
],
Make a todo module:
cd client
mkdir todo
touch todo.js
"use strict";
class Todo{
constructor(name){
this.name = name;
}
}
export default Todo;
Make a todo.spec.js
touch todo.spec.js
Open todo.spec.js and paste:
import Todo from './todo';
describe('es6 main should eval:', function(){
var todo;
beforeEach(function(){
todo = new Todo('Gym');
});
it('expect Todo to be present', function(){
expect(todo).not.toBe(null);
});.
});
Write your first meaningful test:
Written with StackEdit.
import Todo from './todo';
describe('Todo list:', function(){
var todo;
beforeEach(function(){
todo = new Todo('Gym');
});
it('expect Todo to be present', function(){
expect(todo).not.toBe(null);
});
it('expect Todo constructor to accept a title', function(){
expect(todo.title).toEqual('Gym');
});
it('expect Todo List property to be Present', function(){
expect(todo.list).not.toBe(null);
})
it('expect Todo List property to accept a title:empty', function(){
expect(todo.list[0].title).toEqual('empty');
});
it('expect Todo Title property to accept a title change', function(){
todo.setTitle('Work');
expect(todo.title).toEqual('Work');
});
it('expect Todo List property to have an add function', function(){
todo.addListItem();
expect(todo.list.length).toEqual(2);
});
it('expect Todo to have a remove function', function(){
todo.removeListItem();
expect(todo.list.length).toEqual(0);
})
});
Lets make the List Class
cd client/app/todo
mkdir list
touch list.js
list.js
"use strict";
class List{
constructor(title){
this.title = title;
}
}
export default List;
So a Todo Class Has a list item so lets compose the Todo Class to have the List Class.
import a list at the top of your todo.js import list.
import List from './list/list';
"use strict";
import List from './list/list';
class Todo{
constructor(title){
this.title = title;
this.list = [new List('empty')];
}
setTitle(newTitle){
this.title = newTitle;
}
addListItem(){
this.list.push(new List('empty'));
}
removeListItem(){
this.list.pop();
}
}
export default Todo;
Add template logic to index.html
<script src="../jspm_packages/system.js"></script>
<script src="../config.js"></script>
<script>
System.import('client/index').catch(console.log.bind(console));
</script>
create index.js next to index.html
touch index.js
open up index.js and add:
import List from './app/todo/todo';
Open up your todo.js add template logic:
// template logic goes here
var todoEl = document.querySelector('.todo');
console.log(todoEl);
Open up index.html add selected element
<div class="todo">Hey I'm a todo app</div>
Create Shadow Dom elements to populate.