feature(tests, styling): add todo-component tests and integration tests

- add unit tests
- add integration tests
- add highlight.js directive to fix highlighting in dynamic templates
- add angular-ui-boostrap for collapse directive
- add angular-animate

Author: tomastrajan

package.json

@@ -13,10 +13,14 @@
   "license": "ISC",
   "dependencies": {
     "angular": "^1.4.4",
+    "angular-animate": "^1.5.0-beta.0",
+    "angular-highlightjs": "^0.4.3",
+    "angular-ui-bootstrap": "^0.13.4",
     "angular-ui-router": "^0.2.15",
     "babel-core": "^5.8.20",
     "babel-runtime": "^5.8.20",
     "bootstrap": "^3.3.5",
+    "highlight.js": "^8.8.0",
     "jquery": "^2.1.4",
     "lodash": "^3.10.1"
   },
@@ -35,6 +39,7 @@
     "mocha": "^2.2.5",
     "mocha-babel": "^3.0.0",
     "ngtemplate-loader": "^1.3.0",
+    "sinon": "^1.17.1",
     "style-loader": "^0.12.3",
     "typescript": "^1.5.3",
     "url-loader": "^0.5.6",

src/feature-a/some-component/some-component.tpl.html

@@ -12,44 +12,45 @@ <h2>Feature A is implemented as Component using
     <p>The implemented counter functionality is tested in isolation without instantiating of Angular JS context</p>
     <br />
     <hr />
+
     <button class="btn btn-info pull-right" ui-sref="app.feature-b">Try Feature B</button>
     <button class="btn btn-success" ng-click="ctrl.increment()">Increment counter</button>
     <a class="btn btn-default" data-toggle="collapse" href="#testCode" aria-expanded="false" aria-controls="collapseExample">Toggle test code</a>
+
     <br />
     <br />
-    <pre class="collapse" id="testCode">
-    <code class="javascript">
-        import { assert } from 'chai';
 
-        import SomeComponent from './some-component';
+    <div class="collapse" id="testCode">
+        <code hljs language="javascript">
+            import { assert } from 'chai';
 
-        let component;
+            import SomeComponent from './some-component';
 
-        describe('some-component', function() {
-
-            beforeEach(function() {
-                component = new SomeComponent();
-            });
+            let component;
 
-            it('should start with counter value 20', function () {
-                assert.equal(component.counter, 20);
-            });
+            describe('some-component', function() {
 
-            it('should accept initial counter value as dependency', function () {
-                component = new SomeComponent(30);
-                assert.equal(component.counter, 30);
-            });
+                beforeEach(function() {
+                    component = new SomeComponent();
+                });
 
-            it('should increment counter value after increment is called', function () {
-                assert.equal(component.counter, 20);
-                component.increment();
-                assert.equal(component.counter, 21);
-            });
+                it('should start with counter value 20', function () {
+                    assert.equal(component.counter, 20);
+                });
 
-        });
-    </code>
-    </pre>
+                it('should accept initial counter value as dependency', function () {
+                    component = new SomeComponent(30);
+                    assert.equal(component.counter, 30);
+                });
 
+                it('should increment counter value after increment is called', function () {
+                    assert.equal(component.counter, 20);
+                    component.increment();
+                    assert.equal(component.counter, 21);
+                });
 
+            });
+        </code>
+    </div>
 
 </div>

src/feature-b/todo-component/todo-component.integration.test.js

@@ -0,0 +1,58 @@
+import { assert } from 'chai';
+
+import TodoComponent from './todo-component.js';
+import TodoService from '../services/todo.service.js';
+
+let component;
+
+describe('TodoComponent with real service (Integration test)', function() {
+
+    beforeEach(function() {
+        let initialTodos = [];
+        let todoService = TodoService(initialTodos);
+        component = new TodoComponent(todoService);
+    });
+
+    it('should contain reference to service\'s todos', function () {
+        assert.equal(component.todos.length, 0);
+    });
+
+    it('should add todo', function () {
+        component.label = 'Finish example project';
+        component.addTodo();
+        assert.equal(component.label, '');
+        assert.equal(component.todos.length, 1);
+        assert.equal(component.todos[0].label, 'Finish example project');
+        assert.equal(component.todos[0].done, false);
+    });
+
+    it('should toggle todo', function () {
+        component.label = 'Finish example project';
+        component.addTodo();
+        assert.equal(component.todos[0].done, false);
+
+        component.toggleTodo(component.todos[0]);
+        assert.equal(component.todos[0].done, true);
+
+        component.toggleTodo(component.todos[0]);
+        assert.equal(component.todos[0].done, false);
+    });
+
+    it('should remove done todos', function () {
+        component.label = 'Todo1';
+        component.addTodo();
+
+        component.label = 'Todo2';
+        component.addTodo();
+
+        component.label = 'Todo2';
+        component.addTodo();
+
+        assert.equal(component.todos.length, 3);
+
+        component.toggleTodo(component.todos[0]);
+        component.removeDoneTodos();
+        assert.equal(component.todos.length, 2);
+    });
+
+});

src/feature-b/todo-component/todo-component.js

@@ -4,6 +4,8 @@ export default class TodoComponent {
         this.TodoService = TodoService;
         this.todos = TodoService.todos;
         this.label = '';
+
+        this.collapse = [true, true, true];
     }
 
     addTodo() {
@@ -19,4 +21,12 @@ export default class TodoComponent {
         this.TodoService.removeDoneTodos();
     }
 
+    toggleCollapse(index) {
+        let originalValue = this.collapse[index];
+        this.collapse.forEach((item, i) => {
+            this.collapse[i] = true;
+        });
+        this.collapse[index] = !originalValue;
+    }
+
 }

src/feature-b/todo-component/todo-component.test.js

@@ -0,0 +1,58 @@
+import { assert } from 'chai';
+import * as sinon from 'sinon';
+
+import TodoComponent from './todo-component.js';
+import TodoService from '../services/todo.service.js';
+
+let component;
+let mockTodoService;
+
+describe('TodoComponent with mocked service (unit test)', function() {
+
+    beforeEach(function() {
+        let initialTodos = [];
+        let TodoServiceInstance = TodoService(initialTodos);
+        mockTodoService = sinon.mock(TodoServiceInstance);
+        component = new TodoComponent(TodoServiceInstance);
+    });
+
+    afterEach(function() {
+       mockTodoService.restore();
+    });
+
+    it('should add todo', function () {
+        mockTodoService
+            .expects('addTodo')
+            .once()
+            .withArgs('Finish example project');
+
+        component.label = 'Finish example project';
+        component.addTodo();
+
+        mockTodoService.verify();
+    });
+
+    it('should toggle todo', function () {
+        let mockTodo = {label: 'Add unit tests', done: false};
+        mockTodoService
+            .expects('toggleTodo')
+            .twice()
+            .withArgs(mockTodo.label);
+
+        component.toggleTodo(mockTodo);
+        component.toggleTodo(mockTodo);
+
+        mockTodoService.verify();
+    });
+
+    it('should remove done todos', function () {
+        mockTodoService
+            .expects('removeDoneTodos')
+            .once();
+
+        component.removeDoneTodos();
+
+        mockTodoService.verify();
+    });
+
+});