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.

Avatar for Rainer Hahnekamp

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