Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

Slide 4

Slide 4 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

Slide 5

Slide 5 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Unit Tests Integrationstests Systemtests

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

Slide 11

Slide 11 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Finde den Unterschied

Slide 12

Slide 12 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Finde den Unterschied

Slide 13

Slide 13 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

Slide 14

Slide 14 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Komponenten Isolation

Slide 15

Slide 15 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Storybook

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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;

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp

Slide 23

Slide 23 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Pixel Matching

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Cloudanbieter

Slide 26

Slide 26 text

Datev Coding Festival, 29.7.2021 Rainer Hahnekamp Testbare Architektur

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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