Download - Test Driven Development with AngularJS
![Page 1: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/1.jpg)
TDD WITH ANGULARJS
SIRAR SALIH
SOFTWARE ENGINEER
![Page 2: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/2.jpg)
About me
![Page 3: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/3.jpg)
HTML enhanced for web apps!
![Page 4: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/4.jpg)
![Page 5: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/5.jpg)
GET (once)
POST (later)
From wikipedia
![Page 6: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/6.jpg)
• Directives– Powerful, Angular-only feature– Simplify DOM manipulation by reusable custom functionality
• Data binding– Models
• Controllers– Behavior– Avoid DOM manipulation
• Form validation– Easy client-side validation
• Localization– Filter directives
• Testability– Designed to be testable– Easy dependency injection
• +++
![Page 7: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/7.jpg)
• Module– Sub-modules
![Page 8: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/8.jpg)
• Controller
![Page 9: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/9.jpg)
• Directive
![Page 10: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/10.jpg)
• Service– Data
![Page 11: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/11.jpg)
• Service– Data
![Page 12: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/12.jpg)
«With great power, comes great responsibility.» – Uncle Ben
![Page 13: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/13.jpg)
Test Driving AngularJS
![Page 14: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/14.jpg)
«With great power, comes great responsibility.» – Uncle Ben
![Page 15: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/15.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Jasmine
![Page 16: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/16.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Jasmine
![Page 17: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/17.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Jasmine
![Page 18: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/18.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma test runner
![Page 19: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/19.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma test runner
![Page 20: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/20.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)
![Page 21: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/21.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)
![Page 22: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/22.jpg)
Demo time!
![Page 23: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/23.jpg)
Test Automation
«With great power, comes great responsibility.» – Uncle Ben
![Page 24: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/24.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Grunt
![Page 25: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/25.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)
![Page 26: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/26.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)
![Page 27: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/27.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)
![Page 28: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/28.jpg)
«With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)
![Page 29: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/29.jpg)
Best Practices
![Page 30: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/30.jpg)
Naming Conventions
• File naming– mainCtrl.js– mainSvc.js– mainDirective.js
• JavaScript – mainController– mainService– mainDirective
• HTML– <main-directive></main-directive>
![Page 31: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/31.jpg)
Design Patterns
• Feature Pattern– Break into feature folders
![Page 32: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/32.jpg)
Design Patterns
• Enterprise Pattern– Break into component folders
![Page 33: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/33.jpg)
Design Patterns
• App Pattern– Break into module folders
![Page 34: Test Driven Development with AngularJS](https://reader038.vdocuments.us/reader038/viewer/2022102823/5491ecc7b47959324b8b4986/html5/thumbnails/34.jpg)
Thank you / Questions?
Blog: http://sirars.com/ • [email protected] / [email protected]• @SirarSalih