105 lines
4.1 KiB
TypeScript
105 lines
4.1 KiB
TypeScript
import { test, expect } from "@playwright/test";
|
||
import { highlightAndExpectVisible } from "@playwright/utils/highlight";
|
||
|
||
/**
|
||
* ISO Modal UI / Behavior Regression Test
|
||
* Covers:
|
||
* - Opening ISO modal from cable monitoring page
|
||
* - Verifies modal structure (header, fullscreen + close buttons)
|
||
* - Dropdown (Messkurve <-> Meldungen) presence & options
|
||
* - Toolbar elements (KÜ badge, DateRangePicker fields, Mode dropdown, Daten laden button)
|
||
* - Style smoke checks via class attributes (non brittle, only key tokens)
|
||
* - Switching to Meldungen hides date + mode controls and shows table headers
|
||
*/
|
||
test.describe("ISO Modal", () => {
|
||
test("opens and validates core UI + view toggle behavior", async ({
|
||
page,
|
||
}) => {
|
||
await page.goto("/kabelueberwachung");
|
||
|
||
// Open first ISO modal (assumes button text like "Isolationswiderstand" appears after click on a cable cell)
|
||
// Reuse existing pattern: click cable card primary action button (blue) first occurrence
|
||
const firstChartButton = page
|
||
.locator(".bg-littwin-blue.text-white")
|
||
.first();
|
||
await highlightAndExpectVisible(page, firstChartButton);
|
||
await firstChartButton.click();
|
||
|
||
// Heading
|
||
const heading = page.getByRole("heading", { name: "Isolationswiderstand" });
|
||
await highlightAndExpectVisible(page, heading);
|
||
|
||
// Modal root (dialog)
|
||
const dialog = page.getByRole("dialog");
|
||
await expect(dialog).toBeVisible();
|
||
|
||
// Header icon buttons (fullscreen + close) by role=button count (2)
|
||
await expect(
|
||
dialog
|
||
.locator("button:has(i.bi-fullscreen-exit, i.bi-arrows-fullscreen)")
|
||
.first()
|
||
).toBeVisible();
|
||
await expect(dialog.locator("button:has(i.bi-x-lg)")).toBeVisible();
|
||
|
||
// Dropdown for Messkurve / Meldungen (Listbox button): should show current selection (default Messkurve)
|
||
const viewToggle = dialog.getByRole("button", {
|
||
name: /Messkurve|Meldungen/,
|
||
});
|
||
await highlightAndExpectVisible(page, viewToggle);
|
||
|
||
// Toolbar smoke checks
|
||
await expect(dialog.locator(".toolbar")).toBeVisible();
|
||
await expect(dialog.locator(".toolbar").getByText("KÜ")).toBeVisible();
|
||
|
||
// Date range inputs (Von / Bis labels present when Messkurve)
|
||
await expect(dialog.getByText("Von")).toBeVisible();
|
||
await expect(dialog.getByText("Bis")).toBeVisible();
|
||
|
||
// Mode dropdown (Alle Messwerte / Stündlich / Täglich) – open and verify options
|
||
const modeBtn = dialog.getByRole("button", {
|
||
name: /Alle Messwerte|Stündlich|Täglich/,
|
||
});
|
||
await modeBtn.click();
|
||
await expect(
|
||
page.getByRole("option", { name: /Alle Messwerte/ })
|
||
).toBeVisible();
|
||
await expect(page.getByRole("option", { name: /Stündlich/ })).toBeVisible();
|
||
await expect(page.getByRole("option", { name: /Täglich/ })).toBeVisible();
|
||
// Select Stündlich then reopen to restore Alle Messwerte
|
||
await page.getByRole("option", { name: "Stündlich" }).click();
|
||
await modeBtn.click();
|
||
await page.getByRole("option", { name: "Alle Messwerte" }).click();
|
||
|
||
// Daten laden button
|
||
const loadBtn = dialog.getByRole("button", { name: "Daten laden" });
|
||
await expect(loadBtn).toBeVisible();
|
||
|
||
// Switch to Meldungen view via view dropdown
|
||
await viewToggle.click();
|
||
await page.getByRole("option", { name: "Meldungen" }).click();
|
||
|
||
// In Meldungen: Expect table headers (Prio, Zeitstempel, Quelle, Meldung, Status)
|
||
for (const header of [
|
||
"Prio",
|
||
"Zeitstempel",
|
||
"Quelle",
|
||
"Meldung",
|
||
"Status",
|
||
]) {
|
||
await highlightAndExpectVisible(
|
||
page,
|
||
dialog.getByRole("cell", { name: header })
|
||
);
|
||
}
|
||
|
||
// Date range + mode controls should be hidden (opacity 0 OR not visible). We assert not visible.
|
||
await expect(dialog.getByText("Von")).not.toBeVisible();
|
||
await expect(dialog.getByText("Bis")).not.toBeVisible();
|
||
|
||
// Return to Messkurve and verify canvas appears (chart may load async – wait for any canvas)
|
||
await viewToggle.click();
|
||
await page.getByRole("option", { name: "Messkurve" }).click();
|
||
await expect(dialog.locator("canvas")).toBeVisible();
|
||
});
|
||
});
|