TDD Basics with Angular.js and Jasmine

Post on 25-May-2015

5,787 views 6 download

Tags:

description

Basics of TDD with a small example using Angular.js and Jasmine

transcript

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