import { test } from 'node:test' import assert from 'node:assert/strict' import { KURZLABELS, meldeReiter, reiterEintraege } from '../public/fn-reiter.js' import { h } from '../public/termine-dom.js' import { initTermine } from '../public/termine.js' import { initShop, REITER as SHOP_REITER, vergissAuswahl as vergissShop } from '../public/shop.js' import { initBuchungen, REITER as BUCHUNGEN_REITER, vergissAuswahl as vergissBuchungen } from '../public/buchungen.js' import { hoereAufKn, mitDom, routen } from './support/modulAbo.js' // Reiter der Funktionsmodule im Abo-Modell (P4 Task 1, Spec 5.2/5.4, C2): keine eigene Leiste, kn:reiter an die Etage, Kurzlabels. // Ohne modell === 'abo' bleibt die eigene Leiste mit den langen Labels und es gibt kein Ereignis. test('KURZLABELS: genau diese Einträge (C2)', () => { assert.deepEqual(KURZLABELS, { termine: { team: 'Team' }, shop: { uebersicht: 'Start', rechtliches: 'Recht' }, buchungen: { unterkuenfte: 'Preise' } }) }) test('reiterEintraege: Kurzlabel nur mit Eintrag, fremde Felder fallen weg', () => { const liste = [{ key: 'termine', label: 'Termine', render() {} }, { key: 'team', label: 'Team & Plätze', render() {} }] assert.deepEqual(reiterEintraege('termine', liste), [{ key: 'termine', label: 'Termine' }, { key: 'team', label: 'Team & Plätze', kurz: 'Team' }]) assert.deepEqual(reiterEintraege('unbekannt', liste.slice(1)), [{ key: 'team', label: 'Team & Plätze' }]) assert.deepEqual(reiterEintraege('analyse', [{ key: 'heatmap', label: 'Heatmap' }]), [{ key: 'heatmap', label: 'Heatmap' }], 'Analyse: kein Kurzlabel nötig') assert.deepEqual(reiterEintraege('constructor', [{ key: 'toString', label: 'X' }]), [{ key: 'toString', label: 'X' }], 'keine Treffer aus dem Prototyp') }) test('meldeReiter: das Ereignis steigt auf und trägt Einträge, aktiv und bei; ohne Element tut es nichts', mitDom(async (fx) => { const k = hoereAufKn(fx) const el = h('div') document.body.append(el) const bei = () => {} assert.equal(meldeReiter(el, { eintraege: [{ key: 'a', label: 'A' }], aktiv: 'a', bei }), true) assert.deepEqual(k.reiter, [{ eintraege: [{ key: 'a', label: 'A' }], aktiv: 'a', bei }]) assert.equal(meldeReiter(null, { eintraege: [] }), false) assert.equal(meldeReiter({}, { eintraege: [] }), false, 'ohne dispatchEvent') })) // ----------------------------------------------------------------------------------------------------- die drei Module const projekt = (features) => ({ projectId: 'p1', projectName: 'Mein Laden', features }) const funktionen = (modell, kopf, features) => ({ body: { ...(modell === undefined ? {} : { modell }), projects: [projekt(features)], ...kopf } }) const FAELLE = [ { name: 'Terminplaner', init: initTermine, vorher: () => {}, tabelle: (modell) => ({ 'GET /api/funktionen': funktionen(modell, { termine: { verfuegbar: true } }, { termine: { state: 'active', siteKey: 'abcdefghijklmnop' } }), 'GET /api/termine/einstellungen?projectId=p1': { body: { state: 'active', einstellung: {}, fehlt: [] } }, }), alt: ['Termine', 'Leistungen', 'Team & Plätze', 'Einstellungen'], kurz: ['Termine', 'Leistungen', 'Team', 'Einstellungen'], }, { name: 'Webshop', init: initShop, vorher: vergissShop, tabelle: (modell) => ({ 'GET /api/funktionen': funktionen(modell, { shop: { verfuegbar: true }, kundenart: 'unternehmen' }, { shop: {} }), 'GET /api/shop/status?projectId=p1': { body: { verfuegbar: true, state: 'active', anfrage: null } }, }), alt: ['Übersicht', 'Artikel', 'Bestellungen', 'Einstellungen', 'Rechtliches'], kurz: ['Start', 'Artikel', 'Bestellungen', 'Einstellungen', 'Recht'], }, { name: 'Buchungskalender', init: initBuchungen, vorher: vergissBuchungen, tabelle: (modell) => ({ 'GET /api/funktionen': funktionen(modell, { unterkunft: { verfuegbar: true } }, { unterkunft: { state: 'active' } }), 'GET /api/unterkunft/status?projectId=p1': { body: { state: 'active' } }, }), alt: ['Anfragen', 'Kalender', 'Unterkünfte & Preise', 'Rechnungen', 'Einstellungen'], kurz: ['Anfragen', 'Kalender', 'Preise', 'Rechnungen', 'Einstellungen'], }, ] async function oeffne(fx, f, modell) { f.vorher?.() routen(fx, f.tabelle(modell)) const root = h('div') document.body.append(root) await f.init(root, { projectId: 'p1' }) await fx.ruhe() return root } for (const f of FAELLE) { test(`${f.name}, Abo: keine eigene Leiste, kn:reiter mit Kurzlabels, bei() wechselt`, mitDom(async (fx) => { const k = hoereAufKn(fx) const root = await oeffne(fx, f, 'abo') assert.ok(fx.finde(root, '[role="tablist"]') === null) assert.ok(fx.finde(root, '[role="tab"]') === null) const panel = fx.finde(root, '[role="tabpanel"]') assert.ok(panel, 'das Panel bleibt') assert.equal(panel.hasAttribute('aria-labelledby'), false) assert.ok(panel.getAttribute('aria-label'), 'das Panel trägt aria-label') const erst = k.reiter.at(-1) assert.deepEqual(erst.eintraege.map((e) => e.label), f.alt) assert.deepEqual(erst.eintraege.map((e) => e.kurz ?? e.label), f.kurz) const andere = erst.eintraege.find((e) => e.key !== erst.aktiv).key erst.bei(andere) await fx.ruhe() assert.equal(k.reiter.at(-1).aktiv, andere) assert.equal(panel.getAttribute('aria-label'), erst.eintraege.find((e) => e.key === andere).label) })) test(`${f.name}, ohne modell (fehlt, „Abo“, „abo “): eigene Leiste mit langen Labels, kein Ereignis`, mitDom(async (fx) => { for (const modell of [undefined, 'Abo', 'abo ']) { const k = hoereAufKn(fx) const root = await oeffne(fx, f, modell) assert.deepEqual(fx.alle(root, '[role="tab"]').map((t) => fx.text(t)), f.alt, String(modell)) assert.ok(fx.finde(root, '[role="tablist"]')) assert.equal(k.reiter.length, 0, String(modell)) } })) } test('die langen Labels der Reiterlisten bleiben unverändert (Pins buchungenUi und shopView)', () => { assert.deepEqual(SHOP_REITER.map((r) => r.label), FAELLE[1].alt) assert.deepEqual(BUCHUNGEN_REITER.map((r) => r.label), FAELLE[2].alt) }) test('Webshop im Abo-Modell, Zustand off: die Reiterliste ist leer', mitDom(async (fx) => { const k = hoereAufKn(fx) vergissShop() routen(fx, { 'GET /api/funktionen': funktionen('abo', { shop: { verfuegbar: true }, kundenart: 'unternehmen' }, { shop: { state: 'off' } }), 'GET /api/shop/status?projectId=p1': { body: { verfuegbar: true, state: 'off', anfrage: null } }, }) const root = h('div') document.body.append(root) await initShop(root, { projectId: 'p1' }) await fx.ruhe() assert.ok(k.reiter.length > 0, 'die Ansicht meldet sich') assert.deepEqual(k.reiter.at(-1).eintraege, []) }))