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

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