UI Components

This project utilizes Vue 3 with Vite & Typescript. See IDE recommendations & prerequisites in Recommended IDE Setup section.

Project Setup

We have included a .nvmrc file so we are all on the same node version. This project uses pnpm as its package manager (activated via Corepack).

nvm use
corepack enable
pnpm install
pnpm dev

Storybook

We have all of our components in Storybook. When making an update to a component, check Storybook to see if anything needs to be added to the component story file.

pnpm storybook
pnpm build-storybook

Testing

See TESTING_PLAN.md for the full strategy and TESTING_CHECKLIST.md for per-component coverage tracking.

Unit Tests (Vitest + Vue Test Utils)

Component-level tests that validate props, emits, slots, and conditional rendering. Tests are co-located with their component (*.test.ts alongside *.vue).

pnpm test              # run all unit tests once
pnpm test:watch        # run in watch mode during development
pnpm test:coverage     # run with v8 coverage report

Visual Regression Tests (Storybook Test Runner + Playwright)

Screenshots every Storybook story and diffs against committed baselines in __visual_snapshots__/. Catches CSS regressions, layout shifts, and unintended visual changes.

Requires Playwright Chromium to be installed (pnpm dlx playwright install --with-deps chromium) and Docker for baseline generation.

pnpm test:visual               # run against a running Storybook instance
pnpm test:visual:update        # regenerate baselines locally (macOS -- not for CI baselines)
pnpm test:visual:ci            # build Storybook, serve it, then run visual tests
pnpm test:visual:docker-update # regenerate baselines inside Docker (matches CI)

Updating baselines: Baselines must be generated inside the same node:24.4.1 Docker image used by CI to avoid cross-OS font rendering differences. Run pnpm test:visual:docker-update, then commit the updated .png files in __visual_snapshots__/. Do not use pnpm test:visual:update on macOS for baselines that will be verified in CI.

Reviewing failures: Diff images are written to __visual_snapshots__/__diff_output__/ (gitignored). In CI (Bitbucket Pipelines), diff images are exported as step artifacts and can be downloaded from the pipeline UI.