75 lines
4.8 KiB
JavaScript
75 lines
4.8 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 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(280);
|
|
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();
|
|
});
|