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

Visuelle Regression

Visuelle Regression

Slides for a talk about Visual Regression at the EnterJS 2021.

Rainer Hahnekamp

September 30, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. Über mich • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consultancy

    • > 20 Years Experience @RainerHahnekamp https://angulararchitects.io/workshops
  2. Storybook • Rendert Komponenten in Isolation • Frameworkunabhängig • Konfiguration

    von Komponenten in verschiedenen Ausprägungen • Kann auch als "Komponentengallerie" verwendet werden
  3. Storybook Setup - "Modul" Konfiguration - 1/2 export default {

    title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })] } as Meta;
  4. 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' } } }
  5. 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