Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-10-05 11:13:52 +10:00
Code Issues Packages Projects Releases Wiki Activity

test(e2e): drive the Design panel

Browse Source 
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.
This commit is contained in:
Amruth Pillai
2026-09-28 19:04:27 +02:00
parent 1ef7c9fa10
commit 9dd38433d6
2 changed files with 35 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/fixtures/resume.ts
+12 -6
View File
@@ -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 <h2> 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;
tests/e2e/specs/template-switch.spec.ts
+23 -9
View File
@@ -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");
});