Angular Material Test Harness

Many of us have been in one of the following situations:

A UI framework has been updated and the associated tests are red because the DOM has changed.
Testing a supposedly simple component becomes detective work because the DOM is complex, and as soon as the test works, point 1. reappears.
For this, the Angular CDK offers a concept with which we can make our tests more stable and simpler. In short, we as component creators provide a simple and tested API that other developers can use to test our components safely – freed from the fear of breaking changes within the component.

In our session together, we'll take a deep look at the tools the Angular team gives us. We will start by looking at the component test harness of Angular Material and then develop our own component harnesses API. If we can do this well, we can finally put a smile on the faces of our fellow developers, even when it comes to testing. ;-)

Talk given at Developer Week 2023: https://www.developer-week.de/en/program/#/talk/component-test-harnesses

Transcript

1. Angular Material Test Harness
2. Starring Frank & Gregor Test Labyrinth
3. Chaos Helpers Copy/paste No structure No types
4. Tests protecting bugs?
5. No one in charge means no standards…
6. … No standards mean no quality.
7. Waiting forever?
8. Honest communication saved us
9. @GregOnNet Gregor Woiwode, CTO Find me at the conference and say hi!
10. − 🤔 What is it about? − 🧬 Harness Anatomy API − 🧑🏻‍💻 Live Coding − 📝 Learnings Agenda
11. 🤔 What is it about? − Helps testing complex controls − Makes test more robust − against internal changes to DOM-Elements, Styles, Properties
12. 🤔 Code vs. Runtime
13. 🤔 Code vs. Runtime <mat-option> is rendered outside the <mat-select>.
14. Thinking of a new test strategy for each component is time costly.
15. 🤔 Wouldn’t this be better …? Reliable, comprehensible test APIs.
16. 🥳 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.
17. 🤔 Where to find it? https://material.angular.io/components/select/api#material-select-testing-classes
18. 🧬 Set up | ComponentFixture
19. 🧬 Set up | Loader
20. 🧬 Set up | Get Harness
21. 🧬 Set up | Use Harness
22. 🧬 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.
23. Playground − Insurance Branch − Document Manager
24. DEMO MatSelectHarness
25. 📝 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
26. 📝 Component Harness with(…) gives you the possibility for fine grained harness- selection. Be careful putting the data-test-Attribute to the right element.
27. 🧬 ComponentHarnesses are similar
28. DEMO MatTableHarness
29. Testing Components in isolation might reveal issues you do not spot in the Browser.
30. @angular-extensions/pretty-html-log is a handy tool beautifying test logs. https://github.com/angular-extensions/pretty-html-log
31. 🧬 Optimize ChangeDetection
32. 🧬 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.
33. 🧬 Not everything can be parallized
34. 🧬 Not everything can be parallized
35. DEMO parallel
36. 🧬 Make ComponentHarness your own
37. 🧬 Make ComponentHarness your own Please remember, if you introduce logic/branching in test-abstractions you need to test these, too.
38. DEMO ComponentHarness
39. 🤝 Integrations @testing-library/angular Playwright
40. @testing-library/angular
41. @testing-library/angular • ComponentHarness relies on ComponentFixture. • Render gives us the ComponentFixture. • That’s why the integration is easy. • Testing Library simplifies Component initialization.
42. DEMO Testing Library
43. 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
44. Cypress
45. DEMO Cypress
46. 📝 Component Harness • ⚠️ Component Testing is quiet in an early stage. • 🎉 The Developer Experience looks promising.
47. Pros & Cons • 👍 Typed API • 👍 Consistant API • 👍 Robust Tests • 👍 Platform Agnostic • 🤔 Cypress Integration flaky • 🤔 Sometimes API is unsafe to use • 🤔 Test-Errors confuse sometimes
48. 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.
49. The idea of Test Harness can be leveraged for other UI-libraries or in backend projects.
50. Gregor Woiwode, CTO https://github.com/co-IT/talk-dwx-2023-angular-test-harness Slides & Code
51. 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