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

/* WIE SIEHT DIE TEILNEHMERWAHL WIRKLICH AUS?

   WARUM ES DIESE PRÜFUNG GIBT. Am 05.09.2026 waren vierzig Prüfungen
   zur Teilnehmerwahl grün -- und auf Filipes Bildschirm stand:

       DogfatherDogFather   VanVanDogFather   CigdemManager

   Alle vierzig prüften Daten: Kommen die richtigen Personen an? Werden
   Fremde weggefiltert? Stimmt die Sichtbarkeit? Alles richtig. Keine
   einzige hat gefragt, ob das Ergebnis auch AUSSIEHT wie gedacht.

   pruef-css-klassen.mjs fängt die Ursache (CSS auf einer Seite, die es
   nicht lädt). Diese hier misst die Wirkung -- im echten Browser, an
   den echten Pixeln:

     * Stehen Name und Rolle getrennt, oder kleben sie?
     * Ist der Knopf hoch genug für einen Daumen?
     * Sieht man einem ausgewählten Knopf an, dass er an ist -- und
       zwar nicht nur an der Farbe?
     * Und die eigentliche Frage: Erscheint die Wahl bei JEDER Rolle?

   Gemessen wird mit getComputedStyle und getBoundingClientRect, nicht
   an der CSS-Datei. Ein Wert, der im Stylesheet steht, kann von einer
   anderen Regel überschrieben sein -- was zählt, ist, was am Ende auf
   dem Schirm ankommt.

   GEGENPROBE am Ende: Die Messung muss "klebt" auch erkennen können. */

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

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

import { notbremse } from "./helfer-notbremse.mjs";
const { portMussFreiSein } = await import("./helfer-port.mjs");
await portMussFreiSein(4293, "die Optikpruefung der Teilnehmerwahl");

process.env.PORT = "4293";
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-dabei-optik");
await new Promise((r) => setTimeout(r, 900));
const BASIS = "http://127.0.0.1:4293";

/* LAUFEND MITSCHREIBEN. Node puffert stdout, sobald es umgeleitet wird
   -- bei einem Lauf mit sechs Browser-Anmeldungen steht bis zum Schluss
   NICHTS in der Datei. Beim ersten Versuch hing die Prüfung (ein
   geratener Selektor), und die leere Datei sagte nicht, wie weit sie
   gekommen war. Dieselbe Lehre steht schon in pruef-browser.mjs. */
const { appendFileSync } = await import("node:fs");
const PROTOKOLL = join(process.cwd(), "pruef-dabei-lauf.txt");
try { rmSync(PROTOKOLL, { force: true }); } catch { /* gab es noch nicht */ }
const melde = (z) => {
  console.log(z);
  try { appendFileSync(PROTOKOLL, z + "\n"); } catch { /* Protokoll ist Zugabe */ }
};

let fehler = 0;
const ok = (b, t) => { melde((b ? "  ok   " : "  FEHL ") + t); if (!b) fehler++; };

/* ---- Bestand: eine Kette, wie sie im Betrieb aussieht ------------------- */
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;
}
/* Namen wie im echten Bestand -- ein zweiteiliger Name ist der Fall,
   an dem das Kleben aufgefallen ist. */
const idDogi = anlegen("Filipe Fernandes Ribeiro", "admin", "CODE-DOGI-0001");
const idCig = anlegen("Cigdem", "manager", "CODE-MANA-0001");
const idPat = anlegen("Patrick von Hohenstein", "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, idPat, jetzt);
d.prepare("INSERT INTO scout_zuteilung (scout_id, manager_id, seit) VALUES (?,?,?)").run(idPat, idCig, jetzt);
d.close();

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

/** Meldet sich an und öffnet den Kalender mit geöffnetem Formular.
 *
 *  ERST DIE ROLLE, DANN DER CODE. Das war der Grund, warum der erste
 *  Versuch dieser Prüfung hängen blieb: Ich hatte den Rollenklick
 *  geraten statt nachgesehen, das Formular nahm den Code nicht an, und
 *  waitForURL wartete auf eine Adresse, die nie kam. */
async function alsRolle(rolle, code, breite = 1280) {
  const ctx = await browser.newContext({ viewport: { width: breite, height: 900 } });
  const seite = await ctx.newPage();
  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/kalender.html", { waitUntil: "networkidle" });
  /* Das Formular öffnen -- die Wahl steht darin. */
  await seite.click("#neu-oeffnen");
  await seite.waitForSelector("#neu:not([hidden])", { timeout: 10000 });
  await seite.waitForTimeout(400);
  return { ctx, seite };
}

/* =======================================================================
   1. Als DogFather -- sieht er alle vier Gruppen?
   ======================================================================= */
console.log("\n=== Die Wahl aus Sicht von DogFather ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");

  const sichtbar = await seite.isVisible("#feld-dabei");
  ok(sichtbar, sichtbar ? "das Feld 'Wer ist noch dabei?' ist da" : "das Feld fehlt");

  const knoepfe = await seite.$$("#dabei-wahl .k-dabei__knopf");
  /* DIE ANZAHL IN DIE BEDINGUNG: Wären es null, würde jede folgende
     Messung über eine leere Menge laufen und grün melden. */
  ok(knoepfe.length === 3,
    `${knoepfe.length} Personen zur Auswahl (erwartet 3 -- alle außer ihm selbst)`);

  const gruppen = await seite.$$eval(".k-dabei__gruppe", (g) => g.map((x) => x.dataset.rolle));
  ok(gruppen.length === 3 && !gruppen.includes("admin"),
    `Gruppen: ${gruppen.join(", ") || "keine"} — er selbst ist die einzige admin-Person und steht nicht drin`);

  /* DER KERN: Kleben Name und Zeichen? Gemessen wird der echte
     Abstand zwischen den zwei Kästchen, nicht der CSS-Wert. */
  const abstand = await seite.evaluate(() => {
    const k = document.querySelector("#dabei-wahl .k-dabei__knopf");
    if (!k) return null;
    const z = k.querySelector(".k-dabei__zeichen")?.getBoundingClientRect();
    const n = k.querySelector(".k-dabei__name")?.getBoundingClientRect();
    if (!z || !n) return null;
    return Math.round(n.left - z.right);
  });
  ok(abstand !== null && abstand >= 6,
    abstand === null ? "Zeichen oder Name nicht gefunden"
      : `${abstand} px zwischen Zeichen und Name (der alte Fehler war 0)`);

  /* Und die Rolle steht NICHT mehr am Namen -- sonst hieße es wieder
     "CigdemManager". */
  const ersterText = await seite.$eval("#dabei-wahl .k-dabei__knopf", (k) => k.textContent.trim());
  ok(!/DogFather|Manager|Scout|Creator/.test(ersterText),
    `der Knopf trägt nur den Namen: "${ersterText}"`);

  /* Die Rolle steht stattdessen über der Gruppe. */
  const titel = await seite.$$eval(".k-dabei__titel", (t) => t.map((x) => x.textContent.trim()));
  ok(titel.length === 3 && titel.some((t) => /Manager/.test(t)),
    `Gruppenüberschriften: ${titel.join(" · ")}`);

  /* Daumengröße. 40 px ist die Grenze, die dieses Haus überall nutzt. */
  const hoehe = await seite.$eval("#dabei-wahl .k-dabei__knopf",
    (k) => Math.round(k.getBoundingClientRect().height));
  ok(hoehe >= 40, `Knopfhöhe ${hoehe} px (mindestens 40 für den Daumen)`);

  /* Auswählen: Ändert sich etwas Sichtbares -- und zwar mehr als die
     Farbe? Ein Häkchen erkennt auch, wer Farben schlecht sieht. */
  const vorher = await seite.$eval("#dabei-wahl .k-dabei__knopf .k-dabei__haken",
    (h) => getComputedStyle(h).opacity);
  await seite.click("#dabei-wahl .k-dabei__knopf");
  /* ERST DIE ÜBERBLENDUNG ABWARTEN. Beim ersten Lauf stand hier
     "0 → 0" und sah aus wie ein defektes Häkchen -- gemessen wurde
     aber mitten in der 0,16-Sekunden-Blende, als es tatsächlich noch
     unsichtbar war. Nicht der Code war falsch, sondern der Zeitpunkt
     der Messung. 250 ms sind reichlich über den 160. */
  await seite.waitForTimeout(250);
  const nachher = await seite.$eval("#dabei-wahl .k-dabei__knopf .k-dabei__haken",
    (h) => getComputedStyle(h).opacity);
  ok(Number(vorher) < 0.1 && Number(nachher) > 0.9,
    `Häkchen: ${vorher} → ${nachher} (erscheint beim Anwählen)`);

  const gedrueckt = await seite.$eval("#dabei-wahl .k-dabei__knopf",
    (k) => k.getAttribute("aria-pressed"));
  ok(gedrueckt === "true", `aria-pressed = ${gedrueckt} (ein Vorleseprogramm sagt den Zustand an)`);

  const hinweis = await seite.$eval("#dabei-hinweis", (p) => p.textContent.trim());
  ok(/1 Person sieht/.test(hinweis), `Hinweis: "${hinweis}"`);

  await ctx.close();
}

/* =======================================================================
   2. DIE EIGENTLICHE FRAGE: Bekommt jede Rolle die Wahl?
   ======================================================================= */
console.log("\n=== 'für jeden verfügbar' — jede Rolle einzeln ===");
{
  const faelle = [
    ["Manager", "manager", "CODE-MANA-0001", 3],   // DogFather, Patrick, Luna
    ["Scout", "scout", "CODE-SCOU-0001", 3],       // DogFather, Luna, Cigdem (sein Manager)
    ["Creator", "creator", "CODE-CREA-0001", 3],   // DogFather, Patrick, Cigdem
  ];
  for (const [name, rolle, code, erwartet] of faelle) {
    const { ctx, seite } = await alsRolle(rolle, code);
    const sichtbar = await seite.isVisible("#feld-dabei");
    const anzahl = (await seite.$$("#dabei-wahl .k-dabei__knopf")).length;
    ok(sichtbar && anzahl === erwartet,
      `${name}: Feld ${sichtbar ? "sichtbar" : "FEHLT"}, ${anzahl} Personen zur Auswahl (erwartet ${erwartet})`);

    /* Und niemand sieht jemanden, den er nicht sehen darf. Bei einem
       Creator ist das der Punkt: Er darf seinen Scout markieren, aber
       keinen fremden Creator. */
    const namen = await seite.$$eval("#dabei-wahl .k-dabei__name", (n) => n.map((x) => x.textContent));
    ok(!namen.includes("Luna") || name !== "Creator",
      `${name}: sieht ${namen.join(", ") || "niemanden"}`);
    await ctx.close();
  }
}

/* =======================================================================
   3. Am Handy
   ======================================================================= */
console.log("\n=== Am Handy (390 px) ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001", 390);
  const ueber = await seite.evaluate(() => {
    const w = document.querySelector("#dabei-wahl");
    if (!w) return null;
    return Math.round(w.scrollWidth - w.clientWidth);
  });
  ok(ueber !== null && ueber <= 1, `nichts steht seitlich über (${ueber} px)`);

  const hoehe = await seite.$eval("#dabei-wahl .k-dabei__knopf",
    (k) => Math.round(k.getBoundingClientRect().height));
  ok(hoehe >= 40, `Knopfhöhe am Handy ${hoehe} px`);
  await ctx.close();
}

/* =======================================================================
   GEGENPROBE — kann die Messung "klebt" überhaupt erkennen?
   ======================================================================= */
console.log("\n=== Gegenprobe ===");
{
  const { ctx, seite } = await alsRolle("admin", "CODE-DOGI-0001");

  /* Das CSS wird absichtlich kaputt gemacht -- genau so, wie es vorher
     WAR: kein Flex, kein gap. Schlägt die Messung jetzt nicht an, misst
     sie nichts und alle Haken oben sind wertlos. */
  await seite.addStyleTag({ content:
    ".k-dabei__knopf { display: inline !important; gap: 0 !important; }" });
  await seite.waitForTimeout(120);

  const abstand = await seite.evaluate(() => {
    const k = document.querySelector("#dabei-wahl .k-dabei__knopf");
    const z = k.querySelector(".k-dabei__zeichen")?.getBoundingClientRect();
    const n = k.querySelector(".k-dabei__name")?.getBoundingClientRect();
    return Math.round(n.left - z.right);
  });
  ok(abstand < 6,
    `mit kaputtem CSS misst die Prüfung ${abstand} px — sie erkennt das Kleben also`);

  await ctx.close();
}

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

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