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

Cypress Component Testing - Revolution des Testens?

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
    Rainer Hahnekamp
    22. Februar 2023
    Cypress
    Component Tests
    Revolution des Testens?

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  10. @RainerHahnekamp

    View Slide

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

    View Slide

  12. @RainerHahnekamp
    Coding
    Time

    View Slide

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

    View Slide

  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

    View Slide

  15. @RainerHahnekamp
    Is there only
    Cypress?

    View Slide

  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

    View Slide

  17. @RainerHahnekamp
    Thanks!!!

    View Slide

  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

    View Slide