From 9dd38433d6fd29cb578b3db23628fe956efa1808 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Mon, 28 Sep 2026 19:04:27 +0200 Subject: [PATCH] test(e2e): drive the Design panel template-switch now previews a template on hover, applies it from its card, checks it after a reload and undoes a switch from the toast. The section helper opens Design groups and the exact-value sections inside Advanced. --- tests/e2e/fixtures/resume.ts | 18 +++++++++----- tests/e2e/specs/template-switch.spec.ts | 32 ++++++++++++++++++------- 2 files changed, 35 insertions(+), 15 deletions(-) diff --git a/tests/e2e/fixtures/resume.ts b/tests/e2e/fixtures/resume.ts index 8726eddef..2fb498b04 100644 --- a/tests/e2e/fixtures/resume.ts +++ b/tests/e2e/fixtures/resume.ts @@ -21,8 +21,9 @@ export async function createSampleResumeFromDashboard(page: Page, testInfo: Test return resumeName; } -// Sections the Design mode hosts; every other section title lives in Write. -const designSections = new Set(["Template", "Layout", "Typography", "Design", "Page"]); +// Design groups, each under its own heading, and the exact-value sections inside Design → Advanced. +const designGroups = new Set(["Template", "Type", "Color", "Page"]); +const advancedSections = new Set(["Layout", "Typography", "Design", "Custom CSS"]); // Sections the Share & export sheet hosts, without headings of their own. const shareSections = new Set(["Sharing", "Statistics"]); @@ -34,11 +35,16 @@ export async function openSidebarSection(page: Page, title: string) { return; } - if (designSections.has(title)) { + if (designGroups.has(title) || advancedSections.has(title)) { await page.getByRole("tab", { name: "Design", exact: true }).click(); - // The visible section heading is exactly the title. Filter to visible because the screen-reader-only - // resume mirror in the preview also renders

section headings with the same name. - const heading = page.getByRole("heading", { name: title, exact: true }).filter({ visible: true }).first(); + const panel = page.getByRole("tabpanel", { name: "Design" }); + if (advancedSections.has(title)) { + const advanced = panel.locator("#design-advanced"); + if ((await advanced.getAttribute("open")) === null) await advanced.locator("summary").click(); + } + // Groups are level 2; the exact-value sections inside Advanced are level 3 (both have a "Page"). + const level = advancedSections.has(title) ? 3 : 2; + const heading = panel.getByRole("heading", { name: title, exact: true, level }); await heading.scrollIntoViewIfNeeded(); await expect(heading).toBeVisible(); return; diff --git a/tests/e2e/specs/template-switch.spec.ts b/tests/e2e/specs/template-switch.spec.ts index 4c080218e..3d5fef0d6 100644 --- a/tests/e2e/specs/template-switch.spec.ts +++ b/tests/e2e/specs/template-switch.spec.ts @@ -1,14 +1,18 @@ import { createSampleResumeFromDashboard, openSidebarSection } from "../fixtures/resume"; import { expect, test } from "../fixtures/test"; -test("switches the resume template and persists the choice", async ({ authPage: page }, testInfo) => { +test("previews a template on hover, applies it on click and persists the choice", async ({ + authPage: page, +}, testInfo) => { await createSampleResumeFromDashboard(page, testInfo); await openSidebarSection(page, "Template"); - // Sample resumes start on Azurill; its preview button opens the gallery - await page.getByRole("button", { name: "Azurill", exact: true }).click(); - const gallery = page.getByRole("dialog", { name: "Template Gallery" }); - await expect(gallery).toBeVisible(); + // Sample resumes start on Azurill. + await expect(page.getByRole("button", { name: /^Azurill\b/ })).toHaveAttribute("aria-pressed", "true"); + + const bronzor = page.getByRole("button", { name: /^Bronzor\b/ }); + await bronzor.hover(); + await expect(page.getByRole("status").filter({ hasText: "Previewing Bronzor · click to apply" })).toBeVisible(); const savePromise = page.waitForResponse((response) => { if (!response.url().includes("/api/rpc")) return false; @@ -16,12 +20,22 @@ test("switches the resume template and persists the choice", async ({ authPage: if (!response.ok()) return false; return (response.request().postData() ?? "").includes("bronzor"); }); - await gallery.getByRole("img", { name: "Bronzor", exact: true }).click(); + await bronzor.click(); + await expect(page.getByText("Template changed to Bronzor")).toBeVisible(); + await expect(bronzor).toHaveAttribute("aria-pressed", "true"); await savePromise; - await page.keyboard.press("Escape"); - // After a reload the Template section previews the newly selected template + // After a reload the gallery still marks the newly selected template. await page.reload(); await openSidebarSection(page, "Template"); - await expect(page.getByRole("img", { name: "Bronzor", exact: true })).toBeVisible(); + await expect(page.getByRole("button", { name: /^Bronzor\b/ })).toHaveAttribute("aria-pressed", "true"); +}); + +test("undoes a template switch from its toast", async ({ authPage: page }, testInfo) => { + await createSampleResumeFromDashboard(page, testInfo); + await openSidebarSection(page, "Template"); + + await page.getByRole("button", { name: /^Onyx\b/ }).click(); + await page.getByRole("button", { name: "Undo", exact: true }).last().click(); + await expect(page.getByRole("button", { name: /^Azurill\b/ })).toHaveAttribute("aria-pressed", "true"); });