Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 h...
Why TDD?
Be confident about our code.
Be confident when someone make
changes on it.

Provides immediate feedback for
every...
Why TDD?
Be confident about our code.
Be confident when someone make
changes on it.

Provides immediate feedback for
every...
Bugs
Are a waste of time.
Are expensive to fix.

“If I don’t need to make it work, I
can go a lot faster.”
Kent Beck
Unit test must…
Initially fail.
Be orthogonal (independent) to all
the others.
Don’t test configuration settings.
Be not a...
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
s...
Basic steps
Create test.
Check that this test fails.
Once the test fails, start coding
until the test does not fail.

Once...
Flow
(Re)Write a test

Test succeeds

Check
if test
fails

Test fails

Write
production
code

Test(s) fail
Run
all
tests
A...
How to integrate it?
Creating a filter:
angular.module(‘app’, [])
.filter(‘encode’, function() {
return function(input) {
...
How to integrate it?
Let’s create the test:
describe(‘Testing’, function() {
var encodeFilter;
beforeEach(module(‘app’));
...
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(in...
How to integrate it?
Now the test works!

Refactor?
Concepts!
Some examples
Testing a filter:
http://jsfiddle.net/kFLuV/1/
Testing a directive:
http://jsfiddle.net/Fh3V7/
Testing a con...
TDD Basics with Angular.js and Jasmine
Upcoming SlideShare
Loading in …5
×

TDD Basics with Angular.js and Jasmine

14,298 views

Published on

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

Published in: Technology
  • Be the first to comment

TDD Basics with Angular.js and Jasmine

  1. 1. TDD (Test-Driven Development)
  2. 2. 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.
  3. 3. Why TDD? Be confident about our code. Be confident when someone make changes on it. Provides immediate feedback for every change.
  4. 4. Why TDD? Be confident about our code. Be confident when someone make changes on it. Provides immediate feedback for every change.
  5. 5. Bugs Are a waste of time. Are expensive to fix. “If I don’t need to make it work, I can go a lot faster.” Kent Beck
  6. 6. Unit test must… Initially fail. Be orthogonal (independent) to all the others. Don’t test configuration settings. Be not about finding bugs. • this is done manually by QA.
  7. 7. 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.
  8. 8. Basic steps Create test. 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.
  9. 9. Flow (Re)Write a test Test succeeds Check if test fails Test fails Write production code Test(s) fail Run all tests All tests succeed Clean up code
  10. 10. How to integrate it? Creating a filter: angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { // @todo write the code here }; });
  11. 11. 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); }); });
  12. 12. How to integrate it? Now the test fails...
  13. 13. How to integrate it? Now let’s write the code: angular.module(‘app’, []) .filter(‘encode’, function() { return function(input) { return encodeURI(input); }; });
  14. 14. How to integrate it? Now the test works! Refactor?
  15. 15. Concepts!
  16. 16. 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/

×