KEMBAR78
Test Driven Development with AngularJS | PPTX
TDD WITH ANGULARJS
SIRAR SALIH
SOFTWARE ENGINEER
About me
HTML enhanced for web apps!
GET (once)
POST (later)
From wikipedia
‱ 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
‱ +++
‱ Module
– Sub-modules
‱ Controller
‱ Directive
‱ Service
– Data
‱ Service
– Data
«With great power, comes great responsibility.» – Uncle Ben
Test Driving AngularJS
«With great power, comes great responsibility.» – Uncle Ben
«With great power, comes great responsibility.» – Uncle Ben
‱ Jasmine
«With great power, comes great responsibility.» – Uncle Ben
‱ Jasmine
«With great power, comes great responsibility.» – Uncle Ben
‱ Jasmine
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma test runner
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma test runner
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma coverage (Istanbul plugin)
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma coverage (Istanbul plugin)
Demo time!
Test Automation
«With great power, comes great responsibility.» – Uncle Ben
«With great power, comes great responsibility.» – Uncle Ben
‱ Grunt
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma TeamCity (TeamCity plugin)
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma TeamCity (TeamCity plugin)
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma TeamCity (TeamCity plugin)
«With great power, comes great responsibility.» – Uncle Ben
‱ Karma coverage (Istanbul plugin)
Best Practices
Naming Conventions
‱ File naming
– mainCtrl.js
– mainSvc.js
– mainDirective.js
‱ JavaScript
– mainController
– mainService
– mainDirective
‱ HTML
– <main-directive></main-directive>
Design Patterns
‱ Feature Pattern
– Break into feature folders
Design Patterns
‱ Enterprise Pattern
– Break into component folders
Design Patterns
‱ App Pattern
– Break into module folders
Thank you  / Questions?
Blog: http://sirars.com/
‱ sirar.salih@itera.no / sirars@gmail.com
‱ @SirarSalih

Test Driven Development with AngularJS