angular application testing
TRANSCRIPT
![Page 1: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/1.jpg)
CoWork SouthBay 15 April 2017
Angular Application Testing
![Page 2: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/2.jpg)
Code & Slides
• https://github.com/Rockncoder/gh-stars
• https://www.slideshare.net/rockncoder/angular-application-testing
2
![Page 3: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/3.jpg)
3
![Page 4: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/4.jpg)
4
![Page 5: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/5.jpg)
Troy Miles• Troy Miles aka the RocknCoder
• Over 38 years of programming experience
• Speaker and author
• bit.ly/rc-jquerybook
• @therockncoder
• Now a lynda.com Author!
5
![Page 6: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/6.jpg)
Build Mobile Apps!
• Develop mobile apps with Ionic and AngularJS
• Learn the Ionic CLI
• Fetch data via ajax
• Deploy your app to Android & iOS
• bit.ly/ionicvideo
6
![Page 7: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/7.jpg)
![Page 8: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/8.jpg)
Follow Me
• Talks
• Webcasts
• Free stuff
• Tips, tricks, tools
• and general code nerd stuff
• @therockncoder
![Page 9: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/9.jpg)
My Versionsapp command my version
git git —version 2.11.0
node.js node -v 7.7.2
npm npm —v 4.1.2
angular (package.json) 4.0.1
angular cli ng -v 1.0.0
![Page 10: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/10.jpg)
“Code without tests is bad code.”— Michael C. Feathers
10
![Page 11: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/11.jpg)
Agenda• Why Test?
• Tools
• Unit Testing Basics
• Testing Components
• Testing Directives
• Testing Services
• Testing Pipes
• Testing Routes
• E2E Tests
• Summary
11
![Page 12: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/12.jpg)
Why Test?
12
![Page 13: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/13.jpg)
Why Test?
• Make sure the app meets its requirements
• Ensure that the app doesn’t regress
• Allow us to enhance app without breaking it
• Fearlessly improve the design
13
![Page 14: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/14.jpg)
The Testing PyramidMike Cohn / Martin Fowler
14
![Page 15: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/15.jpg)
Unit vs. End-to-EndUnit End-to-End
fast yes no
reliable yes no
isolates failures yes no
simulates user no yes
![Page 16: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/16.jpg)
Component• A class with component metadata
• Responsible for a piece of the screen referred to as view.
• Template is a form HTML that tells angular how to render the component.
• Metadata tells Angular how to process a class
![Page 17: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/17.jpg)
Component1 import { Component, OnInit } from '@angular/core'; 2 3 @Component({ 4 selector: 'app-about', 5 templateUrl: './about.component.html', 6 styleUrls: ['./about.component.css'] 7 }) 8 export class AboutComponent implements OnInit { 9 10 constructor() { } 11 12 ngOnInit() { 13 } 14 } 15
![Page 18: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/18.jpg)
Template/View
• Is a way to describe a view using HTML
• Templates can be included with the component
• Or as a URL link to an HTML file
• Best practice is to use an HTML file
![Page 19: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/19.jpg)
Directive• A class with directive metadata
• Three kinds of directives
• Attribute directives alter the look or behavior of an existing element
• Structural directives alter the layout by adding, removing, and replacing elements in the DOM
• A component is a directive with a view
![Page 20: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/20.jpg)
Directiveimport {Directive, ElementRef, Renderer, Input, OnInit} from 'angular2/core'; @Directive({ selector: '[sizer]'}) export class Sizer implements OnInit { @Input() sizer:string; element:ELementRef; renderer:Renderer; constructor(element:ElementRef, renderer:Renderer) { this.element = element; this.renderer = renderer; } ngOnInit() { this.renderer.setElementStyle(this.element.nativeElement, 'fontSize', this.sizer + '%'); } }
![Page 21: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/21.jpg)
Service
• “Substitutable objects that are wired together using dependency injection (DI)”
• Used to share code across an app
• Lazily instantiated
• Angular has no “Service” defined type
![Page 22: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/22.jpg)
Tools
22
![Page 23: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/23.jpg)
The Angular CLI• Makes creating an Angular app that follows best
practices easy
• Built with TypeScript & Webpack
• Based on the ember-cli project
• Version 1.0.0 (yay!)
• https://cli.angular.io/
23
![Page 24: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/24.jpg)
Angular CLITool Command
New App ng new <app-name>
Web Server ng serve
Unit Test ng test
End to End Test ng e2e
Dev Build ng build dev
Production Build ng build prod
![Page 25: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/25.jpg)
Create New ComponentsComponent CommandClass ng g class my-new-classComponent ng g component my-new-componentDirective ng g directive my-new-directiveEnum ng g enum my-new-enumInterface ng g interface my-new-interfaceModule ng g module my-modulePipe ng g pipe my-new-pipeService ng g service my-new-service
![Page 26: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/26.jpg)
package.jsonComponent Command
core-js modular standard library for JavaScript
rxjs reactive extensions for JavaScript
zone.js change detection
angular2-moment angular wrapper for moment.js
hammerjs support touch gestures
codelyzer set of tslint rules for static code analysis
![Page 27: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/27.jpg)
Jasmine• Created by Pivotal Labs in 2010
• Current version 2.5.2
• JavaScript testing framework
• The default unit test for Angular
• Can test client and server code
![Page 28: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/28.jpg)
describe() - Test Suite• describe() is a global Jasmine function
• Takes to parameters
• name of the test suite (string)
• implementation of the suite (function)
• Can be nested
![Page 29: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/29.jpg)
describe()describe('App: Quizzer', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], imports: [ RouterTestingModule ] }); }); });
![Page 30: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/30.jpg)
it() - Test Spec
• it() is a global Jasmine function
• Takes two parameters
• name of the spec (string)
• implementation of the spec (function)
![Page 31: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/31.jpg)
it()
it(`should have as title 'Quizzer'`, async(() => { let fixture = TestBed.createComponent(AppComponent); let app = fixture.debugElement.componentInstance; expect(app.title).toEqual('Quizzer'); }));
![Page 32: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/32.jpg)
expect() - Expectation• expect() is a global Jasmine function
• Jasmine’s version of assert()
• Takes one parameter
• The actual - value generated by code under test
• Is chained to a Matcher
![Page 33: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/33.jpg)
Matcher
• Takes the output of the expect() function
• Takes one parameter
• The expected value
• Compares the expect and actual value using the logic of the matcher
![Page 34: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/34.jpg)
expect()
let app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); expect(app).not.toBeUndefined(); expect(app.title).toEqual('Quizzer');
![Page 35: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/35.jpg)
Matchers (part 1)Matcher Comparison
toBe() compares using ===
toEqual() works for literal variables and objects
toMatch() for regular expressions
toBeDefined() compares against 'undefined'
toBeUndefined() also compares against ‘undefined'
![Page 36: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/36.jpg)
Matchers (part 2)Matcher Comparison
toBeNull() compares against null
toBeTruthy() truthy boolean casting
toBeFalsy() falsy boolean casting
toContain() finds an item in array
![Page 37: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/37.jpg)
Matchers (part 3)Matcher Comparison
toBeLessThan() mathematical comparison
toBeGreaterThan() mathematical comparison
toBeCloseTo() precision math comparison
toThrow() should throw an exception
![Page 38: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/38.jpg)
Custom Matchersvar customMatchers = { toBeGoofy: function (util, customEqualityTesters) { return { compare: function (actual, expected) { if (expected === undefined) { expected = ''; } var result = {}; result.pass = util.equals(actual.hyuk, "gawrsh" + expected, customEqualityTesters); result.message = result.pass ? "Expected " + actual + " not to be quite so goofy" : "Expected " + actual + " to be goofy, but it was not very goofy"; return result; } }; } };
![Page 39: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/39.jpg)
beforeEach()
• Setup function
• Called before each spec is executed
• A good place to add customer matchers
![Page 40: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/40.jpg)
beforeEach()
beforeEach(function() { jasmine.addMatchers(customMatchers); });
![Page 41: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/41.jpg)
afterEach()
• Teardown function
• Called after each spec is executed
![Page 42: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/42.jpg)
beforeAll & afterAll
• beforeAll() called once before any spec is ran
• afterAll() called once after all tests complete
• Be careful not to leak state into test suite
• Recommend not using unless you really need
42
![Page 43: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/43.jpg)
this
• beforeEach sets the this construct to any empty object
• It is passed to each it() and afterEach()
• The modified this doesn’t flow thru from one it() to the next
![Page 44: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/44.jpg)
Disabling suites & specs
• prepend an ‘x’
• to disable a suite change describe() to xdescribe()
• to disable a spec change it() to xit()
• They are not execute but appear in reporting
![Page 45: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/45.jpg)
First
45
![Page 46: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/46.jpg)
Karma• A JavaScript test runner created by Google
• Testing framework agnostic
• Works with Continuous Integration frameworks
• Version 1.6.0
• Originally call “Testacular”
• https://karma-runner.github.io/1.0/index.html
46
![Page 47: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/47.jpg)
Karma
• Installed via npm install karma —save-dev
• Karma’s CLI npm install karma-cli
• Invoke via ng test
47
![Page 48: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/48.jpg)
Protractor
• End-to-end test framework for Angular & AngularJS
• Built on top WebDriverJS & Selenium
• Tests like a user
• Version 5.1.1
• http://www.protractortest.org/#/
48
![Page 49: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/49.jpg)
E2E specs
• E2E tests are in the directory, “e2e”
• Tests end with “e2e-spec.ts”
• Tests look similar to Jasmine
49
![Page 50: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/50.jpg)
Unit Testing Basics
50
![Page 51: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/51.jpg)
Testing Components
51
![Page 52: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/52.jpg)
Testing Services
52
![Page 53: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/53.jpg)
Testing Pipes
53
![Page 54: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/54.jpg)
Useful URLs• https://medium.com/google-developer-experts/
angular-2-testing-guide-a485b6cb1ef0
• https://medium.com/@ladyleet/setting-up-and-testing-angular-material-2-components-in-your-angular-2-angular-cli-application-6d1824ed9d81
• https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html
• https://blog.thoughtram.io/angular/2016/12/27/angular-2-advance-testing-with-custom-matchers.html
54
![Page 55: Angular Application Testing](https://reader031.vdocuments.pub/reader031/viewer/2022022412/58f182591a28abe15e8b458b/html5/thumbnails/55.jpg)
Summary
• Angular is built to test
• The CLI creates the testing harness for both unit and e2e tests
• Test your code
55