CPLv4.0/playwright/tests/pages/meldungenTest.ts

// gigityOutputsTest.ts
import type { Locator, Page } from "@playwright/test";
import { expect } from "@playwright/test";

export async function runMeldungenTest(page: Page) {
  await page.goto("/meldungen");
  // Warte gezielt auf das Logo, um Server-Latenz abzufangen
  await page.waitForSelector('img[alt="Logo"]', { timeout: 15000 });

  // Logo
  const logo = page.getByRole("img", { name: "Logo", exact: true });
  await highlightAndExpectVisible(page, logo);
  await logo.click();
  await page.waitForTimeout(100);

  // TALAS Logo
  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
  await highlightAndExpectVisible(page, talasLogo);
  await talasLogo.click();
  await page.waitForTimeout(100);

  // Meldestation Heading
  const meldestation = page.getByRole("heading", { name: "Meldestation" });
  await highlightAndExpectVisible(page, meldestation);
  await meldestation.click();
  await page.waitForTimeout(100);

  // CPLV4 Ismail Rastede
  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
  await highlightAndExpectVisible(page, cplv4Text);
  await cplv4Text.click();
  await page.waitForTimeout(100);

  // Dark Mode Button sichtbar
  const darkModeBtn = page.getByRole("button", { name: "Dark Mode" });
  await highlightAndExpectVisible(page, darkModeBtn);
  await expect(darkModeBtn).toBeVisible();
  await page.waitForTimeout(100);

  // Sidebar Links sichtbar (wie in den anderen Tests, kein explizites Sidebar-Handling)
  const sidebarLinks = [
    { role: "link", name: "Übersicht" },
    { role: "link", name: "Kabelüberwachung" },
    { role: "link", name: "Meldungseingänge" },
    { role: "link", name: "Schaltausgänge" },
    { role: "link", name: "Messwerteingänge" },
    { role: "link", name: "Berichte" },
    { role: "link", name: "System" },
    { role: "link", name: "Einstellungen" },
  ];
  for (const link of sidebarLinks) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }

  for (const link of sidebarLinks) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }

  // Berichte Heading
  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
  await highlightAndExpectVisible(page, berichteHeading);
  await berichteHeading.click();
  await page.waitForTimeout(100);

  // Von
  const vonText = page.getByText("Von");
  await highlightAndExpectVisible(page, vonText);
  await vonText.click();
  await page.waitForTimeout(50);

  const vonTextbox = page
    .locator("div")
    .filter({ hasText: /^Von$/ })
    .getByRole("textbox");
  await highlightAndExpectVisible(page, vonTextbox);
  await vonTextbox.click();
  await page.waitForTimeout(50);

  /*   const julyDate = page
    .getByLabel("Choose Date")
    .locator("div")
    .filter({ hasText: "July" })
    .first();
  await highlightAndExpectVisible(page, julyDate);
  await expect(julyDate).toBeVisible(); */
  await page.waitForTimeout(50);

  await vonTextbox.click();
  await page.waitForTimeout(50);

  const bisTextbox = page
    .locator("div")
    .filter({ hasText: /^Bis$/ })
    .getByRole("textbox");
  await highlightAndExpectVisible(page, bisTextbox);
  await bisTextbox.click();
  await page.waitForTimeout(50);

  /*   const augustDate = page
    .getByLabel("Choose Date")
    .locator("div")
    .filter({ hasText: "August" })
    .first();
  await highlightAndExpectVisible(page, augustDate);
  await expect(augustDate).toBeVisible();
  await page.waitForTimeout(50); */

  await bisTextbox.click();
  await page.waitForTimeout(50);

  await highlightAndExpectVisible(page, berichteHeading);
  await berichteHeading.click();
  await page.waitForTimeout(50);

  // Buttons sichtbar
  const anzeigenBtn = page.getByRole("button", { name: "Anzeigen" });
  await highlightAndExpectVisible(page, anzeigenBtn);
  await expect(anzeigenBtn).toBeVisible();
  await page.waitForTimeout(50);

  const alleQuellenBtn = page.getByRole("button", { name: "Alle Quellen" });
  await highlightAndExpectVisible(page, alleQuellenBtn);
  await expect(alleQuellenBtn).toBeVisible();
  await alleQuellenBtn.click();
  await page.waitForTimeout(50);
  await alleQuellenBtn.click();
  await page.waitForTimeout(50);

  // Tabellenzellen
  const tableCells = [
    page.getByRole("cell", { name: "Prio" }),
    page.getByRole("cell", { name: "Zeitstempel" }),
    page.getByRole("cell", { name: "Quelle" }),
    page.getByRole("cell", { name: "Meldung" }),
    page.getByRole("cell", { name: "Status" }),
  ];
  for (const cell of tableCells) {
    await highlightAndExpectVisible(page, cell);
    await cell.click();
    await page.waitForTimeout(30);
  }

  // Dynamische Zeilen und Zellen (Beispiel für mehrere Zeitstempel)
  const zeiten = [
    "11.08.2025, 11:52:44",
    "11.08.2025, 11:51:14",
    "11.08.2025, 11:44:19",
    "11.08.2025, 11:43:44",
    "11.08.2025, 11:36:42",
    "11.08.2025, 11:35:45",
    "11.08.2025, 11:21:16",
    "11.08.2025, 11:21:05",
    "11.08.2025, 11:14:01",
  ];
  for (const zeit of zeiten) {
    const row = page.getByRole("row", { name: zeit });
    await highlightAndExpectVisible(page, row.getByRole("cell").first());
    await row.getByRole("cell").first().click();
    await page.waitForTimeout(20);

    const timeCell = page.getByRole("cell", { name: zeit.split(", ")[1] });
    await highlightAndExpectVisible(page, timeCell);
    await timeCell.click();
    await page.waitForTimeout(20);

    for (let i = 2; i <= 4; i++) {
      const cell = row.getByRole("cell").nth(i);
      await highlightAndExpectVisible(page, cell);
      await cell.click();
      await page.waitForTimeout(20);
    }
  }
}

//---------------------------------------------------------------------

export async function highlightAndExpectVisible(
  page: Page,
  locator: Locator,
  durationMs = 800
) {
  // CSS nur einmal pro Page injizieren
  const alreadyInjected = await page.evaluate(
    () => (window as any).__pwForceCssInjected === true
  );

  if (!alreadyInjected) {
    await page.addStyleTag({
      content: `
        .pw-force-outline {
          outline: 3px solid #ff1744 !important;
          outline-offset: 2px !important;
          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
        }
      `,
    });
    await page.evaluate(() => {
      (window as any).__pwForceCssInjected = true;
    });
  }

  // Erst prüfen, ob das Element sichtbar ist, sonst bricht der Test sauber ab
  await expect(locator).toBeVisible({ timeout: 10000 });
  const els = await locator.elementHandles();
  for (const el of els) {
    await el.evaluate((node: unknown, ms: number) => {
      const n = node as HTMLElement;
      n.classList.add("pw-force-outline");
      window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
    }, durationMs);
  }

  await expect(locator).toBeVisible();
}