Anatomy of a Test, or the Usefulness of a Frontend Test

on YouTube ↗16m

" summary

Examines front-end testing fundamentals: why front-end tests matter compared to back-end, how to configure tests quickly, generate Jasmine reports and coverage, and use Chrome DevTools for debugging. Covers testing simple UI elements, includes a live-coding demonstration, and concludes by discussing quality, regression prevention, and whether to adopt end-to-end (e2e) tests.

AI-written summary · about

" chapters (12)

1. 0:00Test usefulness
2. 0:45Front vs back test choice
3. 1:25Karma to Jest migration
4. 2:28Jest setup and config
5. 3:56Coverage report generation
6. 5:01Jest with SonarCloud & VS Code
7. 6:28DOM selectors with CSS
8. 7:32Test app demo
9. 8:34Button active state test
10. 11:27Loader display test
11. 12:49Tests and code quality
12. 14:47Conclusion

" related talks

• 38mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · Voxxed Days Frontend Bucharest 2019
• 44mTesting Front-end Code the Right WayMatias Niemelä · Spotlight Front-End 2014
• 49mFrontend Testing: Mapping Out the TerritoryGil Tayar · Build Stuff 2021
• 47mPut Your Frontends to the Ultimate TestŁukasz Nowak · Voxxed Days Luxembourg 2026
• 25mExperiences Writing Test Code in Front-End ProjectsGim Areum · FEConf 2018 Korea
• 01h 00mFront end First — surviving with testing in JavaScriptMichele Aponte · Codemotion Rome 2016
• 45mThe (Dis)Love of Web TestingFlorent Le Gall, Paola Ducolin · Devoxx France 2022
• 30mModern Web Testing: Going Beyond SeleniumDmitry Vinnik · DjangoCon US 2021