Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Angular Application Testing

208 views

Published on

The Angular framework is great for building large-scale web applications that can be maintained and enhanced. When you're building enterprise-level apps, testing is vital to the development process. Testing improves the quality of code and reduces maintenance, saving both time and money. Developers who know how to build and leverage tests are highly valued by their clients and companies.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Angular Application Testing

  1. 1. CoWork SouthBay 15 April 2017 Angular Application Testing
  2. 2. Code & Slides • https://github.com/Rockncoder/gh-stars • https://www.slideshare.net/rockncoder/angular- application-testing 2
  3. 3. 3
  4. 4. 4
  5. 5. Troy Miles • Troy Miles aka the RocknCoder • Over 38 years of programming experience • Speaker and author • bit.ly/rc-jquerybook • rockncoder@gmail.com • @therockncoder • Now a lynda.com Author!
 5
  6. 6. 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
  7. 7. Follow Me • Talks • Webcasts • Free stuff • Tips, tricks, tools • and general code nerd stuff • @therockncoder
  8. 8. My Versions app 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
  9. 9. “Code without tests is bad code.” — Michael C. Feathers 10
  10. 10. Agenda • Why Test? • Tools • Unit Testing Basics • Testing Components • Testing Directives • Testing Services • Testing Pipes • Testing Routes • E2E Tests • Summary 11
  11. 11. Why Test? 12
  12. 12. 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
  13. 13. The Testing Pyramid Mike Cohn / Martin Fowler 14
  14. 14. Unit vs. End-to-End Unit End-to-End fast yes no reliable yes no isolates failures yes no simulates user no yes
  15. 15. 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
  16. 16. Component 1 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
  17. 17. 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
  18. 18. 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
  19. 19. Directive import {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 + '%');
 }
 }
  20. 20. 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
  21. 21. Tools 22
  22. 22. 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
  23. 23. Angular CLI Tool 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
  24. 24. Create New Components Component Command Class ng g class my-new-class Component ng g component my-new-component Directive ng g directive my-new-directive Enum ng g enum my-new-enum Interface ng g interface my-new-interface Module ng g module my-module Pipe ng g pipe my-new-pipe Service ng g service my-new-service
  25. 25. package.json Component 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
  26. 26. 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
  27. 27. 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
  28. 28. describe() describe('App: Quizzer', () => { beforeEach(() => { TestBed.configureTestingModule({ declarations: [ AppComponent ], imports: [ RouterTestingModule ] }); }); });
  29. 29. it() - Test Spec • it() is a global Jasmine function • Takes two parameters • name of the spec (string) • implementation of the spec (function)
  30. 30. it() it(`should have as title 'Quizzer'`, async(() => { let fixture = TestBed.createComponent(AppComponent); let app = fixture.debugElement.componentInstance; expect(app.title).toEqual('Quizzer'); }));
  31. 31. 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
  32. 32. 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
  33. 33. expect() let app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); expect(app).not.toBeUndefined(); expect(app.title).toEqual('Quizzer');
  34. 34. 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'
  35. 35. Matchers (part 2) Matcher Comparison toBeNull() compares against null toBeTruthy() truthy boolean casting toBeFalsy() falsy boolean casting toContain() finds an item in array
  36. 36. Matchers (part 3) Matcher Comparison toBeLessThan() mathematical comparison toBeGreaterThan() mathematical comparison toBeCloseTo() precision math comparison toThrow() should throw an exception
  37. 37. Custom Matchers var 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; } }; } };
  38. 38. beforeEach() • Setup function • Called before each spec is executed • A good place to add customer matchers
  39. 39. beforeEach() beforeEach(function() { jasmine.addMatchers(customMatchers); });
  40. 40. afterEach() • Teardown function • Called after each spec is executed
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. First 45
  45. 45. 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
  46. 46. Karma • Installed via npm install karma —save-dev • Karma’s CLI npm install karma-cli • Invoke via ng test 47
  47. 47. 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
  48. 48. E2E specs • E2E tests are in the directory, “e2e” • Tests end with “e2e-spec.ts” • Tests look similar to Jasmine 49
  49. 49. Unit Testing Basics 50
  50. 50. Testing Components 51
  51. 51. Testing Services 52
  52. 52. Testing Pipes 53
  53. 53. 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
  54. 54. Summary • Angular is built to test • The CLI creates the testing harness for both unit and e2e tests • Test your code 55

×