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/ • sirar.salih@itera.no / sirars@gmail.com• @SirarSalih