@RainerHahnekamp Rainer Hahnekamp 22. Februar 2023 Cypress Component Tests Revolution des Testens?

@RainerHahnekamp About Me... Rainer Hahnekamp https://www.twitter.com/RainerHahnekamp Professional NgRx https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news

@RainerHahnekamp Agenda ● Testing Strategies in SPAs ● Testing in Angular currently ● Cypress Component Testing ○ Simple Tests ○ Various Use Cases ● Q&A Caution: Live Coding Ahead

@RainerHahnekamp Testing in Angular Unit Tests Integration & Component Tests End-to-End (E2E) Tests

@RainerHahnekamp Disadvantages of Testing Types Unit ● Low Coverage ● High Maintenance Costs ● Ignores UI Component / Integration ● Complex TestBed setup ● DOM interaction is hard ● Change Detection End-to-End ● Slow ● Hard to setup

@RainerHahnekamp Classic testing pyramide Unit Tests Integration & Component Tests End-to-End (E2E) Tests

@RainerHahnekamp Testing pyramide with Cypress Component Test Runner Unit Tests Integration & Component Tests End-to-End (E2E) Tests

@RainerHahnekamp Integration/Component vs. E2E Tests Integration/Component Tests ✅ Test components in isolation ✅ Precision & Control ✅ Fast ⛔ TestBed Setup ⛔ Manage asynchrony ⛔ Manage change detection ⛔ "DOM interaction" E2E Tests ✅ No asynchrony management ✅ No change detection management ✅ Developer experience - Browser feedback - Screenshots - Video recording - Tasks, network stubbing,... ⛔ Infrastructure setup required ⛔ Slow

@RainerHahnekamp Component/Integration in Cypress ✅ Test components in isolation ✅ Precision & Control ✅ No asynchrony management ✅ No change detection management ✅ Developer experience ⛔ TestBed Setup ⛔ Speed???

@RainerHahnekamp

@RainerHahnekamp RequestInfo MatFormFieldModule FormBuilder AddressLookuper ReactiveFormsModule MatIconModule MatButtonModule MatInputModule NgIf AsyncPipe ActivatedRoute HolidaysRepository HttpClient HolidaysEffects HolidayCard MatCardModule MatButtonModule RouterLink

@RainerHahnekamp Coding Time

@RainerHahnekamp Test Cases ● Basic Testing ● Network Interception ○ Intercept ○ Verify ● Wrapper Component ● Accessing DI ● A11n Selectors

@RainerHahnekamp Agenda Component & Integration Tests ● Styling ● Mocking Services ● Mocking Components ● Asynchrony Management ● Accessing DI Component Inter-Communication ● Spy on @Output ● Setting @Input ● WrapperComponent Cypress Ecosystem ● Different Screen Sizes ● Actionability ● cy.intercept ● Cypress Commands ● Testing Library ● Code Coverage

@RainerHahnekamp Is there only Cypress?

@RainerHahnekamp Summary ● Cypress component testing ○ is much easier to write & maintain ○ discovers more visual bugs ○ starts a new era of testing ● Performance penalties neglectable ● Jest/Karma will still be used for unit tests ○ Look out for Vitest

@RainerHahnekamp Thanks!!!

@RainerHahnekamp Contact: Rainer Hahnekamp @Rainer Hahnekamp https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news https://www.angulararchitects.io https://www.rainerhahnekamp.com