Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Testing

Angular Testing

Unit und End-2-End Testing

Avatar for Daniel Schwab

Daniel Schwab

December 01, 2016
Tweet

Other Decks in Programming

Transcript

  1. 3 2016 Daniel Schwab Warum automatisiertes Testen  Manuelles Testen

    ist kostenintensiv  Fehler werden schnell entdeckt  Die Code Qualität steigt  Tests beschreiben Funktionalität
  2. 4 2016 Daniel Schwab Was ist ein …  …

    Unit Test? • Testen von einzelnen Codeteilen  … E2E Test? • Testen von Systemen in Kombination • Testen der Applikation aus Benutzersicht transform(value: String): any { return transformedValue }
  3. 6 2016 Daniel Schwab Jasmine  Behavior Driven Development (BDD)

     Matcher  beforeEach, afterEach  Spies  Sync <-> Async describe('Test example', function () { it('should have a simple test', function () { expect(true).toBe(true); }); }); describe('Object under test', () => { beforeEach(() => { }); beforeEach(() => { }); describe('when this', () => { let objectUnderTest: Boolean; beforeEach(() => { objectUnderTest = true; }); afterEach(() => { }); describe('and when that', () => { it('should do this', () => { expect(objectUnderTest).toBe(true); }); it('should do that', () => { expect(objectUnderTest).toBe(true); objectUnderTest = false; expect(objectUnderTest).toBe(false); }); }); }); });
  4. 7 2016 Daniel Schwab Test Runner  Alles was der

    Test zum Leben braucht.  index.html  Karma für Unit Tests • Export für CI • Code Coverage • …  Protractor für E2E Tests • Export für CI • Screenshots • …  Angular unabhängig
  5. 8 2016 Daniel Schwab Theorie vs Praxis  100% oder

    0% vermeiden  Application oder Library  Tipps zum Zeitsparen • Auslagerung der Logik in Services • Testaufbau in Schichten • IsolatedTests bevorzugen • Keine E2E Tests für Unit Tests • Akzeptanztests bei Defect Unit Tests Integrationstests Akzeptanztests Unit / E2E
  6. 10 2016 Daniel Schwab Jasmine / Karma /Typescript  angular-cli

    • Schnell lauffähig • Projekt muss angular-cli sein • Beta  Build -> Karma • Build unabhängig • Längere Laufzeit  karma-webpack (preprocessor) • Voller webpack Funktionsumfang • Etwas komplexere Konfiguration  karma-typescript • Schnell lauffähig • Bei komplexeren builds problematisch  …
  7. 11 2016 Daniel Schwab IsolatedTests  Einfachste Möglichkeit  Test

    ohne Angular  Möglich mit allen Klassen • Component • Service • Pipe
  8. 12 2016 Daniel Schwab @Injectable() export class DateService { subtractWeeksFromDate(date:

    Date, numberOfWeeks: number) { … } subtractMonthsFromDate(date: Date, numberOfMonths: number) { … } } import { TestBed, inject } from '@angular/core/testing'; import { DateService } from './date.service'; let date: Date; describe('DateService', () => { beforeEach(() => { TestBed.configureTestingModule({ providers: [DateService] }); date = new Date('2016-09-20'); }); it('should return 2 week older date for given date', inject([DateService], (dateService: DateService) => { expect(dateService.subtractWeeksFromDate(date, 2)).toEqual(new Date('2016-09-06')); })); it('should return 1 month older date for given date', inject([DateService], (dateService: DateService) => { expect(dateService.subtractMonthsFromDate(date, 1)).toEqual(new Date('2016-08-20')); })); }); Angular Testing Utilities import { DateService } from './date.service'; let dateService: DateService, date: Date; describe('DateService', () => { beforeEach(() => { dateService = new DateService(); date = new Date('2016-09-20'); }); it('should return 2 week older date for given date', () => { … }); it('should return 1 month older date for given date', () => { … }); }); IsolatedTest
  9. 13 2016 Daniel Schwab Angular Testing Utilities  HTTP Service

    simulieren • MockBackend  Async Handling für Jasmine • async(), fakeAsync()  Dependency Injection • inject()  TestBed • Bootstrap @NgModule  ComponentFixture • fixture.debugElement.query(By.css('h2'));  Change Detection Handling • .detectChanges()
  10. 16 2016 Daniel Schwab Was ist Protractor?  Protractor… •

    ist eineWebDriverJS Wrapper • läuft in NodeJS • wartet auf Angular • simuliertUserverhalten
  11. 17 2016 Daniel Schwab Protractor mit Chrome & TypeScript 

    Protractor • Konfigurationsdatei  Typescript • ts-node  Selenium Server • webdriver-manager  Jasmine • typings  npm script • "scripts": { "postinstall": "webdriver-manager update", "e2e": "protractor --specs=flight-overview.e2e-spec.ts protractor.config.js", ... },  Console/IDE mit globaler Installation • protractor --specs=flight-overview.e2e-spec.ts protractor.config.js  Console/IDE mit Projekt Installation • node_modules/protractor/built/cli.js --specs=flight-overview.e2e-spec.ts protractor.config.js // protractor.config.js require('ts-node/register'); exports.config = { useAllAngular2AppRoots: true };
  12. 18 2016 Daniel Schwab flight-overview.e2e-spec.ts  API • browser ‒

    get() • element ‒ all() ‒ isPresent() • By ‒ id() ‒ css() ‒ model() ‒ … /// <reference path="../../../node_modules/protractor/built/index" /> /// <reference path="../../../node_modules/@types/jasmine/index" /> import { browser, by, element } from 'protractor'; describe('Flight Overview', () => { it('should load overview page', () => { browser.get('http://localhost:3000'); expect(element(by.id('overview-header')).getText()).toContain('Übersicht'); }); }); http://www.protractortest.org/#/api
  13. 19 2016 Daniel Schwab Tipps & Tricks  Plugin API

    • Zugriff auf den gesamten Prozess • z.B.: protractor-timeline-plugin  Proxy • capabilities: { browserName: 'chrome', proxy: { proxyType: 'manual', httpProxy: 'localhost:8888 } }  Debugging • browser.pause(); • browser.debugger(); • Webstorm (Intellij) • Visual Studio Code  Animations • Animationen wenn möglich über Angular http://www.protractortest.org