last tdd patterns · 2015. 2. 25. · last tdd patterns ... tdd.$$
TDD Basics with Angular.js and Jasmine
-
Upload
luis-sanchez-castellanos -
Category
Technology
-
view
5.789 -
download
6
description
Transcript of TDD Basics with Angular.js and Jasmine
![Page 1: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/1.jpg)
TDD(Test-Driven Development)
![Page 2: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/6.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/7.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/12.jpg)
How to integrate it?
Now the test fails...
![Page 13: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/14.jpg)
How to integrate it?
Now the test works!
Refactor?
![Page 15: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/15.jpg)
Concepts!
KISSDRY
YAGNI
SoC
![Page 16: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/16.jpg)
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/
![Page 17: TDD Basics with Angular.js and Jasmine](https://reader034.fdocuments.in/reader034/viewer/2022051413/55632997d8b42a57348b4e0c/html5/thumbnails/17.jpg)