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

Refine the calculator result 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 15:18:35 +02:00
parent 51853245ad
commit 0959c6740b
5 changed files with 61 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

4
e2e/calculator.spec.js
View file

@ -67,6 +67,9 @@ test("current values are subtracted from totals and kept during recalculation",
await expect(subtractCurrent).toHaveAttribute("aria-pressed", "true");
await expect(current).toBeFocused();
await expect(totalLabel).toBeVisible();
await expect(tool.locator(".calculator-result-field")).toHaveClass(/has-current/);
await expect(tool.locator(".calculator-result").getByText("Résultat", { exact: true })).toHaveCount(0);
await expect(tool.locator(".calculator-result-field > span")).toHaveText("Résultat");
const expressionBounds = await expression.boundingBox();
const currentBounds = await current.boundingBox();
expect(currentBounds.x).toBeCloseTo(expressionBounds.x, 0);
@ -94,6 +97,7 @@ test("current values are subtracted from totals and kept during recalculation",
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-field")).not.toHaveClass(/has-current/);
await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "180");
});

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

@ -9,7 +9,7 @@ async function columns(locator, 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>`);
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-field"><span>Result</span><div class="calculator-result"><strong>12</strong></div></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");
@ -20,9 +20,19 @@ test("calculator layout follows the tool width rather than its location", async
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 expect(tool.locator(".calculator-result-field")).toHaveCSS("grid-column-start", "2");
await expect(tool.locator(".calculator-result")).toHaveCSS("height", "36px");
await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "36px");
const resultValue = tool.locator(".calculator-result strong");
const compactResultFontSize = Number.parseFloat(await computed(resultValue, "font-size"));
await expect(tool.locator(".calculator-result")).toHaveCSS("padding-top", "7px");
await tool.locator(".calculator-result-field").evaluate((element) => { element.classList.add("has-current"); });
await expect.poll(async () => Number.parseFloat(await computed(tool.locator(".calculator-result"), "height"))).toBeGreaterThan(36);
await expect.poll(async () => Number.parseFloat(await computed(resultValue, "font-size"))).toBeGreaterThan(compactResultFontSize);
await expect(tool.locator(".calculator-result")).toHaveCSS("padding-top", "12px");
await tool.evaluate((element) => { element.style.width = "480px"; });
await columns(card, 1);
await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "72px");
});
for (const width of [1280, 900, 390]) {