tdd basics with angular.js and jasmine

17
TDD (Test-Driven Development)

Upload: luis-sanchez-castellanos

Post on 25-May-2015

5.795 views

Category:

Technology


6 download

DESCRIPTION

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

TRANSCRIPT

Page 1: TDD Basics with Angular.js and Jasmine

TDD(Test-Driven Development)

Page 2: TDD Basics with Angular.js and Jasmine

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.

Page 3: TDD Basics with Angular.js and Jasmine

Why TDD?

Be confident about our code.

Provides immediate feedback for every change.

Be confident when someone make changes on it.

Page 4: TDD Basics with Angular.js and Jasmine

Why TDD?

Be confident about our code.

Provides immediate feedback for every change.

Be confident when someone make changes on it.

Page 5: TDD Basics with Angular.js and Jasmine

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

Page 6: TDD Basics with Angular.js and Jasmine

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.

Page 7: TDD Basics with Angular.js and Jasmine

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.

Page 8: TDD Basics with Angular.js and Jasmine

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.

Page 9: TDD Basics with Angular.js and Jasmine

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

Page 10: TDD Basics with Angular.js and Jasmine

How to integrate it?

Creating a filter:

angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { // @todo write the code here }; });

Page 11: TDD Basics with Angular.js and Jasmine

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); });});

Page 12: TDD Basics with Angular.js and Jasmine

How to integrate it?

Now the test fails...

Page 13: TDD Basics with Angular.js and Jasmine

How to integrate it?

Now let’s write the code:

angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { return encodeURI(input); }; });

Page 14: TDD Basics with Angular.js and Jasmine

How to integrate it?

Now the test works!

Refactor?

Page 15: TDD Basics with Angular.js and Jasmine

Concepts!

KISSDRY

YAGNI

SoC

Page 17: TDD Basics with Angular.js and Jasmine