Testing Angular in 2024

Slide 1

Slide 1 text

RainerHahnekamp Testing in Angular 2024 Rainer Hahnekamp, 16.5.2024

Slide 2

Slide 2 text

RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io ● Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp

Slide 3

Slide 3 text

RainerHahnekamp Agenda 1. Testing Categories 2. Testing Strategies 3. Testing Tools

Slide 4

Slide 4 text

RainerHahnekamp Testing Categories

Slide 5

Slide 5 text

RainerHahnekamp Testing Terms are not speciﬁed

Slide 6

Slide 6 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 7

Slide 7 text

RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service Unit Test

Slide 8

Slide 8 text

RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service ~ Component Test

Slide 9

Slide 9 text

RainerHahnekamp Component Service Service Service Directive Service Component Pipe Service Integration Test

Slide 10

Slide 10 text

RainerHahnekamp E2E Test

Slide 11

Slide 11 text

RainerHahnekamp Testing Strategies

Slide 12

Slide 12 text

RainerHahnekamp Pros and Cons Unit ✅ Fast ✅ Precise ✅ Easy ⛔ Low Coverage ⛔ No Refactoring possible ⛔ High Maintenance Costs Integration (+Component) ✅ Good Coverage ✅ Refactoring possible ✅ Lower Maintenance Costs ⛔ Difﬁcult to Write ⛔ Slower than Unit Test End-to-End ✅ Very Easy to Write ✅ Implementation Independent ✅ High Coverage ⛔ Hard to Identify Error ⛔ Challenges for CI Setup ⛔ Slow

Slide 13

Slide 13 text

RainerHahnekamp Spotify - Honeycomb Kent Dodds' Trophy

Slide 14

Slide 14 text

RainerHahnekamp The Right Balance "Fingerspitzengefühl"

Slide 15

Slide 15 text

RainerHahnekamp Testing Tools

Slide 16

Slide 16 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 17

Slide 17 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 18

Slide 18 text

RainerHahnekamp Jasmine (Karma / Web Test Runner) ✅ Ofﬁcial Testing Solution ✅ Supported by Angular ● No Issues with ESM ● No Issue with Build Process ● Used by Angular Material, Framework, etc. ✅ Not so fast as others ✅⛔Full Browser Support ⛔ Not Supported by Nx

Slide 19

Slide 19 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 20

Slide 20 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 21

Slide 21 text

RainerHahnekamp Jest ✅ Major Testing Framework in JavaScript ✅ Parallelization Support ✅ "Affected Mode" ✅ Upcoming Ofﬁcial Support ✅⛔ Depends on Community Contributions ⛔ History of ESM Issues ⛔ Asynchronous Tasks harder than in Jasmine

Slide 22

Slide 22 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 23

Slide 23 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 24

Slide 24 text

RainerHahnekamp Vitest ✅ Modern Testing Framework ✅ Based on Vite ✅ Faster than Jest ✅ Jest Compatibility ✅⛔ Support only via Analog ⛔ Not that much used in Angular

Slide 25

Slide 25 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 26

Slide 26 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 27

Slide 27 text

RainerHahnekamp Cypress ✅ Most used E2E Framework ✅ Great Developer Experience ✅ Stable Tests ✅ Ofﬁcial Partner of Angular ⛔ Parallelization and Test Replay via Cypress Cloud ⛔ Minor Constraints due to "In-Browser Tests"

Slide 28

Slide 28 text

RainerHahnekamp

Slide 29

Slide 29 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 30

Slide 30 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 31

Slide 31 text

RainerHahnekamp Playwright ✅ Future #1 E2E Testing Framework ✅ Parallelization and Traceview out of the Box ✅ No Contraints due to "Outside-Browser Tests" ⛔ Not an Ofﬁcial Partner of Angular

Slide 32

Slide 32 text

RainerHahnekamp

Slide 33

Slide 33 text

RainerHahnekamp In the Midst

Slide 34

Slide 34 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 35

Slide 35 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 36

Slide 36 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 37

Slide 37 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 38

Slide 38 text

RainerHahnekamp Testing Library ✅ Boosts Testing DX ✅ Enforces certain Testing Style ✅ Huge Ecosystem ✅⛔ Runs on top of Jasmine, Jest,... ⛔ No E2E DX Cypress Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Minor Technical Constraints ⛔ Build Issues ⛔ Not Actively Maintained Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ✅⛔ Community Driven ⛔ Experimental

Slide 39

Slide 39 text

RainerHahnekamp Unit Tests Integration & Component Tests End-to-End (E2E) Tests

Slide 40

Slide 40 text

RainerHahnekamp Further Reading ● Martin Fowler ○ https://martinfowler.com/articles/2021-test-shapes.html ○ https://martinfowler.com/articles/mocksArentStubs.html ● Guillermo Rauch ○ https://twitter.com/rauchg/status/807626710350839808 ● Kent Dodds ○ https://kentcdodds.com/blog/write-tests ● Spotify Blog ○ https://engineering.atspotify.com/2018/01/testing-of-microservices/ ● Ramona Schwerig ○ https://www.smashingmagazine.com/2023/09/long-live-test-pyramid/ ● Alex Rickabaugh ○ https://github.com/angular/angular/issues/54438#issuecomment-1971813177 ● Cypress Issue on improving Component Testing for Angular ○ https://github.com/cypress-io/cypress/issues/26243 ● Douglas Parker on ofﬁcial Jest Support ○ https://github.com/angular/angular-cli/issues/25217#issuecomment-1581581005

Slide 41

Slide 41 text

RainerHahnekamp Thanks