Kundenansicht im Dashboard: Kennung bei jeder Anfrage, Banner mit Beenden, Hinweis bei ersetzter oder abgelaufener Ansicht

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

test/ui/kundenansicht.ui.mjs

@@ -0,0 +1,121 @@
+// Playwright-Checks der Kundenansicht im Dashboard: statischer Server fuer public/ + per page.route gemockte API.
+// Nicht Teil von npm test. Aufruf: node test/ui/kundenansicht.ui.mjs
+// Screenshots landen in /root/reports/admin-umzug-ui/.
+import http from 'node:http'
+import { readFile, mkdir } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { chromium } from '/root/.npm/_npx/db89d7302a373f10/node_modules/playwright-core/index.mjs'
+
+const pub = path.join(path.dirname(fileURLToPath(import.meta.url)), '../../public')
+const SHOTS = '/root/reports/admin-umzug-ui'
+await mkdir(SHOTS, { recursive: true })
+const TYPES = { '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.svg': 'image/svg+xml', '.png': 'image/png', '.ico': 'image/x-icon', '.webmanifest': 'application/json' }
+
+const server = http.createServer(async (req, res) => {
+  const url = new URL(req.url, 'http://x')
+  try {
+    const file = path.join(pub, url.pathname === '/' ? 'dashboard.html' : url.pathname)
+    const data = await readFile(file)
+    res.writeHead(200, { 'content-type': TYPES[path.extname(file)] || 'application/octet-stream' })
+    res.end(data)
+  } catch {
+    res.writeHead(404)
+    res.end('nicht gefunden')
+  }
+})
+await new Promise((resolve) => server.listen(0, '127.0.0.1', resolve))
+const base = `http://127.0.0.1:${server.address().port}`
+
+const VIEW = 'a'.repeat(32)
+const customer = { id: 'c1', code: '1001', name: 'Berta Berg', email: 'b@example.test' }
+const ME = {
+  neu: { authenticated: true, role: 'admin', viewAs: true, viewId: VIEW, viewExpiresAt: Date.now() + 3600000, admin: { name: 'Andrej', email: 'andrej@webklar.com', isAdmin: false }, customer },
+  alt: { authenticated: true, role: 'admin', viewAs: true, admin: { name: 'Kenso', email: 'kenso@webklar.com', isAdmin: true }, customer },
+}
+
+let scenario = 'neu'
+let replaceAfterMe = false
+const seen = { headers: [], ende: 0, chatRead: 0 }
+async function mockApi(page) {
+  await page.route('**/api/**', async (route) => {
+    const req = route.request()
+    const p = new URL(req.url()).pathname
+    const json = (body, status = 200) => route.fulfill({ status, contentType: 'application/json', body: JSON.stringify(body) })
+    if (p === '/api/auth/me') return json(ME[scenario])
+    // nur Skript-Anfragen zaehlen: Bilder (<img src="/api/avatar.svg">) koennen keinen Header tragen und sind reine Leseanfragen
+    if (['fetch', 'xhr'].includes(req.resourceType())) seen.headers.push(req.headers()['x-kundenansicht'] || null)
+    if (replaceAfterMe && p === '/api/projects') return json({ code: 'view_replaced', kunde: 'Kunde Zwei', error: 'ersetzt' }, 409)
+    if (p === '/api/auth/kundenansicht/ende') {
+      seen.ende += 1
+      return json({ redirect: `${base}/zurueck-im-ticketsystem.html` })
+    }
+    if (p === '/api/chat/read') seen.chatRead += 1
+    if (p === '/api/projects') return json({ projects: [{ id: 'p1', name: 'Bäckerei Berg', status: 'live' }] })
+    if (p === '/api/contact') return json({ name: 'WEBklar-Team', responseTime: 'Antwort meist < 1 Werktag' })
+    if (p === '/api/chat/unread-count') return json({ unread: 0 })
+    if (p === '/api/chat/messages') return json({ messages: [], unread: 2 })
+    return json({})
+  })
+}
+
+let failed = 0
+const check = (name, ok, detail = '') => {
+  console.log(`${ok ? 'OK  ' : 'FAIL'} ${name}${detail ? ` (${detail})` : ''}`)
+  if (!ok) failed += 1
+}
+
+const browser = await chromium.launch()
+try {
+  for (const [label, viewport] of [['desktop', { width: 1280, height: 900 }], ['phone', { width: 390, height: 844 }]]) {
+    const ctx = await browser.newContext({ viewport, deviceScaleFactor: 1 })
+    const page = await ctx.newPage()
+    page.setDefaultTimeout(60000)
+    const errors = []
+    page.on('pageerror', (e) => errors.push(e.message))
+    await mockApi(page)
+    const open = async (sc, hash = '') => {
+      scenario = sc
+      seen.headers.length = 0
+      await page.goto('about:blank')
+      await page.goto(`${base}/dashboard.html${hash}`)
+      await page.waitForFunction(() => document.getElementById('customer-name')?.textContent)
+      await page.waitForTimeout(400)
+    }
+
+    // 1) neue Kundenansicht: Banner, Kennung an den Anfragen, Chat nicht als gelesen markieren, Beenden
+    replaceAfterMe = false
+    seen.chatRead = 0
+    await open('neu', '#chat')
+    const banner = (await page.textContent('#viewas-banner')).replace(/\s+/g, ' ').trim()
+    check(`${label} banner_text`, banner === 'Kundenansicht: Berta Berg · geöffnet von Andrej Beenden', banner)
+    check(`${label} kennung_an_anfragen`, seen.headers.length > 0 && seen.headers.every((h) => h === VIEW), JSON.stringify(seen.headers))
+    check(`${label} chat_nicht_gelesen`, seen.chatRead === 0, `chat/read ${seen.chatRead}x`)
+    await page.screenshot({ path: `${SHOTS}/${label}-banner.png` })
+    await Promise.all([page.waitForURL(/zurueck-im-ticketsystem/), page.click('#exit-viewas-btn')])
+    check(`${label} beenden_ruft_ende_und_leitet_um`, seen.ende >= 1)
+
+    // 2) ersetzte Ansicht: Overlay statt Inhalt
+    replaceAfterMe = true
+    await open('neu')
+    await page.waitForSelector('#kb-view-overlay', { timeout: 15000 }).catch(() => null)
+    const overlay = await page.textContent('#kb-view-overlay').catch(() => '')
+    check(`${label} overlay_ersetzt`, /Diese Ansicht wurde durch die Kundenansicht von Kunde Zwei ersetzt\./.test(overlay || ''), overlay)
+    await page.screenshot({ path: `${SHOTS}/${label}-ersetzt.png` })
+    replaceAfterMe = false
+
+    // 3) alte Ansicht aus dem Admin-Panel: altes Banner, keine Kennung
+    await open('alt')
+    const old = (await page.textContent('#viewas-banner')).replace(/\s+/g, ' ').trim()
+    check(`${label} altes_banner`, old.includes('Admin-Ansicht') && old.includes('Zurück zur Admin-Übersicht'), old)
+    check(`${label} alt_ohne_kennung`, seen.headers.every((h) => h === null), JSON.stringify(seen.headers))
+
+    check(`${label} keine_js_fehler`, errors.length === 0, errors.join(' | '))
+    await ctx.close()
+  }
+} finally {
+  await browser.close()
+  server.close()
+}
+console.log(failed ? `${failed} Check(s) fehlgeschlagen` : 'alle Checks ok')
+process.exit(failed ? 1 : 0)