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

Cover remaining Sass families and fix autocomplete hover
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-14 13:58:40 +02:00
parent 77f357e056
commit e52d6e66eb
13 changed files with 617 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

95
e2e/style-layouts.spec.js Normal file
View file

@ -0,0 +1,95 @@
// Rôle : vérifie les layouts responsive réels et les contraintes de placement compilées.
import { test, expect } from "@playwright/test";
import { mountStyles, computed, expectFits } from "./fixtures/compiled-styles.js";
async function columns(locator, count) {
await expect(locator).toHaveCSS("display", "grid");
await expect.poll(async () => (await computed(locator, "grid-template-columns")).split(" ").length).toBe(count);
}
for (const width of [1280, 900, 390]) {
test(`home, about and library retain their responsive layout at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await page.goto("/");
const onboarding = page.locator(".home-onboarding");
await expectFits(onboarding);
await columns(page.locator(".home-onboarding-layout"), width <= 760 ? 1 : 2);
await expect(page.locator(".home-onboarding-slider figcaption")).toHaveCSS("position", "absolute");
await expect(page.locator(".home-onboarding-dots")).toHaveCSS("display", "flex");
await expect(page.locator(".home-onboarding-slider img")).toHaveCSS("object-fit", "cover");
const side = page.locator(".sidebar");
await expect(side).toHaveCSS("display", width <= 760 ? "none" : "flex");
await expect(page.locator(".sidebar-mascot")).toHaveCSS("display", width <= 1024 ? "none" : "block");
for (const link of await page.locator(".sidebar-about-link").all()) {
await expect(link).toHaveCSS("align-items", "center");
if (width <= 1024) await expect(link).toHaveCSS("justify-content", "center");
}
await page.goto("/#/about");
await expectFits(page.locator(".about-page"));
await expect(page.locator(".about-story-section")).toHaveCSS("display", "grid");
await columns(page.locator(".about-tools-list"), width <= 760 ? 1 : 2);
await expect(page.locator(".about-tool-item .module-icon").first()).toHaveCSS("width", "34px");
await page.goto("/#/library");
await expectFits(page.locator(".library-page"));
await columns(page.locator(".library-doc-layout"), width <= 760 ? 1 : 2);
expect(await page.locator("body").evaluate((element) => element.scrollWidth)).toBeLessThanOrEqual(width);
});
}
for (const width of [1280, 390]) {
test(`game grids and toolbox columns adapt without horizontal overflow at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await mountStyles(page, `<main>
<div class="game-layout"><aside class="game-filters"><div class="filter-panel nds-filter-panel">Filter</div></aside><div class="game-grid"><article>Game</article><article>Game</article></div></div>
<div class="modules" data-layout-cols="2"><div class="module-column"><article class="module">A</article></div><div class="module-column"><article class="module">B</article></div></div>
<div class="calculator-module"><div>Formula</div><div class="calculator-result"><strong>12</strong></div></div>
<div class="task-planner-module"><div class="task-planner-settings"><label>Reset</label><label>Time</label></div></div>
<div class="equipment-planner-summary"><div class="equipment-planner-summary-source-grid"><div>Equipment</div><div>Materials</div></div></div>
<div class="toolbox-actions-row"><div>Actions</div><div>Preferences</div></div>
</main>`);
await columns(page.locator(".game-layout"), width <= 760 ? 1 : 2);
await expect(page.locator(".game-grid")).toHaveCSS("display", "grid");
await columns(page.locator(".modules"), width <= 760 ? 1 : 2);
await expect(page.locator(".module-column").first()).toHaveCSS("display", width <= 760 ? "contents" : "grid");
await columns(page.locator(".calculator-module"), width <= 760 ? 1 : 2);
await expect(page.locator(".calculator-result")).toHaveCSS("min-height", "72px");
await expect(page.locator(".task-planner-module")).toHaveCSS("display", "grid");
await columns(page.locator(".task-planner-settings"), width <= 760 ? 1 : 2);
await expect(page.locator(".equipment-planner-summary")).toHaveCSS("padding", "12px");
await columns(page.locator(".equipment-planner-summary-source-grid"), width <= 760 ? 1 : 2);
await page.locator(".equipment-planner-summary-source-grid").evaluate((element) => element.classList.add("columns-1"));
await columns(page.locator(".equipment-planner-summary-source-grid"), 1);
await expect(page.locator(".toolbox-actions-row")).toHaveCSS("flex-direction", width <= 760 ? "column" : "row");
await page.locator(".modules").evaluate((element) => { element.dataset.layoutCols = "1"; });
await columns(page.locator(".modules"), 1);
await expectFits(page.locator("main"));
});
test(`cover crop and icon picker respect image geometry at ${width}px`, async ({ page }) => {
await page.setViewportSize({ width, height: 900 });
await mountStyles(page, `<main>
<section class="toolbox-cover-editor"><div class="toolbox-cover-crop-frame"></div></section>
<div class="toolbox-icon-picker"><button class="toolbox-icon-picker-button"><img alt="Icon"></button>
<div class="toolbox-icon-picker-menu"><button>A</button><button class="toolbox-cover-menu-action nds-button">Cover</button></div></div>
<div class="toolbox-game-icon"><img alt="Game"></div><a class="toolbox-hero-link">Game page</a>
<p class="dialogue-line"><i>Aside</i></p>
</main>`);
const frame = page.locator(".toolbox-cover-crop-frame");
await expectFits(frame);
const bounds = await frame.boundingBox();
expect(bounds.width / bounds.height).toBeCloseTo(620 / 248, 2);
await expect(frame).toHaveCSS("touch-action", "none");
await expect(frame).toHaveCSS("overflow", "hidden");
const icon = page.locator(".toolbox-icon-picker-button");
await expect(icon.locator("img")).toHaveCSS("object-fit", "contain");
await expect(icon.locator("img")).toHaveCSS("width", "72px");
expect(await computed(icon.locator("img"), "border-radius")).toBe(await computed(icon, "border-radius"));
await icon.evaluate((element) => element.classList.add("has-custom-cover"));
await expect(icon.locator("img")).toHaveCSS("object-fit", "cover");
await expect(page.locator(".toolbox-game-icon img")).toHaveCSS("object-fit", "cover");
await expect(page.locator(".toolbox-cover-menu-action")).toHaveCSS("grid-column", "1 / -1");
await expect(page.locator(".toolbox-icon-picker-menu")).toHaveCSS("position", "absolute");
await expect(page.locator(".toolbox-hero-link")).toHaveCSS("display", "flex");
await expect(page.locator(".dialogue-line i")).toHaveCSS("font-style", "italic");
});
}