shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add responsive game filters and hybrid toolbox drawer
All checks were successful
Deploy Sokko G / deploy (push) Successful in 20s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-27 18:00:49 +02:00
parent 1ee460b94f
commit 00e73f0062
32 changed files with 1202 additions and 241 deletions
Download patch file Download diff file Expand all files Collapse all files

75
e2e/game-filters.spec.js Normal file
View file

@ -0,0 +1,75 @@
// 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();
});