79 lines
4.2 KiB
JavaScript
79 lines
4.2 KiB
JavaScript
// Rôle : vérifie les ordres indépendants une/deux colonnes et leur persistance après déplacement réel.
|
|
import { test, expect } from "@playwright/test";
|
|
import { resetSokkoStorage } from "./helpers/storage.js";
|
|
|
|
async function setup(page, columns) {
|
|
await resetSokkoStorage(page);
|
|
await page.evaluate(async (columns) => {
|
|
const db = await import("/src/utils/indexedDbStorage.js");
|
|
await db.setToolboxSnapshot([{
|
|
id: "order", name: "Ordering", moduleColumns: columns,
|
|
modules: ["a", "b", "c", "d"].map((id) => ({ id, type: "counters", title: id.toUpperCase() })),
|
|
moduleOrder: { one: ["a", "b", "c", "d"], two: [["a", "b"], ["c", "d"]] }
|
|
}], {}, {});
|
|
}, columns);
|
|
await page.goto("/#/toolbox/order");
|
|
await page.reload();
|
|
await expect(page.locator("article.module")).toHaveCount(4);
|
|
}
|
|
|
|
async function savedOrder(page) {
|
|
return page.evaluate(async () => {
|
|
const db = await import("/src/utils/indexedDbStorage.js");
|
|
return (await db.getToolboxes())[0].moduleOrder;
|
|
});
|
|
}
|
|
|
|
async function drag(page, title, target, after = false) {
|
|
await page.getByRole("button", { name: `Déplacer ${title}`, exact: true }).hover();
|
|
await page.mouse.down();
|
|
await expect(page.locator("article.module.is-dragging")).toHaveCount(1);
|
|
await target.scrollIntoViewIfNeeded();
|
|
const box = await target.boundingBox();
|
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height * (after ? 0.8 : 0.2), { steps: 5 });
|
|
await page.mouse.up();
|
|
await expect(page.locator("article.module.is-dragging")).toHaveCount(0);
|
|
}
|
|
|
|
test("one-column ordering survives reload without changing the two-column order", async ({ page }) => {
|
|
await setup(page, 1);
|
|
await drag(page, "C", page.locator('article[data-reorder-item-id="a"]'));
|
|
const expected = { one: ["c", "a", "b", "d"], two: [["a", "b"], ["c", "d"]] };
|
|
await expect.poll(() => savedOrder(page)).toEqual(expected);
|
|
await page.reload();
|
|
await expect(page.locator(".module-title")).toHaveText(["C", "A", "B", "D"]);
|
|
await page.getByRole("button", { name: "Afficher en colonnes", exact: true }).click();
|
|
await expect(page.locator(".module-column").first().locator(".module-title")).toHaveText(["A", "B"]);
|
|
await expect(page.locator(".module-column").last().locator(".module-title")).toHaveText(["C", "D"]);
|
|
});
|
|
|
|
test("cross-column drops and empty column boundaries preserve every module and the one-column order", async ({ page }) => {
|
|
await setup(page, 2);
|
|
const columns = page.locator(".module-column");
|
|
await drag(page, "A", page.locator('article[data-reorder-item-id="d"]'), true);
|
|
await expect.poll(() => savedOrder(page)).toEqual({ one: ["a", "b", "c", "d"], two: [["b"], ["c", "d", "a"]] });
|
|
await drag(page, "B", columns.last().locator(".module-column-boundary-drop-zone").last(), true);
|
|
await expect.poll(() => savedOrder(page)).toEqual({ one: ["a", "b", "c", "d"], two: [[], ["c", "d", "a", "b"]] });
|
|
await drag(page, "A", columns.first().locator(".module-column-boundary-drop-zone").first());
|
|
const expected = { one: ["a", "b", "c", "d"], two: [["a"], ["c", "d", "b"]] };
|
|
await expect.poll(() => savedOrder(page)).toEqual(expected);
|
|
await page.reload();
|
|
await expect(columns.first().locator(".module-title")).toHaveText(["A"]);
|
|
await expect(columns.last().locator(".module-title")).toHaveText(["C", "D", "B"]);
|
|
await page.getByRole("button", { name: "Afficher en lignes", exact: true }).click();
|
|
await expect(page.locator(".module-title")).toHaveText(["A", "B", "C", "D"]);
|
|
});
|
|
|
|
test("adding an off-screen tool scrolls it into view", async ({ page }) => {
|
|
await page.setViewportSize({ width: 900, height: 420 });
|
|
await setup(page, 1);
|
|
await page.getByRole("button", { name: "Afficher l'ajout rapide", exact: true }).click();
|
|
await page.getByRole("button", { name: "Ajouter Compteurs", exact: true }).click();
|
|
const added = page.locator('article[data-module-type="counters"]').last();
|
|
await expect(page.locator("article.module")).toHaveCount(5);
|
|
await expect.poll(async () => added.evaluate((element) => {
|
|
const rect = element.getBoundingClientRect();
|
|
return rect.top >= 0 && rect.top < globalThis.window.innerHeight && rect.bottom > 0;
|
|
})).toBe(true);
|
|
expect(await page.evaluate(() => globalThis.window.scrollY)).toBeGreaterThan(0);
|
|
});
|