- Svelte 81.2%
- TypeScript 15.6%
- JavaScript 2.2%
- CSS 0.6%
- HTML 0.4%
| .dagger | ||
| assets | ||
| av-sync | ||
| messages | ||
| project.inlang | ||
| src | ||
| static | ||
| tests | ||
| .earthlyignore | ||
| .eslintignore | ||
| .eslintrc.cjs | ||
| .gitattributes | ||
| .gitignore | ||
| .npmrc | ||
| .prettierignore | ||
| .prettierrc | ||
| .woodpecker.yml | ||
| AGENTS.md | ||
| dagger.json | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| svelte.config.js | ||
| tailwind.config.ts | ||
| tsconfig.json | ||
| vite.config.ts | ||
Total Tech Test
A browser-based collection of audio, video, input, and device diagnostics. Use it to check a display, speakers, AV synchronisation, or browser-accessible hardware such as cameras, microphones, gamepads, and sensors.
Included tests
- Video: fullscreen test card, AV sync video, display timer, and camera preview
- Audio: stereo and surround channel tests, phase test, signal generator, microphone analyser and recorder
- Controls: keyboard, mouse and multi-touch, and gamepad tests
- Device and network: browser sensors and an embedded internet speed test
The UI is available in English, Spanish, French, German, Simplified Chinese, Japanese, Czech, and Ukrainian.
Getting started
Prerequisites: a current Node.js installation and npm.
npm install
npm run dev
Vite prints the local URL when the development server is ready. Browser permission prompts for cameras, microphones, location, and sensors must be granted before those tests can access the relevant hardware.
Commands
| Command | Description |
|---|---|
npm run dev |
Start the development server. |
npm run build |
Create the static production build in build/. |
npm run preview |
Serve the production build locally. |
npm run check |
Synchronise SvelteKit and run Svelte/TypeScript checks. |
npm run lint |
Check formatting and run ESLint. |
npm run format |
Apply Prettier formatting. |
npm test |
Run the Vitest suite once. |
npm run generate-assets |
Generate media assets with Earthly. |
npm run av:dev |
Start the AV-sync asset development app. |
npm run av:render:video -- <args> |
Render the AV-sync video asset. |
npm run av:render:audio |
Render the AV-sync audio asset. |
Testing
The test suite uses Vitest. The visual regression test starts a Vite server on port 5888, captures /card with Puppeteer, and compares it with tests/fixtures/testcard-baseline.png.
npm test
A deliberately updated visual baseline can be regenerated by deleting the fixture and rerunning the relevant test:
rm tests/fixtures/testcard-baseline.png
npx vitest --run tests/test-card.test.ts
Screenshots and visual diff artifacts are written to tests/output/, which is ignored by Git.
Project structure
src/routes/— SvelteKit routes for each diagnosticsrc/lib/— reusable Svelte components, including the test card and audio visualisersmessages/— translated Paraglide message filesassets/generated/— generated AV assets; do not edit by handav-sync/— source and render scripts for AV-sync mediatests/— Vitest functional and visual regression tests
Development notes
This is a SvelteKit, Svelte 5, TypeScript, Vite, and Tailwind CSS application. It is statically prerendered, with trailing slashes enabled. Formatting is enforced by Prettier and linting by ESLint. See AGENTS.md for repository conventions and validation guidance.