dogfather-universe/server/pruef-abbrechen-optik.mjs

/* ABBRECHEN — WIE ES SICH BEDIENEN LÄSST.

   pruef-abbrechen.mjs beweist, dass der Server richtig entscheidet.
   Diese Prüfung fragt das, was heute früh niemand gefragt hatte:
   Kommt davon auch etwas auf dem Bildschirm an?

   Der Anlass ist derselbe Tag. Vierzig grüne Prüfungen zur
   Teilnehmerwahl -- und auf Filipes Schirm klebten die Namen
   aneinander, weil kein einziger Test je hingesehen hatte. Ein Server,
   der alles richtig macht, nützt nichts, wenn der Knopf dazu fehlt.

   GEMESSEN WIRD:
     * Sieht ein Creator den Abbrechen-Knopf ÜBERHAUPT NICHT?
       (Der Server lehnt ihn ohnehin ab -- aber einen Knopf anzubieten,
       der dann 403 sagt, ist eine Zumutung.)
     * Steht er in JEDEM Status an der Karte?
     * Verlangt der Dialog wirklich einen Grund?
     * Verschwindet die Aufgabe aus dem Brett und taucht unten wieder
       auf -- mit Grund, Person und dem Status, in dem sie war?
     * Und der Rückweg.

   GEGENPROBEN: Jede Sperre wird auch von der erlaubten Seite versucht. */

import { mkdtempSync, rmSync, appendFileSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-abopt-"));
process.env.WORKSPACE_DB = join(ordner, "workspace.db");

import { notbremse } from "./helfer-notbremse.mjs";
const { portMussFreiSein } = await import("./helfer-port.mjs");
await portMussFreiSein(4297, "die Optikpruefung des Abbrechens");

process.env.PORT = "4297";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_PUBLIC_LAUNCH_AT = "2020-01-01T00:00:00+01:00";

const express = (await import("express")).default;
const ec = express.response.cookie;
express.response.cookie = function (n, w, o) { return ec.call(this, n, w, { ...(o || {}), secure: false }); };
await import("./index.js");
/* DIE NOTBREMSE. Muss NACH index.js stehen: Der Server haengt dort
   zwei Auffangnetze ein, die einen Absturz nur protokollieren --
   richtig fuer den Betrieb, fatal fuer eine Pruefung. Ohne diese
   Zeile bleibt der Prozess nach einem Fehler ewig stehen, weil der
   Server ihn am Leben haelt (siehe helfer-notbremse.mjs). */
notbremse(480_000, "pruef-abbrechen-optik");
await new Promise((r) => setTimeout(r, 900));
const BASIS = "http://127.0.0.1:4297";

const PROTOKOLL = join(process.cwd(), "pruef-abbrechen-optik-lauf.txt");
try { rmSync(PROTOKOLL, { force: true }); } catch { /* gab es noch nicht */ }
const melde = (z) => {
  console.log(z);
  try { appendFileSync(PROTOKOLL, z + "\n"); } catch { /* Zugabe */ }
};
let fehler = 0;
const ok = (b, t) => { melde((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

/* ---- Bestand ------------------------------------------------------------ */
const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});
for (let i = 0; i < 60; i++) {
  try {
    const p = new DatabaseSync(process.env.WORKSPACE_DB);
    try { p.prepare("SELECT 1 FROM personen LIMIT 1").get(); break; } finally { p.close(); }
  } catch { await new Promise((r) => setTimeout(r, 250)); }
}
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const jetzt = new Date().toISOString();
function anlegen(name, rolle, code) {
  const salt = randomBytes(16).toString("hex");
  const hash = scryptSync(code, salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
  d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
    .run(name, rolle, hash, salt, 32768, jetzt);
  return d.prepare("SELECT last_insert_rowid() AS id").get().id;
}
const idDogi = anlegen("Filipe", "admin", "CODE-DOGI-0001");
const idScout = anlegen("Patrick", "scout", "CODE-SCOU-0001");
const idLuna = anlegen("Luna", "creator", "CODE-CREA-0001");
d.prepare("INSERT INTO betreuung (creator_id, betreuer_id, seit) VALUES (?,?,?)").run(idLuna, idScout, jetzt);

/* Eine Aufgabe je Status -- der Wunsch lautet ausdrücklich "in JEDEM
   Status", also muss auch jeder einzeln nachgewiesen werden. */
for (const s of ["offen", "arbeit", "review", "erledigt"]) {
  d.prepare(`INSERT INTO aufgaben (titel, beschreibung, status, prioritaet, creator_id,
    verantwortlich_id, erstellt, erstellt_von) VALUES (?,?,?,'hoch',?,?,?,?)`)
    .run(`Aufgabe ${s}`, "Beschreibung.", s, idLuna, idLuna, jetzt, idDogi);
}
d.close();

const pw = await import("file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs");
const browser = await pw.chromium.launch();

/* Was der Browser meldet, wird mitgeschrieben. Beim ersten Lauf blieb
   diese Prüfung beim Absenden des Dialogs stehen, und die stumme
   Konsole sagte nicht, warum -- ein JavaScript-Fehler sieht von außen
   genauso aus wie "der Server antwortet nicht". */
const konsole = [];
async function alsRolle(rolle, code, breite = 1280) {
  const ctx = await browser.newContext({ viewport: { width: breite, height: 1000 } });
  const seite = await ctx.newPage();
  seite.on("pageerror", (f) => konsole.push(`pageerror: ${f.message}`));
  seite.on("console", (m) => {
    if (m.type() === "error") konsole.push(`console: ${m.text().slice(0, 160)}`);
  });
  await seite.goto(BASIS + "/workspace/", { waitUntil: "networkidle" });
  await seite.click(`.rolle[data-rolle="${rolle}"]`);
  await seite.fill("#code", code);
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 25000 });
  await seite.goto(BASIS + "/workspace/aufgaben.html", { waitUntil: "networkidle" });
  await seite.waitForSelector(".karte", { timeout: 15000 });
  return { ctx, seite };
}

/* =======================================================================
   1. Der Knopf — bei wem, und in welchem Status
   ======================================================================= */
melde("\n=== Der Abbrechen-Knopf ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");

  const karten = await seite.$$(".karte");
  /* DIE ANZAHL IN DIE BEDINGUNG: Ohne Karten liefe alles Folgende über
     eine leere Menge und meldete grün. */
  ok(karten.length === 4, `${karten.length} Karten auf dem Brett (erwartet 4, je Status eine)`);

  /* In JEDEM Status -- einzeln nachgewiesen, nicht als Summe. */
  for (const status of ["offen", "arbeit", "review", "erledigt"]) {
    const da = await seite.$(`.karte[data-status="${status}"] .schritt--ab`);
    ok(!!da, `Status "${status}": Abbrechen-Knopf ist da`);
  }

  /* Er darf die täglichen Knöpfe nicht verdrängen. */
  const nebeneinander = await seite.$$eval('.karte[data-status="offen"] .schritt',
    (b) => b.map((x) => x.textContent.trim()));
  ok(nebeneinander.includes("starten ▶") && nebeneinander.includes("abbrechen"),
    `auf der Karte stehen: ${nebeneinander.join(" | ")}`);

  await ctx.close();
}

melde("\n=== Ein Creator sieht ihn gar nicht erst ===");
{
  const { ctx, seite } = await alsRolle("creator", "CODE-CREA-0001");
  const karten = (await seite.$$(".karte")).length;
  const knoepfe = (await seite.$$(".schritt--ab")).length;
  /* Die Karten müssen DA sein -- sonst bewiese "0 Knöpfe" nur, dass
     die Seite leer ist. */
  ok(karten === 4 && knoepfe === 0,
    `${karten} Karten, aber ${knoepfe} Abbrechen-Knöpfe`);
  await ctx.close();
}

/* =======================================================================
   2. Der Dialog
   ======================================================================= */
melde("\n=== Der Dialog verlangt einen Grund ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
  await seite.click('.karte[data-status="review"] .schritt--ab');
  await seite.waitForSelector("#abbruch-dialog[open]", { timeout: 5000 });

  const titel = await seite.$eval("#abbruch-titel", (e) => e.textContent);
  ok(/Aufgabe review/.test(titel), `der Dialog nennt die Aufgabe: ${titel}`);

  /* Sagt er, was passiert -- und was NICHT passiert? Die Sorge bei so
     einem Knopf ist immer, ob etwas verloren geht. */
  const was = await seite.$eval("#abbruch-was", (e) => e.textContent);
  ok(/nicht gelöscht/i.test(was) && /Review/.test(was),
    `er erklärt es: "${was.trim().slice(0, 95)}…"`);

  /* Ohne Grund abschicken -- der Dialog muss offen bleiben. */
  await seite.click("#abbruch-ok");
  await seite.waitForTimeout(300);
  const nochOffen = await seite.$("#abbruch-dialog[open]");
  const meldung = await seite.$eval("#abbruch-fehler", (e) => e.textContent.trim());
  ok(!!nochOffen && meldung.length > 0,
    `ohne Grund bleibt er offen und sagt: "${meldung}"`);

  /* GEGENPROBE: mit Grund geht er zu und die Aufgabe wandert. */
  await seite.fill("#abbruch-grund", "Kampagne verschoben – kommt im Oktober neu.");
  await seite.click("#abbruch-ok");
  /* NICHT mit waitForSelector, sondern messen und melden: Bleibt der
     Dialog offen, ist das ein Befund -- kein Grund, die ganze Prüfung
     mit einer Zeitüberschreitung abbrechen zu lassen. So steht am Ende
     da, WAS nicht ging, statt gar nichts. */
  /* `state: "attached"` ist hier Pflicht. waitForSelector wartet sonst
     darauf, dass das Element SICHTBAR wird -- und ein geschlossener
     <dialog> ist per Definition unsichtbar. Die Bedingung wäre also nie
     erfüllt worden, egal wie richtig der Code ist. Beim ersten Lauf
     stand deshalb "der Dialog bleibt offen", während er längst zu war
     und die Aufgabe schon in der richtigen Spalte stand. */
  const zu = await seite.waitForSelector("#abbruch-dialog:not([open])",
    { state: "attached", timeout: 8000 }).then(() => true).catch(() => false);
  ok(zu, zu ? "mit Grund schließt sich der Dialog"
    : `der Dialog bleibt offen. Konsole: ${konsole.slice(-3).join(" | ") || "still"}`);
  await seite.waitForTimeout(700);

  const nochImBrett = await seite.$('.karte[data-status="review"]');
  ok(!nochImBrett, "die Aufgabe steht nicht mehr in der Review-Spalte");

  await ctx.close();
}

/* =======================================================================
   3. Der Bereich unter dem Brett
   ======================================================================= */
melde("\n=== Der Bereich 'Abgebrochen' ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");

  const sichtbar = await seite.isVisible("#abgebrochen");
  ok(sichtbar, "der Bereich ist da");

  const zahl = await seite.$eval("#abgebrochen-zahl", (e) => e.textContent);
  ok(zahl === "1", `die Anzahl steht im Titel: ${zahl}`);

  /* ZUGEKLAPPT beim Ankommen -- er soll nicht im Weg stehen. */
  const offen = await seite.$eval("#abgebrochen", (e) => e.hasAttribute("open"));
  ok(!offen, "er ist zugeklappt, wie gewollt");

  /* Aufklappen und nachsehen, ob wirklich alles drinsteht. */
  await seite.click(".abgebrochen__kopf");
  await seite.waitForTimeout(350);

  const karte = await seite.$(".abbruch-karte");
  ok(!!karte, "aufgeklappt steht die Aufgabe da");

  const grund = await seite.$eval(".abbruch-karte__grund", (e) => e.textContent.trim());
  ok(/Kampagne verschoben/.test(grund), `der Grund steht dran: "${grund}"`);

  const vorher = await seite.$eval(".abbruch-karte__vorher", (e) => e.textContent.trim());
  ok(vorher === "Review", `und in welchem Status sie war: "${vorher}"`);

  const wer = await seite.$eval(".abbruch-karte__wer", (e) => e.textContent.trim());
  ok(/Filipe/.test(wer), `und wer es war: "${wer}"`);

  /* Der Durchstrich ist hier das eigentliche Merkmal -- gemessen am
     gerechneten Stil, nicht an der CSS-Datei. */
  const strich = await seite.$eval(".abbruch-karte__titel",
    (e) => getComputedStyle(e).textDecorationLine);
  ok(strich.includes("line-through"), `der Titel ist durchgestrichen (${strich})`);

  await ctx.close();
}

/* =======================================================================
   4. Zählt Abgebrochenes noch als offen?
   ======================================================================= */
melde("\n=== Abgebrochenes mahnt nicht mehr ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
  /* Drei Aufgaben laufen noch (offen, arbeit, erledigt), eine ist
     abgebrochen. "Offen" sind davon zwei -- die abgebrochene darf
     nicht mitgezählt werden, sonst mahnt die Seite etwas an, das
     ausdrücklich niemand mehr tun soll. */
  const satz = await seite.$eval("#lage", (e) => e.textContent.trim());
  ok(/2 Aufgaben stehen an/.test(satz), `die Lage sagt: "${satz}"`);

  const alle = await seite.$eval('.schnitt[data-wert=""] .schnitt__zahl', (e) => e.textContent);
  ok(alle === "4", `der Filter "Alle" zählt weiterhin alle ${alle} (auch die abgebrochene)`);

  await ctx.close();
}

/* =======================================================================
   5. Der Rückweg
   ======================================================================= */
melde("\n=== Wieder aufnehmen ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
  await seite.click(".abgebrochen__kopf");
  await seite.waitForSelector(".abbruch-karte", { timeout: 5000 });
  await seite.click(".abbruch-karte .schritt");
  await seite.waitForTimeout(900);

  /* ZURÜCK IN DEN REVIEW, nicht nach "offen". */
  const zurueck = await seite.$('.karte[data-status="review"]');
  ok(!!zurueck, "die Aufgabe steht wieder in der Review-Spalte (nicht bei Offen)");

  const weg = await seite.isVisible("#abgebrochen");
  ok(!weg, "der Bereich verschwindet, wenn nichts mehr abgebrochen ist");

  await ctx.close();
}

/* =======================================================================
   6. Am Handy
   ======================================================================= */
melde("\n=== Am Handy (390 px) ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001", 390);
  await seite.click('.karte[data-status="offen"] .schritt--ab');
  await seite.waitForSelector("#abbruch-dialog[open]", { timeout: 5000 });

  const passt = await seite.evaluate(() => {
    const dlg = document.querySelector("#abbruch-dialog");
    const r = dlg.getBoundingClientRect();
    return { ueber: Math.round(r.right - window.innerWidth), breite: Math.round(r.width) };
  });
  ok(passt.ueber <= 0, `der Dialog passt auf den Schirm (${passt.breite} px, ${passt.ueber} px Überstand)`);

  /* Das Textfeld muss groß genug sein, um mit dem Daumen getroffen zu
     werden -- und um zu sehen, was man tippt. */
  const feld = await seite.$eval("#abbruch-grund",
    (e) => Math.round(e.getBoundingClientRect().height));
  ok(feld >= 60, `das Grundfeld ist ${feld} px hoch`);

  await ctx.close();
}

/* =======================================================================
   GEGENPROBE — misst die Prüfung überhaupt etwas?
   ======================================================================= */
melde("\n=== Gegenprobe ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");
  /* Wenn der Selektor `.schritt--ab` gar nichts träfe, wären alle
     Haken oben wertlos. Also: Gibt es ihn, und verschwindet er, wenn
     man ihn absichtlich entfernt? */
  const vorher = (await seite.$$(".schritt--ab")).length;
  await seite.evaluate(() => {
    for (const b of document.querySelectorAll(".schritt--ab")) b.remove();
  });
  const nachher = (await seite.$$(".schritt--ab")).length;
  ok(vorher === 4 && nachher === 0,
    `der Selektor trifft wirklich (${vorher} gefunden, nach dem Entfernen ${nachher})`);
  await ctx.close();
}

await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ }

melde(`\n${fehler === 0 ? "ALLES IN ORDNUNG" : `${fehler} FEHLER`}`);
process.exit(fehler ? 1 : 0);