112 lines
3.8 KiB
TypeScript
112 lines
3.8 KiB
TypeScript
import { test, expect, type Page, type Locator } from "@playwright/test";
|
|
import { start, stop, baseUrl } from "./evcc";
|
|
import { expectModalVisible, expectModalHidden, openMoreMenu, dragElement } from "./utils";
|
|
|
|
const CONFIG_LOADPOINT_SORT = "loadpoint-sort.evcc.yaml";
|
|
|
|
test.use({ baseURL: baseUrl() });
|
|
test.describe.configure({ mode: "parallel" });
|
|
|
|
test.beforeAll(async () => {
|
|
await start(CONFIG_LOADPOINT_SORT);
|
|
});
|
|
|
|
test.afterAll(async () => {
|
|
await stop();
|
|
});
|
|
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto("/");
|
|
});
|
|
|
|
async function openModal(page: Page) {
|
|
const menu = await openMoreMenu(page);
|
|
await menu.getByRole("button", { name: "User Interface" }).click();
|
|
const modal = page.getByTestId("global-settings-modal");
|
|
await expectModalVisible(modal);
|
|
return modal;
|
|
}
|
|
|
|
async function closeModal(modal: Locator) {
|
|
await modal.getByRole("button", { name: "Close" }).click();
|
|
await expectModalHidden(modal);
|
|
}
|
|
|
|
test.describe("loadpoint ordering and hiding", async () => {
|
|
test("initial loadpoint order", async ({ page }) => {
|
|
await expect(page.getByTestId("loadpoint")).toHaveCount(3);
|
|
|
|
const loadpoints = page.getByTestId("loadpoint");
|
|
await expect(loadpoints.nth(0)).toContainText("First Loadpoint");
|
|
await expect(loadpoints.nth(1)).toContainText("Second Loadpoint");
|
|
await expect(loadpoints.nth(2)).toContainText("Third Loadpoint");
|
|
});
|
|
|
|
test("hide a loadpoint", async ({ page }) => {
|
|
const modal = await openModal(page);
|
|
|
|
await modal.getByRole("switch", { name: "Hide Second Loadpoint" }).click();
|
|
|
|
await closeModal(modal);
|
|
|
|
await expect(page.getByTestId("loadpoint")).toHaveCount(2);
|
|
await expect(page.getByRole("heading", { name: "Second Loadpoint" })).not.toBeVisible();
|
|
});
|
|
|
|
test("reorder loadpoints", async ({ page }) => {
|
|
const modal = await openModal(page);
|
|
|
|
const firstLoadpointDragItem = modal.getByRole("listitem", {
|
|
name: "Draggable: First Loadpoint",
|
|
});
|
|
const thirdLoadpointDragItem = modal.getByRole("listitem", {
|
|
name: "Draggable: Third Loadpoint",
|
|
});
|
|
|
|
await dragElement(page, firstLoadpointDragItem, thirdLoadpointDragItem);
|
|
|
|
await closeModal(modal);
|
|
|
|
await expect(page.getByTestId("loadpoint")).toHaveCount(3);
|
|
const reorderedLoadpoints = page.getByTestId("loadpoint");
|
|
await expect(reorderedLoadpoints.nth(0)).toContainText("Second Loadpoint");
|
|
await expect(reorderedLoadpoints.nth(1)).toContainText("Third Loadpoint");
|
|
await expect(reorderedLoadpoints.nth(2)).toContainText("First Loadpoint");
|
|
});
|
|
|
|
test("reset to initial state", async ({ page }) => {
|
|
const modal = await openModal(page);
|
|
|
|
await modal.getByRole("switch", { name: "Hide Second Loadpoint" }).click();
|
|
|
|
const firstLoadpointDragItem = modal.getByRole("listitem", {
|
|
name: "Draggable: First Loadpoint",
|
|
});
|
|
const thirdLoadpointDragItem = modal.getByRole("listitem", {
|
|
name: "Draggable: Third Loadpoint",
|
|
});
|
|
|
|
await dragElement(page, firstLoadpointDragItem, thirdLoadpointDragItem);
|
|
|
|
await modal.getByRole("button", { name: "Reset" }).click();
|
|
|
|
await closeModal(modal);
|
|
|
|
await expect(page.getByTestId("loadpoint")).toHaveCount(3);
|
|
const loadpoints = page.getByTestId("loadpoint");
|
|
await expect(loadpoints.nth(0)).toContainText("First Loadpoint");
|
|
await expect(loadpoints.nth(1)).toContainText("Second Loadpoint");
|
|
await expect(loadpoints.nth(2)).toContainText("Third Loadpoint");
|
|
});
|
|
|
|
test("persist changes after page reload", async ({ page }) => {
|
|
const modal = await openModal(page);
|
|
|
|
await modal.getByRole("switch", { name: "Hide Second Loadpoint" }).click();
|
|
await closeModal(modal);
|
|
|
|
await page.reload();
|
|
await expect(page.getByTestId("loadpoint")).toHaveCount(2);
|
|
await expect(page.getByRole("heading", { name: "Second Loadpoint" })).not.toBeVisible();
|
|
});
|
|
});
|