|
| 1 | +<!-- |
| 2 | +SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors |
| 3 | +SPDX-License-Identifier: AGPL-3.0-or-later |
| 4 | +--> |
| 5 | + |
| 6 | +# Front-end tests |
| 7 | + |
| 8 | +The app has two layers of front-end tests: |
| 9 | + |
| 10 | +- **Vitest** for unit and component tests. Fast, runs in jsdom, no server needed. |
| 11 | +- **Playwright** for end-to-end tests. Starts a throwaway Nextcloud instance in Docker and drives a real browser. |
| 12 | + |
| 13 | +PHP tests (PHPUnit, Psalm) live under `tests/` and are documented separately. |
| 14 | + |
| 15 | +## Vitest (unit & component) |
| 16 | + |
| 17 | +### Run |
| 18 | + |
| 19 | +```bash |
| 20 | +npm test # watch mode |
| 21 | +npx vitest run # single run (for CI / pre-push) |
| 22 | +npm run test:coverage # single run with a coverage report |
| 23 | +``` |
| 24 | + |
| 25 | +The `test` scripts set `LANG=C` so assertions on formatted strings are stable. |
| 26 | + |
| 27 | +### Where tests live |
| 28 | + |
| 29 | +Specs sit next to the code they cover, as `*.spec.ts` (or `*.test.ts`): |
| 30 | + |
| 31 | +``` |
| 32 | +src/components/TeamsListItem.vue |
| 33 | +src/components/TeamsListItem.spec.ts ← test for the component above |
| 34 | +``` |
| 35 | + |
| 36 | +Config is in [`vitest.config.ts`](vitest.config.ts). Global setup (a `matchMedia` |
| 37 | +stub, plus the place to add l10n / `window.OC` mocks as the app grows) is in |
| 38 | +[`src/test-setup.ts`](src/test-setup.ts). |
| 39 | + |
| 40 | +### Writing a component test |
| 41 | + |
| 42 | +[`src/components/TeamsListItem.spec.ts`](src/components/TeamsListItem.spec.ts) is the |
| 43 | +reference. Use `shallowMount` to isolate the component under test from its children: |
| 44 | + |
| 45 | +```typescript |
| 46 | +import { shallowMount } from '@vue/test-utils' |
| 47 | +import { describe, expect, it } from 'vitest' |
| 48 | +import MyComponent from './MyComponent.vue' |
| 49 | + |
| 50 | +describe('MyComponent', () => { |
| 51 | + it('renders the label', () => { |
| 52 | + const wrapper = shallowMount(MyComponent, { props: { label: 'Hello' } }) |
| 53 | + expect(wrapper.text()).toContain('Hello') |
| 54 | + }) |
| 55 | +}) |
| 56 | +``` |
| 57 | + |
| 58 | +- `shallowMount` stubs child components so the test asserts only this component's behaviour. Use `mount` when you need real child output. |
| 59 | +- Import `describe` / `it` / `expect` from `vitest`; there are no globals. |
| 60 | + |
| 61 | +## Playwright (end-to-end) |
| 62 | + |
| 63 | +### Requirements |
| 64 | + |
| 65 | +- Docker running locally (the test runner creates the Nextcloud container). |
| 66 | +- The Chromium binary, installed once: |
| 67 | + |
| 68 | +```bash |
| 69 | +npx playwright install chromium |
| 70 | +``` |
| 71 | + |
| 72 | +### Run |
| 73 | + |
| 74 | +```bash |
| 75 | +npm run test:e2e # all specs (boots the server automatically) |
| 76 | +npx playwright test --ui # interactive UI, best for local development |
| 77 | +npx playwright test --headed # watch the browser live |
| 78 | +npx playwright test playwright/e2e/admin-settings.spec.ts # a single spec |
| 79 | +npx playwright show-report # open the HTML report after a run |
| 80 | +``` |
| 81 | + |
| 82 | +The container is reused between runs locally (`reuseExistingServer: true` in |
| 83 | +[`playwright.config.ts`](playwright.config.ts)), so repeat runs start faster. The |
| 84 | +first run pulls the image and can take a few minutes. |
| 85 | + |
| 86 | +### How it works |
| 87 | + |
| 88 | +[`start-nextcloud-server.mjs`](playwright/start-nextcloud-server.mjs) boots a throwaway |
| 89 | +Nextcloud container (on the `stable*` branch matching `appinfo/info.xml`) with this app |
| 90 | +bind-mounted, exposed on port `8089`. The `setup` project then enables the app via |
| 91 | +[`support/setup.ts`](playwright/support/setup.ts) before the test project runs. All of |
| 92 | +this is wired through `@nextcloud/e2e-test-server`, the same harness the Forms app uses. |
| 93 | + |
| 94 | +### Directory layout |
| 95 | + |
| 96 | +``` |
| 97 | +playwright/ |
| 98 | +├── e2e/ |
| 99 | +│ ├── admin-settings.spec.ts # working smoke test: the Federated Teams admin section |
| 100 | +│ └── app-page.spec.ts # skeleton for the Teams SPA (circles#2561), see below |
| 101 | +├── support/ |
| 102 | +│ ├── fixtures.ts # authenticated test fixtures (see table) |
| 103 | +│ ├── helpers.ts # waitForApiResponse() |
| 104 | +│ └── setup.ts # enables the app in the container (runs once) |
| 105 | +└── start-nextcloud-server.mjs # boots the throwaway Nextcloud container |
| 106 | +``` |
| 107 | + |
| 108 | +### Fixtures |
| 109 | + |
| 110 | +Import `test` from [`support/fixtures.ts`](playwright/support/fixtures.ts) so the page |
| 111 | +arrives already authenticated: |
| 112 | + |
| 113 | +| Fixture | Logs in as | Use for | |
| 114 | +|---|---|---| |
| 115 | +| `adminTest` | the default admin | admin-settings flows | |
| 116 | +| `userTest` | a fresh random user | regular end-user flows (e.g. the Teams page) | |
| 117 | + |
| 118 | +### The Teams page skeleton |
| 119 | + |
| 120 | +[`app-page.spec.ts`](playwright/e2e/app-page.spec.ts) targets the in-app Teams page at |
| 121 | +`/apps/circles/teams` (the SPA from [circles#2561](https://github.com/nextcloud/circles/pull/2561)). |
| 122 | +It is marked `test.fixme` so it does not fail the suite until that page lands. Once it |
| 123 | +does: |
| 124 | + |
| 125 | +1. remove the `test.fixme(...)` line, |
| 126 | +2. replace the placeholder selectors with real roles and labels. |
| 127 | + |
| 128 | +### Writing a spec |
| 129 | + |
| 130 | +```typescript |
| 131 | +import { expect } from '@playwright/test' |
| 132 | +import { userTest as test } from '../support/fixtures.ts' |
| 133 | + |
| 134 | +test.describe('Teams page', () => { |
| 135 | + test('creates a team', async ({ page }) => { |
| 136 | + await page.goto('apps/circles/teams', { waitUntil: 'networkidle' }) |
| 137 | + await expect(page.getByRole('button', { name: 'Create team' })).toBeVisible() |
| 138 | + }) |
| 139 | +}) |
| 140 | +``` |
| 141 | + |
| 142 | +Selector rules (full list in the `nextcloud-testing` conventions): |
| 143 | + |
| 144 | +- Prefer `getByRole()` with an accessible name. Never select by CSS class, especially third-party ones. |
| 145 | +- Call `waitForApiResponse()` from [`support/helpers.ts`](playwright/support/helpers.ts) **before** the action that triggers the request, then await it after, to avoid a race. |
| 146 | +- For `NcCheckboxRadioSwitch`, click with `{ force: true }` (the native input is visually hidden). |
| 147 | + |
| 148 | +### Traces |
| 149 | + |
| 150 | +Traces are captured on the first retry of a failing test. Open one with: |
| 151 | + |
| 152 | +```bash |
| 153 | +npx playwright show-trace test-results/<test-name>/trace.zip |
| 154 | +``` |
| 155 | + |
| 156 | +## CI |
| 157 | + |
| 158 | +Both layers run automatically on pull requests, so there's nothing to set up before writing tests: |
| 159 | + |
| 160 | +- **Vitest** — `.github/workflows/node-test.yml` runs `npm run test` and `npm run test:coverage` and uploads coverage. This is the org workflow template (synced from `nextcloud/.github`); don't hand-edit it, the template sync would overwrite your changes. |
| 161 | +- **Playwright** — `.github/workflows/playwright.yml` builds the app, installs Chromium, and runs `npx playwright test`. The HTML report is uploaded as a build artifact (`playwright-report`, kept 30 days). This one is app-specific, so edit it here as the suite grows. |
0 commit comments