Testing Your Angular App

Talk given to the Charlotte Front-end Developers Meetup (CLT FED) on Thursday, February, 25, 2016

Transcript

1. @vanwilson Testing Your Angular App
2. What We’re Going To Cover 1. Overview (a little about Angular, more about testing) 2. Setup for testing Angular 3. Examples of Angular Tests
3. Why Are You Here? 2. Because Testing 1. Because Angular
4. -Ben Nadel, “My Experience With AngularJS - The Super-heroic JavaScript MVW Framework”
5. One of the Good Things “AngularJS was designed from ground up to be testable. It encourages behavior-view separation, comes pre- bundled with mocks, and takes full advantage of dependency injection.” -angularjs.org
6. Testing?
9. Performance Kinds of Testing Functional Integration System Regression Smoke User Acceptance Unit Usability
10. Levels of Granularity • Unit Testing • Integration Testing • System Testing • User Acceptance Testing
11. Unit Tests • Test individuals functions • Isolate the “system under test” • Black box vs. white box testing • Run frequently • Serve as living documentation • Catch bugs before the QA stage
12. Style of Testing • Test-Driven Development (TDD) • Behavior-Driven Development (BDD)
13. TDD 1. Figure out what code needs to do 2. Write tests 3. Tests fail 4. Write code to make tests pass 5. Refactor 6. Repeat
14. BDD 1. Establish goals / requirements 2. Whole team describes the behavior of the system 3. Code based on behavior decisions 4. Automate testing of the code (regression testing)
15. Red-Green-Refactor
16. Part the Second or How do you get going on this Angular testing thing?
17. • Test Framework • Test Runner (separate in Javascript) • Test Environment (aka a browser) Tools
18. Test Framework http://jasmine.github.io/
19. Test Runner http://karma-runner.github.io
20. Test Environment http://phantomjs.org/
21. Install the pieces npm install phantomjs --save-dev npm install jasmine-core --save-dev npm install karma --save-dev npm install karma-jasmine --save-dev npm install karma-phantomjs-launcher --save-dev
22. Configure Karma In a terminal, run karma init to create a karma.conf.js file: // list of files / patterns to load in the browser: [ 'bower_components/angular/angular.min.js', 'bower_components/angular-route/angular-route.min.js', 'bower_components/angular-mocks/angular-mocks.js', 'app.js', '*.js' ], ...Ω
23. Start running tests
24. Part the Third In which we get our hands dirty with some Angular tests
25. Sample App git clone https://github.com/vjwilson/ Testing-Your-Angular-App.git cd Testing-Your-Angular-App npm install gulp open http://localhost:9999
26. Resources ➢ https://docs.angularjs.org/guide/unit-testing ➢ http://www.sitepoint.com/unit-testing-angularjs-services-controllers-providers/ ➢ http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the- fundamentals ➢ https://www.airpair.com/angularjs/posts/unit-testing-angularjs-applications ➢ http://www.pluralsight.com/courses/testing-angularjs-from-scratch ➢ http://www.pluralsight.com/courses/play-by-play-angular-testing-papa-bell
27. Parting Thoughts “Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.” -Brian W. Kernighan
28. Finis @BERMONPAINTER