Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Material Test Harness

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

Gregor Woiwode

June 28, 2023

More Decks by Gregor Woiwode

Other Decks in Programming


  1. − 🤔 What is it about? − 🧬 Harness Anatomy

    API − 🧑🏻‍💻 Live Coding − 📝 Learnings Agenda
  2. 🤔 What is it about? − Helps testing complex controls

    − Makes test more robust − against internal changes to DOM-Elements, Styles, Properties
  3. 🧬 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.
  4. 📝 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
  5. 📝 Component Harness with(…) gives you the possibility for fine

    grained harness- selection. Be careful putting the data-test-Attribute to the right element.
  6. 🧬 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.
  7. 🧬 Make ComponentHarness your own Please remember, if you introduce

    logic/branching in test-abstractions you need to test these, too.
  8. @testing-library/angular • ComponentHarness relies on ComponentFixture. • Render gives us

    the ComponentFixture. • That’s why the integration is easy. • Testing Library simplifies Component initialization.
  9. 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
  10. 📝 Component Harness • ⚠️ Component Testing is quiet in

    an early stage. • 🎉 The Developer Experience looks promising.
  11. Pros & Cons • 👍 Typed API • 👍 Consistant

    API • 👍 Robust Tests • 👍 Platform Agnostic • 🤔 Cypress Integration flaky • 🤔 Sometimes API is unsafe to use • 🤔 Test-Errors confuse sometimes
  12. 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.
  13. The idea of Test Harness can be leveraged for other

    UI-libraries or in backend projects.
  14. 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