/* Browserpruefung des Kalenders: vier Ansichten, Anlaesse, Feiertage, Filter, Tagesdialog -- und die selbst gerechneten Tage gegen bekannte Werte. Die Anlassrechnung ist der Teil, der still falsch sein kann: Ein um einen Tag verschobener Ostersonntag faellt niemandem auf, verschiebt aber Karfreitag, Himmelfahrt und Pfingsten gleich mit. Deshalb werden hier feste, nachschlagbare Daten geprueft und nicht nur "es steht irgendwas da". */ import { mkdtempSync, rmSync } from "node:fs"; import { tmpdir } from "node:os"; import { join } from "node:path"; const ordner = mkdtempSync(join(tmpdir(), "ws-kal-")); process.env.WORKSPACE_DB = join(ordner, "workspace.db"); process.env.PORT = "4188"; 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-kalender"); await new Promise((r) => setTimeout(r, 700)); const BASIS = "http://127.0.0.1:4188"; setTimeout(() => { console.log("ABBRUCH"); process.exit(1); }, 200_000).unref?.(); /* ORTSZEIT, nicht UTC. Die Anwendung rechnet "heute" nach der Uhr des Benutzers; toISOString() liefert dagegen UTC und damit zwischen Mitternacht und 2 Uhr den VORTAG. In diesem Fenster schlug diese Pruefung fehl, ohne dass etwas kaputt war. */ const tagText = (d = new Date()) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}` + `-${String(d.getDate()).padStart(2, "0")}`; let fehler = 0; const ok = (b, t) => { console.log((b ? " ok " : " FEHL ") + t); if (!b) fehler++; }; 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 jetzt = new Date().toISOString(); const heute = tagText(); const morgen = tagText(new Date(Date.now() + 86400_000)); const in5 = tagText(new Date(Date.now() + 5 * 86400_000)); 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 idAnna = anlegen("Tili", "creator", "CODE-ANNA-0001"); /* Drei Arten von Terminen und eine Frist -- damit alle vier Filter etwas zu zeigen haben und man sieht, ob die Farben auseinandergehalten werden. */ const termine = [ ["call", heute + "T10:00", "Wochen-Call"], ["call", heute + "T15:30", "Kurzes Rueckfragen"], ["termin", morgen + "T09:00", "Dreh im Studio"], ["review", in5 + "T14:00", "Monats-Review"], ]; for (const [art, beginn, titel] of termine) { d.prepare(`INSERT INTO termine (titel, art, beginn, dauer_min, creator_id, teilnehmer_id, erledigt, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,0,?,?)`) .run(titel, art, beginn, 30, idAnna, idAnna, jetzt, idDogi); } d.prepare(`INSERT INTO aufgaben (titel, status, creator_id, verantwortlich_id, frist, prioritaet, erstellt, erstellt_von) VALUES (?,?,?,?,?,?,?,?)`) .run("Thumbnail bauen", "offen", idAnna, idAnna, morgen, "hoch", jetzt, idDogi); d.close(); const { chromium } = await import( "file:///C:/Users/qciga/Documents/Obelix/Analyse/node_modules/playwright/index.mjs"); const browser = await chromium.launch(); async function anmelden(kontext, rolle, code) { const seite = await kontext.newPage(); await seite.goto(BASIS + "/workspace/", { waitUntil: "domcontentloaded" }); await seite.click(`.rolle[data-rolle="${rolle}"]`); await seite.fill("#code", code); await seite.click("button[type=submit]"); await seite.waitForURL("**/start.html", { timeout: 15000 }); return seite; } const lesen = (seite) => seite.evaluate(() => ({ zeitraum: document.getElementById("zeitraum")?.textContent || "", unter: document.getElementById("zeitraum-unter")?.textContent || "", ansicht: document.getElementById("kalender")?.dataset.ansicht || null, /* Monatsraster */ zellen: document.querySelectorAll(".k-tag").length, kwSpalten: document.querySelectorAll(".k-kw").length, kwWerte: [...document.querySelectorAll(".k-kw")].map((k) => k.textContent), heuteZellen: document.querySelectorAll('.k-tag[data-heute="ja"]').length, feiertagZellen: document.querySelectorAll('.k-tag[data-feiertag="ja"]').length, fremdZellen: document.querySelectorAll('.k-tag[data-fremd="ja"]').length, /* Eintraege */ pillen: [...document.querySelectorAll(".k-pille")].map((p) => ({ text: p.textContent, farbe: getComputedStyle(p).borderLeftColor, })), anlaesse: [...document.querySelectorAll("#kalender .k-anlass")].map((a) => a.textContent), /* Leisten */ saison: [...document.querySelectorAll("#saison .k-anlasskarte")].map((k) => ({ name: k.querySelector(".k-anlasskarte__name")?.textContent, rest: k.querySelector(".k-anlasskarte__rest")?.textContent, feiertag: k.classList.contains("feiertag"), })), monatsanlaesse: [...document.querySelectorAll("#monatsanlaesse .k-anlasskarte")] .map((k) => k.querySelector(".k-anlasskarte__name")?.textContent), monatTitel: document.getElementById("monat-titel")?.textContent || "", /* Filter */ chips: [...document.querySelectorAll(".k-chip")].map((c) => ({ text: c.textContent, an: c.getAttribute("aria-pressed") === "true", })), /* Andere Ansichten */ wochenSpalten: document.querySelectorAll(".k-wochentag").length, listentage: document.querySelectorAll(".k-listentag").length, strahlTage: document.querySelectorAll(".k-strahl__tag").length, zeilen: document.querySelectorAll(".k-zeile").length, ueber: document.documentElement.scrollWidth - document.documentElement.clientWidth, /* Abgeschnittener Text ist der häufigste stille Fehler: Er sieht auf den ersten Blick nach Absicht aus. Gemessen wird die tatsächliche Textbreite gegen die verfügbare. Die Pillen im Raster sind bewusst ausgenommen -- eine Zelle ist 150 px breit, dort IST das Kürzen die richtige Lösung, und der volle Text steht im Tagesdialog. */ abgeschnitten: [...document.querySelectorAll( ".k-anlasskarte__name, .k-anlasskarte__wann, .k-anlasskarte__rest, " + ".k-zeile__titel, .k-listentag__datum, .k-chip, .k-ansicht, .k-zeitraum")] .filter((e) => e.scrollWidth > e.clientWidth + 1) .map((e) => e.textContent.trim().slice(0, 30)), })); for (const [breite, wie] of [[1440, "Computer"], [390, "Handy"]]) { console.log(`\n=== ${wie} (${breite}px)`); const kontext = await browser.newContext({ viewport: { width: breite, height: 1100 } }); const konsole = []; const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001"); seite.on("console", (m) => { if (m.type() === "error") konsole.push(m.text()); }); seite.on("pageerror", (e) => konsole.push("pageerror: " + e.message)); await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" }); await seite.waitForTimeout(700); const r = await lesen(seite); console.log(" Zeitraum:", r.zeitraum, "·", r.unter); console.log(" Als Nächstes:", r.saison.map((s) => `${s.name} (${s.rest})`).join(" · ")); /* ---- Monatsraster ---- */ ok(r.ansicht === "monat", `startet im Monat (${r.ansicht})`); /* Ein Monatsraster hat immer ganze Wochen: 28, 35 oder 42 Zellen. Alles andere heisst, dass die Wochenberechnung daneben liegt. */ ok([28, 35, 42].includes(r.zellen), `ganze Wochen im Raster (${r.zellen} Zellen)`); ok(r.kwSpalten === r.zellen / 7, `je Woche eine KW (${r.kwSpalten} für ${r.zellen / 7} Wochen)`); ok(r.kwWerte.every((w) => Number(w) >= 1 && Number(w) <= 53), `alle Kalenderwochen plausibel (${r.kwWerte.join(",")})`); ok(r.heuteZellen === 1, `genau ein Tag ist "heute" (${r.heuteZellen})`); ok(r.fremdZellen > 0, `die Nachbarmonatstage sind erkennbar (${r.fremdZellen})`); /* ---- Eintraege im Raster ---- */ ok(r.pillen.length === 5, `alle fünf Einträge stehen im Raster (${r.pillen.length})`); ok(r.pillen.some((p) => p.text.includes("Wochen-Call")), "der Call ist dabei"); ok(r.pillen.some((p) => p.text.includes("Thumbnail bauen")), "die Frist aus den Aufgaben auch"); /* Jede Art traegt ihre eigene Farbe. Zwei Calls, ein Termin, ein Review, eine Frist -> vier verschiedene Farben. */ const farben = new Set(r.pillen.map((p) => p.farbe)); ok(farben.size === 4, `vier Arten, vier Farben (${farben.size})`); /* Die Uhrzeit steht vorn -- ausser bei der Frist, die keine hat. */ ok(r.pillen.filter((p) => /^\d{2}:\d{2}/.test(p.text)).length === 4, "vier Einträge mit Uhrzeit, die Frist ohne"); /* ---- Zaehler in der Kopfzeile ---- */ ok(/KW \d+( – \d+)? · 5 Einträge/.test(r.unter), `die Kopfzeile zählt mit ("${r.unter}")`); /* ---- Filter ---- */ ok(r.chips.length === 4, `vier Filter (${r.chips.length})`); ok(r.chips.every((c) => c.an), "und alle zunächst an"); ok(r.chips.some((c) => c.text.includes("Call (2)")), `der Call-Filter zählt zwei (${r.chips.map((c) => c.text).join(" ")})`); ok(r.chips.some((c) => c.text.includes("Frist (1)")), "der Fristen-Filter zählt eine"); /* Ausschalten muss WIRKLICH etwas ausblenden -- ein Filter, der nur die Farbe des Knopfes aendert, ist keiner. */ await seite.click('.k-chip:has-text("Call")'); await seite.waitForTimeout(250); const nachFilter = await lesen(seite); ok(nachFilter.pillen.length === 3, `Calls ausgeschaltet: drei Einträge übrig (${nachFilter.pillen.length})`); ok(/· 3 Einträge/.test(nachFilter.unter), `und die Kopfzeile zählt neu ("${nachFilter.unter}")`); await seite.click('.k-chip:has-text("Call")'); await seite.waitForTimeout(250); /* ---- Anlassleisten ---- */ ok(r.saison.length === 3, `drei kommende Anlässe (${r.saison.length})`); ok(r.saison.every((s) => /^(heute|morgen|in \d+ Tagen)$/.test(s.rest.replace("Vorlauf läuft", "").trim())), `jeder mit Abstand in Tagen (${r.saison.map((s) => s.rest).join(" | ")})`); ok(r.monatTitel.startsWith("Im "), `die zweite Leiste nennt den Monat ("${r.monatTitel}")`); /* ---- Blättern ---- */ const vorher = r.zeitraum; await seite.click("#vor-zeit"); await seite.waitForTimeout(400); const weiter = await lesen(seite); ok(weiter.zeitraum !== vorher, `vorwärts blättern wechselt den Monat (${vorher} → ${weiter.zeitraum})`); ok(weiter.heuteZellen === 0, "im nächsten Monat ist kein Tag mehr \"heute\""); await seite.click("#heute-knopf"); await seite.waitForTimeout(400); const zurueck = await lesen(seite); ok(zurueck.zeitraum === vorher, `"Heute" führt zurück (${zurueck.zeitraum})`); /* ---- Die anderen drei Ansichten ---- */ for (const [name, pruefung] of [ ["woche", (x) => x.wochenSpalten === 7], ["liste", (x) => x.listentage > 0 && x.zeilen > 0], ["zeitstrahl", (x) => x.strahlTage === 42], ]) { await seite.click(`.k-ansicht[data-ansicht="${name}"]`); await seite.waitForTimeout(450); const a = await lesen(seite); ok(a.ansicht === name && pruefung(a), `Ansicht ${name} baut auf (Spalten=${a.wochenSpalten} Tage=${a.listentage} ` + `Striche=${a.strahlTage} Zeilen=${a.zeilen})`); ok(a.ueber <= 0, ` und steht nicht über (${a.ueber}px)`); } await seite.click('.k-ansicht[data-ansicht="monat"]'); await seite.waitForTimeout(400); /* ---- BLAETTERN DIREKT UEBER DEM KALENDER (09.09.2026) -------------- Filipe, mit Bildschirmfoto: "ich will dass genau da ueber dem kalender auch noch buttons sind um den monat zu wechseln, tage wechseln ... die einen rot und die anderen gruen von den neuen." Die Pfeile gab es schon -- oben neben der Ueberschrift, einen halben Bildschirm entfernt von dem Raster, das sie bewegen. Geprueft wird nicht nur, DASS die Knoepfe da sind, sondern dass ihre Beschriftung die Wahrheit sagt: Ein Pfeil verspricht keinen Sprungweite, ein Wort schon. Steht "Monat vor" und es springt eine Woche, ist das schlimmer als gar keine Beschriftung. */ { const vorher = await seite.textContent("#zeitraum"); await seite.click("#schritt-vor"); await seite.waitForTimeout(700); const nachher = await seite.textContent("#zeitraum"); ok(vorher !== nachher, `der gruene Knopf blaettert weiter ("${vorher}" -> "${nachher}")`); const b = await seite.evaluate(() => ({ zurueck: document.getElementById("schritt-zurueck-text")?.textContent, vor: document.getElementById("schritt-vor-text")?.textContent, heuteAus: document.getElementById("schritt-heute")?.disabled, })); ok(b.zurueck === "Monat zurück" && b.vor === "Monat vor", `und die Beschriftung nennt die Schrittweite ("${b.zurueck}" / "${b.vor}")`); ok(b.heuteAus === false, "Heute ist jetzt anklickbar, weil man woanders steht"); await seite.click("#schritt-zurueck"); await seite.waitForTimeout(700); const zurueck = await seite.textContent("#zeitraum"); ok(zurueck === vorher, `der rote Knopf blaettert zurueck ("${zurueck}")`); const wiederDa = await seite.evaluate(() => document.getElementById("schritt-heute")?.disabled); ok(wiederDa === true, "und Heute ist wieder ausgegraut -- ein Knopf, der nichts tut, wird sonst nie ernst genommen"); /* DIE BESCHRIFTUNG FOLGT DER ANSICHT. In der Wochenansicht ist ein Schritt eine Woche -- steht dort weiter "Monat", luegt der Knopf. */ await seite.click('.k-ansicht[data-ansicht="woche"]'); await seite.waitForTimeout(600); const w = await seite.evaluate(() => ({ zurueck: document.getElementById("schritt-zurueck-text")?.textContent, vor: document.getElementById("schritt-vor-text")?.textContent, })); ok(w.zurueck === "Woche zurück" && w.vor === "Woche vor", `in der Wochenansicht heissen sie anders ("${w.zurueck}" / "${w.vor}")`); /* Und sie springt dort wirklich eine Woche, nicht einen Monat. */ const wVor = await seite.textContent("#zeitraum"); await seite.click("#schritt-vor"); await seite.waitForTimeout(700); const wNach = await seite.textContent("#zeitraum"); ok(wVor !== wNach, `der Schritt wirkt auch dort ("${wVor}" -> "${wNach}")`); await seite.click('.k-ansicht[data-ansicht="monat"]'); await seite.waitForTimeout(500); await seite.click("#schritt-heute"); await seite.waitForTimeout(700); /* ROT UND GRUEN, an echten Bildpunkten. Eine Farbe im Stylesheet sagt nichts darueber, was am Bildschirm ankommt -- dieselbe Lehre wie beim Rollenstreifen der Personenkachel. */ const farben = await seite.evaluate(() => { const lies = (id) => { const c = document.createElement("canvas"); c.width = 1; c.height = 1; const g = c.getContext("2d", { willReadFrequently: true }); g.fillStyle = "#000000"; g.fillStyle = getComputedStyle(document.getElementById(id)).color; g.fillRect(0, 0, 1, 1); const p = g.getImageData(0, 0, 1, 1).data; return [p[0], p[1], p[2]]; }; return { rot: lies("schritt-zurueck"), gruen: lies("schritt-vor") }; }); ok(farben.rot[0] > farben.rot[1] + 25 && farben.rot[0] > farben.rot[2] + 25, `der Zurueck-Knopf ist wirklich rot (rgb(${farben.rot}))`); ok(farben.gruen[1] > farben.gruen[0] + 25 && farben.gruen[1] > farben.gruen[2] + 25, `der Vor-Knopf ist wirklich gruen (rgb(${farben.gruen}))`); /* GEGENPROBE: Die beiden sind NICHT dieselbe Farbe. Ohne sie hiesse "rot" und "gruen" nur, dass zweimal etwas gemessen wurde. */ const abstand = farben.rot.reduce((s, x, i) => s + Math.abs(x - farben.gruen[i]), 0); ok(abstand > 120, `und die beiden unterscheiden sich deutlich (Abstand ${abstand})`); } /* ---- Tagesdialog ---- */ await seite.click(`.k-tag[data-tag="${heute}"]`); await seite.waitForTimeout(300); const dialog = await seite.evaluate(() => ({ offen: document.getElementById("tagdialog")?.open, titel: document.getElementById("tagdialog-titel")?.textContent, unter: document.getElementById("tagdialog-unter")?.textContent, zeilen: document.querySelectorAll("#tagdialog-liste .k-zeile").length, })); ok(dialog.offen === true, "ein Klick auf den Tag öffnet den Dialog"); ok(dialog.zeilen === 2, `und zeigt die beiden Calls von heute (${dialog.zeilen})`); ok(/heute/.test(dialog.unter), `und weiss, dass es heute ist ("${dialog.unter}")`); await seite.keyboard.press("Escape"); await seite.waitForTimeout(250); ok(await seite.evaluate(() => !document.getElementById("tagdialog").open), "Esc schließt ihn wieder"); ok(r.ueber <= 0, `nichts steht über (${r.ueber}px)`); ok(r.abgeschnitten.length === 0, `kein Text wird abgeschnitten (${r.abgeschnitten.join(" | ") || "keiner"})`); ok(konsole.length === 0, `keine Fehler in der Konsole${konsole.length ? " -> " + konsole.join(" | ") : ""}`); await seite.screenshot({ path: breite === 1440 ? "pruef-kalender-computer.png" : "pruef-kalender-handy.png", fullPage: true }); await kontext.close(); } /* --------------------------------------------------------------------- Die gerechneten Tage gegen bekannte Werte. Diese Zahlen stehen in jedem Kalender und lassen sich nachschlagen. Ohne diese Prüfung koennte die Osterformel um einen Tag daneben liegen und niemand wuerde es merken -- bis irgendwann jemand Karfreitag arbeitet. --------------------------------------------------------------------- */ console.log("\n=== Die gerechneten Tage"); { const kontext = await browser.newContext({ viewport: { width: 1440, height: 1000 } }); const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001"); await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" }); await seite.waitForTimeout(600); /* Zu jedem Jahr: der Monat wird angesteuert und im Raster nachgesehen, an welchem Tag der Anlass steht. Damit wird wirklich das geprueft, was der Kalender ANZEIGT -- nicht eine Formel, die daneben noch einmal gerechnet wird. */ const faelle = [ ["2026-04-05", "Ostersonntag"], ["2026-04-03", "Karfreitag"], ["2026-05-14", "Christi Himmelfahrt"], ["2026-05-10", "Muttertag"], ["2026-11-27", "Black Friday"], ["2026-12-20", "4. Advent"], ["2027-03-28", "Ostersonntag"], ["2027-11-26", "Black Friday"], ["2027-12-19", "4. Advent"], ["2030-04-21", "Ostersonntag"], ]; /* Zum Zielmonat blättern -- über die echten Knöpfe, nicht durch Setzen einer inneren Variablen: So wird auch die Navigation selbst mitgeprüft. Wichtig ist die RICHTUNG. Ein erster Versuch klickte stur vorwärts und erreichte April 2026 nie, weil heute September 2026 ist. Der Test meldete daraufhin zehnmal "Monat nicht erreicht" -- und hätte bei oberflächlichem Hinsehen wie ein Rechenfehler in der Osterformel ausgesehen. Deshalb wird jetzt verglichen, welcher Monat offen ist, und gezielt in die passende Richtung geblättert. */ async function zuMonat(tag) { for (let i = 0; i < 90; i++) { const stand = await seite.evaluate((t) => { if (document.querySelector(`.k-tag[data-tag="${t}"]`)) return "da"; /* Der offene Monat ist der der Zellen OHNE data-fremd -- die Randzellen gehören zum Nachbarmonat. */ const eigen = document.querySelector('.k-tag:not([data-fremd="ja"])'); return eigen ? eigen.dataset.tag.slice(0, 7) : null; }, tag); if (stand === "da") return true; if (!stand) return false; await seite.click(stand < tag.slice(0, 7) ? "#vor-zeit" : "#zurueck-zeit"); await seite.waitForTimeout(70); } return false; } for (const [tag, name] of faelle) { const erreicht = await zuMonat(tag); const text = erreicht ? await seite.evaluate((t) => { const z = document.querySelector(`.k-tag[data-tag="${t}"]`); return z ? [...z.querySelectorAll(".k-anlass")].map((a) => a.textContent).join(" | ") : null; }, tag) : null; ok(text !== null && text.includes(name), `${name} liegt ${tag} (gefunden: ${text ?? "Monat nicht erreicht"})`); } await kontext.close(); } await browser.close(); /* Der Testordner bleibt manchmal gesperrt, weil der Server im selben Prozess noch auf der Datenbank sitzt. Das ist kein Prüfergebnis -- ein Aufräumfehler darf einen bestandenen Lauf nicht rot machen. */ try { rmSync(ordner, { recursive: true, force: true }); } catch { /* egal */ } console.log(fehler ? `\n${fehler} Prüfung(en) fehlgeschlagen.` : "\nAlles in Ordnung."); process.exit(fehler ? 1 : 0);