diff --git a/.gitignore b/.gitignore index cf21cb3..65ce6f5 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ dist/ .env .DS_Store *.tsbuildinfo +playwright-report/ +test-results/ diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..214c29d --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +registry=https://registry.npmjs.org/ diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 0000000..2bd5a0a --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +22 diff --git a/README.md b/README.md index bfc84e6..706b216 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,14 @@ npm run test:integration The integration suite drops only the temporary databases it creates. Override `TEST_DATABASE_URL` when PostgreSQL is not available at the development default on port 5433. +Run the isolated Chromium smoke test after installing its browser runtime once with `npx playwright install chromium`: + +```bash +npm run test:e2e +``` + +The smoke harness builds the application, creates a disposable PostgreSQL database and level, exercises move, hand-pan, board-only pinch zoom, folder expansion, file movement, and reload persistence, then removes the test database. + ## Data and API The server stores its tables and migration ledger in the dedicated `osint` schema of PostgreSQL. `DATABASE_URL` is required. diff --git a/docs/TODO.md b/docs/TODO.md index a7b2796..698c088 100644 --- a/docs/TODO.md +++ b/docs/TODO.md @@ -20,11 +20,11 @@ This is the ordered implementation roadmap following the accepted exhibit model. - [x] Test screen/board coordinate conversion across pan and zoom levels. - [x] Test timeline date-to-pixel projection and recomputation after viewport resizing. -- [ ] Test the interaction boundary between exhibit dragging, hand-tool panning, and board-only pinch zoom. -- [x] Test folder open/close behavior and retained file positions; add visual coverage for containment bands with the browser smoke test. -- [ ] Test document upload, metadata persistence, board save/reload, and reset. +- [x] Test the interaction boundary between exhibit dragging, hand-tool panning, and board-only pinch zoom. +- [x] Test folder open/close behavior, retained file positions, and containment-band state. +- [x] Test document upload, metadata persistence, board save/reload, and reset. - [x] Run migrations and API integration tests against disposable PostgreSQL, not SQLite or mocked persistence. -- [ ] Add one browser smoke test: open a level, drag an exhibit, zoom, open a folder, move a file, reload, and verify persistence. +- [x] Add one browser smoke test: open an isolated level, drag an exhibit, pan, board-zoom, open a folder, move a file, reload, and verify persistence. ## Milestone 2: exhibit-schema cutover diff --git a/e2e/board.smoke.spec.ts b/e2e/board.smoke.spec.ts new file mode 100644 index 0000000..855b7b6 --- /dev/null +++ b/e2e/board.smoke.spec.ts @@ -0,0 +1,89 @@ +import { expect, test, type Locator, type Page } from '@playwright/test' + +async function dragBy(page: Page, locator: Locator, deltaX: number, deltaY: number) { + const box = await locator.boundingBox() + if (!box) throw new Error('Drag target is not visible') + const start = { x: box.x + Math.min(30, box.width / 3), y: box.y + Math.min(14, box.height / 4) } + await page.mouse.move(start.x, start.y) + await page.mouse.down() + await page.mouse.move(start.x + deltaX / 2, start.y + deltaY / 2, { steps: 3 }) + await page.mouse.move(start.x + deltaX, start.y + deltaY, { steps: 3 }) + await page.mouse.up() +} + +async function boardPosition(locator: Locator) { + return locator.evaluate(element => ({ + left: Number.parseFloat((element as HTMLElement).style.left), + top: Number.parseFloat((element as HTMLElement).style.top), + })) +} + +async function waitForSave(page: Page, action: () => Promise) { + const response = page.waitForResponse(candidate => candidate.request().method() === 'PUT' && candidate.url().includes('/api/levels/') && candidate.ok()) + await action() + await response +} + +test('move, folder expansion, hand pan, pinch zoom, and reload persistence', async ({ page }) => { + await page.goto('/?level=e2e-level&edit=1') + await expect(page.getByRole('heading', { name: 'Browser Safety Test' })).toBeVisible() + + const folder = page.locator('[data-temporal-id="widget:e2e-folder"]') + const file = page.locator('[data-temporal-id="file:e2e-membership"]') + const board = page.locator('.board') + const boardViewport = page.locator('.board-viewport') + const containmentBand = page.locator('.folder-bands line') + await expect(folder).toBeVisible() + await expect(containmentBand).toHaveClass(/\bclosed\b/) + const folderBefore = await boardPosition(folder) + + await waitForSave(page, () => dragBy(page, folder, 70, 42)) + const movedFolder = await boardPosition(folder) + expect(movedFolder.left).toBeGreaterThan(folderBefore.left) + expect(movedFolder.top).toBeGreaterThan(folderBefore.top) + + await page.reload() + await expect(folder).toBeVisible() + expect(await boardPosition(folder)).toEqual(movedFolder) + + await waitForSave(page, () => folder.getByRole('button', { name: 'OPEN', exact: true }).click()) + await expect(file).toHaveClass(/\bopen\b/) + await expect(containmentBand).toHaveClass(/\bopen\b/) + const fileBefore = await boardPosition(file) + await waitForSave(page, () => dragBy(page, file, 56, 35)) + const movedFile = await boardPosition(file) + expect(movedFile.left).toBeGreaterThan(fileBefore.left) + expect(movedFile.top).toBeGreaterThan(fileBefore.top) + + await page.reload() + await expect(file).toHaveClass(/\bopen\b/) + expect(await boardPosition(file)).toEqual(movedFile) + + const folderBeforePan = await boardPosition(folder) + const transformBeforePan = await board.getAttribute('style') + await page.getByRole('button', { name: 'HAND', exact: true }).click() + const viewportBox = await boardViewport.boundingBox() + if (!viewportBox) throw new Error('Board viewport is not visible') + await waitForSave(page, async () => { + await page.mouse.move(viewportBox.x + 240, viewportBox.y + 230) + await page.mouse.down() + await page.mouse.move(viewportBox.x + 290, viewportBox.y + 195, { steps: 5 }) + await page.mouse.up() + }) + expect(await boardPosition(folder)).toEqual(folderBeforePan) + const transformAfterPan = await board.getAttribute('style') + expect(transformAfterPan).not.toEqual(transformBeforePan) + + await page.reload() + await expect(folder).toBeVisible() + expect(await board.getAttribute('style')).toEqual(transformAfterPan) + + const transformBeforePinch = await board.getAttribute('style') + const browserMetricsBeforePinch = await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio })) + await page.keyboard.down('Control') + await page.mouse.move(viewportBox.x + 400, viewportBox.y + 260) + await page.mouse.wheel(0, -20) + await page.keyboard.up('Control') + await expect.poll(() => board.getAttribute('style')).not.toEqual(transformBeforePinch) + expect(await page.evaluate(() => ({ width: window.innerWidth, height: window.innerHeight, devicePixelRatio: window.devicePixelRatio }))).toEqual(browserMetricsBeforePinch) +}) diff --git a/package-lock.json b/package-lock.json index f984399..6e81bf3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,13 +12,14 @@ "dotenv": "16.5.0", "express": "5.1.0", "lucide-react": "0.468.0", - "multer": "2.0.2", + "multer": "^2.2.0", "pg": "8.16.3", "react": "19.1.0", "react-dom": "19.1.0", "tsx": "4.20.3" }, "devDependencies": { + "@playwright/test": "^1.62.1", "@types/cors": "2.8.18", "@types/express": "5.0.3", "@types/multer": "2.0.0", @@ -29,8 +30,8 @@ "@vitejs/plugin-react": "4.5.2", "concurrently": "9.1.2", "typescript": "5.8.3", - "vite": "6.3.5", - "vitest": "3.2.3" + "vite": "^6.4.3", + "vitest": "^3.2.7" }, "engines": { "node": ">=20" @@ -801,6 +802,22 @@ "node": "^22.20 || ^24.12 || >=25" } }, + "node_modules/@playwright/test": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz", + "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.62.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, "node_modules/@rolldown/pluginutils": { "version": "1.0.0-beta.11", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz", @@ -1400,15 +1417,15 @@ } }, "node_modules/@vitest/expect": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.3.tgz", - "integrity": "sha512-W2RH2TPWVHA1o7UmaFKISPvdicFJH+mjykctJFoAkUw+SPTJTGjUNdKscFBrqM7IPnCVu6zihtKYa7TkZS1dkQ==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-3.2.7.tgz", + "integrity": "sha512-E8eBXaKibuvH2pSZErOjdVb5vF4PbKYcrnluBTYxEk1l/VhhwZg1kZQsdtjq+CsF5CFydf2Rdkz7jDHKSisi3w==", "dev": true, "license": "MIT", "dependencies": { "@types/chai": "^5.2.2", - "@vitest/spy": "3.2.3", - "@vitest/utils": "3.2.3", + "@vitest/spy": "3.2.7", + "@vitest/utils": "3.2.7", "chai": "^5.2.0", "tinyrainbow": "^2.0.0" }, @@ -1417,13 +1434,13 @@ } }, "node_modules/@vitest/mocker": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.3.tgz", - "integrity": "sha512-cP6fIun+Zx8he4rbWvi+Oya6goKQDZK+Yq4hhlggwQBbrlOQ4qtZ+G4nxB6ZnzI9lyIb+JnvyiJnPC2AGbKSPA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-3.2.7.tgz", + "integrity": "sha512-Trr0hYO9CM3Wj6ksWHRhK9IZpIY6wTMO5u/MqXurMxT57sWBaOPEtP3Oq60ihZuh5JsiagKfz95OcxdEP6dBrA==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/spy": "3.2.3", + "@vitest/spy": "3.2.7", "estree-walker": "^3.0.3", "magic-string": "^0.30.17" }, @@ -1457,13 +1474,13 @@ } }, "node_modules/@vitest/runner": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.3.tgz", - "integrity": "sha512-83HWYisT3IpMaU9LN+VN+/nLHVBCSIUKJzGxC5RWUOsK1h3USg7ojL+UXQR3b4o4UBIWCYdD2fxuzM7PQQ1u8w==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-3.2.7.tgz", + "integrity": "sha512-sB9y4ovltoQP+WaUPwmSxO9WIg9Ig694Di5PalVPsYHklAdE027mehpWF2SQSVq+k6sFgaivbTjTJwZLSHbedA==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/utils": "3.2.3", + "@vitest/utils": "3.2.7", "pathe": "^2.0.3", "strip-literal": "^3.0.0" }, @@ -1472,13 +1489,13 @@ } }, "node_modules/@vitest/snapshot": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.3.tgz", - "integrity": "sha512-9gIVWx2+tysDqUmmM1L0hwadyumqssOL1r8KJipwLx5JVYyxvVRfxvMq7DaWbZZsCqZnu/dZedaZQh4iYTtneA==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-3.2.7.tgz", + "integrity": "sha512-7C+MwShwtBSI5Buwoyg3s/iY1eHL9PKAf+O1wVh/TdnjXUtkoL/9YQtre90i4MtNXM6edP1wJ2zOBpfCyhIS7g==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "3.2.3", + "@vitest/pretty-format": "3.2.7", "magic-string": "^0.30.17", "pathe": "^2.0.3" }, @@ -1486,23 +1503,10 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/@vitest/snapshot/node_modules/@vitest/pretty-format": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.3.tgz", - "integrity": "sha512-yFglXGkr9hW/yEXngO+IKMhP0jxyFw2/qys/CK4fFUZnSltD+MU7dVYGrH8rvPcK/O6feXQA+EU33gjaBBbAng==", - "dev": true, - "license": "MIT", - "dependencies": { - "tinyrainbow": "^2.0.0" - }, - "funding": { - "url": "https://opencollective.com/vitest" - } - }, "node_modules/@vitest/spy": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.3.tgz", - "integrity": "sha512-JHu9Wl+7bf6FEejTCREy+DmgWe+rQKbK+y32C/k5f4TBIAlijhJbRBIRIOCEpVevgRsCQR2iHRUH2/qKVM/plw==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-3.2.7.tgz", + "integrity": "sha512-Q2eQGI6d2L/hBtZ0qNuKcAGid68XK6cv1xsoaIma6PaJhHPoqcEJhYpXZ/5myCMqkNgtP6UKuBhbc0nHKnrkuQ==", "dev": true, "license": "MIT", "dependencies": { @@ -1513,27 +1517,14 @@ } }, "node_modules/@vitest/utils": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.3.tgz", - "integrity": "sha512-4zFBCU5Pf+4Z6v+rwnZ1HU1yzOKKvDkMXZrymE2PBlbjKJRlrOxbvpfPSvJTGRIwGoahaOGvp+kbCoxifhzJ1Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "@vitest/pretty-format": "3.2.3", - "loupe": "^3.1.3", - "tinyrainbow": "^2.0.0" - }, - "funding": { - "url": "https://opencollective.com/vitest" - } - }, - "node_modules/@vitest/utils/node_modules/@vitest/pretty-format": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-3.2.3.tgz", - "integrity": "sha512-yFglXGkr9hW/yEXngO+IKMhP0jxyFw2/qys/CK4fFUZnSltD+MU7dVYGrH8rvPcK/O6feXQA+EU33gjaBBbAng==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-3.2.7.tgz", + "integrity": "sha512-x6BDOd7dyo3PFLY3I9/HJ25X/6OurhGXk2/B9gOZNPF7XDVjeBK4k01lQE5uvDpbuheErh91qYuE1E2OEjK3Rw==", "dev": true, "license": "MIT", "dependencies": { + "@vitest/pretty-format": "3.2.7", + "loupe": "^3.1.4", "tinyrainbow": "^2.0.0" }, "funding": { @@ -2618,27 +2609,6 @@ "url": "https://opencollective.com/express" } }, - "node_modules/minimist": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", - "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", - "license": "MIT", - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, - "node_modules/mkdirp": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", - "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", - "license": "MIT", - "dependencies": { - "minimist": "^1.2.6" - }, - "bin": { - "mkdirp": "bin/cmd.js" - } - }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", @@ -2646,21 +2616,22 @@ "license": "MIT" }, "node_modules/multer": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/multer/-/multer-2.0.2.tgz", - "integrity": "sha512-u7f2xaZ/UG8oLXHvtF/oWTRvT44p9ecwBBqTwgJVq0+4BW1g8OW01TyMEGWBHbyMOYVHXslaut7qEQ1meATXgw==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/multer/-/multer-2.2.0.tgz", + "integrity": "sha512-6rdyFg2kLrMh9Jee7/BMPuV9lEAd7lLW2YUpF9/YxR7njyoUwwQ0ZPh3TaIY50Sw6vlyD2HW3wGOkTS4P79xrQ==", "license": "MIT", "dependencies": { "append-field": "^1.0.0", "busboy": "^1.6.0", "concat-stream": "^2.0.0", - "mkdirp": "^0.5.6", - "object-assign": "^4.1.1", - "type-is": "^1.6.18", - "xtend": "^4.0.2" + "type-is": "^1.6.18" }, "engines": { "node": ">= 10.16.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/multer/node_modules/media-typer": { @@ -2931,6 +2902,53 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/playwright": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz", + "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.62.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=20" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.62.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz", + "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/postcss": { "version": "8.5.26", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz", @@ -3720,9 +3738,9 @@ } }, "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.4.3", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.3.tgz", + "integrity": "sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==", "dev": true, "license": "MIT", "dependencies": { @@ -3795,9 +3813,9 @@ } }, "node_modules/vite-node": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.3.tgz", - "integrity": "sha512-gc8aAifGuDIpZHrPjuHyP4dpQmYXqWw7D1GmDnWeNWP654UEXzVfQ5IHPSK5HaHkwB/+p1atpYpSdw/2kOv8iQ==", + "version": "3.2.4", + "resolved": "https://registry.npmjs.org/vite-node/-/vite-node-3.2.4.tgz", + "integrity": "sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==", "dev": true, "license": "MIT", "dependencies": { @@ -3818,20 +3836,20 @@ } }, "node_modules/vitest": { - "version": "3.2.3", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.3.tgz", - "integrity": "sha512-E6U2ZFXe3N/t4f5BwUaVCKRLHqUpk1CBWeMh78UT4VaTPH/2dyvH6ALl29JTovEPu9dVKr/K/J4PkXgrMbw4Ww==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.7.tgz", + "integrity": "sha512-KrxIJ62Fd89gfysR4WotlgZABiz2dqFPgqGzX7s+CwsqLFomRH7777ZcrOD6+WVAh7khPQP41A+BKbpcJFrdEg==", "dev": true, "license": "MIT", "dependencies": { "@types/chai": "^5.2.2", - "@vitest/expect": "3.2.3", - "@vitest/mocker": "3.2.3", - "@vitest/pretty-format": "^3.2.3", - "@vitest/runner": "3.2.3", - "@vitest/snapshot": "3.2.3", - "@vitest/spy": "3.2.3", - "@vitest/utils": "3.2.3", + "@vitest/expect": "3.2.7", + "@vitest/mocker": "3.2.7", + "@vitest/pretty-format": "^3.2.7", + "@vitest/runner": "3.2.7", + "@vitest/snapshot": "3.2.7", + "@vitest/spy": "3.2.7", + "@vitest/utils": "3.2.7", "chai": "^5.2.0", "debug": "^4.4.1", "expect-type": "^1.2.1", @@ -3842,10 +3860,10 @@ "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.14", - "tinypool": "^1.1.0", + "tinypool": "^1.1.1", "tinyrainbow": "^2.0.0", "vite": "^5.0.0 || ^6.0.0 || ^7.0.0-0", - "vite-node": "3.2.3", + "vite-node": "3.2.4", "why-is-node-running": "^2.3.0" }, "bin": { @@ -3861,8 +3879,8 @@ "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", - "@vitest/browser": "3.2.3", - "@vitest/ui": "3.2.3", + "@vitest/browser": "3.2.7", + "@vitest/ui": "3.2.7", "happy-dom": "*", "jsdom": "*" }, diff --git a/package.json b/package.json index ce86d06..f808900 100644 --- a/package.json +++ b/package.json @@ -8,37 +8,40 @@ "dev:web": "vite", "dev:server": "tsx watch server/index.ts", "build": "tsc -b && vite build", + "e2e:serve": "TEST_DATABASE_URL=${TEST_DATABASE_URL:-postgres://osint:osint_secret@localhost:5433/osint_dev} tsx server/e2eHarness.ts", "start": "NODE_ENV=production tsx server/index.ts", "migrate:up": "tsx server/migrate.ts", - "test": "vitest run --exclude '**/*.integration.test.ts'", - "test:integration": "TEST_DATABASE_URL=${TEST_DATABASE_URL:-postgres://osint:osint_secret@localhost:5433/osint_dev} vitest run server/*.integration.test.ts" + "test": "vitest run --exclude '**/*.integration.test.ts' --exclude 'e2e/**'", + "test:integration": "TEST_DATABASE_URL=${TEST_DATABASE_URL:-postgres://osint:osint_secret@localhost:5433/osint_dev} vitest run server/*.integration.test.ts", + "test:e2e": "npm run build && playwright test" }, "dependencies": { "cors": "2.8.5", "dotenv": "16.5.0", "express": "5.1.0", "lucide-react": "0.468.0", - "multer": "2.0.2", + "multer": "^2.2.0", "pg": "8.16.3", "react": "19.1.0", "react-dom": "19.1.0", "tsx": "4.20.3" }, "devDependencies": { + "@playwright/test": "^1.62.1", "@types/cors": "2.8.18", "@types/express": "5.0.3", - "@types/node": "22.15.30", "@types/multer": "2.0.0", + "@types/node": "22.15.30", "@types/pg": "8.15.4", "@types/react": "19.1.8", "@types/react-dom": "19.1.6", "@vitejs/plugin-react": "4.5.2", "concurrently": "9.1.2", "typescript": "5.8.3", - "vite": "6.3.5", - "vitest": "3.2.3" + "vite": "^6.4.3", + "vitest": "^3.2.7" }, "engines": { - "node": ">=20" + "node": "^20.0.0 || >=22.0.0" } } diff --git a/playwright.config.ts b/playwright.config.ts new file mode 100644 index 0000000..cebceb8 --- /dev/null +++ b/playwright.config.ts @@ -0,0 +1,23 @@ +import { defineConfig } from '@playwright/test' + +const port = 18788 + +export default defineConfig({ + testDir: './e2e', + fullyParallel: false, + workers: 1, + retries: 0, + timeout: 30_000, + use: { + baseURL: `http://127.0.0.1:${port}`, + headless: true, + viewport: { width: 1280, height: 720 }, + }, + webServer: { + command: 'npm run e2e:serve', + url: `http://127.0.0.1:${port}/api/health`, + reuseExistingServer: false, + timeout: 120_000, + gracefulShutdown: { signal: 'SIGTERM', timeout: 10_000 }, + }, +}) diff --git a/server/api.integration.test.ts b/server/api.integration.test.ts index c16d4bb..48fd7cc 100644 --- a/server/api.integration.test.ts +++ b/server/api.integration.test.ts @@ -54,12 +54,11 @@ suite('level persistence API', () => { if (appServer) await new Promise((resolve, reject) => appServer.close(error => error ? reject(error) : resolve())) if (appPool) await appPool.end() if (!adminClient) return - await adminClient.query('SELECT pg_terminate_backend(pid) FROM pg_stat_activity WHERE datname = $1', [databaseName]) await adminClient.query(`DROP DATABASE IF EXISTS "${databaseName}"`) await adminClient.end() }) - it('persists authored viewport, exhibits, and relation positions', async () => { + it('persists authoring, uploads, player state, and reset behavior', async () => { const createResponse = await fetch(`${baseUrl}/api/levels`, { method: 'POST', headers: { 'content-type': 'application/json' }, @@ -83,5 +82,51 @@ suite('level persistence API', () => { expect(loaded.viewport).toEqual(state.viewport) expect(loaded.evidence[0]).toMatchObject({ id: 'folder-1', x: 685, y: 417, config: { open: true } }) expect(loaded.relations[0]).toMatchObject({ id: 'membership-1', config: { x: 1051, y: 417 } }) + + const upload = new FormData() + upload.append('file', new Blob(['OSINT smoke evidence'], { type: 'text/plain' }), 'smoke-evidence.txt') + const uploadResponse = await fetch(`${baseUrl}/api/levels/${state.id}/documents?edit=1`, { method: 'POST', body: upload }) + expect(uploadResponse.status).toBe(201) + const uploaded = await uploadResponse.json() as CaseState['documents'][number] + expect(uploaded).toMatchObject({ title: 'smoke-evidence.txt', fileName: 'smoke-evidence.txt', mimeType: 'text/plain', fileType: 'file' }) + expect(uploaded.assetId).toBeTruthy() + expect(await (await fetch(`${baseUrl}/api/assets/${uploaded.assetId}`)).text()).toBe('OSINT smoke evidence') + + const withUpload = await (await fetch(`${baseUrl}/api/levels/${state.id}?edit=1`)).json() as CaseState + const uploadedDocument = withUpload.documents.find(document => document.id === uploaded.id)! + uploadedDocument.title = 'Renamed smoke evidence' + uploadedDocument.publishedAt = '2022-06-15T10:30:00.000Z' + uploadedDocument.metadata = { witness: 'Integration test', confidence: 'high' } + const metadataSave = await fetch(`${baseUrl}/api/levels/${state.id}?edit=1`, { + method: 'PUT', + headers: { 'content-type': 'application/json' }, + body: JSON.stringify(withUpload), + }) + expect(metadataSave.ok).toBe(true) + const afterMetadataSave = await (await fetch(`${baseUrl}/api/levels/${state.id}?edit=1`)).json() as CaseState + expect(afterMetadataSave.documents.find(document => document.id === uploaded.id)).toMatchObject({ + title: 'Renamed smoke evidence', + publishedAt: '2022-06-15T10:30:00.000Z', + metadata: { witness: 'Integration test', confidence: 'high' }, + }) + + const playerState = await (await fetch(`${baseUrl}/api/levels/${state.id}`)).json() as CaseState + playerState.viewport = { x: -150, y: 88, zoom: 1.1 } + playerState.evidence[0] = { ...playerState.evidence[0], x: 812, y: 533 } + const playerSave = await fetch(`${baseUrl}/api/levels/${state.id}`, { + method: 'PUT', + headers: { 'content-type': 'application/json' }, + body: JSON.stringify(playerState), + }) + expect(await playerSave.json()).toEqual({ ok: true, mode: 'play' }) + const savedPlayerState = await (await fetch(`${baseUrl}/api/levels/${state.id}`)).json() as CaseState + expect(savedPlayerState.viewport).toEqual(playerState.viewport) + expect(savedPlayerState.evidence[0]).toMatchObject({ id: 'folder-1', x: 812, y: 533 }) + + const resetResponse = await fetch(`${baseUrl}/api/levels/${state.id}/reset`, { method: 'POST' }) + expect(resetResponse.ok).toBe(true) + const resetState = await resetResponse.json() as CaseState + expect(resetState.viewport).toEqual({ x: 0, y: 28, zoom: 0.7 }) + expect(resetState.evidence[0]).toMatchObject({ id: 'folder-1', x: 685, y: 417 }) }) }) diff --git a/server/e2eHarness.ts b/server/e2eHarness.ts new file mode 100644 index 0000000..364bf95 --- /dev/null +++ b/server/e2eHarness.ts @@ -0,0 +1,77 @@ +import { once } from 'node:events' +import path from 'node:path' +import { fileURLToPath } from 'node:url' +import pg from 'pg' +import type { CaseState } from '../src/types.js' +import { runMigrations } from './migrations.js' + +const { Client } = pg +const baseDatabaseUrl = process.env.TEST_DATABASE_URL +if (!baseDatabaseUrl) throw new Error('TEST_DATABASE_URL is required for the browser harness') + +const databaseName = `osint_e2e_${process.pid}_${Date.now()}` +const adminUrl = new URL(baseDatabaseUrl) +adminUrl.pathname = '/postgres' +const adminClient = new Client({ connectionString: adminUrl.toString() }) +await adminClient.connect() +await adminClient.query(`CREATE DATABASE "${databaseName}"`) + +const testUrl = new URL(baseDatabaseUrl) +testUrl.pathname = `/${databaseName}` +const databaseUrl = testUrl.toString() +const migrationsDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..', 'migrations') +await runMigrations(databaseUrl, migrationsDir, () => undefined) + +const port = Number(process.env.E2E_PORT || 18788) +process.env.DATABASE_URL = databaseUrl +process.env.LEVEL_EDITING_ENABLED = 'true' +process.env.PORT = String(port) +process.env.OSINT_MANAGED_SERVER = 'true' +const { server, pool } = await import('./index.js') +if (!server.listening) await once(server, 'listening') +const baseUrl = `http://127.0.0.1:${port}` + +const created = await fetch(`${baseUrl}/api/levels`, { + method: 'POST', + headers: { 'content-type': 'application/json' }, + body: JSON.stringify({ id: 'e2e-level', title: 'Browser Safety Test', subtitle: 'Disposable test level' }), +}) +if (!created.ok) throw new Error(`Could not create browser test level: ${created.status}`) +const state = await created.json() as CaseState +state.documents = [{ + id: 'e2e-document', title: 'Dated source image', kind: 'IMAGE', date: '2021-04-17', publishedAt: '2021-04-17T12:00:00.000Z', + body: [], regions: [], fileType: 'image', metadata: {}, +}] +state.evidence = [{ + id: 'e2e-folder', type: 'folder', title: 'BROWSER TEST FOLDER', content: 'Disposable evidence', + x: 600, y: 360, width: 260, config: { open: false }, containedDocumentIds: ['e2e-document'], +}] +state.relations = [{ + id: 'e2e-membership', fromWidgetId: 'e2e-folder', toWidgetId: 'e2e-document', type: 'contains', sortOrder: 0, + config: { x: 980, y: 360 }, +}] +state.connections = [] +state.viewport = { x: 0, y: 28, zoom: 0.7 } +const saved = await fetch(`${baseUrl}/api/levels/${state.id}?edit=1`, { + method: 'PUT', + headers: { 'content-type': 'application/json' }, + body: JSON.stringify(state), +}) +if (!saved.ok) throw new Error(`Could not seed browser test level: ${saved.status}`) + +let shuttingDown = false +async function shutdown(exitCode: number) { + if (shuttingDown) return + shuttingDown = true + if (server.listening) await new Promise((resolve, reject) => server.close(error => error ? reject(error) : resolve())) + await pool.end() + await adminClient.query(`DROP DATABASE IF EXISTS "${databaseName}"`) + await adminClient.end() + process.exit(exitCode) +} + +process.on('SIGTERM', () => void shutdown(0)) +process.on('SIGINT', () => void shutdown(0)) +process.on('uncaughtException', error => { console.error(error); void shutdown(1) }) +process.on('unhandledRejection', error => { console.error(error); void shutdown(1) }) +console.log(`Browser safety harness ready on ${baseUrl}`) diff --git a/server/index.ts b/server/index.ts index f34646b..0b7fa2b 100644 --- a/server/index.ts +++ b/server/index.ts @@ -30,6 +30,12 @@ function wantsEdit(req: express.Request) { return editingEnabled && req.query.edit === '1' } +function isoTimestamp(value: unknown) { + if (!value) return undefined + const parsed = new Date(String(value)) + return Number.isFinite(parsed.getTime()) ? parsed.toISOString() : undefined +} + async function assembleLevel(levelId: string, playthroughId = `default:${levelId}`, authorMode = false): Promise { const levelResult = await pool.query<{ id: string; title: string; subtitle: string; status: string }>( 'SELECT id, title, subtitle, status FROM osint.levels WHERE id = $1', [levelId], @@ -72,8 +78,8 @@ async function assembleLevel(levelId: string, playthroughId = `default:${levelId ]) const stateByWidget = new Map(authorMode ? [] : stateResult.rows.map(row => [row.widget_id, row])) - const documents: CaseDocument[] = widgetsResult.rows.filter(w => w.widget_type === 'document').map(w => { const override = stateByWidget.get(w.id)?.config || {}; const publishedAt = String(override.publishedAt || w.published_at || ''); return ({ - id: w.id, title: String(override.title || w.title), kind: w.config.kind || 'DOCUMENT', date: publishedAt.slice(0, 10) || w.config.date || '', publishedAt: publishedAt || undefined, + const documents: CaseDocument[] = widgetsResult.rows.filter(w => w.widget_type === 'document').map(w => { const override = stateByWidget.get(w.id)?.config || {}; const publishedAt = isoTimestamp(override.publishedAt || w.published_at); return ({ + id: w.id, title: String(override.title || w.title), kind: w.config.kind || 'DOCUMENT', date: publishedAt?.slice(0, 10) || w.config.date || '', publishedAt, body: w.config.body || [], fileType: (override.fileType || w.config.fileType || (w.mime_type?.startsWith('image/') ? 'image' : 'file')) as CaseDocument['fileType'], metadata: (override.metadata || w.config.metadata || {}) as Record, assetId: w.asset_id, fileName: w.original_name, mimeType: w.mime_type, fileSize: w.byte_size, regions: regionsResult.rows.filter(r => r.document_widget_id === w.id).map(r => ({ id: r.region_key, label: r.label, excerpt: r.excerpt, date: r.event_date })), @@ -291,7 +297,7 @@ if (fs.existsSync(dist)) { app.use(express.static(dist)); app.get('*splat', (_re const port = Number(process.env.PORT || 8787) export const server = app.listen(port, '0.0.0.0', () => console.log(`GUPI OSINT Board listening on http://localhost:${port}`)) async function shutdown() { server.close(); await pool.end(); process.exit(0) } -if (!process.env.VITEST) { +if (!process.env.VITEST && process.env.OSINT_MANAGED_SERVER !== 'true') { process.on('SIGTERM', shutdown) process.on('SIGINT', shutdown) } diff --git a/server/migrations.integration.test.ts b/server/migrations.integration.test.ts index b74c50e..f82f356 100644 --- a/server/migrations.integration.test.ts +++ b/server/migrations.integration.test.ts @@ -25,7 +25,6 @@ suite('PostgreSQL migrations', () => { afterAll(async () => { if (!adminClient) return - await adminClient.query('SELECT pg_terminate_backend(pid) FROM pg_stat_activity WHERE datname = $1', [databaseName]) await adminClient.query(`DROP DATABASE IF EXISTS "${databaseName}"`) await adminClient.end() }) diff --git a/tsconfig.node.json b/tsconfig.node.json index 74ddeaf..c50a410 100644 --- a/tsconfig.node.json +++ b/tsconfig.node.json @@ -9,5 +9,5 @@ "strict": true, "noEmit": true }, - "include": ["vite.config.ts", "server/**/*.ts", "src/types.ts"] + "include": ["vite.config.ts", "playwright.config.ts", "server/**/*.ts", "e2e/**/*.ts", "src/types.ts"] }