Testing in 2024: A "dynamic" Situation

Slide 1

Slide 1 text

Testing in 2024 Eine "dynamische" Situation Rainer Hahnekamp 9. November 2024

Slide 2

Slide 2 text

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality

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

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

Slide 7

Slide 7 text

Component Service Service Service Directive Service Component Pipe Service Unit Test

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Component Service Service Service Directive Service Component Pipe Service Integration Test

Slide 10

Slide 10 text

E2E Test

Slide 11

Slide 11 text

RainerHahnekamp Testing Strategies

Slide 12

Slide 12 text

Spotify - Honeycomb Kent Dodds' Trophy

Slide 13

Slide 13 text

RainerHahnekamp Jeremy Elbourn: Angular Lead Angular Q&A Session September 2024 As close to the real-world as practical. Services as Dependencies - Don't replace them - Try to come up with a fake - Last resort: Use a Mock

Slide 14

Slide 14 text

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

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 ✅ Nx Availability ✅⛔ Community-driven ⛔ 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 ✅ Widely Used ✅ 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

No content

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 ✅ #1 E2E Testing Framework ✅ Parallelization and Traceview out of the Box ✅ No Constraints due to "Outside-Browser Tests"

Slide 32

Slide 32 text

No content

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 ⛔ Minor Technical Constraints ⛔ Build Speed Playwright Component Testing ✅ E2E DX ✅ Integrated into Angular ✅ Lower Maintenance Costs ⛔ Not Available Yet ⛔ Experimental/Status Unclear

Slide 39

Slide 39 text

RainerHahnekamp https://github.com/microsoft/playwright/pull/27783

Slide 40

Slide 40 text

RainerHahnekamp Safe Pragmatic Brave

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 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