|
| 1 | +/** Real-browser coverage for the group rail (issue #63). Both assertions here |
| 2 | + * need a layout engine, which jsdom does not have: that the rail's default |
| 3 | + * width really does show 25 characters of a sub-group name with no |
| 4 | + * intervention, and that dragging the handle really does resize it. */ |
| 5 | +import assert from 'node:assert/strict'; |
| 6 | +import { after, before, test } from 'node:test'; |
| 7 | +import { fileURLToPath } from 'node:url'; |
| 8 | +import puppeteer, { type Browser, type ElementHandle, type Frame, type Page } from 'puppeteer-core'; |
| 9 | +import { resolveChromePath } from './support/chrome.ts'; |
| 10 | +import { type DistServer, startDistServer } from './support/dist-server.ts'; |
| 11 | +import { type KdbxFixture, writeKdbxFixture } from './support/fixture.ts'; |
| 12 | +import { resolveLaunchOptions } from './support/launch-options.ts'; |
| 13 | + |
| 14 | +const distDir = fileURLToPath(new URL('../dist', import.meta.url)); |
| 15 | + |
| 16 | +let server: DistServer; |
| 17 | +let browser: Browser; |
| 18 | +let page: Page; |
| 19 | +let app: Frame; |
| 20 | +let fixture: KdbxFixture; |
| 21 | + |
| 22 | +before(async () => { |
| 23 | + server = await startDistServer(distDir); |
| 24 | + browser = await puppeteer.launch({ |
| 25 | + executablePath: resolveChromePath(), |
| 26 | + ...resolveLaunchOptions(), |
| 27 | + args: ['--no-sandbox'], |
| 28 | + }); |
| 29 | + page = await browser.newPage(); |
| 30 | + // Comfortably wider than the 700px drawer breakpoint, so the rail is the |
| 31 | + // resizable side rail rather than the mobile drawer. |
| 32 | + await page.setViewport({ width: 1280, height: 900 }); |
| 33 | + fixture = await writeKdbxFixture(); |
| 34 | + |
| 35 | + app = await openApp(page); |
| 36 | +}); |
| 37 | + |
| 38 | +/** Upload the fixture to local.html and unlock the app it embeds, returning |
| 39 | + * the app's frame. */ |
| 40 | +async function openApp(target: Page): Promise<Frame> { |
| 41 | + await target.goto(`${server.origin}/local.html`, { waitUntil: 'networkidle0' }); |
| 42 | + const fileInput = (await target.waitForSelector( |
| 43 | + '#file-input', |
| 44 | + )) as ElementHandle<HTMLInputElement>; |
| 45 | + await fileInput.uploadFile(fixture.path); |
| 46 | + const frameElement = await target.waitForSelector('#app-frame'); |
| 47 | + assert.ok(frameElement, 'the app is embedded in an iframe'); |
| 48 | + const frame = (await frameElement.contentFrame()) as Frame; |
| 49 | + const passwordInput = await frame.waitForSelector('#master-password'); |
| 50 | + assert.ok(passwordInput, 'the embedded app shows its unlock screen'); |
| 51 | + await passwordInput.type(fixture.password); |
| 52 | + await frame.click('#unlock-btn'); |
| 53 | + await frame.waitForSelector('#group-tree .group-btn'); |
| 54 | + return frame; |
| 55 | +} |
| 56 | + |
| 57 | +after(async () => { |
| 58 | + await browser.close(); |
| 59 | + await server.close(); |
| 60 | +}); |
| 61 | + |
| 62 | +test('the rail shows 25 characters of a sub-group name without any intervention', async (t) => { |
| 63 | + const measured = await app.$$eval( |
| 64 | + '#group-tree .group-btn', |
| 65 | + (buttons, name) => { |
| 66 | + const button = buttons.find((b) => b.textContent?.endsWith(name)); |
| 67 | + if (!button) return null; |
| 68 | + // scrollWidth is clamped to clientWidth, so it can only ever report |
| 69 | + // "overflowing" or "not" — never by how much. Measuring the text itself |
| 70 | + // against the content box gives a margin that can be watched over time. |
| 71 | + const text = document.createRange(); |
| 72 | + text.selectNodeContents(button); |
| 73 | + const style = getComputedStyle(button); |
| 74 | + const padding = Number.parseFloat(style.paddingLeft) + Number.parseFloat(style.paddingRight); |
| 75 | + return { |
| 76 | + needed: text.getBoundingClientRect().width, |
| 77 | + available: button.clientWidth - padding, |
| 78 | + }; |
| 79 | + }, |
| 80 | + fixture.groupName, |
| 81 | + ); |
| 82 | + |
| 83 | + assert.ok(measured, `the rail lists "${fixture.groupName}"`); |
| 84 | + // Reported on every run: the monospace fallback differs between developer |
| 85 | + // machines and CI, so a shrinking margin here is the early warning that the |
| 86 | + // default width is drifting towards truncation. |
| 87 | + t.diagnostic( |
| 88 | + `25-character group name needs ${measured.needed.toFixed(1)}px of the ${measured.available.toFixed(1)}px content box (${(measured.available - measured.needed).toFixed(1)}px spare)`, |
| 89 | + ); |
| 90 | + assert.ok( |
| 91 | + measured.needed <= measured.available, |
| 92 | + `"${fixture.groupName}" does not fit the default rail: needs ${measured.needed.toFixed(1)}px, has ${measured.available.toFixed(1)}px`, |
| 93 | + ); |
| 94 | +}); |
| 95 | + |
| 96 | +test('dragging the handle resizes the rail', async () => { |
| 97 | + const railWidth = (): Promise<number> => |
| 98 | + app.$eval('#sidebar', (el) => el.getBoundingClientRect().width); |
| 99 | + |
| 100 | + const handle = await app.$('#sidebar-resize'); |
| 101 | + assert.ok(handle, 'the rail has a resize handle'); |
| 102 | + const box = await handle.boundingBox(); |
| 103 | + assert.ok(box, 'the handle is laid out'); |
| 104 | + |
| 105 | + const startWidth = await railWidth(); |
| 106 | + const y = box.y + 20; |
| 107 | + await page.mouse.move(box.x + box.width / 2, y); |
| 108 | + await page.mouse.down(); |
| 109 | + await page.mouse.move(box.x + box.width / 2 + 80, y, { steps: 8 }); |
| 110 | + await page.mouse.up(); |
| 111 | + |
| 112 | + const endWidth = await railWidth(); |
| 113 | + assert.ok( |
| 114 | + endWidth > startWidth, |
| 115 | + `dragging right widened the rail (${startWidth}px -> ${endWidth}px)`, |
| 116 | + ); |
| 117 | +}); |
| 118 | + |
| 119 | +test('at phone width the rail is a drawer: no resize handle, and ⋯ still reaches rename', async () => { |
| 120 | + const phone = await browser.newPage(); |
| 121 | + await phone.setViewport({ width: 375, height: 812 }); |
| 122 | + const phoneApp = await openApp(phone); |
| 123 | + |
| 124 | + assert.equal( |
| 125 | + await phoneApp.$eval('#sidebar-resize', (el) => getComputedStyle(el).display), |
| 126 | + 'none', |
| 127 | + 'the drawer has no edge to drag, so the handle is not rendered', |
| 128 | + ); |
| 129 | + |
| 130 | + await phoneApp.click('[data-action="toggle-sidebar"]'); |
| 131 | + await phoneApp.waitForSelector('#sidebar.sidebar-open'); |
| 132 | + // The drawer slides in over 0.2s; clicking mid-flight misses the button. |
| 133 | + await phoneApp.waitForFunction(() => { |
| 134 | + const drawer = document.querySelector('#sidebar'); |
| 135 | + return drawer !== null && getComputedStyle(drawer).transform === 'matrix(1, 0, 0, 1, 0, 0)'; |
| 136 | + }); |
| 137 | + |
| 138 | + // Every drawer row exposes its ⋯, because tapping a group to make it active |
| 139 | + // would close the drawer and cost a second visit. |
| 140 | + const menuButton = await phoneApp.evaluateHandle((name) => { |
| 141 | + const rows = Array.from(document.querySelectorAll('#group-tree .group-row')); |
| 142 | + const row = rows.find((r) => r.querySelector('.group-btn')?.textContent?.endsWith(name)); |
| 143 | + return row?.querySelector('.group-menu-btn') ?? null; |
| 144 | + }, fixture.groupName); |
| 145 | + const menuElement = menuButton.asElement() as ElementHandle<HTMLElement> | null; |
| 146 | + assert.ok(menuElement, 'the sub-group row has a ⋯ button in the drawer'); |
| 147 | + assert.notEqual( |
| 148 | + await menuElement.evaluate((el) => getComputedStyle(el).visibility), |
| 149 | + 'hidden', |
| 150 | + '⋯ is visible without first selecting the row', |
| 151 | + ); |
| 152 | + |
| 153 | + await menuElement.click(); |
| 154 | + const labels = await phoneApp.$$eval('.group-menu-item', (items) => |
| 155 | + items.map((i) => i.textContent), |
| 156 | + ); |
| 157 | + assert.deepEqual(labels, ['Rename', 'Move'], 'the menu opens with rename and move'); |
| 158 | + |
| 159 | + assert.ok(await phoneApp.$('#sidebar.sidebar-open'), 'opening the menu left the drawer open'); |
| 160 | + await phone.close(); |
| 161 | +}); |
| 162 | + |
| 163 | +test('a rail widened on desktop does not follow the user into the phone drawer', async () => { |
| 164 | + const handle = await app.$('#sidebar-resize'); |
| 165 | + assert.ok(handle, 'the rail has a resize handle'); |
| 166 | + const box = await handle.boundingBox(); |
| 167 | + assert.ok(box, 'the handle is laid out'); |
| 168 | + |
| 169 | + const y = box.y + 20; |
| 170 | + await page.mouse.move(box.x + box.width / 2, y); |
| 171 | + await page.mouse.down(); |
| 172 | + await page.mouse.move(box.x + box.width / 2 + 400, y, { steps: 8 }); |
| 173 | + await page.mouse.up(); |
| 174 | + |
| 175 | + const railWidth = (): Promise<number> => |
| 176 | + app.$eval('#sidebar', (el) => el.getBoundingClientRect().width); |
| 177 | + const wide = await railWidth(); |
| 178 | + assert.ok(wide > 400, `the rail is dragged wide first (${wide}px)`); |
| 179 | + |
| 180 | + await page.setViewport({ width: 375, height: 812 }); |
| 181 | + const drawer = await railWidth(); |
| 182 | + assert.ok( |
| 183 | + drawer <= 375, |
| 184 | + `the drawer keeps its own width at phone size (${drawer}px inside a 375px viewport)`, |
| 185 | + ); |
| 186 | + |
| 187 | + await page.setViewport({ width: 1280, height: 900 }); |
| 188 | +}); |
0 commit comments