Testing in 2024 - Speaker Deck

Slide 1

Slide 1 text

RainerHahnekamp Testing in 2024 Rainer Hahnekamp 24. May 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 Types 2. Testing Strategies 3. Testing Tools

Slide 4

Slide 4 text

RainerHahnekamp Testing Types

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 Spotify - Honeycomb Kent Dodds' Trophy

Slide 13

Slide 13 text

RainerHahnekamp The Right Balance "Fingerspitzengefühl"

Slide 14

Slide 14 text

RainerHahnekamp Testing Tools

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 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. ✅⛔Full Browser Support ⛔ Not Supported by Nx ⛔ Not so fast as others

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 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 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 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 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 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 27

Slide 27 text

RainerHahnekamp

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

RainerHahnekamp

Slide 32

Slide 32 text

RainerHahnekamp In the Midst

Slide 33

Slide 33 text

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

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 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 38

Slide 38 text

RainerHahnekamp Safe Pragmatic Brave

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 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 ● Nx & Karma ○ https://github.com/nrwl/nx/issues/19770 ● 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 42

Slide 42 text

RainerHahnekamp Хвала вам