141 lines
7.4 KiB
JavaScript
141 lines
7.4 KiB
JavaScript
// 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 },
|
|
// alte Mitarbeiter-Sitzung (Login im Portal oder Alt-Ansicht ohne Kennung): /me beendet sie, weiter ins Ticketsystem
|
|
staff: { authenticated: false, reason: 'staff', redirect: `${base}/zurueck-im-ticketsystem.html?von=staff` },
|
|
gast: { authenticated: false },
|
|
}
|
|
const STAFF_BLOCKED = { error: 'Mitarbeiter arbeiten im Ticketsystem.', ticketUrl: 'https://ticket.webklar.com' }
|
|
|
|
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/auth/login') return json(STAFF_BLOCKED, 403)
|
|
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 Mitarbeiter-Sitzung: Dashboard leitet ins Ticketsystem weiter
|
|
scenario = 'staff'
|
|
await page.goto('about:blank')
|
|
await Promise.all([page.waitForURL(/zurueck-im-ticketsystem\.html\?von=staff/), page.goto(`${base}/dashboard.html`)])
|
|
check(`${label} staff_weiterleitung`, page.url().endsWith('/zurueck-im-ticketsystem.html?von=staff'), page.url())
|
|
|
|
// 4) Mitarbeiter meldet sich im Portal an: Hinweis und Link ins Ticketsystem
|
|
scenario = 'gast'
|
|
await page.goto(`${base}/login.html`)
|
|
await page.fill('#email', 'andrej@webklar.com')
|
|
await page.fill('#password', 'geheim-geheim')
|
|
await page.click('#login-btn')
|
|
await page.waitForSelector('#login-staff-link:not(.hidden)', { timeout: 15000 }).catch(() => null)
|
|
const hint = (await page.textContent('#login-error')).trim()
|
|
check(`${label} login_hinweis`, hint === 'Mitarbeiter arbeiten im Ticketsystem.', hint)
|
|
const link = await page.$eval('#login-staff-link', (a) => ({ text: a.textContent.trim(), href: a.getAttribute('href'), visible: a.offsetParent !== null }))
|
|
check(`${label} login_link_ticketsystem`, link.visible && link.text === 'Zum Ticketsystem' && link.href === 'https://ticket.webklar.com', JSON.stringify(link))
|
|
check(`${label} kein_mfa_formular`, (await page.$('#mfa-form')) === null)
|
|
await page.waitForTimeout(1200)
|
|
await page.screenshot({ path: `${SHOTS}/${label}-login-mitarbeiter.png` })
|
|
|
|
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)
|