196 lines
8.3 KiB
TypeScript
196 lines
8.3 KiB
TypeScript
import { expect, test, type Page } from "@playwright/test";
|
||
import "dotenv/config";
|
||
import { anmelden, kundeWaehlen } from "./helfer";
|
||
|
||
/**
|
||
* Die Geraeteliste durch die Oberflaeche (#011).
|
||
*
|
||
* Diese Datei gibt es aus demselben Grund wie tests/e2e/vorlagen-editor.spec.ts:
|
||
* ein Screenshot sagt in dieser Umgebung **nichts** ueber Bedienbarkeit, weil
|
||
* `next dev` nicht hydriert (siehe CLAUDE.md, „Oberflaeche pruefen“). Geprueft
|
||
* wird deshalb, was nur mit angehaengtem React gelingt — anlegen, suchen,
|
||
* einlesen, loeschen — und anschliessend, ob es wirklich in der Datenbank steht:
|
||
* durch Neuladen.
|
||
*
|
||
* Voraussetzungen — ein gebauter Stand antwortet, der Seed-Bestand steht und der
|
||
* Server liest dieselbe Datenbank wie dieser Lauf — prueft
|
||
* `tests/e2e/global-setup.ts` vor dem ersten Ablauf (#018). Eigene Daten legt
|
||
* dieser Ablauf selbst an; auf vorhandene baut er nicht.
|
||
*
|
||
* Der Ablauf raeumt hinter sich auf: an den angelegten Geraeten haengt kein Lauf,
|
||
* sie lassen sich also loeschen. Ihre Tag-Codes bleiben vergeben, und genau das
|
||
* ist die Zusage aus #011 — ein Aufkleber zeigt nie auf ein zweites Geraet.
|
||
*/
|
||
|
||
const MARKE = `ZZ-E2E-${Date.now()}`;
|
||
|
||
/** Der Abschnitt „Gerät anlegen“ – eindeutig ueber seinen eigenen Knopf. */
|
||
function anlegenFormular(seite: Page) {
|
||
return seite.locator("section", { has: seite.getByRole("button", { name: "Gerät anlegen" }) });
|
||
}
|
||
|
||
function karte(seite: Page, name: string) {
|
||
return seite.locator("li").filter({ hasText: name });
|
||
}
|
||
|
||
/** Loescht alle Geraete, deren Name mit der Marke dieses Durchlaufs beginnt. */
|
||
async function aufraeumen(seite: Page) {
|
||
await seite.goto(`/geraete?suche=${MARKE}`);
|
||
for (let versuch = 0; versuch < 10; versuch += 1) {
|
||
const karten = seite.locator("li").filter({ hasText: MARKE });
|
||
if ((await karten.count()) === 0) return;
|
||
const erste = karten.first();
|
||
await erste.getByRole("button", { name: "löschen", exact: true }).click();
|
||
await erste.getByRole("button", { name: "ja, löschen" }).click();
|
||
await expect(karten).toHaveCount(await karten.count().then((anzahl) => anzahl - 1));
|
||
}
|
||
}
|
||
|
||
test.describe("Geräte", () => {
|
||
test("legt ein Gerät an, findet es in der Liste und sucht es", async ({ page }) => {
|
||
test.slow();
|
||
const name = `${MARKE}-PC-01`;
|
||
await anmelden(page);
|
||
|
||
await page.goto("/geraete");
|
||
// Der Reiter fuehrt zwischen Personen und Geraeten hin und her.
|
||
await expect(page.getByRole("link", { name: "Geräte", exact: true })).toHaveAttribute(
|
||
"aria-current",
|
||
"page",
|
||
);
|
||
|
||
const formular = anlegenFormular(page);
|
||
await formular.getByLabel("Hostname").fill(name);
|
||
await formular.getByLabel("Seriennummer").fill(`${MARKE}-SN`);
|
||
await formular.getByLabel("Typ").selectOption("NOTEBOOK");
|
||
await kundeWaehlen(formular);
|
||
await formular.getByRole("button", { name: "Gerät anlegen" }).click();
|
||
|
||
// Der Tag-Code steht in der Meldung – er kommt gleich auf den Aufkleber.
|
||
const meldung = formular.getByRole("status");
|
||
await expect(meldung).toContainText(/wurde angelegt, Tag-Code LZ-[A-Z2-9]{6}\./);
|
||
const tagCode = (await meldung.textContent())?.match(/LZ-[A-Z2-9]{6}/)?.[0];
|
||
expect(tagCode).toBeTruthy();
|
||
|
||
// Der Beweis, dass es nicht nur im Browser steht: neu laden.
|
||
await page.goto("/geraete");
|
||
await expect(karte(page, name)).toContainText("Notebook");
|
||
await expect(karte(page, name)).toContainText(tagCode!);
|
||
|
||
// Suche über den Hostname …
|
||
await page.locator('input[name="suche"]').fill(name);
|
||
await page.getByRole("button", { name: "Filtern" }).click();
|
||
await expect(page.locator("ul > li").filter({ hasText: MARKE })).toHaveCount(1);
|
||
|
||
// … und über den abgetippten Tag-Code ohne Präfix.
|
||
await page.locator('input[name="suche"]').fill(tagCode!.slice(3));
|
||
await page.getByRole("button", { name: "Filtern" }).click();
|
||
await expect(karte(page, name)).toBeVisible();
|
||
|
||
// Ein Suchbegriff, der zu nichts passt, sagt das auch.
|
||
await page.locator('input[name="suche"]').fill(`${MARKE}-gibt-es-nicht`);
|
||
await page.getByRole("button", { name: "Filtern" }).click();
|
||
await expect(page.getByText("Kein Gerät passt zu diesen Filtern.")).toBeVisible();
|
||
|
||
await aufraeumen(page);
|
||
});
|
||
|
||
test("ändert Stammdaten und archiviert statt zu löschen", async ({ page }) => {
|
||
test.slow();
|
||
const name = `${MARKE}-PC-02`;
|
||
await anmelden(page);
|
||
await page.goto("/geraete");
|
||
|
||
const formular = anlegenFormular(page);
|
||
await formular.getByLabel("Hostname").fill(name);
|
||
await kundeWaehlen(formular);
|
||
await formular.getByRole("button", { name: "Gerät anlegen" }).click();
|
||
await expect(formular.getByRole("status")).toContainText("wurde angelegt");
|
||
|
||
await page.goto(`/geraete?suche=${MARKE}`);
|
||
const meine = karte(page, name);
|
||
await meine.getByText("Stammdaten bearbeiten").click();
|
||
await meine.getByLabel("Seriennummer").fill(`${MARKE}-SN-NEU`);
|
||
await meine.getByRole("button", { name: "Speichern" }).click();
|
||
await expect(meine.getByRole("status")).toContainText("Gespeichert.");
|
||
|
||
// Und wieder der Beweis, dass es in der Datenbank steht.
|
||
await page.reload();
|
||
await expect(karte(page, name)).toContainText(`S/N ${MARKE}-SN-NEU`);
|
||
|
||
// Archivieren nimmt das Gerät aus der Liste, ohne es zu entfernen.
|
||
await karte(page, name).getByRole("button", { name: "archivieren" }).click();
|
||
await expect(karte(page, name)).toHaveCount(0);
|
||
await page.goto(`/geraete?suche=${MARKE}&archiviert=1`);
|
||
await expect(karte(page, name)).toContainText("archiviert");
|
||
await karte(page, name).getByRole("button", { name: "wieder freigeben" }).click();
|
||
await expect(karte(page, name).getByRole("button", { name: "archivieren" })).toBeVisible();
|
||
|
||
await aufraeumen(page);
|
||
});
|
||
|
||
test("liest eine CSV-Datei ein und meldet die kaputte Zeile einzeln", async ({ page }) => {
|
||
test.slow();
|
||
await anmelden(page);
|
||
await page.goto("/geraete");
|
||
|
||
const bereich = page.locator("details", { hasText: "Geräte aus einer CSV-Datei einlesen" });
|
||
await bereich.getByText("Geräte aus einer CSV-Datei einlesen").click();
|
||
await bereich
|
||
.locator('textarea[name="inhalt"]')
|
||
.fill(
|
||
[
|
||
"hostname;label;serialNumber;inventoryNumber;type;model",
|
||
`${MARKE}-CSV-GUT;;SN-GUT;INV-1;PC;OptiPlex`,
|
||
`${MARKE}-CSV-BOESE;;SN-BOESE;INV-2;Tablet;`,
|
||
].join("\r\n"),
|
||
);
|
||
await kundeWaehlen(bereich);
|
||
await bereich.getByRole("button", { name: "Einlesen" }).click();
|
||
|
||
await expect(bereich.getByRole("status")).toContainText("1 von 2 Zeilen angelegt, 1 Zeile abgewiesen.");
|
||
// Mit Zeilennummer, damit die Datei an genau dieser Stelle zu ändern ist.
|
||
await expect(bereich.getByText("Zeile 3")).toBeVisible();
|
||
await expect(bereich.getByText(/kein bekannter Gerätetyp/)).toBeVisible();
|
||
|
||
// Die gute Zeile steht in der Datenbank, die kaputte nicht.
|
||
await page.goto(`/geraete?suche=${MARKE}-CSV`);
|
||
await expect(karte(page, `${MARKE}-CSV-GUT`)).toBeVisible();
|
||
await expect(page.locator("ul > li").filter({ hasText: MARKE })).toHaveCount(1);
|
||
|
||
await aufraeumen(page);
|
||
});
|
||
|
||
test("trägt am Handy ohne horizontales Scrollen", async ({ page, isMobile, viewport }) => {
|
||
test.skip(!isMobile, "Nur im Projekt „handy“.");
|
||
test.slow();
|
||
const name = `${MARKE}-RAUM`;
|
||
await anmelden(page);
|
||
await page.goto("/geraete");
|
||
|
||
const formular = anlegenFormular(page);
|
||
await formular.getByLabel("Bezeichnung").fill(name);
|
||
await formular.getByLabel("Typ").selectOption("RAUM");
|
||
await kundeWaehlen(formular);
|
||
await formular.getByRole("button", { name: "Gerät anlegen" }).click();
|
||
await expect(formular.getByRole("status")).toContainText("wurde angelegt");
|
||
|
||
await page.goto(`/geraete?suche=${MARKE}`);
|
||
await expect(karte(page, name)).toBeVisible();
|
||
|
||
const masse = await page.evaluate(() => ({
|
||
scroll: document.documentElement.scrollWidth,
|
||
sichtbar: document.documentElement.clientWidth,
|
||
}));
|
||
expect(masse.scroll).toBeLessThanOrEqual(masse.sichtbar);
|
||
expect(viewport?.width).toBeLessThanOrEqual(430);
|
||
|
||
// Die Bedienelemente sind am Handy mindestens 44 px hoch.
|
||
const knopf = karte(page, name).getByRole("button", { name: "archivieren" });
|
||
const kasten = await knopf.boundingBox();
|
||
expect(kasten?.height ?? 0).toBeGreaterThanOrEqual(44);
|
||
|
||
await aufraeumen(page);
|
||
});
|
||
});
|