Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cypress Component Testing - Revolution des Test...

Cypress Component Testing - Revolution des Testens?

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

Rainer Hahnekamp

February 22, 2023
Tweet

More Decks by Rainer Hahnekamp

Other Decks in Technology

Transcript

  1. @RainerHahnekamp Agenda • Testing Strategies in SPAs • Testing in

    Angular currently • Cypress Component Testing ◦ Simple Tests ◦ Various Use Cases • Q&A Caution: Live Coding Ahead
  2. @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
  3. @RainerHahnekamp Testing pyramide with Cypress Component Test Runner Unit Tests

    Integration & Component Tests End-to-End (E2E) Tests
  4. @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
  5. @RainerHahnekamp Component/Integration in Cypress ✅ Test components in isolation ✅

    Precision & Control ✅ No asynchrony management ✅ No change detection management ✅ Developer experience ⛔ TestBed Setup ⛔ Speed???
  6. @RainerHahnekamp RequestInfo MatFormFieldModule FormBuilder AddressLookuper ReactiveFormsModule MatIconModule MatButtonModule MatInputModule NgIf

    AsyncPipe ActivatedRoute HolidaysRepository HttpClient HolidaysEffects HolidayCard MatCardModule MatButtonModule RouterLink
  7. @RainerHahnekamp Test Cases • Basic Testing • Network Interception ◦

    Intercept ◦ Verify • Wrapper Component • Accessing DI • A11n Selectors
  8. @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
  9. @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