Scouting: links die normalen Creator, rechts die Premium
Filipe: "ich will dass es da in der mitte eine trennung gibt. links sollen normale creator sein und rechts premium creator. es gibt bei tiktok naemlich diese zwei optionen von streamer ... auch dass wenn man die eintraegt soll man aussuchen koennen." Jede Stufe der Pipeline hat jetzt zwei Spalten mit einer Trennlinie dazwischen. Die Trennung sitzt IN der Stufe, nicht einmal ueber der ganzen Seite: Zwei komplette Pipelines nebeneinander haetten jede Stufenueberschrift verdoppelt und die beiden Seiten waeren nie auf gleicher Hoehe gewesen. GENAU ZWEI WERTE, kein "weiss nicht". Anders als bei `netzwerk`, wo "noch nicht gefragt" eine eigene gueltige Antwort ist: Dort wird eine fremde Tatsache festgehalten, hier eine eigene Absicht -- und deren Normalfall ist "normal". NULL wird als "normal" gelesen, der eine vorhandene Lead steht damit links, ohne dass ihm etwas unterstellt wird. DIE ART UEBERLEBT DIE UEBERGABE. Beim Creator-Onboarding wandert sie auf die Person und ist in der Personenverwaltung aenderbar. Ohne das endet die Angabe genau dort, wo sie zum ersten Mal vertraglich zaehlt. Die Schwelle misst den STUFENKASTEN (@container), nicht das Fenster -- der Fehler vom 06.09.2026 im selben Haus. Auf dem Handy liegen die Spalten untereinander, die senkrechte Linie faellt weg. ZWEI FUNDE BEIM BAUEN, beide von Hauswachen: * `pruef-fingermass` fand, dass meine neue Handy-Messung mit `setViewportSize` statt eigenem Kontext lief -- ohne `hasTouch` greift keine einzige Regel aus `@media (pointer: coarse)`. * Die Klassen hiessen zuerst `.spalte__*` -- die gehoeren `aufgaben.css`, und scouting.html laedt die VOR scouting.css. `margin-left: auto` aus dem Aufgabenbrett zog die Zahl 560 px von ihrem Wort weg, ohne dass eine Pruefung rot wurde. Jetzt `.art-spalte__*`, und der Abstand wird gemessen. pruef-scouting-felder: 28 -> 64 Pruefungen, gruen. Zwei Gegenproben gefahren (Trennung deaktiviert, Spaltenreihenfolge gedreht) -- beide schlugen an. Dazu gruen: haus-trennung, css-klassen, personen-liste, personen-kachel, hand-personen, schranke, formulare, lesbarkeit, agentur, deutsche-texte, tippziele, leerzustand, fingermass. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -222,7 +222,113 @@ console.log("\n=== Die Pipeline gibt es auf der crew-Adresse nicht ===");
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
5. Und die Oberflaeche zeigt es auch
|
||||
5. Normal oder Premium -- die beiden Arten, die TikTok kennt
|
||||
======================================================================= */
|
||||
console.log("\n=== Normal und Premium ===");
|
||||
let premiumId = null, uebergebenId = null;
|
||||
{
|
||||
/* Die Liste kommt vom Server, damit die Oberflaeche keine eigene
|
||||
fuehrt -- und die REIHENFOLGE ist die der Spalten: links, rechts. */
|
||||
const { daten } = await ruf("GET", "/workspace/api/leads", keksScout);
|
||||
ok(Array.isArray(daten?.arten) && daten.arten.length === 2
|
||||
&& daten.arten[0] === "normal" && daten.arten[1] === "premium",
|
||||
`die Artenliste kommt vom Server, in der Reihenfolge der Spalten (${(daten?.arten || []).join(", ")})`);
|
||||
ok(daten?.art_name?.premium === "Premium",
|
||||
`und ihre Namen (${daten?.art_name?.premium})`);
|
||||
|
||||
/* DER LEAD VON OBEN HAT NIE EINE ART BEKOMMEN. Er muss trotzdem in
|
||||
einer der beiden Spalten liegen, sonst waere er unsichtbar. */
|
||||
const alt = (daten?.leads || []).find((x) => x.id === leadId);
|
||||
ok(alt?.creator_art === "normal",
|
||||
`ein Kontakt ohne Angabe gilt als "normal" (${alt?.creator_art})`);
|
||||
}
|
||||
{
|
||||
const { status, daten } = await ruf("POST", "/workspace/api/leads", keksScout, {
|
||||
name: "Nala", plattform: "TikTok", handle: "@nala",
|
||||
creator_art: "premium", status: "angesprochen",
|
||||
});
|
||||
ok(status === 201, `ein Premium-Kontakt laesst sich anlegen (HTTP ${status})`);
|
||||
premiumId = daten?.id;
|
||||
const liste = await ruf("GET", "/workspace/api/leads", keksScout);
|
||||
const l = (liste.daten?.leads || []).find((x) => x.id === premiumId);
|
||||
ok(l?.creator_art === "premium", `und bleibt Premium (${l?.creator_art})`);
|
||||
}
|
||||
{
|
||||
/* GEGENPROBEN. Eine erfundene Art wird NICHT stillschweigend zu
|
||||
"normal" gemacht -- wer sich vertippt, soll es erfahren, statt die
|
||||
Karte in der falschen Spalte zu suchen. */
|
||||
const falsch = await ruf("PATCH", `/workspace/api/leads/${premiumId}`, keksScout,
|
||||
{ creator_art: "vip" });
|
||||
ok(falsch.status === 400, `eine erfundene Art wird abgelehnt (HTTP ${falsch.status})`);
|
||||
|
||||
/* Und die Gegenprobe zur Gegenprobe: Umstellen geht. Ohne sie hiesse
|
||||
"wird abgelehnt" auch "wird immer abgelehnt". */
|
||||
const zurueck = await ruf("PATCH", `/workspace/api/leads/${premiumId}`, keksScout,
|
||||
{ creator_art: "normal" });
|
||||
ok(zurueck.status === 200, `auf "normal" umstellen geht (HTTP ${zurueck.status})`);
|
||||
const wieder = await ruf("PATCH", `/workspace/api/leads/${premiumId}`, keksScout,
|
||||
{ creator_art: "premium" });
|
||||
ok(wieder.status === 200, `und wieder zurueck auf "premium" (HTTP ${wieder.status})`);
|
||||
const liste = await ruf("GET", "/workspace/api/leads", keksScout);
|
||||
const l = (liste.daten?.leads || []).find((x) => x.id === premiumId);
|
||||
ok(l?.creator_art === "premium", `der Wert steht danach richtig da (${l?.creator_art})`);
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
6. Die Art ueberlebt die Uebergabe
|
||||
======================================================================= */
|
||||
console.log("\n=== Vom Lead zum Creator ===");
|
||||
{
|
||||
const keksDogi = await anmelden("admin", "CODE-DOGI-0001");
|
||||
const neu = await ruf("POST", "/workspace/api/leads", keksScout, {
|
||||
name: "Nova", plattform: "TikTok", handle: "@nova",
|
||||
creator_art: "premium", status: "uebergeben",
|
||||
});
|
||||
uebergebenId = neu.daten?.id;
|
||||
ok(neu.status === 201, `ein uebergebener Premium-Lead entsteht (HTTP ${neu.status})`);
|
||||
|
||||
const ob = await ruf("POST", `/workspace/api/leads/${uebergebenId}/onboarding`, keksDogi,
|
||||
{ name: "Nova" });
|
||||
ok(ob.status === 201, `das Onboarding legt den Creator an (HTTP ${ob.status})`);
|
||||
const creatorId = ob.daten?.id;
|
||||
|
||||
const liste = await ruf("GET", "/workspace/api/verwaltung/personen", keksDogi);
|
||||
const person = (liste.daten?.personen || []).find((x) => x.id === creatorId);
|
||||
/* DAS IST DER PUNKT DIESES ABSCHNITTS: Ohne diese Zeile endet die
|
||||
Angabe genau dort, wo sie zum ersten Mal vertraglich zaehlt. */
|
||||
ok(person?.creator_art === "premium",
|
||||
`und die Art geht mit auf den Creator (${person?.creator_art})`);
|
||||
ok(Array.isArray(liste.daten?.arten) && liste.daten.arten.length === 2,
|
||||
`die Personenliste bringt dieselbe Artenliste mit (${(liste.daten?.arten || []).join(", ")})`);
|
||||
|
||||
/* AENDERBAR, nicht nur gesetzt. Ein Wert, den man einmal setzt und nie
|
||||
wieder, war am 11.09.2026 der eigentliche Mangel der Pipeline. */
|
||||
const um = await ruf("PUT", `/workspace/api/verwaltung/personen/${creatorId}/creator-art`,
|
||||
keksDogi, { creator_art: "normal" });
|
||||
ok(um.status === 200, `die Art laesst sich am Creator aendern (HTTP ${um.status})`);
|
||||
const danach = await ruf("GET", "/workspace/api/verwaltung/personen", keksDogi);
|
||||
const p2 = (danach.daten?.personen || []).find((x) => x.id === creatorId);
|
||||
ok(p2?.creator_art === "normal", `und steht danach auf normal (${p2?.creator_art})`);
|
||||
|
||||
/* Gegenproben: Unsinn und falsche Rolle. */
|
||||
const unsinn = await ruf("PUT", `/workspace/api/verwaltung/personen/${creatorId}/creator-art`,
|
||||
keksDogi, { creator_art: "deluxe" });
|
||||
ok(unsinn.status === 400, `eine erfundene Art wird auch hier abgelehnt (HTTP ${unsinn.status})`);
|
||||
|
||||
const scoutPerson = (danach.daten?.personen || []).find((x) => x.rolle === "scout");
|
||||
const falscheRolle = await ruf("PUT",
|
||||
`/workspace/api/verwaltung/personen/${scoutPerson?.id}/creator-art`, keksDogi,
|
||||
{ creator_art: "premium" });
|
||||
ok(falscheRolle.status === 404,
|
||||
`an einem Scout gibt es keine Creator-Art (HTTP ${falscheRolle.status})`);
|
||||
|
||||
/* Zurueck auf Premium -- die Oberflaechenpruefung unten erwartet es so. */
|
||||
await ruf("PUT", `/workspace/api/verwaltung/personen/${creatorId}/creator-art`,
|
||||
keksDogi, { creator_art: "premium" });
|
||||
}
|
||||
|
||||
/* =======================================================================
|
||||
7. Und die Oberflaeche zeigt es auch
|
||||
======================================================================= */
|
||||
console.log("\n=== Die Seite selbst ===");
|
||||
{
|
||||
@@ -261,6 +367,79 @@ console.log("\n=== Die Seite selbst ===");
|
||||
.catch(() => null);
|
||||
ok(warn === "Schon im Netzwerk", `die Netzwerk-Warnung ist zu sehen (${warn})`);
|
||||
|
||||
/* ===== LINKS NORMAL, RECHTS PREMIUM =============================
|
||||
|
||||
Filipe: "ich will dass es da in der mitte eine trennung gibt."
|
||||
|
||||
Gemessen wird nicht, ob die Klassen da sind, sondern wo die Kaesten
|
||||
WIRKLICH liegen -- links/rechts, auf gleicher Hoehe, mit einer
|
||||
Trennlinie dazwischen. Eine Pruefung auf Klassennamen waere auch
|
||||
dann gruen, wenn das CSS gar nicht geladen haette. */
|
||||
const spaltenLesen = (wo, stufe) => wo.$$eval(
|
||||
`.stufe[data-stufe="${stufe}"] .art-spalte`, (ks) => ks.map((k) => {
|
||||
const r = k.getBoundingClientRect();
|
||||
const stil = getComputedStyle(k);
|
||||
return {
|
||||
art: k.dataset.art,
|
||||
titel: k.querySelector(".art-spalte__titel")?.textContent.trim() || null,
|
||||
zahl: k.querySelector(".art-spalte__zahl")?.textContent.trim() || null,
|
||||
/* Wie weit steht die Zahl von ihrem Wort entfernt? Siehe den
|
||||
Fund vom 06.10.2026 in scouting.css: Eine fremde Regel aus
|
||||
`aufgaben.css` hat sie ans andere Ende der Spalte gezogen,
|
||||
und keine Pruefung wurde rot. */
|
||||
abstand: (() => {
|
||||
const t = k.querySelector(".art-spalte__titel");
|
||||
const z = k.querySelector(".art-spalte__zahl");
|
||||
if (!t || !z) return null;
|
||||
return Math.round(z.getBoundingClientRect().left - t.getBoundingClientRect().right);
|
||||
})(),
|
||||
x: Math.round(r.x), y: Math.round(r.y), breite: Math.round(r.width),
|
||||
randLinks: parseFloat(stil.borderLeftWidth) || 0,
|
||||
namen: [...k.querySelectorAll(".kk__name")].map((n) => n.textContent.trim()),
|
||||
leer: k.querySelector(".art-spalte__leer")?.textContent.trim() || null,
|
||||
};
|
||||
}));
|
||||
|
||||
const neuSpalten = await spaltenLesen(seite, "neu");
|
||||
ok(neuSpalten.length === 2, `die Stufe "Neu" hat zwei Spalten (${neuSpalten.length})`);
|
||||
ok(neuSpalten[0]?.art === "normal" && neuSpalten[0]?.titel === "Normal",
|
||||
`links steht "Normal" (${neuSpalten[0]?.titel})`);
|
||||
ok(neuSpalten[1]?.art === "premium" && neuSpalten[1]?.titel === "Premium",
|
||||
`rechts steht "Premium" (${neuSpalten[1]?.titel})`);
|
||||
/* LINKS IST WIRKLICH LINKS -- in Pixeln, nicht in der Reihenfolge im
|
||||
Quelltext. `order` oder `direction` koennten sie drehen, ohne dass
|
||||
am HTML etwas auffaellt. */
|
||||
ok(neuSpalten.length === 2 && neuSpalten[1].x > neuSpalten[0].x + 100,
|
||||
`und zwar rechts DANEBEN (x ${neuSpalten[0]?.x} -> ${neuSpalten[1]?.x})`);
|
||||
ok(neuSpalten.length === 2 && Math.abs(neuSpalten[0].y - neuSpalten[1].y) <= 4,
|
||||
`beide beginnen auf gleicher Hoehe (y ${neuSpalten[0]?.y} / ${neuSpalten[1]?.y})`);
|
||||
ok((neuSpalten[1]?.randLinks || 0) >= 1,
|
||||
`die Trennung in der Mitte ist eine echte Linie (${neuSpalten[1]?.randLinks} px)`);
|
||||
/* DIE ZAHL GEHOERT NEBEN IHR WORT. Nicht Geschmack: Eine Zahl am
|
||||
anderen Ende einer 580 px breiten Spalte gehoert optisch zu nichts
|
||||
mehr. Gefunden wurde das nur im Bildschirmfoto -- diese Messung
|
||||
holt es in die Zahlen. */
|
||||
ok(neuSpalten.every((k) => k.abstand !== null && k.abstand >= 0 && k.abstand <= 20),
|
||||
`die Zahl steht neben ihrem Wort (${neuSpalten.map((k) => k.abstand + " px").join(" / ")})`);
|
||||
|
||||
/* UND DIE KARTEN LIEGEN AUCH DORT, WO SIE HINGEHOEREN. */
|
||||
ok(neuSpalten[0]?.namen.includes("Tamy"),
|
||||
`der normale Kontakt steht links (${(neuSpalten[0]?.namen || []).join(", ") || "nichts"})`);
|
||||
ok(neuSpalten[1]?.leer === "noch niemand",
|
||||
`die leere Premium-Spalte bleibt stehen und sagt es (${neuSpalten[1]?.leer})`);
|
||||
|
||||
const angSpalten = await spaltenLesen(seite, "angesprochen");
|
||||
ok(angSpalten[1]?.namen.includes("Nala"),
|
||||
`der Premium-Kontakt steht rechts (${(angSpalten[1]?.namen || []).join(", ") || "nichts"})`);
|
||||
ok(angSpalten[0]?.leer === "noch niemand",
|
||||
`und links steht dort "noch niemand" (${angSpalten[0]?.leer})`);
|
||||
|
||||
/* Die Marke auf der Karte -- nur bei Premium, nirgends sonst. */
|
||||
const premiumMarken = await seite.$$eval('.kk .marke-punkt[data-art="premium"]',
|
||||
(ks) => ks.map((k) => k.closest(".kk")?.querySelector(".kk__name")?.textContent.trim()));
|
||||
ok(premiumMarken.length === 2 && premiumMarken.includes("Nala") && premiumMarken.includes("Nova"),
|
||||
`genau die zwei Premium-Karten tragen die Marke (${premiumMarken.join(", ")})`);
|
||||
|
||||
/* AUFKLAPPEN UND ZAEHLEN: Wie viele Felder stehen wirklich zur
|
||||
Verfuegung? Das ist Filipes Frage ("was man da noch alles eintragen
|
||||
kann") als Zahl. Vorher waren es fuenf. */
|
||||
@@ -268,7 +447,59 @@ console.log("\n=== Die Seite selbst ===");
|
||||
await seite.waitForTimeout(700);
|
||||
const felder = await seite.$$eval(".kk__detail input, .kk__detail select, .kk__detail textarea",
|
||||
(ks) => ks.length);
|
||||
ok(felder >= 12, `im Editor stehen ${felder} Felder (vorher 5)`);
|
||||
ok(felder >= 13, `im Editor stehen ${felder} Felder (vorher 5, mit der Art 13)`);
|
||||
|
||||
/* Die Art ist im Editor dabei -- sonst waere sie beim Anlegen zu
|
||||
setzen und danach nie wieder zu aendern. */
|
||||
const artImEditor = await seite.$$eval(".kk__detail select",
|
||||
(ks) => ks.map((k) => [...k.options].map((o) => o.value).join(",")));
|
||||
ok(artImEditor.includes("normal,premium"),
|
||||
`im Editor steht die Art zur Auswahl (${artImEditor.join(" | ")})`);
|
||||
|
||||
/* Und beim ANLEGEN -- das war der zweite Teil von Filipes Wunsch. */
|
||||
await seite.click("#neu-auf");
|
||||
await seite.waitForTimeout(300);
|
||||
const neuArt = await seite.$$eval("#n-art option",
|
||||
(os) => os.map((o) => `${o.value}:${o.textContent.trim()}`));
|
||||
ok(neuArt.length === 2 && neuArt[0] === "normal:Normal" && neuArt[1] === "premium:Premium",
|
||||
`im Formular "Neuer Kontakt" kann man zwischen beiden waehlen (${neuArt.join(", ")})`);
|
||||
await seite.click("#neu-zu");
|
||||
await seite.waitForTimeout(250);
|
||||
|
||||
/* ===== GEGENPROBE: AUF DEM HANDY LIEGEN SIE UNTEREINANDER ========
|
||||
|
||||
Ohne diese Messung wuesste niemand, ob die Trennung ueberhaupt
|
||||
umschaltet -- eine Spaltenregel, die bei 390 px zwei Spalten zu je
|
||||
170 px macht, waere unbedienbar und waere oben trotzdem gruen
|
||||
gewesen. Gleichzeitig beweist sie, dass die erste Messung etwas
|
||||
messen KANN: Dieselben Kaesten, dieselbe Abfrage, anderes Ergebnis.
|
||||
|
||||
MIT EIGENEM KONTEXT UND MIT FINGER (hasTouch), nicht mit
|
||||
`setViewportSize` auf derselben Seite. `hasTouch` gehoert zum
|
||||
KONTEXT und laesst sich danach nicht nachtragen -- ohne ihn meldet
|
||||
der Browser `pointer: fine`, und keine einzige Regel aus
|
||||
`@media (pointer: coarse)` greift. Eine Messung mit Mauszeiger auf
|
||||
390 px vermisst eine Seite, die es auf keinem Telefon gibt, und
|
||||
meldet dabei "in Ordnung". Genau das hat `pruef-fingermass` hier
|
||||
beim ersten Anlauf gefunden -- die Hauswache, die es dafuer gibt. */
|
||||
const handyKontext = await browser.newContext({
|
||||
viewport: { width: 390, height: 844 }, hasTouch: true, isMobile: true,
|
||||
});
|
||||
await handyKontext.addCookies(await ctx.cookies());
|
||||
const handy = await handyKontext.newPage();
|
||||
await handy.goto(seite.url(), { waitUntil: "networkidle" });
|
||||
await handy.waitForTimeout(900);
|
||||
const schmal = await spaltenLesen(handy, "neu");
|
||||
ok(schmal.length === 2, `auf dem Handy sind es immer noch zwei Spalten (${schmal.length})`);
|
||||
ok(schmal.length === 2 && schmal[1].y > schmal[0].y + 40,
|
||||
`aber untereinander statt nebeneinander (y ${schmal[0]?.y} -> ${schmal[1]?.y})`);
|
||||
ok(schmal.length === 2 && Math.abs(schmal[0].x - schmal[1].x) <= 2,
|
||||
`und beide gleich weit links (x ${schmal[0]?.x} / ${schmal[1]?.x})`);
|
||||
ok((schmal[1]?.randLinks || 0) === 0,
|
||||
`die senkrechte Trennlinie faellt dabei weg (${schmal[1]?.randLinks} px)`);
|
||||
ok(schmal.every((k) => k.breite >= 300),
|
||||
`keine Spalte wird gequetscht (${schmal.map((k) => k.breite).join(" / ")} px)`);
|
||||
|
||||
await browser.close();
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user