Tweet
Tweet

Slide 1

Slide 1 text

Visuelle Regression enterJs 2021 - 30.9.2021 Rainer Hahnekamp https://github.com/rainerhahnekamp/visual-regression-enterjs

Slide 2

Slide 2 text

Über mich ● Rainer Hahnekamp ANGULARarchitects.io ● Trainings and Consultancy ● > 20 Years Experience @RainerHahnekamp https://angulararchitects.io/workshops

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Demoanwendung

Slide 5

Slide 5 text

Headless Browser Tests 1 3 4 Frontend Applikation 2

Slide 6

Slide 6 text

Puppetteer ● Inkludiert Headless Browser ● Spezielle Jest Konfiguration notwendig ● Debug Modus möglich

Slide 7

Slide 7 text

Puppeteer Demo

Slide 8

Slide 8 text

Herausforderungen 1. Pixelabgleich 2. Komponentenisolation

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Finde den Unterschied

Slide 11

Slide 11 text

Finde den Unterschied

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Komponenten Isolation

Slide 14

Slide 14 text

Storybook

Slide 15

Slide 15 text

Frontend Applikation 2 Headless Browser Tests 1 3 4

Slide 16

Slide 16 text

2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)

Slide 17

Slide 17 text

Storybook ● Rendert Komponenten in Isolation ● Frameworkunabhängig ● Konfiguration von Komponenten in verschiedenen Ausprägungen ● Kann auch als "Komponentengallerie" verwendet werden

Slide 18

Slide 18 text

Storybook Setup - "Modul" Konfiguration - 1/2 export default { title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })] } as Meta;

Slide 19

Slide 19 text

Storybook Setup - Variation - 2/2 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 20

Slide 20 text

No content

Slide 21

Slide 21 text

Storybook Demo

Slide 22

Slide 22 text

2 Headless Browser Tests 1 3 4 Storybook Code (Komponenten)

Slide 23

Slide 23 text

Pixelabgleich mit Storybook?

Slide 24

Slide 24 text

2 Headless Browser Test Specs 1 3 4 Storybook Application Code (Components)

Slide 25

Slide 25 text

Cloudanbieter

Slide 26

Slide 26 text

Zusammenfassung ● Visuelle Regression als wichtige Testmethode ● Spezielle Anforderungen an Infrastruktur ○ Docker ○ Cloudanbieter ● Storybook für Komponenten Isolation bzw. Widget Gallerie ● Testingtools: ○ Jest & Puppeteer ○ Playwright ○ Cypress ● Architektur auf Testen ausrichten