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

Visuelle Regressionstest mit Storybook

Visuelle Regressionstest mit Storybook

German Slides on applying visual regression to an Angular application with Storybook, Jest/Puppeteer and Cypress

The source code can be found on: https://github.com/rainerhahnekamp/visual-regression-angular-storybook-datev

A2f690169d04f341ed1847080fe49194?s=128

Rainer Hahnekamp

July 31, 2021
Tweet

Transcript

  1. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Visuelle Regressionstests mit Storybook

    Datev Coding Festival, 29.7.2021 Rainer Hahnekamp
  2. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Über mich • Rainer

    Hahnekamp ANGULARarchitects.io • Trainings and Consultancy • > 20 Years Experience @rainerhahnekamp https://angulararchitects.io/workshops
  3. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

  4. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

  5. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Unit Tests Integrationstests Systemtests

  6. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp JSDom Anwendungscode @angular/testing Tests

  7. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Frontend Applikation 2 Headless

    Browser Tests 1 3 4
  8. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Puppetteer • Inkludiert Headless

    Browser • Spezielle Jest Konfiguration notwendig ◦ Kein TestBed ◦ Komplett isoliert von Anwendung • Debug Modus möglich • PlayWright als mögliche Alternative
  9. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Herausforderungen 1. Pixelabgleich 2.

    Komponentenisolation
  10. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

  11. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Finde den Unterschied

  12. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Finde den Unterschied

  13. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

  14. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Komponenten Isolation

  15. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook

  16. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Frontend Applikation 2 Headless

    Browser Tests 1 3 4
  17. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp 2 Headless Browser Tests

    1 3 4 Storybook Code (Komponenten)
  18. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook • Rendert Komponenten

    in Isolation • Nicht Angular spezifisch • Konfiguration von Komponenten in verschiedenen Ausprägungen • Kann auch als "Komponentengallerie" verwendet werden
  19. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook Setup - "Modul"

    Konfiguration - 1/3 export default { title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })], argTypes: { holiday: { name: 'Urlaub', description: 'Urlaubsdaten' } } } as Meta;
  20. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook Setup - Template

    - 2/3 const Template: Story<HolidayCardComponent> = (args: HolidayCardComponent) => ({ component: HolidayCardComponent, props: args });
  21. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook Setup - Variation

    - 3/3 export const Default = () => { props: { holiday: { id: 1, title: 'Holiday', description: 'A holiday', imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg' } } }
  22. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

  23. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Pixel Matching

  24. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp 2 Headless Browser Test

    Specs 1 3 4 Storybook Application Code (Components)
  25. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Cloudanbieter

  26. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Testbare Architektur

  27. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Shared Forms Grid Error

    Handling Widgets Backend Middleware ... App Shell Domäne Domäne Domäne Domäne
  28. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Domäne Feature (Container Kmp.)

    Data UI (Presentational Kmp.) Domain Models Komponent Service Modul
  29. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Container Komponenten • Minimales

    HTML/CSS • Viel DI • Vermittlerrolle • Minimales Typescript • Keine DI • @Input & @Output • Keine Observables @Input @Output Presentational Komponenten Data (ngrx) selectors actions Container & Presentational Komponenten
  30. Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Zusammenfassung • Visuelle Regression

    als wichtige Testmethode • Spezielle Anforderungen an Infrastruktur ◦ Docker ◦ Cloudanbieter • Storybook für Komponenten Isolation bzw. Widget Gallerie • Kinderkrankheiten Storybook + Angular + Puppeteer ◦ StoryShots ◦ Storybook mit Webpack ◦ Alternative Cypress • Architektur auf Testen ausrichten