dogfather-universe/server/pruef-kopf-messen.mjs

/* Misst die einzelnen Teile der Kopfleiste auf dem Handy -- damit eine
   Reparatur an der richtigen Stelle ansetzt und nicht geraten wird.

   SIE PRUEFT SEIT DEM 01.09.2026 AUCH, statt nur zu messen.

   Vorher war sie ein reines Messwerkzeug: Sie druckte Zahlen und endete
   IMMER mit Exitcode 0. Damit stand sie als "pruef-..." im Ordner der
   Pruefungen, lief bei jedem Gesamtlauf mit, meldete "in Ordnung" --
   und konnte gar nicht fehlschlagen. Aufgefallen ist das erst, als der
   Gesamtlauf die ANZAHL der Einzelpruefungen mitzaehlte: Diese Datei
   kam auf null.

   Eine Pruefung, die immer bestaetigt, bestaetigt nichts. Die beiden
   Zahlen, um die es geht, wurden laengst gemessen -- sie werden jetzt
   auch beurteilt:
     UEBERSTAND          muss 0 sein (waagerechtes Scrollen ist auf
                         einem Handy der schlimmste Fehler)
     ABMELDEN ERREICHBAR muss wahr sein -- es ist der einzige Weg wieder
                         heraus; liegt er ausserhalb des Bildes, sitzt
                         man fest.
   Die Messwerte werden weiterhin gedruckt: Sie sagen bei einem
   Fehlschlag sofort, WELCHES Teil zu breit ist. */
import { mkdtempSync, rmSync } from "node:fs";
import { tmpdir } from "node:os";
import { join } from "node:path";

const ordner = mkdtempSync(join(tmpdir(), "ws-messen-"));
process.env.WORKSPACE_DB = join(ordner, "pruef.sqlite");
process.env.PORT = "4179";
process.env.SITE_ACCESS_SECRET = "lokaler-test";
process.env.SITE_ACCESS_CODE_DOGI = "DOGI-TEST-1";
process.env.SITE_ACCESS_CODE_VANVAN = "VANVAN-TEST-1";
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 }); };
import { notbremse } from "./helfer-notbremse.mjs";
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-kopf-messen");
await new Promise((r) => setTimeout(r, 700));
const BASIS = "http://127.0.0.1:4179";

let fehler = 0;
let geprueft = 0;
setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 120_000).unref?.();

await fetch(BASIS + "/workspace/api/anmelden", {
  method: "POST", headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ rolle: "admin", code: "x" }) }).catch(() => {});

const { DatabaseSync } = await import("node:sqlite");
const { scryptSync, randomBytes } = await import("node:crypto");
const d = new DatabaseSync(process.env.WORKSPACE_DB);
const salt = randomBytes(16).toString("hex");
const hash = scryptSync("CODE-DOGI-0001", salt, 64, { N: 32768, r: 8, p: 1, maxmem: 96 * 1024 * 1024 }).toString("hex");
/* Bewusst ein langer Name -- kurze Namen wuerden den Fehler verstecken. */
d.prepare("INSERT INTO personen (name, rolle, code_hash, code_salt, code_n, aktiv, erstellt) VALUES (?,?,?,?,?,1,?)")
  .run("Filipe Fernandes Ribeiro", "admin", hash, salt, 32768, new Date().toISOString());
d.close();

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

/** Warten, bis die Kopfleiste FERTIG ist -- und zwar auf Stabilitaet,
 *  nicht auf einen Inhalt.
 *
 *  ZWEI FEHLVERSUCHE, beide lehrreich:
 *
 *  `waitForTimeout(300)` mass einen Zwischenstand -- kopf.js haengt
 *  Teile erst nach der Antwort von `/api/ich` ein und hat ein Netz, das
 *  nach 1200 ms nachholt. Die Gegenprobe blieb dadurch gruen, obwohl
 *  der Fehler wieder eingebaut war.
 *
 *  Der zweite Versuch wartete darauf, dass `#wer` Text hat. Das war
 *  SOFORT wahr: Im HTML steht dort `…` als Platzhalter. Eine Bedingung,
 *  die von Anfang an erfuellt ist, wartet auf nichts -- derselbe Fehler
 *  wie ein `every()` auf einem leeren Feld.
 *
 *  Jetzt wird gewartet, bis sich die Zahl der Teile zweimal
 *  hintereinander nicht mehr aendert. Das braucht keine Kenntnis
 *  darueber, WIE VIELE Teile richtig sind -- und bleibt richtig, wenn
 *  morgen ein Knopf dazukommt. */
async function leisteFertig(seite, frist = 9000) {
  /* ERST AB HIER ZAEHLT "STABIL" -- dritter und letzter Fehlversuch.
     Ohne diese Zeile war die Leiste nach 0 ms und nach 500 ms gleich
     gross und galt damit als fertig. "Stabil" hiess dann nur "es ist
     noch nichts passiert": Das Netz in kopf.js greift erst bei
     1200 ms, und teilen.html holt `/api/ich` nicht selbst.
     Die 1500 sind keine geratene Zahl, sondern die 1200 aus kopf.js
     plus Luft. Aendert sich sie dort, gehoert sie hier nachgezogen --
     deshalb steht sie nicht nackt da, sondern mit ihrer Herkunft. */
  await seite.waitForTimeout(1500);
  const bis = Date.now() + frist;
  let vorher = -1;
  while (Date.now() < bis) {
    const n = await seite.evaluate(
      () => document.querySelector(".kopfleiste__rechts")?.children.length ?? -1);
    if (n > 0 && n === vorher) return n;
    vorher = n;
    await seite.waitForTimeout(500);
  }
  return vorher;
}

/* WELCHE SEITEN (17.09.2026).

   Bis heute wurde NUR uebersicht.html gemessen -- und genau deshalb
   blieb der Fehler unsichtbar, ueber den Filipe gestolpert ist: Der
   Teilen-Knopf war doppelt so hoch wie seine Nachbarn, aber nur auf den
   drei Seiten, die bereich.css laden. uebersicht.html gehoert nicht
   dazu.

   Eine Kopfleiste, die auf einer Seite gemessen wird, ist auf einer
   Seite gemessen. Die Leiste steht auf allen. Deshalb jetzt: die
   Kontrollseite von frueher PLUS die zwei, die zusaetzliche
   Gestaltungsdateien laden -- dort entstehen Konflikte, nirgends
   sonst. */
const SEITEN = ["uebersicht.html", "teilen.html", "bewerben.html"];

/* UND EINE BREITE ANSICHT (17.09.2026).

   Filipes Bildschirmfoto war KEIN Handy -- die Leiste war rund 1366 px
   breit. Unterhalb von 720 px versteckt gate.css das Wort "Teilen" und
   laesst nur das Zeichen stehen; der Knopf bleibt dort klein, auch mit
   einer falschen Anordnung. Eine Pruefung, die nur Handybreiten misst,
   waere also gruen gewesen und blind fuer genau den gemeldeten Fall.

   Die drei schmalen Breiten bleiben: Dort ist der Platz knapp, und
   dort ist die Leiste im September schon einmal zerbrochen. */
for (const breite of [320, 390, 430, 1366]) {
  const kontext = await browser.newContext({ viewport: { width: breite, height: 844 } });
  const seite = await kontext.newPage();
  await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" });
  await seite.click('.rolle[data-rolle="admin"]');
  await seite.fill("#code", "CODE-DOGI-0001");
  await seite.click("button[type=submit]");
  await seite.waitForURL("**/start.html", { timeout: 15000 });

 for (const wo of SEITEN) {
  await seite.goto(BASIS + "/workspace/" + wo, { waitUntil: "networkidle" });
  /* WARTEN AUF EINE BEDINGUNG, NICHT AUF EINE ZAHL (17.09.2026).

     Hier stand `waitForTimeout(300)`, und das hat die Pruefung
     wertlos gemacht: kopf.js haengt Teile der Leiste erst ein, wenn
     `/api/ich` beantwortet ist -- und hat ein Netz, das nach 1200 ms
     nachholt, falls die Seite selbst nicht fragt. Nach 300 ms war die
     Leiste also halb leer, und gemessen wurde ein Zwischenstand.

     Bewiesen an der Gegenprobe: Der echte Fehler wurde absichtlich
     wieder eingebaut, und die Pruefung blieb GRUEN -- sie hatte den
     kaputten Knopf schlicht noch nicht gesehen. Eine Pruefung, die zu
     frueh hinsieht, bestaetigt nur, dass noch nichts da war. */
  await leisteFertig(seite);

  /* ---- FAELLT EIN TEIL AUS DER REIHE? ----------------------------------

     Das ist die Messung, die Filipes Beschwerde entspricht. Nicht
     "ist es 38 px hoch" -- eine feste Zahl waere die Rechnung von
     gestern und muesste bei jedem neuen Knopf nachgezogen werden.
     Sondern: Verhaelt sich EIN Teil anders als die anderen?

     Verglichen wird gegen den Mittelwert der Nachbarn. Der waechst
     mit, wenn die Leiste insgesamt groesser wird, und schlaegt an,
     sobald ein einzelnes Element ausbricht -- unabhaengig davon,
     welche Zahl gerade richtig ist. */
  const reihe = await seite.evaluate(() => {
    const teile = [...(document.querySelector(".kopfleiste__rechts")?.children || [])]
      .map((e) => ({
        was: (e.id || String(e.className).split(" ")[0] || e.tagName).slice(0, 24),
        hoehe: Math.round(e.getBoundingClientRect().height),
      }))
      .filter((x) => x.hoehe > 0);
    if (teile.length < 3) return { teile, schnitt: 0, ausreisser: [] };
    const schnitt = teile.reduce((n, x) => n + x.hoehe, 0) / teile.length;
    return {
      teile, schnitt: Math.round(schnitt),
      ausreisser: teile.filter((x) => x.hoehe > schnitt * 1.6),
    };
  });
  geprueft++;
  if (reihe.ausreisser.length) {
    fehler++;
    console.log(`  FEHL ${breite}px ${wo}: ${reihe.ausreisser
      .map((x) => `${x.was} ist ${x.hoehe}px`).join(", ")} `
      + `-- die anderen im Schnitt ${reihe.schnitt}px`);
    for (const x of reihe.teile) console.log(`         ${x.was.padEnd(24)} h=${x.hoehe}`);
  } else if (reihe.teile.length < 3) {
    console.log(`  --   ${breite}px ${wo}: nur ${reihe.teile.length} Teile `
      + "-- zu wenig zum Vergleichen");
  } else {
    console.log(`  ok   ${breite}px ${wo}: ${reihe.teile.length} Teile, `
      + `keines faellt aus der Reihe (Schnitt ${reihe.schnitt}px)`);
  }

  /* EIN BILD VON DER BREITEN ANSICHT. Die Zahlen sagen, DASS nichts
     aus der Reihe faellt; ob die Leiste gut AUSSIEHT, sagt nur ein
     Blick. Genau so ist dieser Fehler gemeldet worden -- mit einem
     Bildschirmfoto, nicht mit einer Messung. */
  if (breite === 1366 && wo === "teilen.html") {
    await seite.screenshot({ path: "server/pruef-kopf-leiste.png",
      clip: { x: 0, y: 0, width: 1366, height: 120 } });
  }
 }

  await seite.goto(BASIS + "/workspace/uebersicht.html", { waitUntil: "networkidle" });
  await seite.waitForTimeout(300);
  const r = await seite.evaluate(() => {
    const k = document.querySelector(".kopfleiste");
    const teil = (e) => ({
      was: (e.tagName + "." + String(e.className).split(" ")[0]).slice(0, 34),
      breite: Math.round(e.getBoundingClientRect().width),
      rechts: Math.round(e.getBoundingClientRect().right),
    });
    return {
      fenster: window.innerWidth,
      ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth,
      kinder: [...k.children].map(teil),
      rechtsKinder: [...(k.querySelector(".kopfleiste__rechts")?.children || [])].map(teil),
      abmeldenSichtbar: (() => {
        const a = document.querySelector(".abmelden")?.getBoundingClientRect();
        return a ? a.right <= window.innerWidth : null;
      })(),
    };
  });
  /* Erst beurteilen, dann drucken -- die Messwerte darunter sind die
     Begründung, falls es schiefgeht. */
  geprueft++;
  const gut = r.ueber <= 0 && r.abmeldenSichtbar === true;
  if (!gut) fehler++;
  console.log(`  ${gut ? "ok  " : "FEHL"} ${breite}px: Überstand ${r.ueber}px, `
    + `Abmelden erreichbar: ${r.abmeldenSichtbar}`);
  for (const t of r.kinder) console.log(`   ${t.was.padEnd(34)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`);
  console.log("   darin:");
  for (const t of r.rechtsKinder) console.log(`     ${t.was.padEnd(32)} b=${String(t.breite).padStart(4)} rechts=${t.rechts}`);
  await kontext.close();
}
await browser.close();
try { rmSync(ordner, { recursive: true, force: true }); } catch {}
/* Die Anzahl gehoert in die BEDINGUNG, nicht nur in den Meldetext:
   Waere die Schleife nie gelaufen, waere "0 Fehler" sonst ein Erfolg. */
console.log(`
${geprueft} Breiten gemessen, ${fehler} beanstandet.`);
if (!geprueft) { console.log("  FEHL keine einzige Breite gemessen"); fehler++; }
console.log(fehler ? "NICHT in Ordnung." : "Alles in Ordnung.");
process.exit(fehler ? 1 : 0);