Test-Driven Development of AngularJS Applications

Test Driven AngularJS
Andy Pliszka

!
!

@AntiTyping

AntiTyping.com

github.com/dracco

jQuery
• Low-level DOM modiﬁcation
• Inserting data into DOM
• Extracting data from DOM
• Code duplication

Boilerplate code
• Copy and paste
• jQuery DOM manipulation
• Backbone.js views
• Event handlers

Lack of Structure
• Rails folder structure
• Django folder structure
• Running tests

Imperative code
• GUIs are declarative
• HTML, CSS are declarative
• Front end code is mostly imperative
• Difﬁcult to understand
• Maintenance nightmares

Lack of modularity
• Monolithic applications
• Rigid and interconnected code
• Difﬁcult to test
• Forced to use hight level integration tests
• Large team issues

Testability
• Front end code is poorly tested
• Poor support from libraries
• jQuery
• Backbone.js
• In browser testing
• Lack of command line tools

node.js
• Platform
• JavaScript

var http = require('http');!
!
http.createServer(!
function (request, response) {!
response.writeHead(200, {'Content-Type': 'text/plain'});!
response.end('Hello Worldn');!
}!
).listen(8000);!
!
console.log('Server running at http://localhost:8000/');

• Google’s V8 JavaScript engine
• Created by Ryan Dahl

npm
• Ofﬁcial package manager for Node.js
• npm search
• npm install

package.json
{
"name": "AngularDo",
"version": "1.0.0",
"dependencies": {
"angular": "~1.0.7",
"json3": "~3.2.4",
"jquery": "~1.9.1",
"bootstrap-sass": "~2.3.1",
"es5-shim": "~2.0.8",
"angular-resource": "~1.0.7",
"angular-cookies": "~1.0.7",
"angular-sanitize": "~1.0.7"
},
"devDependencies": {
"angular-mocks": "~1.0.7",
"angular-scenario": "~1.0.7"
}
}

Automate
• Repetitive tasks
• Tests
• Compilation of assets

Create
• Bootstrap the app
• Folder structure
• Generators

Development
• Watch ﬁles
• Recompile (Sass, CoffeeScript)
• Reload browser

Deploy
• Testing
• Linting and compilation
• Concatenation and miniﬁcation
• Image optimization
• Versioning

Installation
• brew install nodejs
• npm install -g yo
• npm install -g generator-angular

Yo
create a new web app

• mkdir AngularApp && cd $_
• yo angular
• yo angular:controller

Bower
manage dependencies

• bower search
• bower install

bower.json
{
"name": "AngularDo",
"version": "1.0.0",
"dependencies": {
"angular": "~1.0.7",
"json3": "~3.2.4",
"jquery": "~1.9.1",
"bootstrap-sass": "~2.3.1",
"es5-shim": "~2.0.8",
"angular-resource": "~1.0.7",
"angular-cookies": "~1.0.7",
"angular-sanitize": "~1.0.7"
},
"devDependencies": {
"angular-mocks": "~1.0.7",
"angular-scenario": "~1.0.7"
}
}

Grunt
preview, test, build

• grunt server
• grunt test
• grunt build

Jasmine
• Behavior-driven development framework
• Specs for your JavaScript code
• Write expectations
• Uses matchers

Jasmine Suites
describe("A suite", function() {
var flag;
!
beforeEach(function() {
flag = true;
});
!
it("contains spec with an expectation", function() {
expect(flag).toBe(true);
});
});

Jasmine Expectations
describe("A suite", function() {
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});

Jasmine Matchers
expect(a).toBe(b);
expect(a).not.toBe(null);
expect(a).toEqual(12);
expect(null).toBeNull();
!
expect(message).toMatch(/bar/);
!
expect(a.foo).toBeDefined();
expect(a.bar).toBeUndefined();
!
expect(foo).toBeTruthy();
expect(a).toBeFalsy();
!
expect(['foo', 'bar', 'baz']).toContain('bar');
!
expect(bar).toThrow();

Features
• Display list of tasks
• Add a new task
• Mark task as done
• Add a new task with a priority
• Filter tasks by priority
• Search tasks
• Task counter

Install dependencies
• rvm install 2.0
• gem install compass
• brew install nodejs
• npm install -g bower
• npm install -g yo
• npm install -g generator-angular
• npm install -g karma

Project setup
• mkdir AngularDo
• cd AngularDo
• yo angular AngularDo

Rails RESTful back-end
• curl -L https://get.rvm.io | bash -s stable
• rvm install 2.0
• git clone git@github.com:dracco/AngularDoStore.git
• cd AngularDoStore
• bundle
• rails s

Angular front-end
• git clone git@github.com:dracco/AngularDo.git
• cd AngularDo
• npm install
• bower install
• grunt server

Test-Driven Development of AngularJS Applications

Dev setup
• grunt server
• rails s
• ./run-unit-tests.sh
• ./run-e2e-tests.sh

git checkout -f feature_1_step_0

User story
As a user,
I should be able to see list of tasks,
so I can choose the next task
!

Scenario: Display list of tasks
When I navigate to the task list
Then I should see the list of tasks

e2e scenario
describe("Task List", function() {
it('should display list of tasks', function() {
expect(repeater('tr.item').count()).toBe(3);
});
});

ng-repeat
<tbody>
<tr ng-repeat="task in tasks" class="task">
<td>{{$index + 1}}</td>
<td>{{task.name}}</td>
</tr>
</tbody>

TaskCtrl unit test
!
describe("TaskCtrl", function() {
it('should populate scope with list of tasks',
inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
$controller('TaskCtrl', { $scope: scope });
expect(scope.tasks.length).toEqual(3);
}));
});

TaskCtrl
'use strict';
!
angular.module('AngularDoApp')
.controller('TaskCtrl', function ($scope) {
$scope.tasks = [
{name: 'Task 1'},
{name: 'Task 2'},
{name: 'Task 3'},
];
});

<div class="row" ng-controller="TaskCtrl">

Feature #1 Summary
• List of tasks (ng-repeat)
• Task list (TaskCtrl)
• e2e scenario
• TaskCtrl unit test
• No low level DOM manipulation (ng-repeat)

Feature #1 Summary
• LiveReload of the browser
• App code watcher
• Unit test watcher
• e2e scenario watcher

User Story
As a user,
I should be able to add a new task,
so I can update my list of tasks
!

Scenario: Add a valid new task
When I add a valid new task
Then I should see the task in the list
!

Scenario: Add an invalid new task
When I add an invalid new task
Then I should see an error message

e2e scenario
describe("Add a new task", function() {
describe("when the new task is valid", function() {
input('item.name').enter("New item");
element('button.js-add').click();
});
!
it("should add it to the list", function() {
expect(element('tr.task:last').text()).toMatch(/New item/);
expect(repeater('tr.task').count()).toBe(4);
});
!
it('should clear the new item box', function() {
expect(input('item.name').val()).toEqual('');
});
});
...

e2e scenario
describe("Add a new task", function() {
...
!
describe("when the new task is invalid", function() {
input('item.name').enter("");
element('button.js-add').click();
});
!
it("should leave the task list unchanged", function() {
expect(repeater('tr.item').count()).toBe(3);
});
!
it("should display an error message", function() {
expect(element('div.alert').count()).toBe(1);
});
});
});

ng-model

<input name="name"
ng-model="task.name" required ng-minlength="3" ...>

ng-click
<button ng-click="add(task); task.name = '';"
ng-disabled="form.$invalid" ...>Add</button>

ng-show
<div ng-show="form.name.$dirty &&
form.name.$invalid &&
form.name.$error.minlength" ...>
Task name should be at least 3 characters long.
</div>

TaskCtrl unit test
describe("add", function() {
var task;
!
it("should adds new task to task list", function() {
task = jasmine.createSpy("task");
scope.add(task);
});
});

TaskCtrl
$scope.tasks = [
{name: 'Task 1'},
{name: 'Task 2'},
{name: 'Task 3'},
!
];
!
$scope.add = function(task) {
var newTask = new Object();
newTask.name = task.name;
$scope.tasks.push(newTask);
};
});

Feature #2 Summary
• Dynamic list (ng-repeat)
• Validations (requires, ng-minlength)
• Disabled button (ng-disabled)
• Tests

User Story
As a user,
I should be able to mark tasks as done,
so I can keep track of completed work
!

Scenario: Mark task as done
When I mark a task as done
Then the task should be remove from the list
!

e2e scenario
describe("Mark task as done", function() {
it("should remove the task from the task list", function() {
element('button.js-done:last').click();
});
});

ng-click
<td>
<button ng-click="remove($index, task)" class="js-done">
Done
</button>
</td>

remove() unit test
!

describe("remove", function() {
it("should remove the task from task list", function() {
var task = jasmine.createSpy("task");
scope.remove(1, task);
});
});

remove()
...
!
$scope.remove = function(index, task) {
$scope.tasks.splice(index, 1);
};
});

Feature #3 Summary
• e2e scenario
• TaskCtrl unit test
• Click handler (ng-click)

Feature #4
Add task with priority

User Story
As a user,
I should be able to set task priority,
so I can keep track of urgent tasks
!

Scenario: Add a task with priority
When I add task with priority
Then the task list should include priorities
!

e2e scenario

!
it("should set priority", function() {
expect(element("span.priority:last").text()).toMatch(/medium/);
});

ng-init
<select ng-init="task.priority = 'high'" ng-model="task.priority">
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>

{{task.priority}}
<tr ng-repeat="task in tasks" class="task">
<td>{{$index + 1}}</td>
<td>
{{task.name}}
<span class="priority label">{{task.priority}}</span>
</td>
...
</tr>

Priority unit test
it("should adds new task to task list", function() {
task = {name: 'Task 4', priority: 'high'}
scope.add(task);
expect(scope.tasks[3].name).toEqual('Task 4');
expect(scope.tasks[3].priority).toEqual('high');
});

Add priorities
$scope.tasks = [
{name: 'Task 1', priority: 'high'},
{name: 'Task 2', priority: 'medium'},
{name: 'Task 3', priority: 'low'}
];
!
var newTask = new Object();
newTask.priority = task.priority;
};
!
...
});

User Story
As a user,
I should be filter tasks by priority,
so I can find hight priority tasks
!

Scenario: Priority filter
When I select ‘high’ priority filter
Then I should see only high priority tasks
!

e2e scenario
describe("Filter by priority", function() {
describe("when high priority is selected", function() {
it("should display only high priority tasks", function() {
element("a.priority:contains('high')").click();
});
});
!
describe("when high priority is selected", function() {
it("should display only medium priority tasks", function() {
element("a.priority:contains('medium')").click();
});
});
!
...

ﬁlter
task.priority == query.priority

<tr ng-repeat="task in tasks | filter:query)" ...>

<li ng-class="{'active': query.priority == ''}">
<a ng-init="query.priority = ''"
ng-click="query.priority = ''; $event.preventDefault()"...>
All
</a>
</li>

User Story
As a user,
I should be able to search tasks,
so I can find important tasks
!

Scenario: Search task
When I search for ‘Task 1’
Then I should see ‘Task 1’ in the list
!

e2e scenario
describe("Task search", function() {
it("should only display task that match the keyword", function() {
input("query.name").enter("Task 1");
expect(element('tr.task').text()).toMatch(/Task 1/);
});
});

ﬁlter:query
<input ng-init="query.name = ''" ng-model="query.name" ...>
!
!
!
!
<button ng-click="query.name =''" ...>Clear</button>
!
!
!
!
<tr ng-repeat="task in tasks | filter:query" class="task">

User Story
As a user,
I should be able to persist my tasks,
so I can access my task anywhere
!

Scenario: Persist tasks
When I add a new task
Then it should be persisted in the database
!

Scenario: Mark as task as done
When I mark a task as done
Then it should be removed from the database
!

$resource unit tests
!
it("should save the new task", function() {
scope.add(task);
expect($save).toHaveBeenCalled();
});

it("should remove new task from data store", function() {
scope.remove(1, task);
expect(task.$remove).toHaveBeenCalled();
});

$resource
.controller('TaskCtrl', function ($scope, Task, $resource) {
...
})
.factory('Task', ['$resource', function($resource){
return $resource('http://localhost:3000/:path/:id', {}, {
query: {method:'GET', params:{path:'tasks.json'}, isArray:true},
get: {method:'GET', params:{path:''}},
save: {method:'POST', params:{path:'tasks.json'}},
remove: {method:'DELETE', params:{path:'tasks'}}
});
}]);;

$save, $remove
var newTask = new Task(); // use to be new Object()
newTask.priority = task.priority;
newTask.$save();
};
!
$scope.remove = function(index, task) {
var id = task.url.replace("http://localhost:3000/tasks/", '');
task.$remove({id: id});
$scope.tasks.splice(index, 1);
};

User Story
As a user,
I should be see the number of tasks,
so I can estimate amount of outstanding work
!

Scenario: Task counter
When I navigate to home page
Then I should see the number of tasks

e2e scenario

describe("Task counter", function() {
it("should display number of visible tasks", function() {
expect(element(".js-task-counter").text()).toEqual("3 tasks");
});
});

pluralize ﬁlter
{{filtered.length | pluralize:'task'}}

<tr ng-repeat="task in filtered = (tasks | filter:query)" ...>

pluralize unit test
describe('pluralizeFilter', function() {
it('should return pluralized number of nouns',
inject(function(pluralizeFilter) {
expect(pluralizeFilter(0, "apple")).toBe('No apples');
expect(pluralizeFilter(1, "apple")).toBe('1 apple');
expect(pluralizeFilter(2, "apple")).toBe('2 apples');
}));
});

pluralize ﬁlter
'use strict';
!
.filter('pluralize', function() {
return function(number, noun){
if (number == 0)
return "No " + noun + "s";
if (number == 1)
return number + " " + noun;
return number + " " + noun + "s";
}
});

Test-Driven Development of AngularJS Applications

Related slideshows

More Related Content

Test-Driven Development of AngularJS Applications