Skip to content

Dev: Testing

Jump to bottom
Pablo Mayrgundter edited this page Nov 8, 2025 · 11 revisions

We use 2 main kinds of tests, Unit and Integration/End-To-End

Unit Tests

Goal: Test small parts of code in isolation. This helps develops strong API contracts and ensure functionality, especially of pure functions and up the complexity ladder towards React components and their composition into containers. Full flows across the entire app should be handled by Integration tests (next section).

Techniques:

  1. For new files, or files without a unit test, setup .test.js or .test.jsx files even if you don't add any unit tests. But you should add some unit tests ;). I.e. just always do unit tests.. we need a place to put test fixes when we find them.
  2. Test input/output pairs for pure functions.
  3. For code with complex dependencies, mock the environment, and then test using the same approaches as above.

Key Mock files using Jest (our testing framework):

  • any directory can have mocks for sub-dirs by defining them in mocks directory. See e.g.:
    • Share/mocks/web-ifc-viewer.js where we mock the entire three + IFCjs stack
    • Share/src/mocks where we mock:
      • Auth
      • Network APIs, e.g. GitHub with Mock Service Workers (msw)

Integration/End-To-End Tests - Playwright

Goal: Ensure full user flows and functional requirements are validated as running in prod.

Techniques:

  1. Each UX story should have a .spec.{ts,js} test file alongside its implementing file. Each UX task should have one or more test cases.
  • E.g. src/Components/About.jsx has src/Components/About.jsx
  1. Run playwright in local headed mode to see it step through UI actions. Very useful for complex debugging.

Examples:

# Run all Component specs
yarn test-flows src/Components

# Run selected dirs
yarn test-flows src/Components/{Open,Share,Versions}

# Run a single spec
yarn test-flows src/Components/Search/Search.spec.ts

# Headed
yarn test-flows src/Components/Search/Search.spec.ts --ui

Screenshots

Playwright has an expression await expect(page).toHaveScreenshot('about.png'). These are stored as files in the same directory as the .spec and are committed as part of the PR that changes the test.

Update screenshots:

yarn test-flows src/Components/Search/Search.spec.ts --update-snapshots

Devices

Current testing targets:

  • Browser: Chrome, Safari, Firefox, Brave
  • OS: OSX, Android, iOS

APIs we use:

From caniuse.com for "webgl" (Feb 2024): image

Clone this wiki locally