Webklar-Kundenbereich/test/kundenansichtNeuModulReiter.test.js

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, [])
}))