Angular Testing

Unit und End-2-End Testing

Transcript

1. 1 2016 Daniel Schwab Angular Testing in der Praxis Unit und End-2-End Testing
2. 2 2016 Daniel Schwab Testgrundlagen
3. 3 2016 Daniel Schwab Warum automatisiertes Testen  Manuelles Testen ist kostenintensiv  Fehler werden schnell entdeckt  Die Code Qualität steigt  Tests beschreiben Funktionalität
4. 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 }
5. 5 2016 Daniel Schwab Testbausteine  Angular 1 & 2
6. 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); }); }); }); });
7. 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
8. 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
9. 9 2016 Daniel Schwab Unit Tests mit Karma
10. 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  …
11. 11 2016 Daniel Schwab IsolatedTests  Einfachste Möglichkeit  Test ohne Angular  Möglich mit allen Klassen • Component • Service • Pipe
12. 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
13. 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()
14. 14 2016 Daniel Schwab Istanbul - Code Coverage  Feedback  remap-istanbul
15. 15 2016 Daniel Schwab E2E Tests mit Protractor
16. 16 2016 Daniel Schwab Was ist Protractor?  Protractor… • ist eineWebDriverJS Wrapper • läuft in NodeJS • wartet auf Angular • simuliertUserverhalten
17. 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 };
18. 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
19. 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
20. Danke für eure Aufmerksamkeit!