Tweet
Tweet

Slide 1

Slide 1 text

Angular Material Test Harness

Slide 2

Slide 2 text

Starring Frank & Gregor Test Labyrinth

Slide 3

Slide 3 text

Chaos Helpers Copy/paste No structure No types

Slide 4

Slide 4 text

Tests protecting bugs?

Slide 5

Slide 5 text

No one in charge means no standards…

Slide 6

Slide 6 text

… No standards mean no quality.

Slide 7

Slide 7 text

Waiting forever?

Slide 8

Slide 8 text

Honest communication saved us

Slide 9

Slide 9 text

@GregOnNet Gregor Woiwode, CTO Find me at the conference and say hi!

Slide 10

Slide 10 text

βˆ’ πŸ€” What is it about? βˆ’ 🧬 Harness Anatomy API βˆ’ πŸ§‘πŸ»β€πŸ’» Live Coding βˆ’ πŸ“ Learnings Agenda

Slide 11

Slide 11 text

πŸ€” What is it about? βˆ’ Helps testing complex controls βˆ’ Makes test more robust βˆ’ against internal changes to DOM-Elements, Styles, Properties

Slide 12

Slide 12 text

πŸ€” Code vs. Runtime

Slide 13

Slide 13 text

πŸ€” Code vs. Runtime is rendered outside the .

Slide 14

Slide 14 text

Thinking of a new test strategy for each component is time costly.

Slide 15

Slide 15 text

πŸ€” Wouldn’t this be better …? Reliable, comprehensible test APIs.

Slide 16

Slide 16 text

πŸ₯³ Introducing Component Harness https://material.angular.io/cdk/test-harnesses/overview https://martinfowler.com/bliki/PageObject.html βˆ’ Every Material Component comes with its own Test API. βˆ’ Component harness is inspired by PageObject-Pattern.

Slide 17

Slide 17 text

πŸ€” Where to find it? https://material.angular.io/components/select/api#material-select-testing-classes

Slide 18

Slide 18 text

🧬 Set up | ComponentFixture

Slide 19

Slide 19 text

🧬 Set up | Loader

Slide 20

Slide 20 text

🧬 Set up | Get Harness

Slide 21

Slide 21 text

🧬 Set up | Use Harness

Slide 22

Slide 22 text

🧬 Component Harness β€’ ComponentFixture is feeded into a Loader β€’ Loader provides respective ComponentHarness β€’ ComponentHarness β€’ interacts with Material Component β€’ reads state from Material Component β€’ has asynchronous API.

Slide 23

Slide 23 text

Playground βˆ’ Insurance Branch βˆ’ Document Manager

Slide 24

Slide 24 text

DEMO MatSelectHarness

Slide 25

Slide 25 text

πŸ“ Component Harness β€’ Less code compared to vanilla approach β€’ Readability of the test has improved β€’ Testing the Material Component got a no brainer β€’ e.g., No need to trigger change detection manually

Slide 26

Slide 26 text

πŸ“ Component Harness with(…) gives you the possibility for fine grained harness- selection. Be careful putting the data-test-Attribute to the right element.

Slide 27

Slide 27 text

🧬 ComponentHarnesses are similar

Slide 28

Slide 28 text

DEMO MatTableHarness

Slide 29

Slide 29 text

Testing Components in isolation might reveal issues you do not spot in the Browser.

Slide 30

Slide 30 text

@angular-extensions/pretty-html-log is a handy tool beautifying test logs. https://github.com/angular-extensions/pretty-html-log

Slide 31

Slide 31 text

🧬 Optimize ChangeDetection

Slide 32

Slide 32 text

🧬 Optimize ChangeDetection β€’ Is it worth doing it? – It’s worth measuring it. β€’ In the repository to this talk you can see that tests using parallel are around 20ms faster than executing each operation sequentially.

Slide 33

Slide 33 text

🧬 Not everything can be parallized

Slide 34

Slide 34 text

🧬 Not everything can be parallized

Slide 35

Slide 35 text

DEMO parallel

Slide 36

Slide 36 text

🧬 Make ComponentHarness your own

Slide 37

Slide 37 text

🧬 Make ComponentHarness your own Please remember, if you introduce logic/branching in test-abstractions you need to test these, too.

Slide 38

Slide 38 text

DEMO ComponentHarness

Slide 39

Slide 39 text

🀝 Integrations @testing-library/angular Playwright

Slide 40

Slide 40 text

@testing-library/angular

Slide 41

Slide 41 text

@testing-library/angular β€’ ComponentHarness relies on ComponentFixture. β€’ Render gives us the ComponentFixture. β€’ That’s why the integration is easy. β€’ Testing Library simplifies Component initialization.

Slide 42

Slide 42 text

DEMO Testing Library

Slide 43

Slide 43 text

Cypress β€’ ComponentHarness can be implemented for various platform. β€’ The respective test platform needs to implement its version of EnvironmentLoader. β€’ Cypress’ integration is brought to us by the community. β€’ @jscutlery/cypress-harness https://github.com/jscutlery/devkit/tree/main/packages/cypress-harness

Slide 44

Slide 44 text

Cypress

Slide 45

Slide 45 text

DEMO Cypress

Slide 46

Slide 46 text

πŸ“ Component Harness β€’ ⚠️ Component Testing is quiet in an early stage. β€’ πŸŽ‰ The Developer Experience looks promising.

Slide 47

Slide 47 text

Pros & Cons β€’ πŸ‘ Typed API β€’ πŸ‘ Consistant API β€’ πŸ‘ Robust Tests β€’ πŸ‘ Platform Agnostic β€’ πŸ€” Cypress Integration flaky β€’ πŸ€” Sometimes API is unsafe to use β€’ πŸ€” Test-Errors confuse sometimes

Slide 48

Slide 48 text

Summary - APIs of ComponentHarness make me feel safer. - Writing Tests for complex components is quicker. - Platform agnostic architecture is a door opener. ”The Angular-Team introduced an additional tool allowing us to write more robust applications.

Slide 49

Slide 49 text

The idea of Test Harness can be leveraged for other UI-libraries or in backend projects.

Slide 50

Slide 50 text

Gregor Woiwode, CTO https://github.com/co-IT/talk-dwx-2023-angular-test-harness Slides & Code

Slide 51

Slide 51 text

Attributions βˆ’ Photo by Aren Nagulyan on Unsplash βˆ’ Photo by Dawid on Unsplash βˆ’ Photo by Khara Woods on Unsplash βˆ’ Photo by Stephen Hocking on Unsplash βˆ’ Photo by Chris Liverani on Unsplash