test(e2e): Playwright + Vitest coverage harness and test instrumentation

Add an end-to-end and unit test suite for the SvelteKit frontend: - Playwright e2e specs (tests/e2e/spa) with a throwaway container stack, codegen scenarios, and an Istanbul-based coverage report pipeline. - Vitest unit tests across API endpoints, components, stores and composables. - `data-testid` hooks on interactive elements (AppShell, FileViewer, ShareDialog, search, photos, files breadcrumbs, login/Nextcloud flows, public share pages) so the e2e suite can target them deterministically. - Serve the SPA app-shell CSP from a <meta> policy (svelte.config.js) plus a middleware that skips the CSP header on HTML; move the Nextcloud Login Flow v2 grant page to the SvelteKit /nextcloud/login route. - `just front-codegen` recipe and start-server-spa.sh harness. Make the test environment robust and consistent: - Install a deterministic in-memory localStorage/sessionStorage in the Vitest setup so storage behaves identically across Node versions (Node 26 ships a native Web Storage global that otherwise shadows jsdom's). - Pin devenv to Node 26 + PostgreSQL 18 and pin every CI job to Node 26.3.0 so the dev shell and CI run the same toolchain versions. Repair the API/WebDAV (hurl) suite, which had drifted from the backend: - Migrate the removed `/api/folders/{id}/listing` endpoint to `/resources` (cursor-paginated `{items:[{resource_type,resource}]}` shape) across the batch-copy, grants, nested-group, and WebDAV NC tests + the dav_helpers wipe routine. - Stop photos_etag from uploading the dedup-tracked fixture so the dedup blob-lifecycle test can own its content-addressed blob exclusively. - dedup_create now asserts the idempotent same-content re-upload (201 + existing file id) instead of the stale 409 expectation. Generated coverage reports, nyc output and the e2e server runtime data dir are gitignored rather than committed.
2026-06-21 20:03:32 -06:00
parent 0c40c69f9b
commit e3823ce470
162 changed files with 13213 additions and 554 deletions
@@ -0,0 +1,70 @@
+# Codegen recorder templates
+
+Each file here is a **starting point** for `just front-codegen`. It boots an
+isolated container stack, runs your setup, then opens the Playwright Inspector
+so you record from a known state. The file name is what shows up in the menu —
+drop a new `*.spec.ts` here and it appears automatically.
+
+## Anatomy
+
+```ts
+import { test, apiLogin } from '../helpers';
+
+test('codegen: <name>', async ({ page }) => {
+  test.setTimeout(0);   // no timeout — recorder stays open until you close it
+  await apiLogin(page); // setup: get to the state you want to record from
+  await page.goto('/files');
+  await page.pause();    // MUST be last — opens the Inspector
+});
+```
+
+Rules:
+
+- Import `test` (and any helpers) from `../helpers` — **not** `@playwright/test`.
+  That wires in the container-stack fixture and the JS-error guard.
+- Set `test.setTimeout(0)` so the recorder doesn't time out while you work.
+- End with `await page.pause()`. Everything **before** it runs first, so put as
+  much setup as you like there (log in, open a folder, start an upload, …) and
+  you'll record the continuation from that state.
+- Use the helpers for setup: `apiLogin(page)` signs in via the API (no UI
+  clicks, selector-independent). Skip it for an anonymous/login flow.
+
+## What carries into the saved spec
+
+When you save a recording, the setup lines (everything before `page.pause()`,
+minus `test.setTimeout`) are copied into the generated `scenarios/<name>.spec.ts`,
+then your recorded steps are spliced in. So a recorder's setup == the saved
+test's setup — keep it to the state you want every recording from this template
+to start in.
+
+## Seeding content before you record
+
+To record flows that need existing files/folders (move, copy, delete,
+multi-select, previews, sorting by type), seed them via the API in the setup —
+no UI clicks, just like `apiLogin`. The `authed-files` template does this:
+
+```ts
+import { test, apiLogin, seedFilesAndFolders } from '../helpers';
+
+test('codegen: authed-files', async ({ page }) => {
+  test.setTimeout(0);
+  await apiLogin(page);
+  await seedFilesAndFolders(page); // Documents/, Documents/Reports/, Images/ + files of each type
+  await page.goto('/');
+  await page.pause();
+});
+```
+
+`helpers.ts` exposes the building blocks: `apiCreateFolder`, `apiUploadFile`,
+`SAMPLE_FILES` (text / markdown / JSON / CSV / PNG / PDF), and the
+`seedFilesAndFolders` convenience that lays down a small mixed-type tree.
+**Remember:** the saved spec inherits this setup, so the recorded selectors only
+have content to act on if `seedFilesAndFolders(page)` runs there too — it does,
+because the template's setup is copied into the saved test.
+
+## Add one
+
+```sh
+cp authed.spec.ts my-start.spec.ts   # edit the setup, keep page.pause() last
+just front-codegen                   # "my-start" is now in the menu
+```
@@ -0,0 +1,15 @@
+import { test } from '../helpers';
+
+/**
+ * Codegen recorder — START: anonymous at the app root.
+ *
+ * Run via `just front-codegen` → pick "anon". No login; navigates to `/` and
+ * lets the app route an unauthenticated visitor (currently it redirects to
+ * /login?redirect=/). Use this to record the logged-out redirect behaviour or
+ * a future public landing page. Click the Record ⏺ button to start generating.
+ */
+test('codegen: anon', async ({ page }) => {
+  test.setTimeout(0); // recorder stays open until you close the Inspector
+  await page.goto('/');
+  await page.pause();
+});
@@ -0,0 +1,30 @@
+import { test, apiLogin, seedFilesAndFolders } from '../helpers';
+
+/**
+ * Codegen recorder — START: signed in, on a file browser already populated
+ * with folders and files of different types.
+ *
+ * Builds on the "authed" template: same `apiLogin`, but also seeds a small
+ * tree via the API before pausing, so you record flows that need existing
+ * content (move/copy/delete, drag-drop, previews, multi-select, sorting by
+ * type, …) without first creating it by hand.
+ *
+ * Seeded in the home folder (see `seedFilesAndFolders`):
+ *   config.json, pixel.png            (root)
+ *   Documents/  → README.md, notes.txt
+ *   Documents/Reports/ → data.csv, sample.pdf
+ *   Images/     → pixel.png
+ *
+ * Run via `just front-codegen` → pick "authed-files". Click the Record ⏺
+ * button in the Inspector to start generating; copy the code into a real
+ * *.spec.ts (see scenarios/example.template.ts). Note the saved test must run
+ * `seedFilesAndFolders(page)` in its setup too, or the recorded selectors
+ * won't have anything to act on.
+ */
+test('codegen: authed-files', async ({ page }) => {
+  test.setTimeout(0); // recorder stays open until you close the Inspector
+  await apiLogin(page);
+  await seedFilesAndFolders(page);
+  await page.goto('/');
+  await page.pause();
+});
@@ -0,0 +1,16 @@
+import { test, apiLogin } from '../helpers';
+
+/**
+ * Codegen recorder — START: signed in, on the trash view.
+ *
+ * Run via `just front-codegen` → pick "authed-trash". An example of a
+ * deep-linked start point — copy this file (apiLogin + goto a route) to add
+ * your own recorders; `just front-codegen` discovers every *.spec.ts here
+ * automatically. Click the Record ⏺ button in the Inspector to start generating.
+ */
+test('codegen: authed-trash', async ({ page }) => {
+  test.setTimeout(0); // recorder stays open until you close the Inspector
+  await apiLogin(page);
+  await page.goto('/trash');
+  await page.pause();
+});
@@ -0,0 +1,20 @@
+import { test, apiLogin } from '../helpers';
+
+/**
+ * Codegen recorder — START: signed in, on the file browser.
+ *
+ * Run via `just front-codegen` → pick "authed". Boots an isolated container
+ * stack, runs the setup below, then page.pause() opens the Inspector. Click
+ * the Record ⏺ button to start generating; copy the code into a real
+ * *.spec.ts (see scenarios/example.template.ts).
+ *
+ * Extend the setup to record from a deeper state (e.g. open a folder, start an
+ * upload) — everything before page.pause() runs first, so you record the
+ * continuation.
+ */
+test('codegen: authed', async ({ page }) => {
+  test.setTimeout(0); // recorder stays open until you close the Inspector
+  await apiLogin(page);
+  await page.goto('/');
+  await page.pause();
+});
@@ -0,0 +1,13 @@
+import { test } from '../helpers';
+
+/**
+ * Codegen recorder — START: the SPA sign-in screen (not authenticated).
+ *
+ * Run via `just front-codegen` → pick "login". Use this to record the login
+ * flow itself. Click the Record ⏺ button in the Inspector to start generating.
+ */
+test('codegen: login', async ({ page }) => {
+  test.setTimeout(0); // recorder stays open until you close the Inspector
+  await page.goto('/login');
+  await page.pause();
+});