112 lines
6.6 KiB
JavaScript
112 lines
6.6 KiB
JavaScript
// Rôle : vérifie les variantes horizontales compactes et avancées des filtres de jeux.
|
|
import { test, expect } from "@playwright/test";
|
|
|
|
for (const { game, category, width } of [
|
|
{ game: "diablo4/affixes", category: "Catégories", width: 1920 },
|
|
{ game: "diablo4/affixes", category: "Catégories", width: 900 },
|
|
{ game: "diablo4/affixes", category: "Catégories", width: 768 },
|
|
{ game: "aniimo/aniimos", category: "Rôles", width: 1920 }
|
|
]) {
|
|
test(`${game} dropdown receives clicks over active badges at ${width}px`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto(`/#/games/${game}`);
|
|
const filters = page.locator('.nds-filter-panel[data-variant="horizontal-menu"]');
|
|
await filters.getByRole("searchbox").fill("a");
|
|
const badges = filters.locator(".nds-active-filters");
|
|
await expect(badges).toBeVisible();
|
|
await filters.getByRole("button", { name: category, exact: true }).click();
|
|
const menu = page.getByRole("dialog", { name: new RegExp(`^${category}`) });
|
|
const control = category === "Catégories"
|
|
? menu.getByRole("radio", { name: "Ou", exact: true })
|
|
: menu.getByRole("checkbox").first();
|
|
const controlBox = await control.boundingBox();
|
|
const badgesBox = await badges.boundingBox();
|
|
const overlapTop = Math.max(controlBox.y, badgesBox.y);
|
|
const overlapBottom = Math.min(controlBox.y + controlBox.height, badgesBox.y + badgesBox.height);
|
|
expect(overlapBottom).toBeGreaterThan(overlapTop);
|
|
|
|
await control.click({
|
|
position: { x: controlBox.width / 2, y: (overlapTop + overlapBottom) / 2 - controlBox.y },
|
|
timeout: 3000
|
|
});
|
|
if (category === "Catégories") await expect(control).toHaveAttribute("aria-checked", "true");
|
|
else await expect(control).toBeChecked();
|
|
await expect(menu).toBeVisible();
|
|
await page.keyboard.press("Escape");
|
|
await badges.getByRole("button").first().click();
|
|
await expect(filters.getByRole("searchbox")).toHaveValue("");
|
|
});
|
|
}
|
|
|
|
for (const width of [1920, 900]) {
|
|
test(`MHW compact filters keep accessible tooltips at ${width}px`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 900 });
|
|
await page.goto("/#/games/mhwilds/monsters");
|
|
const filters = page.locator('.nds-filter-panel[data-variant="horizontal-compact"]');
|
|
await expect(filters).toBeVisible();
|
|
const options = filters.locator(".nds-filter-option");
|
|
await expect(options).toHaveCount(5);
|
|
const optionWidths = await options.evaluateAll((elements) => elements.map((element) => element.getBoundingClientRect().width));
|
|
if (width > 1040) expect(Math.max(...optionWidths) - Math.min(...optionWidths)).toBeGreaterThan(1);
|
|
else expect(Math.max(...optionWidths) - Math.min(...optionWidths)).toBeLessThan(1);
|
|
const first = options.first();
|
|
await expect(first).toHaveAttribute("aria-label", /.+/);
|
|
await first.hover();
|
|
await expect(page.getByRole("tooltip")).toBeVisible();
|
|
const label = first.locator(".nds-filter-option-label");
|
|
await expect(label).toHaveCSS("position", width <= 1040 ? "absolute" : "static");
|
|
await first.click();
|
|
await expect(first).toHaveAttribute("aria-pressed", "true");
|
|
const activeBadge = page.locator(".nds-active-filter").first();
|
|
await expect(activeBadge).toBeVisible();
|
|
const activeBar = page.locator(".nds-active-filters");
|
|
await expect(activeBar).toHaveCSS("border-top-style", "solid");
|
|
await expect(activeBar).toHaveCSS("border-top-color", "rgba(246, 196, 83, 0.3)");
|
|
await expect(activeBar).toHaveCSS("padding-top", "4px");
|
|
await expect(activeBar).toHaveCSS("margin-bottom", "-6px");
|
|
await expect(activeBar.locator("xpath=..")).toHaveClass(/nds-filter-panel/);
|
|
await expect(activeBar.locator("xpath=..")).toHaveCSS("row-gap", "10px");
|
|
const panelBox = await filters.boundingBox();
|
|
const activeBarBox = await activeBar.boundingBox();
|
|
expect(activeBarBox.x).toBeCloseTo(panelBox.x + 1, 0);
|
|
expect(activeBarBox.x + activeBarBox.width).toBeCloseTo(panelBox.x + panelBox.width - 1, 0);
|
|
expect((await activeBar.boundingBox()).height).toBeLessThanOrEqual(30);
|
|
await activeBadge.click();
|
|
await expect(first).toHaveAttribute("aria-pressed", "false");
|
|
await expect(page.locator(".game-filters")).toHaveCSS("position", width <= 760 ? "static" : "sticky");
|
|
await expect(page.locator(".game-filters")).toHaveCSS("top", width <= 760 ? "auto" : "68px");
|
|
expect((await filters.locator(".nds-filter-search").boundingBox())?.width).toBeLessThanOrEqual(260);
|
|
expect(await page.evaluate(() => globalThis.document.documentElement.scrollWidth <= globalThis.innerWidth)).toBe(true);
|
|
});
|
|
}
|
|
|
|
test("Diablo advanced categories keep text visible and retain focus on Escape", async ({ page }) => {
|
|
await page.goto("/#/games/diablo4/affixes");
|
|
const filters = page.locator('.nds-filter-panel[data-variant="horizontal-menu"]');
|
|
const trigger = filters.getByRole("button", { name: /^Catégories/ });
|
|
await expect(trigger).toHaveAttribute("aria-expanded", "false");
|
|
expect(await trigger.locator("span").first().evaluate((element) => element.scrollWidth <= element.clientWidth)).toBe(true);
|
|
await trigger.click();
|
|
const menu = page.getByRole("dialog", { name: /^Catégories/ });
|
|
await expect(menu).toBeVisible();
|
|
await expect(menu.getByText("Correspondance", { exact: true })).toBeVisible();
|
|
await expect(menu.getByRole("radio", { name: "Et", exact: true })).toHaveAttribute("aria-checked", "true");
|
|
await expect(filters.locator(":scope > .nds-filter-group > .nds-filter-logic")).toHaveCount(0);
|
|
await expect(menu.locator(".nds-filter-logic")).toHaveCSS("margin-bottom", "12px");
|
|
await expect(menu.locator(".nds-filter-menu-options")).toHaveCSS("overflow-y", "visible");
|
|
await expect(filters).toHaveCSS("overflow", "visible");
|
|
const filtersBox = await filters.boundingBox();
|
|
const menuBox = await menu.boundingBox();
|
|
expect(filtersBox).not.toBeNull();
|
|
expect(menuBox).not.toBeNull();
|
|
expect(menuBox.y + menuBox.height).toBeGreaterThan(filtersBox.y + filtersBox.height);
|
|
await expect(menu.getByRole("checkbox")).toHaveCount(8);
|
|
await expect(menu.getByText("Offensif", { exact: true })).toBeVisible();
|
|
await expect(menu.getByText("Mobilité", { exact: true })).toBeVisible();
|
|
await menu.getByRole("checkbox", { name: "Offensif", exact: true }).check();
|
|
await expect(trigger.locator(".nds-filter-count")).toHaveText("1");
|
|
await expect(page.getByRole("button", { name: "Retirer le filtre Catégories : Offensif", exact: true })).toBeVisible();
|
|
await page.keyboard.press("Escape");
|
|
await expect(trigger).toHaveAttribute("aria-expanded", "false");
|
|
await expect(trigger).toBeFocused();
|
|
});
|