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

Improve calculator progress tracking and responsive layout
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-29 11:19:11 +02:00
parent 3f86d863ac
commit 51853245ad
15 changed files with 329 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

43
e2e/calculator.spec.js
View file

@ -54,6 +54,49 @@ test("parent edits recalculate descendants and survive reload; deleting a parent
await expect(tool.getByText("Aucun résultat enregistré.", { exact: true })).toBeVisible();
});
test("current values are subtracted from totals and kept during recalculation", async ({ page }) => {
const tool = await setup(page);
const expression = tool.getByRole("textbox", { name: "Calcul", exact: true });
const current = tool.getByLabel("Actuel", { exact: true });
const totalLabel = tool.getByText("Total", { exact: true });
await expect(current).toHaveCount(0);
await expect(totalLabel).toHaveCount(0);
const subtractCurrent = tool.getByRole("button", { name: "Soustraire l'actuel", exact: true });
await expect(subtractCurrent).toHaveAttribute("aria-pressed", "false");
await subtractCurrent.click();
await expect(subtractCurrent).toHaveAttribute("aria-pressed", "true");
await expect(current).toBeFocused();
await expect(totalLabel).toBeVisible();
const expressionBounds = await expression.boundingBox();
const currentBounds = await current.boundingBox();
expect(currentBounds.x).toBeCloseTo(expressionBounds.x, 0);
expect(currentBounds.width).toBeCloseTo(expressionBounds.width, 0);
await expression.fill("10");
await current.fill("2");
await tool.getByLabel("Libellé", { exact: true }).fill("Parent");
await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "8");
await tool.getByRole("button", { name: "Enregistrer", exact: true }).click();
await tool.getByRole("button", { name: "Ajouter un calcul enfant Parent", exact: true }).click();
await expression.fill("base * 10");
await subtractCurrent.click();
await current.fill("20");
await tool.getByLabel("Libellé", { exact: true }).fill("Child");
await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "60");
await tool.getByRole("button", { name: "Mettre à jour", exact: true }).click();
await entry(tool, "Parent").getByTitle("Modifier", { exact: true }).click();
await expect(current).toHaveValue("2");
await expression.fill("20");
await tool.getByRole("button", { name: "Mettre à jour", exact: true }).click();
await expect(entry(tool, "Child").locator("strong")).toHaveAttribute("aria-label", "160");
await page.reload();
await entry(tool, "Child").getByTitle("Modifier", { exact: true }).click();
await expect(current).toHaveValue("20");
await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "160");
await subtractCurrent.click();
await expect(current).toHaveCount(0);
await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "180");
});
test("reset clears only the draft, new calculation returns to root, and clipboard and scroll preferences persist", async ({ page, context }) => {
await context.grantPermissions(["clipboard-read", "clipboard-write"]);
const tool = await setup(page);

22
e2e/style-layouts.spec.js
View file

@ -7,6 +7,24 @@ async function columns(locator, count) {
await expect.poll(async () => (await computed(locator, "grid-template-columns")).split(" ").length).toBe(count);
}
test("calculator layout follows the tool width rather than its location", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 900 });
await mountStyles(page, `<article class="module" data-module-type="calculator" style="width: 900px"><div class="calculator-module"><form class="calculator-form"><div class="calculator-card"><div class="calculator-field">Formula</div><div class="calculator-current-field">Current</div><div class="calculator-result">Result</div><label class="calculator-label-field">Label</label><button class="calculator-save-button">Save</button></div></form><div>Entries</div></div></article>`);
const tool = page.locator('[data-module-type="calculator"]');
const calculator = tool.locator(".calculator-module");
const card = tool.locator(".calculator-card");
await expect(tool).toHaveCSS("container-type", "inline-size");
await columns(calculator, 2);
await columns(card, 1);
await tool.evaluate((element) => { element.style.width = "700px"; });
await columns(calculator, 1);
await columns(card, 2);
await expect(tool.locator(".calculator-field")).toHaveCSS("grid-column-start", "1");
await expect(tool.locator(".calculator-result")).toHaveCSS("grid-column-start", "2");
await tool.evaluate((element) => { element.style.width = "480px"; });
await columns(card, 1);
});
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 });
@ -66,7 +84,7 @@ for (const width of [1280, 390]) {
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>
<article class="module layout-calculator" data-module-type="calculator"><div class="calculator-module"><div>Formula</div><div class="calculator-result"><strong>12</strong></div></div></article>
<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>
@ -75,7 +93,7 @@ for (const width of [1280, 390]) {
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 columns(page.locator(".layout-calculator .calculator-module"), width <= 820 ? 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);