Fullstack Development

261497: Fullstack Development

Preflight project - automated testing

Github Repo

261497: Fullstack Development

Setup (Repos)

261497: Fullstack Development

Testing types

261497: Fullstack Development

Testing types

  • Unit test
    • Tests individual code components.
  • Interation test
    • Checks code dependency.
  • End-to-end test
    • Assesses an application's functionality and user experience.
261497: Fullstack Development

Examples

Test Type Example Targeted Scope
Unit Testing Verifying that add(x, y) returns the sum of x and y. Individual function/module
Integration Testing Testing authentication APIs Combination of modules
End-to-End (E2E) Testing Simulating a user buying a product. Full application workflow
261497: Fullstack Development

Testing frameworks

261497: Fullstack Development

Setting up

  • npm init es6
  • pnpm install cypress typescript dotenv @tsconfig/node-lts @tsconfig/node-ts @types/node
  • npx cypress install
    • This will install Cypress binary into $env:LOCALAPPDATA/Cypress (Windows).
261497: Fullstack Development

Files

261497: Fullstack Development

Run your first test

  • npm run test
261497: Fullstack Development

Cypress Browser

  • Click E2E Testing ➡️ Continue ➡️ Start E2E Testing in Chrome
  • Click Create New Spec ➡️ Name your spec (min.cy.ts) ➡️ Run spec
261497: Fullstack Development

Minimal example

261497: Fullstack Development

Full example

  • Enable reading .env
  • Spec files
    • ./cypress/e2e/backend.cy.ts (Link)
    • ./cypress/e2e/frontend.cy.ts (Link)
261497: Fullstack Development