.component API available since Angular JS 1.5
10 | Feature A is so great that it even contains counter functionality!
13 |Counter: {{$ctrl.counter}}
The implemented counter functionality is tested in isolation without instantiating of Angular JS context
18 |
30 | import { assert } from 'chai';
31 |
32 | import SomeComponent from './some-component';
33 |
34 | let component;
35 |
36 | describe('some-component', function() {
37 |
38 | beforeEach(function() {
39 | component = new SomeComponent();
40 | });
41 |
42 | it('should start with counter value 20', function () {
43 | assert.equal(component.counter, 20);
44 | });
45 |
46 | it('should accept initial counter value as dependency', function () {
47 | component = new SomeComponent(30);
48 | assert.equal(component.counter, 30);
49 | });
50 |
51 | it('should increment counter value after increment is called', function () {
52 | assert.equal(component.counter, 20);
53 | component.increment();
54 | assert.equal(component.counter, 21);
55 | });
56 |
57 | });
58 |
59 | No `todos` yet, try to add some...
24 |The functionality implemnted in TodoService is tested in isolation without instantiating of Angular JS context
46 |
70 |
71 | import { assert } from 'chai';
72 |
73 | import TodoService from './todo.service.js';
74 |
75 | let service;
76 |
77 | describe('TodoService', function() {
78 |
79 | beforeEach(function() {
80 | service = new TodoService();
81 | });
82 |
83 | it('should contain empty todos after initialization', function () {
84 | assert.equal(service.todos.length, 0);
85 | });
86 |
87 | it('should add todo', function () {
88 | service.addTodo('Finish example project');
89 | assert.equal(service.todos.length, 1);
90 | assert.equal(service.todos[0].label, 'Finish example project');
91 | assert.equal(service.todos[0].done, false);
92 | });
93 |
94 | it('should toggle todo', function () {
95 | service.addTodo('Finish example project');
96 | assert.equal(service.todos[0].done, false);
97 |
98 | service.toggleTodo('Finish example project');
99 | assert.equal(service.todos[0].done, true);
100 |
101 | service.toggleTodo('Finish example project');
102 | assert.equal(service.todos[0].done, false);
103 | });
104 |
105 | it('should remove done todos', function () {
106 | service.addTodo('Todo1');
107 | service.addTodo('Todo2');
108 | service.addTodo('Todo3');
109 | assert.equal(service.todos.length, 3);
110 |
111 | service.toggleTodo('Todo1');
112 | service.removeDoneTodos();
113 | assert.equal(service.todos.length, 2);
114 | });
115 |
116 | });
117 |
118 |
119 |
123 |
124 | import { assert } from 'chai';
125 | import * as sinon from 'sinon';
126 |
127 | import TodoComponent from './todo-component.js';
128 | import TodoService from '../services/todo.service.js';
129 |
130 | let component;
131 | let mockTodoService;
132 |
133 | describe('TodoComponent with mocked service (unit test)', function() {
134 |
135 | beforeEach(function() {
136 | let initialTodos = [];
137 | let TodoServiceInstance = new TodoService(initialTodos);
138 | mockTodoService = sinon.mock(TodoServiceInstance);
139 | component = new TodoComponent(TodoServiceInstance);
140 | });
141 |
142 | afterEach(function() {
143 | mockTodoService.restore();
144 | });
145 |
146 | it('should add todo', function () {
147 | mockTodoService
148 | .expects('addTodo')
149 | .once()
150 | .withArgs('Finish example project');
151 |
152 | component.label = 'Finish example project';
153 | component.addTodo();
154 |
155 | mockTodoService.verify();
156 | });
157 |
158 | it('should toggle todo', function () {
159 | let mockTodo = {label: 'Add unit tests', done: false};
160 | mockTodoService
161 | .expects('toggleTodo')
162 | .twice()
163 | .withArgs(mockTodo.label);
164 |
165 | component.toggleTodo(mockTodo);
166 | component.toggleTodo(mockTodo);
167 |
168 | mockTodoService.verify();
169 | });
170 |
171 | it('should remove done todos', function () {
172 | mockTodoService
173 | .expects('removeDoneTodos')
174 | .once();
175 |
176 | component.removeDoneTodos();
177 |
178 | mockTodoService.verify();
179 | });
180 |
181 | });
182 |
183 |
184 |
188 |
189 | import { assert } from 'chai';
190 |
191 | import TodoComponent from './todo-component.js';
192 | import TodoService from '../services/todo.service.js';
193 |
194 | let component;
195 |
196 | describe('TodoComponent with real service (Integration test)', function() {
197 |
198 | beforeEach(function() {
199 | let initialTodos = [];
200 | let todoService = new TodoService(initialTodos);
201 | component = new TodoComponent(todoService);
202 | });
203 |
204 | it('should contain reference to service\'s todos', function () {
205 | assert.equal(component.todos.length, 0);
206 | });
207 |
208 | it('should add todo', function () {
209 | component.label = 'Finish example project';
210 | component.addTodo();
211 | assert.equal(component.label, '');
212 | assert.equal(component.todos.length, 1);
213 | assert.equal(component.todos[0].label, 'Finish example project');
214 | assert.equal(component.todos[0].done, false);
215 | });
216 |
217 | it('should toggle todo', function () {
218 | component.label = 'Finish example project';
219 | component.addTodo();
220 | assert.equal(component.todos[0].done, false);
221 |
222 | component.toggleTodo(component.todos[0]);
223 | assert.equal(component.todos[0].done, true);
224 |
225 | component.toggleTodo(component.todos[0]);
226 | assert.equal(component.todos[0].done, false);
227 | });
228 |
229 | it('should remove done todos', function () {
230 | component.label = 'Todo1';
231 | component.addTodo();
232 |
233 | component.label = 'Todo2';
234 | component.addTodo();
235 |
236 | component.label = 'Todo2';
237 | component.addTodo();
238 |
239 | assert.equal(component.todos.length, 3);
240 |
241 | component.toggleTodo(component.todos[0]);
242 | component.removeDoneTodos();
243 | assert.equal(component.todos.length, 2);
244 | });
245 |
246 | });
247 |
248 |
249 |