Scaling the Testing Pyramid in JavaScript
summary
Builds a Vue/TypeScript tic‑tac‑toe PWA and shows unit, component, integration, API and end‑to‑end tests running from local dev to CI, with live code for a checkWin unit, leaderboard and tile component tests, mocked Redis for API unit tests, and Cypress end‑to‑end flows that capture video. Uses the Jest, Vue Test Utils, supertest and Cypress toolchain, stubs/mocks via TS mock imports / partial request/response objects, and a GitHub Actions pipeline that runs tests (5 backend tests green) aiming for sub‑10 minute builds. Code is on GitHub.
AI-written summary · about
chapters (15)
- 0:00Introduction and setup
- 10:51Why we test and testing pyramid
- 13:22Testing web apps differences
- 17:20Tools for unit testing
- 19:25Application overview
- 26:20Unit test for win condition
- 28:07Component test for leaderboard
- 30:15Component test for board tile
- 32:51Unit test with mocking
- 40:10Integration test for API
- 42:20API test from frontend
- 43:23End-to-end test with Cypress
- 44:05Running tests in pipeline
- 47:18DevOps pipeline demo
- 50:52Summary and best practices
related talks
39mGaining Confidence with Cypress Tests
24mWriting Good Tests for Vue Applications
24mScalable Testing Practices for Modern Apps
47mMocking in Front-end and Back-end TypeScript Tests
28mBuilding Test Strategy for Vue.js application
50mTest Driven Development in Vue with Cypress
23mIt's a Testing Trap
57mGaining Confidence with Cypress Tests