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

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