diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 54d8dc40..a250f61c 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -178,11 +178,11 @@ jobs: CGO_ENABLED: "1" - name: Install Playwright browsers - run: npx playwright install --with-deps chromium + run: npx playwright install --with-deps chromium webkit working-directory: frontend - name: Run E2E tests - run: npx playwright test + run: npx playwright test --reporter=list working-directory: frontend env: E2E_PREBUILT_FIXTURE: /tmp/testfixture diff --git a/frontend/e2e/transcript-strip.spec.ts b/frontend/e2e/transcript-strip.spec.ts new file mode 100644 index 00000000..089a5b98 --- /dev/null +++ b/frontend/e2e/transcript-strip.spec.ts @@ -0,0 +1,33 @@ +import { test, expect } from "@playwright/test"; +import { SessionsPage } from "./pages/sessions-page"; + +test.describe("Transcript strip", () => { + let sp: SessionsPage; + + test.beforeEach(async ({ page }) => { + sp = new SessionsPage(page); + await sp.goto(); + await sp.selectFirstSession(); + }); + + test("pills fill full height of transcript-strip container", async ({ + page, + }) => { + const strip = page.locator(".transcript-strip"); + await expect(strip).toBeVisible(); + + const activePill = strip.locator(".pill.active"); + await expect(activePill).toBeVisible(); + + const stripBox = await strip.boundingBox(); + const pillBox = await activePill.boundingBox(); + + expect(stripBox).toBeTruthy(); + expect(pillBox).toBeTruthy(); + + // The pill should fill the container height (minus the 1px border + // on each side = 2px total). + const stripInner = stripBox!.height - 2; + expect(pillBox!.height).toBeGreaterThanOrEqual(stripInner); + }); +}); diff --git a/frontend/e2e/virtualizer.spec.ts b/frontend/e2e/virtualizer.spec.ts index 88128e41..7c17a988 100644 --- a/frontend/e2e/virtualizer.spec.ts +++ b/frontend/e2e/virtualizer.spec.ts @@ -150,15 +150,18 @@ test.describe("Virtualizer measurement", () => { ); expect(totalHeight).toBeGreaterThan(0); - // Each row should have a measured (non-estimate) height + // Rows should be measured to actual DOM height. Individual rows + // may coincidentally match the estimate, but not all of them. const rowCount = await rows.count(); + let nonEstimateCount = 0; for (let i = 0; i < rowCount; i++) { const h = await rows.nth(i).evaluate( (el) => el.getBoundingClientRect().height, ); expect(h).toBeGreaterThan(0); - expect(h).not.toBe(ESTIMATE_PX); + if (h !== ESTIMATE_PX) nonEstimateCount++; } + expect(nonEstimateCount).toBeGreaterThan(0); }); test("no gaps between consecutive virtual rows", async ({ diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts index a8e09b35..f170148c 100644 --- a/frontend/playwright.config.ts +++ b/frontend/playwright.config.ts @@ -13,6 +13,10 @@ export default defineConfig({ name: "chromium", use: { browserName: "chromium" }, }, + { + name: "webkit", + use: { browserName: "webkit" }, + }, ], webServer: { command: "bash ../scripts/e2e-server.sh", diff --git a/frontend/src/lib/components/layout/AppHeader.svelte b/frontend/src/lib/components/layout/AppHeader.svelte index fb81c5aa..a02c681a 100644 --- a/frontend/src/lib/components/layout/AppHeader.svelte +++ b/frontend/src/lib/components/layout/AppHeader.svelte @@ -585,7 +585,7 @@ .transcript-strip { display: flex; align-items: stretch; - min-height: 26px; + height: 26px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); margin-right: 4px;