Scaling the Testing Pyramid in TypeScript

This is the companion code to the talk at https://robrich.org/slides/web-test-all-the-things/

In this talk we look at testing TypeScript Web Apps (PWA / SPA). We examine tests in these categories:

• hello testing typescript
• unit test a function
  • without mocks
  • mock dependencies
  • mock parameters
• unit test a component
  • assert rendering
  • assert behaviors
• integration testing (from here down)
• external API validation
• end-to-end UI tests
  • custom commands
  • mock network requests
• smoke tests

We explore these NPM packages:

• vue
• typescript
• jest
• supertest
• cypress
• ts-auto-mock
• ts-mock-imports
• start-server-and-test

Usage

Run the website:

1. Start redis in docker by running docker-compose up

2. Start api by running this from a terminal:

   cd api
   npm install
   npm start

3. Start the vue app by running this from a terminal:

   cd app
   npm install
   npm run serve

Run all the tests:

1. Start redis in docker by running docker-compose up

2. Don't start the app or api, and kill them if they're running

3. From a terminal run this:

   cd api
   npm run test
   cd ..
   cd app
   npm run test
   cd ..

See also the GitHub Actions build file in .github/workflows/build-and-test.yaml

License

MIT