tdd basics with angular.js and jasmine
DESCRIPTION
Basics of TDD with a small example using Angular.js and JasmineTRANSCRIPT
TDD(Test-Driven Development)
what is TDD?
Write automated tests before you write your code.
Some benefits:
• Do not write more code than needed.
• We have a goal to shoot for.
• You can’t cheat and blow off the
tests.
• TDD helps design our code.
Why TDD?
Be confident about our code.
Provides immediate feedback for every change.
Be confident when someone make changes on it.
Why TDD?
Be confident about our code.
Provides immediate feedback for every change.
Be confident when someone make changes on it.
Bugs
Are expensive to fix.
Are a waste of time.
“If I don’t need to make it work, I can go a lot faster.”
Kent Beck
Unit test must…
Be orthogonal (independent) to all the others.
Don’t test configuration settings.
Be not about finding bugs.• this is done manually by QA.
Initially fail.
You are not allowed…
To write code unless is to make pass a failing unit test.
To write any more of a unit test than is sufficient to fail.
To write any more production code than is sufficient to pass the one failing unit test.
Basic steps
Check that this test fails.
Once the test fails, start coding until the test does not fail.Once the code works, clean up, refactor all necessary.
Create test.
Flow
(Re)Write a test
Write production
code
Clean up code
Check if test fails
Test succeeds
Test fails
Run all
tests
Test(s) fail
All testssucceed
How to integrate it?
Creating a filter:
angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { // @todo write the code here }; });
How to integrate it?Let’s create the test:describe(‘Testing’, function() { var encodeFilter; beforeEach(module(‘app’)); beforeEach(inject(function($filter) { encodeFilter = $filter(‘encode’); }));
it(‘should encode a URL with unusual characters’, function() { var url = ‘http://www.foo.com/234234/Build & Joneséí%’; var urlexpected = ‘’; expect(encodeFilter(url)).toBe(url); });});
How to integrate it?
Now the test fails...
How to integrate it?
Now let’s write the code:
angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { return encodeURI(input); }; });
How to integrate it?
Now the test works!
Refactor?
Concepts!
KISSDRY
YAGNI
SoC
Some examples
Testing a filter: http://jsfiddle.net/kFLuV/1/
Testing a directive: http://jsfiddle.net/Fh3V7/
Testing a controller: http://jsfiddle.net/ntFKL/
Testing a service: http://jsfiddle.net/B72tr/