Test Driven Development with AngularJS
-
Upload
sirar-salih -
Category
Technology
-
view
262 -
download
0
description
Transcript of Test Driven Development with AngularJS
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/ • [email protected] / [email protected]• @SirarSalih