> ## Documentation Index
> Fetch the complete documentation index at: https://constanza101-borrissol-28.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Testing strategy: Playwright E2E and Vitest unit tests

> Borrissol uses Playwright for E2E tests (navigation, WhatsApp links, language switcher, carousel) and Vitest for unit tests. Commands and scope explained.

Borrissol's test suite is split across two complementary tools: **Playwright** handles end-to-end browser tests that exercise the real built site in a real browser, and **Vitest** handles component-level unit tests. The two suites run independently and cover different layers of the codebase — Playwright verifies user-facing behaviour across Desktop and Mobile Chrome, while Vitest targets isolated component logic in `src/`.

## Run commands

```bash theme={null}
npm run test            # Vitest unit tests (run once, then exit)
npm run test:watch      # Vitest in watch mode (re-runs on file save)
npm run test:e2e        # Build + run Playwright E2E tests
npm run test:e2e:ui     # Build + run Playwright with interactive UI mode
npm run test:e2e:report # Show the last Playwright HTML report
```

<Note>
  E2E tests always run against a **production build**. The `test:e2e` and `test:e2e:ui` scripts call `npm run build` first — the Playwright suite never exercises the Astro dev server.
</Note>

## Playwright E2E test scope

The Playwright suite (test files in `./tests/`) covers the four critical user journeys on the production build:

| Area                  | What is tested                                                            |
| --------------------- | ------------------------------------------------------------------------- |
| Navigation links      | Every nav item links to the correct anchor or page                        |
| WhatsApp CTA links    | Correct `wa.me` URLs with pre-filled messages in all 4 languages          |
| Language switcher     | Switching language preserves the URL hash and lands on the correct locale |
| Testimonials carousel | Arrow navigation advances and retreats through testimonial cards          |

## Playwright configuration

Playwright is configured in `playwright.config.ts`. Key settings extracted from the file:

| Setting        | Value                                                                    |
| -------------- | ------------------------------------------------------------------------ |
| Test directory | `./tests`                                                                |
| Parallelism    | `fullyParallel: true`                                                    |
| Base URL       | `http://localhost:4334`                                                  |
| Trace          | `on-first-retry`                                                         |
| HTML report    | Generated automatically; `open: 'never'` (use `test:e2e:report` to view) |

**Browser targets — two projects:**

```text theme={null}
Desktop Chrome  →  devices['Desktop Chrome']
Mobile Chrome   →  devices['Pixel 5']
```

**Web server configuration:**

Playwright spins up `npm run preview -- --port 4334` and waits for `http://localhost:4334` before running tests. Port `4334` is intentionally different from the Astro dev server (`4321`) to avoid conflicts during local development.

```ts theme={null}
webServer: {
  command: 'npm run preview -- --port 4334',
  url: 'http://localhost:4334',
  reuseExistingServer: !process.env.CI,
},
```

**CI behaviour:**

| Setting      | Local     | CI (`process.env.CI`) |
| ------------ | --------- | --------------------- |
| `forbidOnly` | `false`   | `true`                |
| `retries`    | `0`       | `2`                   |
| `workers`    | unlimited | `1`                   |

## Vitest unit test scope

Vitest is configured in `vitest.config.ts` using `getViteConfig` from `astro/config` — this ensures the Vite build context matches the Astro project exactly:

```ts theme={null}
import { getViteConfig } from 'astro/config';

export default getViteConfig(
  { test: { globals: true, include: ['src/**/*.test.ts'] } } as unknown as Parameters<typeof getViteConfig>[0]
);
```

| Setting           | Value                                                        |
| ----------------- | ------------------------------------------------------------ |
| Globals           | `true` (no need to import `describe`/`it`/`expect` per file) |
| Test file pattern | `src/**/*.test.ts`                                           |

Unit tests live alongside their source files in `src/`. The current suite includes component tests such as `Button.test.ts`. Add new `*.test.ts` files anywhere under `src/` and Vitest will pick them up automatically.

## Important rules for contributors

<Warning>
  **Do not run tests automatically.** Tests (Vitest and Playwright) must only be run when explicitly requested. During the UI build phase, prioritise visual accuracy in the browser over terminal test results.
</Warning>

<Tip>
  After every significant UI change, use the dev server for manual verification first: `npm run dev` → open `http://localhost:4321` → confirm the result looks correct. Then, when a full test pass is needed, run the explicit test commands above.
</Tip>

The project's CLAUDE.md establishes three related rules that apply to contributors and AI agents alike:

1. **No automatic testing** — never trigger `vitest` or `playwright test` as a side-effect of another task.
2. **Manual verification first** — after any significant change, provide the dev server URL and ask the human to confirm visual correctness before running the automated suite.
3. **E2E = production build only** — Playwright always needs a built `dist/`. Never point it at the dev server.