| 1 | import assert from "node:assert/strict"; |
| 2 | import { startPreviewServer } from "./vite-preview-server.mjs"; |
| 3 | import { selectSession } from "./app-page-actions.mjs"; |
| 4 | import { fileURLToPath } from "node:url"; |
| 5 | import path from "node:path"; |
| 6 | const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), ".."); |
| 7 | process.env.PLAYWRIGHT_BROWSERS_PATH ??= path.join(root, ".pw-browsers"); |
| 8 | const { chromium } = await import("playwright"); |
| 9 | const port = Number(process.env.REASONIX_SIDEBAR_BROWSER_PORT ?? 4679); |
| 10 | const preview = await startPreviewServer(root, port); |
| 11 | let browser; |
| 12 | try { |
| 13 | browser = await chromium.launch({ headless: true }); |
| 14 | const page = await browser.newPage({ viewport: { width: 1440, height: 1000 }, locale: "en-US" }); |
| 15 | const errors = []; |
| 16 | page.on("pageerror", error => errors.push(error.message)); |
| 17 | await page.addInitScript(() => { |
| 18 | const migrationKey = "projectTree:workbenchSort:createdDefault:v1"; |
| 19 | if (localStorage.getItem(migrationKey) === null) localStorage.setItem("projectTree:workbenchSort", "updated"); |
| 20 | }); |
| 21 | await page.goto(`http://127.0.0.1:${port}/?mock=bench&bench=1`); |
| 22 | await page.locator(".project-tree__topic-main").first().waitFor(); |
| 23 | assert.equal(await page.locator(".app--workbench").count(), 1); |
| 24 | assert.equal(await page.locator(".workspace-browser,.app--creation").count(), 0); |
| 25 | await page.getByRole("button", { name: "More actions", exact: true }).click(); |
| 26 | let sortMenu = page.getByRole("menu", { name: "More actions", exact: true }); |
| 27 | assert.equal(await sortMenu.getByRole("menuitem", { name: "Created time", exact: true }).locator(".context-menu__check").count(), 1, |
| 28 | "upgrade resets a saved updated-time choice to creation time"); |
| 29 | await sortMenu.getByRole("menuitem", { name: "Updated time", exact: true }).click(); |
| 30 | await page.waitForFunction(() => localStorage.getItem("projectTree:workbenchSort") === "updated"); |
| 31 | await page.reload(); |
| 32 | await page.locator(".project-tree__topic-main").first().waitFor(); |
| 33 | await page.getByRole("button", { name: "More actions", exact: true }).click(); |
| 34 | sortMenu = page.getByRole("menu", { name: "More actions", exact: true }); |
| 35 | assert.equal(await sortMenu.getByRole("menuitem", { name: "Updated time", exact: true }).locator(".context-menu__check").count(), 1, |
| 36 | "a post-migration manual sort choice survives reload"); |
| 37 | await page.keyboard.press("Escape"); |
| 38 | const actionColumns = await page.evaluate(() => { |
| 39 | const left = element => element.getBoundingClientRect().left; |
| 40 | const headerButtons = [...document.querySelectorAll('.sidebar--workbench .project-tree__header-icon-btn')]; |
| 41 | const firstProject = document.querySelector('.sidebar--workbench .project-tree__folder--project'); |
| 42 | const folderButtons = firstProject ? [...firstProject.querySelectorAll('.project-tree__folder-action')] : []; |
| 43 | return { |
| 44 | header: headerButtons.map(left), |
| 45 | folder: folderButtons.map(left), |
| 46 | }; |
| 47 | }); |
| 48 | assert.equal(actionColumns.header.length, 3, 'project header renders three action columns'); |
| 49 | assert.equal(actionColumns.folder.length, 2, 'expanded project renders menu and create action columns'); |
| 50 | assert.ok(Math.abs(actionColumns.header[1] - actionColumns.folder[0]) < 0.5, `header menu aligns with project menu column: ${JSON.stringify(actionColumns)}`); |
| 51 | assert.ok(Math.abs(actionColumns.header[2] - actionColumns.folder[1]) < 0.5, `header add action aligns with project create column: ${JSON.stringify(actionColumns)}`); |
| 52 | assert.equal(await page.locator('.project-tree__topic-main').count(), 5, 'project starts with five rendered sessions'); |
| 53 | await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).click(); |
| 54 | await page.waitForFunction(() => document.querySelectorAll('.project-tree__topic-main').length === 9); |
| 55 | assert.equal(await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).count(), 0, 'the disclosure disappears at the final page'); |
| 56 | const projectFolder = page.locator('.project-tree__folder--project .project-tree__folder-main').first(); |
| 57 | await projectFolder.click(); |
| 58 | await page.waitForFunction(() => document.querySelector('.project-tree__folder--project .project-tree__folder-main')?.getAttribute('aria-expanded') === 'false'); |
| 59 | await projectFolder.click(); |
| 60 | await page.waitForFunction(() => document.querySelectorAll('.project-tree__topic-main').length === 5); |
| 61 | assert.equal(await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).count(), 1, 'reopening a project restores the compact window over loaded rows'); |
| 62 | await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).click(); |
| 63 | await page.waitForFunction(() => document.querySelectorAll('.project-tree__topic-main').length === 9); |
| 64 | await page.getByRole('button', { name: 'Collapse all', exact: true }).click(); |
| 65 | await page.waitForFunction(() => [...document.querySelectorAll('.project-tree__folder-main')].every((element) => element.getAttribute('aria-expanded') === 'false')); |
| 66 | await page.getByRole('button', { name: 'Restore previous groups', exact: true }).click(); |
| 67 | await page.waitForFunction(() => document.querySelectorAll('.project-tree__topic-main').length === 5); |
| 68 | assert.equal(await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).count(), 1, 'restoring after collapse all resets the compact window over loaded rows'); |
| 69 | await page.getByRole('button', { name: 'Show more in reasonix', exact: true }).click(); |
| 70 | await page.waitForFunction(() => document.querySelectorAll('.project-tree__topic-main').length === 9); |
| 71 | await selectSession(page, "bench:small-6t"); |
| 72 | await page.waitForFunction(() => document.querySelector('.transcript')?.textContent?.includes('ASYNC LAYOUT EXPANSION COMPLETE')); |
| 73 | assert.ok((await page.locator('.topicbar h1').textContent()).includes('bench:small-6t')); |
| 74 | const geometry = await page.locator('.project-tree__topic-label').first().evaluate(el => ({ whiteSpace: getComputedStyle(el).whiteSpace, overflow: getComputedStyle(el).textOverflow })); |
| 75 | assert.deepEqual(geometry, { whiteSpace: 'nowrap', overflow: 'ellipsis' }); |
| 76 | await page.getByRole('button', { name: 'Trash', exact: true }).click(); |
| 77 | await page.locator('.archived-sessions:visible').waitFor(); |
| 78 | await page.getByRole('button', { name: 'Back to workspace', exact: true }).click(); |
| 79 | await page.locator('.sidebar__utility-button').filter({ hasText: 'Settings' }).click(); |
| 80 | await page.locator('.settings-page--general').waitFor(); |
| 81 | assert.equal(await page.getByText('Desktop style', { exact: true }).count(), 0); |
| 82 | assert.deepEqual(errors, []); |
| 83 | console.log('PASS workbench ProjectTree 5-row disclosure, project and global compact reset, session navigation, archived recovery and settings'); |
| 84 | } finally { |
| 85 | await browser?.close(); |
| 86 | await preview.close(); |
| 87 | } |
| 88 |