Love Story: Testing angular components with Storybook and Playwright

on YouTube ↗40m

" summary

Claims that component tests run in real browsers using Storybook + Playwright, not JSDOM or Karma. Describes building stories that wrap Angular components, creating component fixtures to inject providers and users, and navigating Storybook routes to render each story in a real browser. Tests click elements, await Angular event emissions, take screenshots and DOM snapshots/traces, debug in VS Code, run headless and in CI, and trade off Karma/Jest fake-browser speed for reliable, visual, parallelizable checks.

AI-written summary · about

" chapters (46)

1. 0:00Intro
2. 0:59Tallys programming
3. 1:24Are you guys tired
4. 1:42Tallys history
5. 2:25Web Components
6. 2:35Component Isolation
7. 3:27Tally Barak
8. 3:48Love Story
9. 4:21Importance of Testing
10. 5:11Testing in Isolation
11. 7:13Component Ecosystem
12. 7:54Component Packaging
13. 8:23Storybook
14. 8:52Browser automation
15. 9:45Browser API
16. 10:36Playwright
17. 12:23Three things impacting Angular
18. 12:35Testing Angular components
19. 13:21Testing inputs
20. 13:46Testing user interaction
21. 14:08Summary
22. 14:37How do we do that
23. 14:53No I have no idea
24. 15:26Writing our test
25. 16:10Rendering the component
26. 16:54Writing tests
27. 17:28How does Karma work
28. 18:19TestRunner
29. 19:18fake events
30. 19:49Nodejs
31. 20:10Angularjs
32. 20:56Fake Browser
33. 21:57Suggestion
34. 22:21Test Runner
35. 23:16Storybook Component Testing
36. 24:12Angularjs Component Testing
37. 24:52Documentation Showcase
38. 25:30Playwright Test
39. 25:44Playwright Test Walkthrough
40. 29:27Debug Playwright
41. 29:40VS Code debugger
42. 30:16VS Traces
43. 30:40Recap
44. 31:50Improvements
45. 32:09Component States
46. 32:45Questions

" related talks

• 18mStorybook and TestingYann Braga · React Conference Live 2022
• 24mCost-Effective Testing with Storybook and Playwright in Vue ApplicationsYauheni Prakopchyk · Vuejs Amsterdam 2024
• 32mStorybook Your Angular App with NxKaterina Skroumpelou · NG-BE 2021
• 24mStorybook VitestYann Braga · ViteConf 2025
• 37mBridging the gap between UX and development – A StorybookMarko Letic · FrontCon 2019
• 27mTesting design systems using storybook + Storybook 7.0 sneak peeksNorbert de Langen · React Finland 2022
• 27mComponent-Driven Development & Visual Test CoverageMichael Shilman · Assert(js) 2019
• 31mReinforcing your blocks: A practical guide to UI component testingDiego Hernandez · LibertyJS 2019