$30 off During Our Annual Pro Sale. View Details »

Visual Regression in Angular

Visual Regression in Angular

Visual Regression is about ensuring that the components always look as specified. A screenshot is taken and acts as future reference. In this talk, I demonstrate how to do that in Angular with the help of Storybook.

The source code is available on https://github.com/rainerhahnekamp/visual-regression-angular. The recording of the talk can be found on https://www.youtube.com/watch?v=RvOdxy4B3Lw

Rainer Hahnekamp

March 05, 2021
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Programming

Transcript

  1. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Visual Regression Angular Meetup

    Graz, 4.3.2021 Rainer Hahnekamp https://www.youtube.com/watch?v=RvOdxy4B3Lw https://github.com/rainerhahnekamp/visual-regression-angular
  2. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp About me... • Rainer

    Hahnekamp • Trainer & Consultant for Angular • Full-Stack Developer @RainerHahnekamp
  3. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp

  4. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp

  5. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Unit Tests Component Tests

    (Functional & Visual) End-to-End (E2E) Tests
  6. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp JSDom Application Code @angular/testing

    Test Specs
  7. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Frontend Application 2 Headless

    Browser Test Specs 1 3 4
  8. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Puppetteer • Headless Browser

    • Special Jest Configuration required ◦ No TestBed ◦ Completely isolated from application • Can run in debug mode • PlayWright as upcoming competitor
  9. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Main Challenges 1. Pixel

    Matching 2. Component Isolation
  10. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp

  11. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Spot the difference

  12. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Spot the difference

  13. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp

  14. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp We want isolated Component

    Tests
  15. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Introducing Storybook

  16. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Frontend Application 2 Headless

    Browser Test Specs 1 3 4
  17. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp 2 Headless Browser Test

    Specs 1 3 4 Storybook Application Code (Components)
  18. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Storybook • Allows to

    isolate Components • Not Angular Specific • Configure a Component for various states • Can also used for visual widget library (not just testing)
  19. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Storybook Setup - "Module"

    Configuration - 1/3 export default { title: 'Eternal/HolidayCard', component: HolidayCardComponent, decorators: [moduleMetadata({ imports: [MatButtonModule, MatCardModule] })], argTypes: { holiday: { name: 'Holiday', description: 'JSON object for the Holiday' } } } as Meta;
  20. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Storybook Setup - Template

    - 2/3 const Template: Story<HolidayCardComponent> = (args: HolidayCardComponent) => ({ component: HolidayCardComponent, props: args });
  21. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Storybook Setup - Variation

    - 3/3 export const Default = Template.bind({}); Default.args = { holiday: { id: 1, title: 'Holiday', description: 'A holiday', imageUrl: 'https://eternal-app.s3.eu-central-1.amazonaws.com/assets/AngkorWatSmall.jpg' } };
  22. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp

  23. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp What about Pixel Matching???

  24. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp 2 Headless Browser Test

    Specs 1 3 4 Storybook Application Code (Components)
  25. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Towards a Testable Architecture

    • Level 1 - Atomic ◦ Unit Tests for Container Components, Services, Functions,... ◦ Visual Regression ◦ RxJS Marbles • Level 2 - Logical Groups ◦ Interplay between Container & Presentational Components ◦ Complex Components (DataGrid) ◦ State Management • Level 3 ◦ E2E Tests
  26. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Testable Architecture Level 1

    - Atomic Container Components Presentational Components State Management Domain Models Visual Regression Unit Tests
  27. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp Presentational Component • Easy

    to setup in Storybook • Decoupled from business logic • No Dependency Injection • If possible only primitive types as @Input
  28. Angular Meetup Graz, 4.3.2021 Rainer Hahnekamp