Move guide checklist controls into a collapsible header toggle
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
This commit is contained in:
parent
ef0c592c11
commit
14f1b79cbc
12 changed files with 144 additions and 89 deletions
|
|
@ -7,8 +7,11 @@ import { normalizeChecklistData } from "../website/src/features/toolboxes/storag
|
|||
|
||||
const route = "/#/games/aniimo/aniimos";
|
||||
const sessionKey = "sokkog:guide-checklists";
|
||||
const selector = (page) => page.getByRole("combobox", { name: "Checklist associée", exact: true });
|
||||
const hiddenSwitch = (page) => page.getByRole("button", { name: "Masquer les cochés", exact: true });
|
||||
const controls = (page, id) => page.locator('[data-module-type="checklist"]').filter({ has: page.getByRole("button", { name: `Retirer ${id}`, exact: true }) }).locator(".guide-checklist-controls");
|
||||
const controlsToggle = (page, id) => page.getByRole("button", { name: `Lien avec le guide — ${id}`, exact: true });
|
||||
const linkButton = (page, id) => controls(page, id).locator(".guide-checklist-link");
|
||||
const activeButtons = (page) => page.locator('.guide-checklist-link[aria-pressed="true"]');
|
||||
const hiddenSwitch = (page) => page.locator('.guide-checklist-controls[data-linked="true"]').getByRole("button", { name: "Masquer les cochés", exact: true });
|
||||
const json = (path) => JSON.parse(readFileSync(`website/public/data/${path}`, "utf8"));
|
||||
const row = (label, qtyCurrent = 0) => ({ id: label, label, qtyCurrent });
|
||||
|
||||
|
|
@ -64,19 +67,30 @@ async function openDrawer(page) {
|
|||
async function closeDrawer(page) {
|
||||
await page.locator("#toolbox-drawer").getByRole("button", { name: "Fermer", exact: true }).click();
|
||||
}
|
||||
async function openControls(page, id) {
|
||||
const toggle = id ? controlsToggle(page, id) : page.locator('.module-guide-button[data-linked="true"]');
|
||||
await expect(toggle).toBeVisible();
|
||||
if (await toggle.getAttribute("aria-expanded") === "false") await toggle.click();
|
||||
}
|
||||
async function choose(page, id) {
|
||||
await openDrawer(page);
|
||||
await selector(page).selectOption(id);
|
||||
await openControls(page, id);
|
||||
await linkButton(page, id).click();
|
||||
await expect(linkButton(page, id)).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(activeButtons(page)).toHaveCount(1);
|
||||
await closeDrawer(page);
|
||||
}
|
||||
async function toggleHidden(page) {
|
||||
await openDrawer(page);
|
||||
await openControls(page);
|
||||
await hiddenSwitch(page).click();
|
||||
await closeDrawer(page);
|
||||
}
|
||||
async function assertLink(page, id, hidden) {
|
||||
await openDrawer(page);
|
||||
await expect(selector(page)).toHaveValue(id);
|
||||
await expect(activeButtons(page)).toHaveCount(id ? 1 : 0);
|
||||
if (id) await openControls(page, id);
|
||||
if (id) await expect(linkButton(page, id)).toHaveAttribute("aria-pressed", "true");
|
||||
if (id) await expect(hiddenSwitch(page)).toHaveAttribute("aria-pressed", String(hidden));
|
||||
else await expect(hiddenSwitch(page)).toHaveCount(0);
|
||||
await closeDrawer(page);
|
||||
|
|
@ -118,14 +132,35 @@ for (const width of [1280, 390]) {
|
|||
await page.getByRole("searchbox").fill("emberpup");
|
||||
const card = page.locator(".aniimo-result");
|
||||
await openDrawer(page);
|
||||
await expect(selector(page)).toHaveValue("");
|
||||
await expect(selector(page).locator("option")).toHaveCount(4);
|
||||
await expect(activeButtons(page)).toHaveCount(0);
|
||||
await expect(page.locator(".guide-checklist-controls")).toHaveCount(3);
|
||||
await expect(page.locator(".guide-checklist-controls select")).toHaveCount(0);
|
||||
await expect(controls(page, "unrelated")).toHaveCount(0);
|
||||
await expect(controlsToggle(page, "unrelated")).toHaveCount(0);
|
||||
await expect(controls(page, "capture")).toBeHidden();
|
||||
await openControls(page, "capture");
|
||||
await expect(controls(page, "capture").getByRole("button", { name: "Masquer les cochés" })).toBeDisabled();
|
||||
const before = await readModule(page, "forms");
|
||||
await selector(page).selectOption("forms");
|
||||
const panel = page.locator(".guide-checklist-controls");
|
||||
const heading = controlsToggle(page, "forms");
|
||||
await expect(heading).toHaveAttribute("aria-expanded", "false");
|
||||
expect(await heading.evaluate((button) => button.previousElementSibling.classList.contains("module-edit-button"))).toBe(true);
|
||||
await heading.press("Enter");
|
||||
await expect(heading).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(controls(page, "forms")).toHaveAttribute("id", await heading.getAttribute("aria-controls"));
|
||||
await linkButton(page, "forms").press("Enter");
|
||||
await expect(linkButton(page, "forms")).toHaveAttribute("aria-pressed", "true");
|
||||
const panel = controls(page, "forms");
|
||||
await heading.press("Space");
|
||||
await expect(heading).toHaveAttribute("aria-expanded", "false");
|
||||
await expect(heading).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(heading).toHaveAttribute("data-linked", "true");
|
||||
await expect(linkButton(page, "forms")).toBeHidden();
|
||||
await expect(card).toHaveAttribute("data-checklist-complete", "true");
|
||||
await heading.press("Enter");
|
||||
await expect(linkButton(page, "forms")).toBeVisible();
|
||||
const bounds = await panel.boundingBox();
|
||||
const selectBounds = await selector(page).boundingBox();
|
||||
expect(selectBounds.x + selectBounds.width / 2).toBeCloseTo(bounds.x + bounds.width / 2, 0);
|
||||
const actionsBounds = await panel.locator(".guide-checklist-actions").boundingBox();
|
||||
expect(actionsBounds.x + actionsBounds.width / 2).toBeCloseTo(bounds.x + bounds.width / 2, 0);
|
||||
await page.screenshot({ path: test.info().outputPath("linked-drawer.png") });
|
||||
await closeDrawer(page);
|
||||
await expect(card).toHaveAttribute("data-checklist-complete", "true");
|
||||
|
|
@ -146,14 +181,17 @@ for (const width of [1280, 390]) {
|
|||
await page.getByRole("searchbox").fill("emberpup");
|
||||
await expect(card).toHaveCount(0);
|
||||
await openDrawer(page);
|
||||
await openControls(page, "capture");
|
||||
await hiddenSwitch(page).press("Space");
|
||||
await closeDrawer(page);
|
||||
await expect(card).toHaveAttribute("data-checklist-complete", "true");
|
||||
await page.getByRole("button", { name: "Réinitialiser les filtres", exact: true }).click();
|
||||
await openDrawer(page);
|
||||
await expect(selector(page)).toHaveValue("capture");
|
||||
await page.getByRole("button", { name: "Dissocier", exact: true }).click();
|
||||
await expect(selector(page)).toHaveValue("");
|
||||
await openControls(page, "capture");
|
||||
await expect(linkButton(page, "capture")).toHaveAttribute("aria-pressed", "true");
|
||||
await linkButton(page, "capture").click();
|
||||
await expect(linkButton(page, "capture")).toHaveAttribute("aria-pressed", "false");
|
||||
await expect(activeButtons(page)).toHaveCount(0);
|
||||
await expect(hiddenSwitch(page)).toHaveCount(0);
|
||||
await closeDrawer(page);
|
||||
await expect(page.locator('[data-checklist-complete="true"]')).toHaveCount(0);
|
||||
|
|
@ -192,17 +230,18 @@ test("renames retain a zero-match selection; changing toolbox clears the associa
|
|||
await choose(page, "capture");
|
||||
const drawer = await openDrawer(page);
|
||||
const checklist = drawer.locator('[data-module-type="checklist"]').filter({ has: page.getByRole("button", { name: "Retirer capture", exact: true }) });
|
||||
await openControls(page, "capture");
|
||||
await checklist.getByRole("button", { name: "Modifier Loufeuteau", exact: true }).click();
|
||||
await checklist.getByRole("textbox", { name: "Libellé", exact: true }).fill("Unrelated now");
|
||||
await checklist.getByRole("textbox", { name: "Libellé", exact: true }).press("Enter");
|
||||
await expect(selector(page)).toHaveValue("capture");
|
||||
await expect(linkButton(page, "capture")).toHaveAttribute("aria-pressed", "true");
|
||||
await expect(page.getByText("Cette checklist ne contient plus de correspondance avec le guide.")).toBeVisible();
|
||||
await drawer.getByRole("button", { name: "Lier une toolbox", exact: true }).click();
|
||||
const dialog = page.getByRole("dialog", { name: "Lier une toolbox" });
|
||||
await dialog.getByRole("combobox").selectOption("other");
|
||||
await dialog.getByRole("button", { name: "Valider", exact: true }).click();
|
||||
await expect(selector(page)).toHaveValue("");
|
||||
await expect(selector(page).locator("option")).toHaveCount(2);
|
||||
await expect(activeButtons(page)).toHaveCount(0);
|
||||
await expect(page.locator(".guide-checklist-controls")).toHaveCount(1);
|
||||
expect(await page.evaluate((key) => globalThis.sessionStorage.getItem(key), sessionKey)).toBeNull();
|
||||
});
|
||||
|
||||
|
|
@ -214,7 +253,7 @@ test("deleting a selected checklist clears its link immediately", async ({ page
|
|||
const drawer = await openDrawer(page);
|
||||
await drawer.getByRole("button", { name: "Retirer capture", exact: true }).click();
|
||||
await page.getByRole("dialog").getByRole("button", { name: "Retirer", exact: true }).click();
|
||||
await expect(selector(page)).toHaveValue("");
|
||||
await expect(activeButtons(page)).toHaveCount(0);
|
||||
await expect(hiddenSwitch(page)).toHaveCount(0);
|
||||
await page.reload();
|
||||
await assertLink(page, "", false);
|
||||
|
|
@ -240,6 +279,10 @@ test("unavailable session storage retains links across navigation; overview has
|
|||
await openDrawer(page);
|
||||
await expect(page.locator(".guide-checklist-controls")).toHaveCount(0);
|
||||
await closeDrawer(page);
|
||||
await page.goto("/#/toolbox/guide");
|
||||
await expect(page.locator('[data-module-type="checklist"]')).toHaveCount(4);
|
||||
await expect(page.locator(".guide-checklist-controls")).toHaveCount(0);
|
||||
await expect(page.locator(".module-guide-button")).toHaveCount(0);
|
||||
await page.goto(route);
|
||||
await assertLink(page, "perfect", true);
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue