5. Testing With Jasmine - robgillibrand/Todo-List-App GitHub Wiki

This section includes the completed tests carried out on the code for the App. Testing is an important asset for any project to avoid problems later on. These tests were carried out using Jasmine, which is a behaviour-driven development framework for testing JavaScript code.

Behaviour Driven Development

Behaviour-Driven Development (BDD) is a set of practices that aim to reduce some common wasteful activities in software development:

• Rework caused by misunderstood or vague requirements
• Technical debt caused by reluctance to refactor code
• Slow feedback cycles caused by silos and hand-overs
• BDD aims to narrow the communication gaps between team members, foster better understanding of the customer and promote continuous communication with real world examples.

Completed Jasmine Tests

To see the actual code: Controller spec file for Jasmine

Tests carried out

Test 1

it('should show entries on start-up', function () { // TODO: write test var todo = {title: 'my todo'}; setUpModel([todo]);

	`subject.setView('');`

	`expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);`
`});`

A todo is set up, the view is set to 'all' and the 'show entries' function is called with todo as the parameter.

Test 2

it('should show active entries', function () { // TODO: write test var todo = {title: 'my todo'}; setUpModel([todo]);

		`subject.setView('#/active');`

		`expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);`

	`});`

A todo is set up, the view or route is set to 'active' and the 'show entries' function is called with the todo as the parameter.

Test 3

it('should show completed entries', function () { // TODO: write test var todo = {title: 'my todo'}; setUpModel([todo]);

		`subject.setView('#/completed');`

		`expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);`
	`});`
`});`

A todo is set up, the view/route is set to 'completed' and the 'show entries' function is called with the todo as the parameter.

Test 4

it('should highlight "All" filter by default', function () { // TODO: write test subject.setView('');

	`expect(view.render).toHaveBeenCalledWith('setFilter', '');`
`});`

The view/route is set to 'all' and the 'set filter' function is called with 'all'.

Test 5

it('should highlight "Active" filter when switching to active view', function () { // TODO: write test subject.setView('#/active');

	`expect(view.render).toHaveBeenCalledWith('setFilter', 'active');`
`});`

The view/route is set to 'active' and the 'set filter' function is called with 'active'.

Test 6

it('should toggle all todos to completed', function () { // TODO: write test var todos = [{id: 1, title: 'my todo', completed: false}, {id: 2, title: 'another todo', completed: false}];

		`setUpModel(todos);`

		`subject.setView('');`

		`view.trigger('toggleAll', {completed: true});`

		`expect(model.update).toHaveBeenCalledWith(1, {completed: true}, jasmine.any(Function));`
		`expect(model.update).toHaveBeenCalledWith(2, {completed: true}, jasmine.any(Function));`
	`});`

Sample todos are set up, view/route is set to all, and the 'toggle all' function is called changing their completed status to true. Then the 'completed' value is matched against the 'jasmine.any function'.

Test 7

it('should update the view', function () { // TODO: write test var todo = {title: 'my todo'}; setUpModel([todo]);

		`subject.setView('#/completed');`

		`expect(view.render).toHaveBeenCalledWith('showEntries', [todo]);`
	`});`
`});`

A sample todo is set up, the view/route is set to 'completed' and then rendered to show the 'completed' todo.

Test 8

it('should add a new todo to the model', function () { // TODO: write test setUpModel([]);

		`subject.setView('');`

		`view.trigger('newTodo', 'my new todo');`

		`expect(model.create).toHaveBeenCalledWith('my new todo', jasmine.any(Function));`
	`});`

A sample todo is created, the view/route is set to all and the view is triggered into adding the new todo. Then a match is made to see whether a todo was added to the model.

Test 9

it('should remove an entry from the model', function () { // TODO: write test var todo = {id: 42}; setUpModel([todo]);

		`subject.setView('');`
		`view.trigger('itemRemove', {id: 42});`

		`expect(model.remove).toHaveBeenCalledWith(42, jasmine.any(Function));`
	`});`

A sample todo with the id of 42 is created, the 'set up model' function is called with the todo as the parameter and the view/route is set to all. The 'item remove' function with the parameter of 'id 42' is triggered and then there is a match to make sure that this is 'true'.