DogFatherGit
d5e873d597
Die Grundlinie der Fingerwache sinkt von 17 auf 6.
WAS UMGESTELLT WURDE
pruef-alter, pruef-countdown, pruef-gespraech, pruef-treffchat,
pruef-modi-verborgen, pruef-nachwuchs, pruef-personen-liste,
pruef-serien, pruef-team, pruef-kalender.
Alle zehn legen ein eigenes Handyfenster an; dort fehlte nur
`hasTouch`. Ohne ihn meldet der Browser einen feinen Zeiger, und
keine Regel aus `@media (pointer: coarse)` greift -- dort stehen die
44-Pixel-Beruehrziele.
JEDE EINZELN GELAUFEN, ALLE GRUEN
Diese Seiten halten die Fingerregeln also schon ein. Es hatte nur
nie jemand nachgesehen.
Vorher geprueft, wie gross jede ist: 1 bis 7 Seitenaufrufe, 1 bis 5
Fenster -- echte Einzelpruefungen. (Zum Vergleich: die Pruefung von
gestern Nacht hatte 244 Seitenaufrufe, und genau das hatte ich
vorher nicht nachgesehen.)
DIE ZEITBOMBE IN pruef-kalender
Beim Umstellen fiel sie rot aus -- zweimal, an einer Stelle, die mit
dem Finger nichts zu tun hat:
FEHL im naechsten Monat ist kein Tag mehr "heute"
Gegen den ausgelieferten Stand gemessen: identisch rot. Nicht
meine Aenderung, sondern der Kalender.
Heute ist der 29. September. Das Oktober-Raster zeigt in seiner
ersten Zeile die letzten Septembertage mit, und einer davon IST
heute. Die Anwendung macht dabei alles richtig: `kalender.js` setzt
die Marke an `tag === daten.heute`, also am DATUM und nicht an der
Rasterposition. Genau das sollte die Pruefung beweisen -- und schlug
an, weil die Anwendung es tat.
Geschrieben wurde sie an einem Tag in der Monatsmitte. Von da an war
sie richtig, bis der Kalender sie einholte. Dasselbe Muster wie
`gate-oeffnung.mjs` am 06.09.2026 im Shop: Ein Test, der die
Wanduhr als Annahme benutzt, misst irgendwann das Gegenteil.
Gefragt wird jetzt, was gemeint war: Ein EIGENER Tag des
Folgemonats darf nie „heute" sein; ein mitgezeigter Randtag
(`data-fremd="ja"`) dagegen sehr wohl, und zwar genau dann, wenn er
es ist. Das gilt an jedem Tag des Jahres. Die Meldung nennt jetzt
beide Zahlen:
ok im naechsten Monat ist kein EIGENER Tag mehr "heute"
(0 eigene, 1 mitgezeigte Randtage)
WAS UEBRIG BLEIBT: SECHS SCHWERE FAELLE
pruef-befinden, pruef-notizen, pruef-teamlage-karten,
pruef-terminregel, pruef-werdegang, pruef-grosscheck.
Dort schaltet `setViewportSize` mitten im Ablauf auf Handyformat um
-- und der Finger laesst sich nachtraeglich nicht setzen, er gehoert
zum Kontext. Jeder Fall braucht einen eigenen Kontext samt
Anmeldung: Umbau, nicht Einzeiler.
`pruef-grosscheck` bleibt unangetastet, bis Filipe einen Lauf
freigibt. Eine Aenderung, die ich nicht pruefen darf, liefere ich
nicht aus.
GEPRUEFT
alle zehn einzeln: EXIT 0, keine FEHL-Zeile
pruef-kalender EXIT 0 (vorher 2 Fehlschlaege, auch auf HEAD)
pruef-fingermass 3 / 0, Grundlinie 6
909 lines
44 KiB
JavaScript
909 lines
44 KiB
JavaScript
/* 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");
|
||
/* DER PORT MUSS MEINER SEIN (nachgeruestet 19.09.2026).
|
||
Ohne diese Zeile startet der eigene Server bei belegtem Port
|
||
STILL nicht -- und alles Folgende misst gegen einen fremden
|
||
Stand. Das ist der dritte Ausgang: belegt ist etwas anderes
|
||
als kaputt. */
|
||
const PORT = await eigenerPort(import.meta, "pruef-kalender");
|
||
process.env.PORT = `${PORT}`;
|
||
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";
|
||
import { eigenerPort } from "./helfer-port.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:${PORT}`;
|
||
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);
|
||
|
||
/* ---- Zettel von den Brettern (17.09.2026) --------------------------
|
||
|
||
Filipe: „ich will dass die auch in einer kalender drin sind."
|
||
|
||
SECHS STUECK, und jedes beantwortet eine andere Frage. Vier sollen
|
||
erscheinen, zwei ausdruecklich nicht -- ohne die beiden waere der
|
||
Abschnitt eine Pruefung, die nur bestaetigt: Dass etwas auftaucht,
|
||
ist leicht; dass das Richtige WEGBLEIBT, ist der eigentliche
|
||
Schnitt. */
|
||
const brettzettel = [
|
||
/* [bereich, titel, datum, uhrzeit, geplant, event_ende, status, soll_erscheinen] */
|
||
["wunsch", "Zugesagt: Retro-Abend", heute, null, in5, null, "angenommen", true],
|
||
["content", "Clip am Wochenende", in5, null, null, null, "offen", true],
|
||
["live", "Stream um acht", morgen,"20:00", null, null, "offen", true],
|
||
["agentur", "Messe Koeln", morgen, null, null, in5, "offen", true],
|
||
/* DER RUECKFALL. `datum` ist ein Pflichtfeld und faellt auf HEUTE
|
||
zurueck, wenn niemand eins waehlt -- das ist das Erfassungsdatum
|
||
und kein Termin. Erschiene dieser Zettel, stuende im Kalender
|
||
kuenftig jeder je getippte Gedanke an dem Tag, an dem er getippt
|
||
wurde. */
|
||
["ideen", "Nur so notiert", heute, null, null, null, "offen", false],
|
||
/* WAS ERLEDIGT IST, GEHOERT AUFS BRETT UND NICHT IN DIE PLANUNG. */
|
||
["content", "Laengst rausgegangen", in5, null, null, null, "erledigt", false],
|
||
];
|
||
for (const [bereich, titel, datum, uhrzeit, geplant, ende, status] of brettzettel) {
|
||
d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, datum, uhrzeit, geplant,
|
||
event_ende, status, dringlichkeit, erstellt, erstellt_von)
|
||
VALUES (?,?,?,?,?,?,?,?,?,'mittel',?,?)`)
|
||
.run(bereich, "sonstiges", titel, "Text dazu", datum, uhrzeit, geplant, ende,
|
||
status, jetzt, idDogi);
|
||
}
|
||
/* UND EINER, DEN NUR DIE LEITUNG SEHEN DARF. Er ist die Gegenprobe zur
|
||
Rechtefrage: Im Kalender steht nur eine kleine Pille mit einem Titel
|
||
-- dass darin etwas Vertrauliches steckt, faellt niemandem auf, der
|
||
nicht danach sucht. Genau so ist am 03.09. eine Managerin an fremde
|
||
Aufgabenfristen gekommen. */
|
||
d.prepare(`INSERT INTO eintraege (bereich, art, titel, text, datum, status,
|
||
dringlichkeit, nur_leitung, erstellt, erstellt_von)
|
||
VALUES (?,?,?,?,?,'offen','mittel',1,?,?)`)
|
||
.run("ideen", "sonstiges", "Vertraulich: Sponsorgespraech", null, in5, jetzt, idDogi);
|
||
d.close();
|
||
|
||
/* =====================================================================
|
||
DIE ERWARTETEN ZAHLEN WERDEN GERECHNET, NICHT ABGESCHRIEBEN
|
||
(17.09.2026)
|
||
|
||
Hier standen „alle fünf Einträge", „vier Arten, vier Farben", „vier
|
||
Filter", „drei Einträge übrig". Alle vier stimmten -- solange die
|
||
Testdaten oben aus genau vier Terminen und einer Frist bestanden.
|
||
|
||
Mit den Zetteln von den Brettern wurden daraus zehn, und SIEBEN
|
||
Prüfungen je Bildschirmgröße wurden rot, ohne dass am Kalender
|
||
irgendetwas kaputt war. Das ist dieselbe Falle wie eine feste
|
||
Umbruchschwelle im CSS: eine Rechnung von gestern, die still falsch
|
||
wird, sobald jemand etwas hinzufügt.
|
||
|
||
Jetzt kommt jede Zahl aus den Daten darüber. Wer morgen einen
|
||
fünften Termin einträgt, muss hier nichts nachziehen -- und wenn
|
||
doch etwas rot wird, liegt es am Kalender und nicht an der
|
||
Buchhaltung dieser Datei. */
|
||
const ERWARTET = {
|
||
termine: termine.length,
|
||
fristen: 1,
|
||
/* Was der Server ausliefern MUSS: die Zettel mit `soll_erscheinen`.
|
||
Der vertrauliche kommt dazu, weil DogFather ihn sehen darf. */
|
||
brettzettel: brettzettel.filter((z) => z[7]).length + 1,
|
||
};
|
||
ERWARTET.pillen = ERWARTET.termine + ERWARTET.fristen + ERWARTET.brettzettel;
|
||
/* Die Arten: call, termin, review (aus `termine`), frist, brett. */
|
||
ERWARTET.arten = new Set([...termine.map((x) => x[0]), "frist", "brett"]).size;
|
||
/* Mit Uhrzeit: die Termine (alle haben eine) plus die Zettel, denen
|
||
eine gegeben wurde. Die Frist hat keine. */
|
||
ERWARTET.mitUhr = ERWARTET.termine
|
||
+ brettzettel.filter((z) => z[7] && z[3]).length;
|
||
ERWARTET.calls = termine.filter((x) => x[0] === "call").length;
|
||
ERWARTET.ohneCalls = ERWARTET.pillen - ERWARTET.calls;
|
||
|
||
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,
|
||
/* Ein Monatsraster zeigt die Randtage der Nachbarmonate mit
|
||
(`data-fremd="ja"`). Fuer die Frage „wandert die Heute-Marke
|
||
mit der Ansicht?" zaehlen nur die EIGENEN Tage -- siehe die
|
||
Pruefung beim Blaettern. */
|
||
heuteEigen: document.querySelectorAll('.k-tag[data-heute="ja"]:not([data-fremd="ja"])').length,
|
||
heuteFremd: document.querySelectorAll('.k-tag[data-heute="ja"][data-fremd="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,
|
||
/* DIE KENNUNG IST DER TITEL-TEXT, nicht der sichtbare Text: Bei
|
||
einem Zeitraum steht im sichtbaren Text "Tag 3/5 ..." und er ist
|
||
abgeschnitten.
|
||
|
||
DER `title` GEHT AUCH NICHT: Er endet bei einem Zeitraum mit
|
||
"(Tag 3 von 5)" und ist damit an jedem Tag ein anderer -- der
|
||
erste Versuch zaehlte deshalb weiter 14 statt 10.
|
||
|
||
Der VERWEIS bleibt gleich: `bereich.html?b=live&zeigen=eintrag-7`
|
||
zeigt an jedem der fuenf Tage auf denselben Eintrag. Wo es
|
||
keinen gibt (Fristen, Calls), tut es der Titel -- die sind immer
|
||
eintaegig. */
|
||
kennung: p.getAttribute("href") || p.title || p.textContent,
|
||
spanne: p.dataset.spanne || null,
|
||
/* DIE FARBE KOMMT AUS `--pfarbe`, NICHT AUS DER LINKEN KANTE.
|
||
Die Kante ist eine Darstellung und faellt weg, wo die Pille ein
|
||
Punkt ist (Handy) -- dann meldete diese Pruefung "1 Farbe" und
|
||
sah aus wie ein Befund am Kalender. Die Eigenschaft dagegen
|
||
steht auf jeder Pille, in jeder Ansicht. */
|
||
farbe: p.style.getPropertyValue("--pfarbe").trim()
|
||
|| getComputedStyle(p).borderLeftColor,
|
||
brett: p.querySelector(".k-pille__brett")?.textContent || null,
|
||
zugesagt: !!p.querySelector('.k-pille__zusage'),
|
||
})),
|
||
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 ----
|
||
|
||
EIN EINTRAG, NICHT EINE MARKE (berichtigt 21.09.2026).
|
||
|
||
Seit ein Termin von-bis ueber die ganze Spanne markiert wird
|
||
(Filipes Wunsch vom 21.09.), setzt ein Eintrag ueber fuenf Tage
|
||
auch FUENF Marken ins Raster. Diese Zeile zaehlte Marken und
|
||
meldete deshalb 14 statt 10 -- ohne dass am Kalender etwas kaputt
|
||
war. Dieselbe Falle wie eine feste Zahl, nur eine Ebene tiefer:
|
||
nicht die Erwartung war veraltet, sondern das, was gemessen wurde.
|
||
|
||
`kennung` ist fuer alle Tage desselben Eintrags gleich. */
|
||
const eintraege = (liste) => new Set(liste.map((x) => x.kennung)).size;
|
||
ok(eintraege(r.pillen) === ERWARTET.pillen,
|
||
`alle ${ERWARTET.pillen} Einträge stehen im Raster `
|
||
+ `(${eintraege(r.pillen)} Einträge in ${r.pillen.length} Marken)`);
|
||
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 === ERWARTET.arten,
|
||
`${ERWARTET.arten} Arten, ${ERWARTET.arten} Farben (${farben.size})`);
|
||
/* Die Uhrzeit steht vorn -- ausser bei der Frist, die keine hat. */
|
||
{
|
||
const mitUhr = r.pillen.filter((p) => /^\d{2}:\d{2}/.test(p.text)).length;
|
||
ok(mitUhr === ERWARTET.mitUhr,
|
||
`${ERWARTET.mitUhr} Einträge mit Uhrzeit, die Frist ohne (${mitUhr})`);
|
||
}
|
||
|
||
/* ---- Zaehler in der Kopfzeile ---- */
|
||
ok(new RegExp(`KW \\d+( – \\d+)? · ${ERWARTET.pillen} Einträge`).test(r.unter),
|
||
`die Kopfzeile zählt mit ("${r.unter}")`);
|
||
|
||
/* ---- Filter ---- */
|
||
ok(r.chips.length === ERWARTET.arten,
|
||
`${ERWARTET.arten} 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(eintraege(nachFilter.pillen) === ERWARTET.ohneCalls,
|
||
`Calls ausgeschaltet: ${ERWARTET.ohneCalls} Einträge übrig `
|
||
+ `(${eintraege(nachFilter.pillen)})`);
|
||
ok(new RegExp(`· ${ERWARTET.ohneCalls} 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})`);
|
||
/* DIESE PRUEFUNG WAR EINE ZEITBOMBE (entschärft 29.09.2026).
|
||
|
||
Sie stand auf `weiter.heuteZellen === 0` und war jahrelang grün
|
||
-- bis heute. Am 29. September zeigt das Oktober-Raster in
|
||
seiner ersten Zeile die letzten Septembertage mit, und einer
|
||
davon IST heute. Die Anwendung macht dabei alles richtig:
|
||
`kalender.js` setzt die Marke an `tag === daten.heute`, also am
|
||
Datum und nicht an der Rasterposition. Genau das sollte die
|
||
Pruefung ja beweisen -- und schlug an, weil die Anwendung es
|
||
tat.
|
||
|
||
Geschrieben wurde sie an einem Tag in der Monatsmitte. Von da
|
||
an war sie richtig, bis der Kalender sie einholte, und dann
|
||
kostete der Fehlalarm Vertrauen in den ganzen Satz. Dasselbe
|
||
Muster wie `gate-oeffnung.mjs` am 06.09.2026 im Shop.
|
||
|
||
Gefragt wird jetzt, was gemeint war: Die Marke darf NICHT an
|
||
der Ansicht haengen. Ein EIGENER Tag des Folgemonats darf nie
|
||
„heute" sein -- ein mitgezeigter Randtag des laufenden Monats
|
||
dagegen sehr wohl, und zwar genau dann, wenn er es ist. Das
|
||
gilt an jedem Tag des Jahres. */
|
||
ok(weiter.heuteEigen === 0,
|
||
`im nächsten Monat ist kein EIGENER Tag mehr "heute" `
|
||
+ `(${weiter.heuteEigen} eigene, ${weiter.heuteFremd} mitgezeigte Randtage)`);
|
||
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();
|
||
}
|
||
|
||
/* =====================================================================
|
||
WAS VON DEN BRETTERN KOMMT (17.09.2026)
|
||
|
||
Gemessen vor dem Bau: /workspace/api/termine lieferte `termine` und
|
||
`fristen` -- die Zettel von den achtzehn Brettern kamen nirgends
|
||
vor, obwohl `eintraege` seit langem vier Zeitfelder hat (datum,
|
||
uhrzeit, geplant, event_ende).
|
||
===================================================================== */
|
||
{
|
||
console.log("\n=== Zettel von den Brettern ===");
|
||
const kontext = await browser.newContext({ viewport: { width: 1366, height: 900 } });
|
||
const seite = await anmelden(kontext, "admin", "CODE-DOGI-0001");
|
||
await seite.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(1200);
|
||
|
||
/* Erst die Schnittstelle -- sie ist die Quelle, und wenn sie schon
|
||
falsch liefert, sagt die Oberflaeche nichts ueber die Ursache. */
|
||
const roh = await seite.evaluate(async () => {
|
||
const a = await fetch("/workspace/api/termine?tage=30", { credentials: "same-origin" });
|
||
return a.ok ? a.json() : null;
|
||
});
|
||
ok(!!roh && Array.isArray(roh.brettsachen),
|
||
`die Schnittstelle liefert die Zettel (${roh?.brettsachen?.length})`);
|
||
const titel = (roh?.brettsachen || []).map((b) => b.titel);
|
||
|
||
for (const [, t2, , , , , , soll] of brettzettel) {
|
||
ok(titel.includes(t2) === soll,
|
||
soll ? `„${t2}" ist dabei` : `„${t2}" bleibt draussen -- und das ist der Punkt`);
|
||
}
|
||
ok(!titel.includes("Vertraulich: Sponsorgespraech")
|
||
|| true, "(die Leitung darf den vertraulichen sehen)");
|
||
ok(titel.includes("Vertraulich: Sponsorgespraech"),
|
||
"DogFather sieht auch den vertraulichen");
|
||
|
||
/* DER MASSGEBLICHE TAG. Eine Zusage schlaegt das Erfassungsdatum --
|
||
wer sagt „am 24.", meint den 24., auch wenn der Zettel am 3.
|
||
entstanden ist. Ohne diese Zeile stuende die Zusage am falschen
|
||
Tag, und das faellt niemandem auf, weil sie ja dasteht. */
|
||
{
|
||
const z = (roh?.brettsachen || []).find((b) => b.titel === "Zugesagt: Retro-Abend");
|
||
ok(z?.wann === in5,
|
||
`die Zusage steht am zugesagten Tag (${z?.wann}), nicht am Erfassungstag (${heute})`);
|
||
ok(z?.grund === "zugesagt", `und der Grund steht dabei (${z?.grund})`);
|
||
}
|
||
|
||
/* Jetzt die Oberflaeche. */
|
||
const gesehen = await lesen(seite);
|
||
const brettpillen = gesehen.pillen.filter((p) => p.brett);
|
||
ok(brettpillen.length >= 4,
|
||
`im Kalender stehen ${brettpillen.length} Zettel mit Brettnamen`);
|
||
ok(brettpillen.some((p) => p.zugesagt),
|
||
"eine Zusage traegt ihr eigenes Zeichen");
|
||
ok(brettpillen.some((p) => !p.zugesagt),
|
||
"und ein bloss datierter Zettel nicht -- sonst waere das Zeichen bedeutungslos");
|
||
ok(gesehen.chips.some((c) => c.text.startsWith("Vom Brett")),
|
||
`der Filter kennt sie (${gesehen.chips.map((c) => c.text).join(", ")})`);
|
||
|
||
/* WEGSCHALTEN MUSS GEHEN. Ein Kalender, in dem alles steht und nichts
|
||
ausblendbar ist, ist wieder eine Liste. */
|
||
{
|
||
const vorher = (await lesen(seite)).pillen.filter((p) => p.brett).length;
|
||
await seite.click('.k-chip:has-text("Vom Brett")');
|
||
await seite.waitForTimeout(300);
|
||
const nachher = (await lesen(seite)).pillen.filter((p) => p.brett).length;
|
||
ok(vorher > 0 && nachher === 0,
|
||
`der Schalter blendet sie aus (${vorher} -> ${nachher})`);
|
||
await seite.click('.k-chip:has-text("Vom Brett")');
|
||
await seite.waitForTimeout(300);
|
||
}
|
||
|
||
/* KEINE KALENDER-KNOEPFE AN EINEM ZETTEL. „Erledigt" haette
|
||
PATCH /api/termine/b12 geschickt -- eine Nummer, die es dort nicht
|
||
gibt, an eine Schnittstelle, die davon nichts weiss. Still, ohne
|
||
Wirkung, ohne Meldung. */
|
||
{
|
||
await seite.click('.k-ansicht[data-ansicht="liste"]');
|
||
await seite.waitForTimeout(600);
|
||
const zeilen = await seite.evaluate(() =>
|
||
[...document.querySelectorAll('.k-zeile[data-art="brett"]')].map((z) => ({
|
||
art: z.querySelector(".k-zeile__art")?.textContent || "",
|
||
knoepfe: [...z.querySelectorAll(".k-zeile__knoepfe *")]
|
||
.map((k) => k.textContent.trim()).filter(Boolean),
|
||
})));
|
||
ok(zeilen.length > 0, `in der Liste stehen ${zeilen.length} Zettel`);
|
||
/* DIE ANZAHL GEHOERT IN DIE BEDINGUNG, nicht nur in den Meldetext.
|
||
`every()` liefert auf einem LEEREN Feld `true` -- beim ersten Lauf
|
||
stand hier genau das: „jeder hat den Weg zurueck" war gruen, und
|
||
es gab null Zeilen, weil der Umschalter-Selektor falsch war. Eine
|
||
Pruefung, die ohne Daten bestaetigt, bestaetigt nichts. */
|
||
ok(zeilen.length > 0 && zeilen.every((z) => z.knoepfe.includes("zum Brett")),
|
||
`jeder der ${zeilen.length} hat den Weg zurueck zu seinem Brett`);
|
||
ok(zeilen.length > 0
|
||
&& zeilen.every((z) => !z.knoepfe.some((k) => /erledigt|l..schen|Wecker/i.test(k))),
|
||
`und keiner die Knoepfe eines Termins (${zeilen[0]?.knoepfe.join(", ")})`);
|
||
ok(zeilen.length > 0 && zeilen.some((z) => z.art && z.art !== "Vom Brett"),
|
||
`in der Liste steht das Brett und nicht die Art (${zeilen[0]?.art})`);
|
||
}
|
||
/* ---- DIE ZWEITE ZEILE NUR, WO SIE LESBAR IST ---------------------
|
||
|
||
GEMESSEN WIRD SICHTBARKEIT, NICHT VORHANDENSEIN. `textContent`
|
||
liefert den Brettnamen auch dann, wenn `display: none` ihn
|
||
ausblendet -- eine Pruefung darauf waere fuer diese Aenderung
|
||
blind gewesen und trotzdem gruen. Gefragt wird deshalb nach der
|
||
tatsaechlichen Hoehe. */
|
||
{
|
||
const messen = () => seite.evaluate(() =>
|
||
[...document.querySelectorAll(".k-tag .k-pille__brett")]
|
||
.map((b) => b.offsetHeight > 0));
|
||
await seite.click('.k-ansicht[data-ansicht="monat"]');
|
||
await seite.waitForTimeout(400);
|
||
const breit = await messen();
|
||
ok(breit.length > 0 && breit.every(Boolean),
|
||
`am Rechner steht das Brett an allen ${breit.length} Zetteln`);
|
||
|
||
await seite.setViewportSize({ width: 390, height: 844 });
|
||
await seite.waitForTimeout(500);
|
||
const eng = await messen();
|
||
ok(eng.length > 0 && eng.every((x) => x === false),
|
||
`am Handy bleibt es weg -- dort waere es ein „Co…" (${eng.length} geprueft)`);
|
||
await seite.setViewportSize({ width: 1366, height: 900 });
|
||
await seite.waitForTimeout(400);
|
||
}
|
||
|
||
/* ---- DER WEG ZUM ZETTEL, NICHT NUR ZUM BRETT ---------------------
|
||
|
||
Ein Link, der auf das Brett fuehrt, laesst einen zwischen zwanzig
|
||
Eintraegen suchen -- dann hat er nichts gebracht. Geprueft wird
|
||
deshalb nicht, dass die Adresse stimmt, sondern dass am Ende der
|
||
richtige Zettel HERVORGEHOBEN dasteht. */
|
||
{
|
||
await seite.click('.k-ansicht[data-ansicht="liste"]');
|
||
await seite.waitForTimeout(500);
|
||
const wohin = await seite.evaluate(() => {
|
||
const z = [...document.querySelectorAll('.k-zeile[data-art="brett"]')]
|
||
.find((x) => /Clip am Wochenende/.test(x.textContent));
|
||
return z?.querySelector("a")?.getAttribute("href") || null;
|
||
});
|
||
ok(!!wohin && /zeigen=eintrag-\d+/.test(wohin),
|
||
`der Weg fuehrt auf den Zettel (${wohin})`);
|
||
await seite.goto(BASIS + "/workspace/" + wohin, { waitUntil: "networkidle" });
|
||
await seite.waitForTimeout(1400);
|
||
const dort = await seite.evaluate(() => {
|
||
const t2 = [...document.querySelectorAll('.eintrag-karte[data-treffer="ja"]')];
|
||
return {
|
||
markiert: t2.length,
|
||
text: t2[0]?.textContent?.slice(0, 60) || "",
|
||
leiste: document.querySelector(".ziel-leiste__text")?.textContent || "",
|
||
};
|
||
});
|
||
ok(dort.markiert === 1,
|
||
`auf dem Brett ist genau ein Zettel hervorgehoben (${dort.markiert})`);
|
||
ok(/Clip am Wochenende/.test(dort.text),
|
||
`und zwar der richtige (${dort.text.trim().slice(0, 40)})`);
|
||
ok(dort.leiste.length > 5, `mit einer Zeile, die sagt was gezeigt wird ("${dort.leiste}")`);
|
||
}
|
||
|
||
await kontext.close();
|
||
|
||
/* ---- DIE RECHTEFRAGE ---------------------------------------------
|
||
|
||
Im Kalender steht nur eine kleine Pille mit einem Titel. Dass
|
||
darin ein vertrauliches Vorhaben steckt, faellt niemandem auf, der
|
||
nicht danach sucht -- genau deshalb ist das die Stelle, an der ein
|
||
Leck lange unbemerkt bliebe. */
|
||
{
|
||
const k2 = await browser.newContext({ viewport: { width: 1366, height: 900 } });
|
||
const s2 = await anmelden(k2, "creator", "CODE-ANNA-0001");
|
||
await s2.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
|
||
await s2.waitForTimeout(1200);
|
||
const roh2 = await s2.evaluate(async () => {
|
||
const a = await fetch("/workspace/api/termine?tage=30", { credentials: "same-origin" });
|
||
return a.ok ? a.json() : null;
|
||
});
|
||
const t2 = (roh2?.brettsachen || []).map((b) => b.titel);
|
||
ok(!t2.includes("Vertraulich: Sponsorgespraech"),
|
||
`eine Creatorin sieht den vertraulichen Zettel NICHT (${t2.length} sichtbar)`);
|
||
/* GEGENPROBE: Sie sieht ueberhaupt etwas. Ohne diese Zeile waere
|
||
„sieht das Vertrauliche nicht" auch dann gruen, wenn die Abfrage
|
||
gar nichts liefert -- und dann bewiese sie nichts. */
|
||
ok(t2.length > 0,
|
||
`aber sehr wohl die offenen (${t2.slice(0, 2).join(", ")})`);
|
||
await k2.close();
|
||
}
|
||
}
|
||
|
||
|
||
/* =======================================================================
|
||
AM HANDY WIRD AUS EINER PILLE EIN PUNKT
|
||
=======================================================================
|
||
|
||
Eine Monatszelle ist am Handy 42-49 px breit. Abzueglich Zellen- und
|
||
Pillenrand bleiben 16-23 px fuer Text -- anderthalb Buchstaben und
|
||
drei Punkte. "Content-Ideen sammeln" wurde zu "C…".
|
||
|
||
Seit dem 21.09.2026 wird daraus ein Punkt: Man sieht, DASS an dem
|
||
Tag etwas ist und wie viel, und tippt den Tag an, um zu lesen, was.
|
||
Ein Zeitraum bleibt ein durchgehender Balken -- sonst ginge genau
|
||
das verloren, wofuer er gebaut wurde.
|
||
|
||
WAS HIER GEMESSEN WIRD, und warum gerade das: Die Groesse allein
|
||
genuegt NICHT. Beim Bauen war die Pille bereits 8 x 8 gross und trug
|
||
trotzdem ihren Titel quer ueber die Nachbarzellen -- weil eine
|
||
Sammelregel aus start.css die Schriftgroesse zurueckholte. Die
|
||
Zahlen sagten "alles gut", das Bildschirmfoto sagte das Gegenteil.
|
||
Deshalb wird hier beides gefragt: die Groesse UND ob irgendetwas
|
||
ueber den Rand der Zelle hinausragt.
|
||
======================================================================= */
|
||
console.log("\n=== Am Handy wird aus einer Pille ein Punkt");
|
||
{
|
||
/* MIT FINGER. Ohne `hasTouch` meldet der Browser einen feinen
|
||
Zeiger, und keine Regel aus `@media (pointer: coarse)` greift --
|
||
dort stehen die 44-Pixel-Beruehrziele. Siehe pruef-fingermass.mjs. */
|
||
const kPunkt = await browser.newContext({ viewport: { width: 390, height: 1100 },
|
||
hasTouch: true, isMobile: true });
|
||
const sPunkt = await anmelden(kPunkt, "admin", "CODE-DOGI-0001");
|
||
try {
|
||
await sPunkt.goto(BASIS + "/workspace/kalender.html", { waitUntil: "networkidle" });
|
||
await sPunkt.waitForTimeout(900);
|
||
|
||
const lage = await sPunkt.evaluate(() => {
|
||
const raster = document.querySelector(".k-raster");
|
||
if (!raster) return null;
|
||
const zellen = [...document.querySelectorAll(".k-tag")];
|
||
const pillen = [...document.querySelectorAll(".k-tag .k-pille")];
|
||
const punkte = pillen.filter((p) => !p.dataset.spanne);
|
||
const balken = pillen.filter((p) => p.dataset.spanne);
|
||
|
||
/* RAGT IRGENDETWAS UEBER SEINE ZELLE HINAUS? Das ist die Frage,
|
||
an der es beim Bauen haengengeblieben ist. Zwei Pixel Luft --
|
||
Raender und Rundungen. */
|
||
const raus = [];
|
||
for (const z of zellen) {
|
||
const rz = z.getBoundingClientRect();
|
||
for (const e of z.querySelectorAll("*")) {
|
||
const r = e.getBoundingClientRect();
|
||
if (r.width < 1) continue;
|
||
if (r.right > rz.right + 2) {
|
||
raus.push(`${e.className}: ${Math.round(r.right - rz.right)}px ueber den Rand`);
|
||
}
|
||
}
|
||
}
|
||
|
||
const masse = (liste) => liste.map((p) => {
|
||
const r = p.getBoundingClientRect();
|
||
return { b: Math.round(r.width), h: Math.round(r.height),
|
||
zeiger: getComputedStyle(p).pointerEvents,
|
||
schrift: getComputedStyle(p).fontSize };
|
||
});
|
||
|
||
return {
|
||
raster: Math.round(raster.getBoundingClientRect().width),
|
||
zelle: zellen[0] ? Math.round(zellen[0].getBoundingClientRect().width) : 0,
|
||
punkte: masse(punkte), balken: masse(balken),
|
||
raus: raus.slice(0, 5),
|
||
/* Die Zelle muss antippbar bleiben -- der Punkt ist es nicht,
|
||
also muss es jemand sein. */
|
||
zelleKnopf: zellen.filter((z) => z.getAttribute("role") === "button").length,
|
||
zellen: zellen.length,
|
||
};
|
||
});
|
||
|
||
ok(!!lage, "das Monatsraster steht am Handy");
|
||
if (lage) {
|
||
console.log(` Raster ${lage.raster}px, Zelle ${lage.zelle}px, `
|
||
+ `${lage.punkte.length} Punkte, ${lage.balken.length} Balken`);
|
||
|
||
/* DIE ZAHL GEHOERT IN DIE BEDINGUNG: Ohne Eintraege waere unten
|
||
alles gruen und nichts geprueft. */
|
||
ok(lage.punkte.length > 0,
|
||
`es gibt ueberhaupt Eintraege zu messen (${lage.punkte.length})`);
|
||
ok(lage.punkte.every((p) => p.b <= 12 && p.h <= 12),
|
||
`jeder Termin ist ein Punkt (${lage.punkte.map((p) => p.b + "x" + p.h).join(", ")})`);
|
||
ok(lage.punkte.every((p) => p.schrift === "0px"),
|
||
`und traegt keinen Text mehr (${[...new Set(lage.punkte.map((p) => p.schrift))].join(", ")})`);
|
||
ok(lage.punkte.every((p) => p.zeiger === "none"),
|
||
"ein 8-px-Punkt ist nicht einzeln antippbar -- der Tipp gehoert der Zelle");
|
||
ok(lage.zelleKnopf === lage.zellen,
|
||
`und jede Zelle IST antippbar (${lage.zelleKnopf} von ${lage.zellen})`);
|
||
|
||
/* DER EIGENTLICHE BEFUND VON DAMALS. */
|
||
ok(lage.raus.length === 0, lage.raus.length === 0
|
||
? "nichts ragt ueber den Rand seiner Zelle hinaus"
|
||
: `ragt hinaus: ${lage.raus.join(" | ")}`);
|
||
|
||
/* Ein Zeitraum bleibt ein Balken -- breiter als ein Punkt. */
|
||
if (lage.balken.length) {
|
||
ok(lage.balken.every((b) => b.b > 12),
|
||
`ein Zeitraum bleibt ein durchgehender Balken (${lage.balken.map((b) => b.b + "px").join(", ")})`);
|
||
}
|
||
}
|
||
|
||
/* GEGENPROBE: Das Raster breiter machen, bis die Abfrage nicht mehr
|
||
greift -- dann muessen die Punkte wieder zu Pillen mit Text
|
||
werden. Ohne das waere oben nur bewiesen, dass es IRGENDEINE
|
||
Regel gibt, nicht dass sie an der Breite haengt. */
|
||
const gegen = await sPunkt.evaluate(() => {
|
||
const raster = document.querySelector(".k-raster");
|
||
if (!raster) return null;
|
||
const vorher = raster.style.width;
|
||
raster.style.width = "1200px";
|
||
/* Layout erzwingen, sonst misst man den Stand von davor. */
|
||
void raster.offsetWidth;
|
||
const p = document.querySelector(".k-tag .k-pille");
|
||
const st = p ? getComputedStyle(p) : null;
|
||
const aus = st ? { schrift: st.fontSize, zeiger: st.pointerEvents,
|
||
breite: Math.round(p.getBoundingClientRect().width) } : null;
|
||
raster.style.width = vorher;
|
||
return aus;
|
||
});
|
||
ok(gegen && gegen.schrift !== "0px" && gegen.zeiger === "auto",
|
||
`bei breitem Raster steht der Titel wieder da `
|
||
+ `(${gegen ? gegen.schrift + ", " + gegen.breite + "px, " + gegen.zeiger : "nicht messbar"})`);
|
||
} finally {
|
||
await kPunkt.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);
|