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
   

   View Slide

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
   

   View Slide

3. Datev Coding Festival, 29.7.2021
   Rainer Hahnekamp
   

   View Slide

4. Datev Coding Festival, 29.7.2021
   Rainer Hahnekamp
   

   View Slide

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

   View Slide

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

   View Slide

7. Datev Coding Festival, 29.7.2021
   Rainer Hahnekamp
   Frontend Applikation 2 Headless Browser Tests
   1
   3 4
   

   View Slide

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
   

   View Slide

9. Datev Coding Festival, 29.7.2021
   Rainer Hahnekamp
   Herausforderungen
   1. Pixelabgleich
   2. Komponentenisolation
   

   View Slide

10. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    

    View Slide

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

    View Slide

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

    View Slide

13. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    

    View Slide

14. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Komponenten Isolation
    

    View Slide

15. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Storybook
    

    View Slide

16. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Frontend Applikation 2 Headless Browser Tests
    1
    3 4
    

    View Slide

17. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    2 Headless Browser Tests
    1
    3 4
    Storybook
    Code
    (Komponenten)
    

    View Slide

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
    

    View Slide

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;
    

    View Slide

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

    View Slide

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'
    }
    }
    }
    

    View Slide

22. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    

    View Slide

23. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Pixel Matching
    

    View Slide

24. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    2 Headless Browser Test Specs
    1
    3 4
    Storybook
    Application Code
    (Components)
    

    View Slide

25. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Cloudanbieter
    

    View Slide

26. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Testbare Architektur
    

    View Slide

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
    

    View Slide

28. Datev Coding Festival, 29.7.2021
    Rainer Hahnekamp
    Domäne
    Feature (Container Kmp.)
    Data UI (Presentational Kmp.)
    Domain Models
    Komponent
    Service
    Modul
    

    View Slide

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
    

    View Slide

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
    

    View Slide