Cypress Component Testing - Revolution des Testens?

This talk covers the capabilities of Cypress Component Test Runner in Angular.

Transcript

1. @RainerHahnekamp Rainer Hahnekamp 22. Februar 2023 Cypress Component Tests Revolution des Testens?
2. @RainerHahnekamp About Me... Rainer Hahnekamp https://www.twitter.com/RainerHahnekamp Professional NgRx https://www.youtube.com/@RainerHahnekamp https://www.youtube.com/@ng-news
3. @RainerHahnekamp Agenda • Testing Strategies in SPAs • Testing in Angular currently • Cypress Component Testing ◦ Simple Tests ◦ Various Use Cases • Q&A Caution: Live Coding Ahead
4. @RainerHahnekamp Testing in Angular Unit Tests Integration & Component Tests End-to-End (E2E) Tests
5. @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
6. @RainerHahnekamp Classic testing pyramide Unit Tests Integration & Component Tests End-to-End (E2E) Tests
7. @RainerHahnekamp Testing pyramide with Cypress Component Test Runner Unit Tests Integration & Component Tests End-to-End (E2E) Tests
8. @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
9. @RainerHahnekamp Component/Integration in Cypress ✅ Test components in isolation ✅ Precision & Control ✅ No asynchrony management ✅ No change detection management ✅ Developer experience ⛔ TestBed Setup ⛔ Speed???
10. @RainerHahnekamp
11. @RainerHahnekamp RequestInfo MatFormFieldModule FormBuilder AddressLookuper ReactiveFormsModule MatIconModule MatButtonModule MatInputModule NgIf AsyncPipe ActivatedRoute HolidaysRepository HttpClient HolidaysEffects HolidayCard MatCardModule MatButtonModule RouterLink
12. @RainerHahnekamp Coding Time
13. @RainerHahnekamp Test Cases • Basic Testing • Network Interception ◦ Intercept ◦ Verify • Wrapper Component • Accessing DI • A11n Selectors
14. @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
15. @RainerHahnekamp Is there only Cypress?
16. @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
17. @RainerHahnekamp Thanks!!!
18. @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