Testing with Component Harnesses for the Win

on YouTube ↗28m

" summary

Claim: component harnesses provide a stable, high‑level API that works for unit and end‑to‑end tests so tests stop leaking DOM selectors. The talk shows a working harness pattern implemented in Angular Material CDK and reused across Cypress, Protractor and Jasmine testbeds, with a test reduced to four lines of code. The harness loader selects components by type, exposes typed methods, insulates tests from DOM changes, and the examples run successfully both in isolated fixtures and in the browser.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 3:55End-to-end tests validate the behavior the application from the end-user perspective
3. 5:30Performance tests validate the speed and responsiveness of the application
4. 12:14Page Object Models are widely used for end-to-end testing with Selenium, Webdriver, Protractor, etc.
5. 16:41Having a clear, typed Component Harness enables Intellisense / auto-complete in your IDE of choice
6. 17:43Component Harness tests are easier to write, easier to read, easier to maintain
7. 19:59Component Harnesses can be used in different contexts (end-to-end tests, unit tests) with one single syntax, or

" related talks

• 22mAngular Component Test Harnesses FTWAlisa Duncan · NG-BE 2023
• 28mAngular Component Test Harnesses FTWAlisa Duncan · DevReach 2022
• 24mComponentizing end-to-end testsNicholas Boll · JSConf US 2019
• 01h 11mStop Using the Console to Test ComponentsDmitriy Kovalenko · HolyJS 2020 Moscow
• 40mCypress Component Testing - The Disappearance of Mr. ButtonYounes Jaaidi · NG-DE Conference 2022
• 15mCypress Component Testing - Lightning talkRainer Hahnekamp · NG-BE 2023
• 30mIntroducing Component Testing with CypressJessica Sachs · Vue.js Global 2020
• 01h 11mStop Using the Console to Test ComponentsDmitriy Kovalenko · HolyJS 2020 Moscow