TDD with Google's JavaScript framework, AngularJS.

1. TDD WITH ANGULARJS
SIRAR SALIH
SOFTWARE ENGINEER

2. About me

3. HTML enhanced for web apps!

5. GET (once)
POST (later)
From wikipedia

6. • 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
• +++

7. • Module
– Sub-modules

8. • Controller

9. • Directive

10. • Service
– Data

11. • Service
– Data

12. «With great power, comes great responsibility.» – Uncle Ben

13. Test Driving AngularJS

14. «With great power, comes great responsibility.» – Uncle Ben

15. «With great power, comes great responsibility.» – Uncle Ben
• Jasmine

16. «With great power, comes great responsibility.» – Uncle Ben
• Jasmine

17. «With great power, comes great responsibility.» – Uncle Ben
• Jasmine

18. «With great power, comes great responsibility.» – Uncle Ben
• Karma test runner

19. «With great power, comes great responsibility.» – Uncle Ben
• Karma test runner

20. «With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)

21. «With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)

22. Demo time!

23. Test Automation
«With great power, comes great responsibility.» – Uncle Ben

24. «With great power, comes great responsibility.» – Uncle Ben
• Grunt

25. «With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)

26. «With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)

27. «With great power, comes great responsibility.» – Uncle Ben
• Karma TeamCity (TeamCity plugin)

28. «With great power, comes great responsibility.» – Uncle Ben
• Karma coverage (Istanbul plugin)

29. Best Practices

30. Naming Conventions
• File naming
– mainCtrl.js
– mainSvc.js
– mainDirective.js
• JavaScript
– mainController
– mainService
– mainDirective
• HTML
– <main-directive></main-directive>

31. Design Patterns
• Feature Pattern
– Break into feature folders

32. Design Patterns
• Enterprise Pattern
– Break into component folders

33. Design Patterns
• App Pattern
– Break into module folders

34. Thank you  / Questions?
Blog: http://sirars.com/
• sirar.salih@itera.no / sirars@gmail.com
• @SirarSalih