dogfather-universe/pruef-startseite.mjs

/* =====================================================================
   Startseite: Kino-Hintergrund, Welt-Kacheln, "Event des Jahres"
   (27.08.2026 — nach "es überschneidet den hintergrund" und
   "soll nur noch hochwertiger und professioneller aussehen")

   WARUM MIT FESTEN TESTDATEN

   Das "Event des Jahres" kommt live von postfach.dogfather-universe.com.
   Beim Prüfen kam einmal nichts zurück — der ganze Abschnitt blieb
   ausgeblendet und der Test hätte "kein Fehler" gemeldet, obwohl er
   schlicht nichts gesehen hat. Deshalb wird die Antwort hier fest
   vorgegeben: einmal EIN Event (breite Karte, Bild links) und einmal
   ZWEI Events (zwei Kacheln nebeneinander) — beides muss stimmen.

   Absichtlich mit einem unangenehm langen Text, denn genau daran
   entscheidet sich, ob die Karte in Form bleibt.

   Geprüft wird:
     1. Das scharfe Artwork ist ein echtes Bild mit weicher Maske —
        ohne sie kehren die harten Kanten zurück.
     2. Keine leere zweite Event-Kachel (der Fehler vom ersten Entwurf).
     3. Die Einzel-Karte nutzt die volle Breite (keine tote Fläche).
     4. Langer Text wird sauber gekürzt statt mittendurch geschnitten.
     5. Jede Welt-Kachel trägt die Farbe ihrer eigenen Welt.
     6. Kein seitlicher Überlauf, auch am Handy nicht.
   ===================================================================== */
import { chromium } from "playwright";
import { spawn } from "node:child_process";
import { createServer } from "node:net";
import { dirname, join } from "node:path";
import { fileURLToPath } from "node:url";

const HIER = dirname(fileURLToPath(import.meta.url));

/* ⚠️ FREIEN PORT SUCHEN STATT EINEN FESTEN NEHMEN (27.08.2026)

   Mit fester Portnummer kann Folgendes passieren, und es ist passiert:
   Ein Server aus einem früheren Testlauf läuft noch. Der neue kann den
   Port nicht belegen, stirbt still -- und der Test misst fröhlich weiter,
   nur eben gegen den ALTEN Code. Ergebnis waren Fehlermeldungen zu einem
   Fehler, der längst behoben war, und beinahe eine Fehlersuche in die
   völlig falsche Richtung.

   Ein freier Port pro Lauf macht das unmöglich. */
const freierPort = await new Promise((auf, ab) => {
  const probe = createServer();
  probe.on("error", ab);
  probe.listen(0, "127.0.0.1", () => {
    const p = probe.address().port;
    probe.close(() => auf(p));
  });
});
const PORT = freierPort;
const BASIS = `http://127.0.0.1:${PORT}`;

let ok = 0, fehl = 0;
const funde = [];
const pruefe = (name, gut, info) => {
  if (gut) { ok++; console.log("  ok   " + name + (info ? "  -> " + info : "")); }
  else { fehl++; console.log("  FEHL " + name + (info ? "  -> " + info : "")); funde.push(name + " — " + info); }
};

const server = spawn(process.execPath, ["index.js"], {
  cwd: join(HIER, "server"),
  env: { ...process.env, PORT: String(PORT) },
  stdio: "ignore",
});
const beenden = (code) => { try { server.kill(); } catch { /* schon weg */ } process.exit(code); };

const LANGER_TEXT =
  "WEIHNACHTEN 2026 Wir sind keine Organisation. Wir sind kein Verein. Wir sind eine private Gruppe von Menschen, " +
  "die sich über TikTok kennengelernt hat und gemeinsam etwas Gutes tun möchte. Letztes Jahr haben wir das bereits " +
  "gemacht. Vom 1. bis zum 23. Dezember waren wir unterwegs, haben geholfen, unterstützt und gemeinsam versucht, " +
  "einigen Tieren und Einrichtungen eine Freude zu machen. Auch dieses Jahr wollen wir wieder gemeinsam losziehen " +
  "und möglichst vielen Menschen und Tieren ein Lächeln schenken, ganz ohne großes Aufheben.";

const EVENT = (n) => ({
  slot: n,
  datum: "01.12.2026",
  titel: "WEIHNACHTS´AKTION-2026",
  text: LANGER_TEXT,
  bild: "/assets/img/universe-trio.jpg",
  aktiv: true,
  link: "",
});

async function warteAufServer() {
  for (let i = 0; i < 40; i++) {
    try { if ((await fetch(BASIS + "/index.html")).ok) return; } catch { /* noch nicht oben */ }
    await new Promise((r) => setTimeout(r, 250));
  }
  throw new Error("Server ist nicht hochgekommen");
}

async function seiteMit(browser, viewport, events) {
  const seite = await browser.newPage({ viewport });
  await seite.route("https://postfach.dogfather-universe.com/**", (route) => {
    const pfad = new URL(route.request().url()).pathname;
    const daten = pfad === "/events-of-year"
      ? { ok: true, events }
      : { ok: true, live: false, isLive: false, texte: {} };
    return route.fulfill({
      status: 200,
      headers: { "access-control-allow-origin": "*", "content-type": "application/json" },
      body: JSON.stringify(daten),
    });
  });
  await seite.goto(BASIS + "/index.html", { waitUntil: "domcontentloaded" });
  await seite.waitForSelector(".jahres-event-card:not([hidden])", { timeout: 10000 });
  await seite.waitForTimeout(700);
  return seite;
}

(async () => {
  await warteAufServer();
  const browser = await chromium.launch();

  /* ---------- 1. Hintergrund ---------- */
  console.log("\n== Kino-Hintergrund ==");
  const pc = await seiteMit(browser, { width: 1366, height: 900 }, [EVENT(1)]);
  const kunst = await pc.evaluate(() => {
    const img = document.querySelector(".hero-artwork img");
    if (!img) return { da: false };
    const st = getComputedStyle(img);
    const r = img.getBoundingClientRect();
    return {
      da: true,
      geladen: img.complete && img.naturalWidth > 0,
      maske: st.maskImage !== "none" || st.webkitMaskImage !== "none",
      passtRein: Math.round(r.width) <= innerWidth + 1,
    };
  });
  pruefe("Artwork ist ein echtes Bild", kunst.da, "");
  pruefe("Artwork ist wirklich geladen", kunst.geladen, "");
  pruefe("Weiche Maske aktiv (sonst harte Kanten)", kunst.maske, "");
  pruefe("Artwork bleibt im Bild", kunst.passtRein, "");

  /* ---------- 2. Ein Event: breite Karte ---------- */
  console.log("\n== Event des Jahres: EIN Event ==");
  const einzeln = await pc.evaluate(() => {
    const sicht = (e) => !!(e && (e.offsetWidth || e.offsetHeight));
    const alle = [...document.querySelectorAll(".jahres-event-card")];
    const k = alle.find(sicht);
    const p = k?.querySelector(".jahres-event-textwrap p");
    const bild = k?.querySelector(".jahres-event-bild:not([hidden])");
    const raster = document.getElementById("jahres-events-grid");
    return {
      sichtbar: alle.filter(sicht).length,
      kartenBreite: k ? Math.round(k.getBoundingClientRect().width) : 0,
      rasterBreite: raster ? Math.round(raster.getBoundingClientRect().width) : 0,
      bildBreite: bild ? Math.round(bild.getBoundingClientRect().width) : 0,
      /* NICHT den display-Wert abfragen: Chrome bildet die Zeilenkürzung
         inzwischen intern als "flow-root" ab, obwohl "-webkit-box"
         dransteht und die Kürzung einwandfrei arbeitet. Geprüft wird
         deshalb das Ergebnis — passt die sichtbare Höhe auf GANZE
         Zeilen? Bei der kaputten Fassung waren es 4,5 Zeilen, also eine
         mittendurch geschnittene. */
      pGekuerzt: p ? p.scrollHeight > p.clientHeight : null,
      pRestHoehe: p ? p.scrollHeight - p.clientHeight : null,
      pZeilenRest: p ? Math.abs((p.clientHeight / parseFloat(getComputedStyle(p).lineHeight)) % 1) : null,
      pZeilen: p ? +(p.clientHeight / parseFloat(getComputedStyle(p).lineHeight)).toFixed(2) : null,
      zeilenhoehe: p ? parseFloat(getComputedStyle(p).lineHeight) : 0,
      knopfRund: k ? getComputedStyle(k.querySelector(".jahres-event-mehr")).borderRadius : null,
    };
  });
  pruefe("Genau EINE Kachel sichtbar (keine leere zweite)", einzeln.sichtbar === 1, einzeln.sichtbar + " sichtbar");
  pruefe("Karte nutzt die volle Breite", einzeln.kartenBreite >= einzeln.rasterBreite - 2, einzeln.kartenBreite + " von " + einzeln.rasterBreite + "px");
  pruefe("Bild hat ordentlich Platz", einzeln.bildBreite >= 380, einzeln.bildBreite + "px breit");
  pruefe("Kürzung endet auf ganzer Zeile (kein Schnitt mittendurch)",
    einzeln.pZeilenRest < 0.06 || einzeln.pZeilenRest > 0.94, einzeln.pZeilen + " Zeilen sichtbar");
  pruefe("Langer Text wird tatsächlich gekürzt", einzeln.pGekuerzt === true, "Rest: " + einzeln.pRestHoehe + "px");
  pruefe('"Mehr erfahren" ist ein Knopf', einzeln.knopfRund === "999px", einzeln.knopfRund);

  /* ---------- 3. Welt-Kacheln ---------- */
  console.log("\n== Welt-Kacheln ==");
  const welten = await pc.evaluate(() =>
    [...document.querySelectorAll(".hero-grid .card")].map((c) => ({
      welt: c.dataset.theme,
      farbe: getComputedStyle(c.querySelector(".tag")).color,
      versalien: getComputedStyle(c.querySelector(".tag")).textTransform,
      hoehe: Math.round(c.getBoundingClientRect().height),
    }))
  );
  const farben = welten.map((w) => w.farbe);
  pruefe("Jede Welt hat ihre eigene Farbe", new Set(farben).size === 3, farben.join(" / "));
  pruefe("Plaketten in Versalien", welten.every((w) => w.versalien === "uppercase"), welten[0]?.versalien);
  pruefe("Alle drei Kacheln gleich hoch", new Set(welten.map((w) => w.hoehe)).size === 1, welten.map((w) => w.hoehe).join(", ") + "px");

  /* ---------- 4. Zwei Events ---------- */
  console.log("\n== Event des Jahres: ZWEI Events ==");
  const zwei = await seiteMit(browser, { width: 1366, height: 900 }, [EVENT(1), EVENT(2)]);
  const z = await zwei.evaluate(() => {
    const sicht = (e) => !!(e && (e.offsetWidth || e.offsetHeight));
    const k = [...document.querySelectorAll(".jahres-event-card")].filter(sicht);
    return { anzahl: k.length, hoehen: k.map((e) => Math.round(e.getBoundingClientRect().height)),
             nebeneinander: k.length === 2 ? Math.abs(k[0].getBoundingClientRect().top - k[1].getBoundingClientRect().top) < 2 : false };
  });
  pruefe("Zwei Kacheln sichtbar", z.anzahl === 2, z.anzahl + "");
  pruefe("Beide nebeneinander", z.nebeneinander, "");
  pruefe("Beide exakt gleich hoch", new Set(z.hoehen).size === 1, z.hoehen.join(" / ") + "px");
  await zwei.close();

  /* ---------- 5. Handy ---------- */
  console.log("\n== Handy (390x844) ==");
  const handy = await seiteMit(browser, { width: 390, height: 844 }, [EVENT(1)]);
  const h = await handy.evaluate(() => {
    const k = document.querySelector(".jahres-event-card:not([hidden])");
    const bild = k?.querySelector(".jahres-event-bild:not([hidden])");
    const r = k.getBoundingClientRect();
    return { ueberlauf: document.documentElement.scrollWidth - document.documentElement.clientWidth,
             karteImBild: r.left >= -1 && r.right <= innerWidth + 1,
             bildOben: bild ? bild.getBoundingClientRect().top < k.querySelector("h3").getBoundingClientRect().top : false };
  });
  pruefe("Kein seitlicher Überlauf", h.ueberlauf <= 1, h.ueberlauf + "px");
  pruefe("Karte passt in den Bildschirm", h.karteImBild, "");
  pruefe("Am Handy steht das Bild oben", h.bildOben, "");
  await handy.screenshot({ path: "bild-start-handy.png" });
  await handy.close();

  await pc.screenshot({ path: "bild-start-computer.png" });
  await pc.close();
  await browser.close();
  console.log("\n===== " + ok + " ok, " + fehl + " Fehler =====");
  if (funde.length) { console.log("\nOffene Punkte:"); funde.forEach((f) => console.log(" - " + f)); }
  beenden(fehl ? 1 : 0);
})().catch((e) => {
  console.error("Testlauf abgebrochen:", e.message);
  beenden(1);
});