City-Lifeline-Cockpit/.scratch/cockpit-shell-panel-layout/verify/t09-point-status-walkthrough.mjs

/**
 * T09 真机走查：点位状态标记与图例在浏览器里确实成立（票 09）。
 *
 * 逻辑脚本（t09-point-status.mjs）已经把状态词表、标记计划与「图例=标记」判据测透了；
 * 这里只补**只有在真机才成立**的部分：
 *   1. 标记真的作为 Cesium billboard 画在地图上（引擎实体存在、有图片、形状不同）；
 *   2. 每种状态的颜色确实不同 —— 颜色是服务层从 token 的**计算样式**读出来再烘焙进 SVG 的，
 *      纯逻辑断言证明不了 CSS 变量真的取到了值（取不到会全体回退兜底色，颜色就都一样了）；
 *   3. 地图图例与地图上的标记逐行一致（同一个 DOM 与同一批实体对照，不是两份 JS 数据对比）；
 *   4. 图例不只靠颜色：每行有形状（真 SVG 片段）+ 文字。
 *
 * 运行（需先起 `yarn dev`，服务在 http://localhost:8000/；改了懒加载模块先重启服务）：
 *   node .scratch/cockpit-shell-panel-layout/verify/t09-point-status-walkthrough.mjs
 *
 * 演示开关（宿主全局键注入，不改代码重新构建）：
 *   `window.__COCKPIT_MOCK_SCENARIO__ = 'point-statuses'` —— 后端六态 + 未关联设备 + 一个前端不认识的状态
 *   人工演示同一件事：控制台里 `__cockpitMap.getPointMarkers()` 看计划与图例、
 *   `__cockpitMap.mapSummary.advance()` 一页页推进。
 */
import { join } from 'node:path'
import { tmpdir } from 'node:os'

const BASE = process.env.COCKPIT_BASE || 'http://localhost:8000'
const ENTRY_URL = process.env.COCKPIT_URL || `${BASE}/#/cockpit`
const CHROME = process.env.CHROME_PATH || 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
const PUPPETEER = 'file:///C:/Users/ASUS/.dsh/profiles/desktop/node_modules/puppeteer-core/lib/puppeteer/puppeteer-core.js'

const results = []
/** `check(id, pass, evidence)` —— 第二参是**断言结果**，不是描述（票 08 踩过这个假绿）。 */
function check(id, pass, evidence) {
    results.push({ id, pass })
    const rest = evidence === undefined ? '' : String(evidence)
    console.log(`${pass ? 'PASS' : 'FAIL'}  ${id}  ::  ${rest}`)
}

const sleep = (ms) => new Promise((r) => setTimeout(r, ms))

const puppeteer = (await import(PUPPETEER)).default
const browser = await puppeteer.launch({
    executablePath: CHROME,
    headless: true,
    userDataDir: join(tmpdir(), 'cockpit-t09-profile'),
    defaultViewport: { width: 1680, height: 950 },
    args: ['--no-sandbox', '--disable-dev-shm-usage', '--no-first-run', '--no-default-browser-check'],
})
console.log(`Chrome: ${await browser.version()}`)

/**
 * 一次读全：宿主 dataset（走查口径）+ 地图上的真实实体（`__cockpitMap.getPointMarkers()`）
 * + 图例 DOM（形状/色键/文字）。
 *
 * 关键：**实体这一侧读的是 `readPointMarkers(viewer)` 从 Cesium 实体上取的值**，
 * 图例那一侧读的是真实 DOM。两者对照才叫「图例与标记一致」；
 * 若两边都读同一个 JS 对象，那条断言就恒真（自己跟自己比）。
 */
const readMarkers = (page) =>
    page.evaluate(() => {
        const host = document.querySelector('.cockpit-shell__map .map-canvas')
        const legendRows = Array.from(document.querySelectorAll('[data-map-legend] .status-tag'))
        const dev = window.__cockpitMap && window.__cockpitMap.getPointMarkers ? window.__cockpitMap.getPointMarkers() : null

        // 语义色的实际取法（与 mapService.toneColors 同一条路）：从外壳的计算样式读。
        const shell = document.querySelector('.cockpit-shell')
        const styles = shell ? getComputedStyle(shell) : null
        const tone = (name) => (styles ? styles.getPropertyValue(`--${name}`).trim() : '')

        return {
            engine: (host && host.dataset.mapEngine) || '',
            phase: (host && host.dataset.mapSummary) || '',
            loaded: Number((host && host.dataset.mapSummaryLoaded) || 0),
            // dataset 口径（服务层写的）
            dsMarkers: Number((host && host.dataset.mapMarkers) || 0),
            dsPlan: Number((host && host.dataset.mapMarkersPlan) || 0),
            dsStatus: (host && host.dataset.mapMarkersStatus) || '',
            dsShapes: (host && host.dataset.mapMarkerShapes) || '',
            // 真实实体口径（引擎里真有什么）
            entities: dev ? dev.onMap : -1,
            entityByStatus: dev ? dev.entityByStatus : {},
            entityShapes: dev ? dev.shapes : [],
            // 计划口径（图例的计数来自这里，与实体数必须相等）
            planLegend: dev ? dev.legend.filter((row) => row.count > 0).map((row) => `${row.key}:${row.count}`) : [],
            // 图例 DOM
            legend: legendRows.map((el) => ({
                key: el.dataset.legendKey || '',
                tone: el.dataset.tone || '',
                shape: el.dataset.shape || '',
                label: (el.querySelector('.status-tag__label') || {}).textContent?.trim() || '',
                hasShapeSvg: !!el.querySelector('.status-tag__shape'),
                shapeMarkup: (el.querySelector('.status-tag__shape') || {}).innerHTML || '',
                color: getComputedStyle(el.querySelector('.status-tag__shape') || el).color,
            })),
            legendCount: legendRows.length,
            legendHosts: document.querySelectorAll('[data-map-legend]').length,
            // 事件四级图例不该出现在地图上（票 09：不把事件等级色混用为点位状态色）
            eventLevelTags: Array.from(document.querySelectorAll('[data-map-legend] .status-tag')).filter((el) =>
                /^[1-4]级$/.test(((el.querySelector('.status-tag__label') || {}).textContent || '').trim()),
            ).length,
            // token 的实际值（证明颜色不是兜底常量）
            tokens: { lv1: tone('lv1'), lv2: tone('lv2'), lv3: tone('lv3'), lv4: tone('lv4'), neutral: tone('neutral') },
            // 每行的实际颜色算出来的 CSS 值，供「颜色各不相同」判定
            markerImages: dev && dev.markerImages ? dev.markerImages : {},
            engineStatusPill: (document.querySelector('[data-map-engine-status]') || {}).textContent || '',
            mapHosts: document.querySelectorAll('.cockpit-shell__map .map-canvas').length,
        }
    })

/** 打开页面并把地图摘要翻到底（mock 的状态样例：7 点 + 1 设备 = 8 个对象）。 */
async function openPage(inject) {
    const page = await browser.newPage()
    const errors = []
    page.on('pageerror', (e) => errors.push(String(e && e.message ? e.message : e)))
    page.on('console', (m) => {
        if (m.type() === 'error') errors.push(`console.error: ${m.text()}`)
    })

    await page.evaluateOnNewDocument(() => {
        // 引导层会盖住页面，走查不需要它（票 30 的开关）。
        window.__COCKPIT_CONFIG__ = { dataSource: 'mock', map: { intro: { enabled: false } } }
    })
    if (inject) await page.evaluateOnNewDocument(inject)

    await page.goto(ENTRY_URL, { waitUntil: 'networkidle2', timeout: 60000 })
    await page.waitForSelector('.cockpit-shell', { timeout: 20000 })
    // 引擎要拉静态资源/地形，比取数慢：等它落到终态，否则「标记没画上」会被误判成失败。
    await page
        .waitForFunction(
            () => ['ready', 'failed', 'disabled'].includes(document.querySelector('.cockpit-shell__map .map-canvas')?.dataset.mapEngine),
            { timeout: 40000 },
        )
        .catch(() => {})
    await sleep(600)
    return { page, errors }
}

/** 点「加载下一页」直到翻完（mock 按页大小 2 分 4 页）。 */
async function advanceUntilSettled(page, maxSteps = 12) {    for (let step = 0; step < maxSteps; step += 1) {
        const state = await readMarkers(page)
        if (['complete', 'empty', 'failed', 'expired'].includes(state.phase)) break
        const clicked = await page.evaluate(() => {
            const button = document.querySelector('[data-map-summary-action]')
            if (!button || button.disabled) return false
            button.click()
            return true
        })
        if (!clicked) break
        const before = state.loaded
        await page
            .waitForFunction(
                (previous) => {
                    const host = document.querySelector('.cockpit-shell__map .map-canvas')
                    const loaded = Number((host && host.dataset.mapSummaryLoaded) || 0)
                    const phase = (host && host.dataset.mapSummary) || ''
                    return loaded !== previous || ['failed', 'expired', 'empty', 'complete'].includes(phase)
                },
                { timeout: 10000 },
                before,
            )
            .catch(() => {})
        await sleep(350)
    }
    return readMarkers(page)
}

try {
    // ---------- A 标记真的画在地图上，且按后端状态渲染 ----------
    {
        const { page, errors } = await openPage(() => {
            window.__COCKPIT_MOCK_SCENARIO__ = 'point-statuses'
            window.__COCKPIT_MOCK_MAP__ = { pageSize: 2 }
        })
        const settled = await advanceUntilSettled(page)

        check(
            'A1-engine-ready',
            ['ready', 'disabled'].includes(settled.engine),
            `engine=${settled.engine} · 浮标「${settled.engineStatusPill.slice(0, 60)}」`,
        )
        // 6 个状态点位 + 1 个未知状态点位 + 1 个未关联设备 = 8 个可上图对象。
        check(
            'A2-markers-rendered-as-entities',
            settled.entities === 8 && settled.dsMarkers === 8 && settled.dsPlan === 8,
            `真实实体 ${settled.entities} · dataset ${settled.dsMarkers} · 计划 ${settled.dsPlan}（加载 ${settled.loaded} 个）`,
        )
        check(
            'A3-backend-six-statuses-present',
            ['ALARM', 'WARNING', 'WORK_ORDER', 'NORMAL', 'OFFLINE', 'EMPTY'].every((key) => settled.entityByStatus[key] === 1),
            JSON.stringify(settled.entityByStatus),
        )
        check(
            'A4-unknown-status-not-guessed',
            settled.entityByStatus.UNKNOWN === 1,
            `后端新增的 MAINTENANCE 落「状态未发布」而不是任何真实状态：${JSON.stringify(settled.entityByStatus)}`,
        )
        check(
            'A5-unassociated-separate-row',
            settled.entityByStatus.UNASSOCIATED === 1,
            '未关联设备自成一行（不借用在线态）',
        )
        check('A6-single-map-host', settled.mapHosts === 1, `地图宿主 ${settled.mapHosts} 个`)
        check('A7-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))

        // ---------- B 形状：不只靠颜色 ----------
        const sixShapes = ['triangle', 'diamond', 'square', 'circle', 'ring', 'hollowSquare']
        check(
            'B1-eight-distinct-shapes-on-map',
            sixShapes.every((shape) => settled.entityShapes.includes(shape)) &&
                settled.entityShapes.includes('hollowDiamond') &&
                settled.entityShapes.includes('cross') &&
                settled.entityShapes.length === 8,
            `地图上 ${settled.entityShapes.length} 种形状：${settled.entityShapes.join(', ')}`,
        )
        check(
            'B2-dataset-exposes-shapes',
            settled.dsShapes.split(',').filter(Boolean).length === 8,
            `dataset shapes = ${settled.dsShapes}`,
        )

        // ---------- C 颜色真的从 token 读出来、且各状态不同 ----------
        //
        // 注意这里**必须把颜色单独抠出来比**，不能只比整张图片是否不同：
        // 图片里还含形状，形状本来就各不相同 —— 那样写的话即使所有状态用同一个颜色
        // （比如 token 没读到、全体回退兜底色），断言照样绿。第一版正是这么写的，
        // 对抗式复验（把 toneColors 改成恒返回一个色）抓到它假绿 25/25。
        const imageOf = (key) => (settled.markerImages[key] || {}).image || ''
        const colorOf = (key) => {
            const image = imageOf(key)
            if (!image) return ''
            const decoded = decodeURIComponent(image)
            const match = decoded.match(/color="([^"]+)"/)
            return match ? match[1] : ''
        }
        check(
            'C1-tokens-resolved-from-css',
            Object.values(settled.tokens).every((value) => /^#|rgb/.test(value)),
            JSON.stringify(settled.tokens),
        )

        const colorsByStatus = {
            ALARM: colorOf('ALARM'),
            WARNING: colorOf('WARNING'),
            WORK_ORDER: colorOf('WORK_ORDER'),
            NORMAL: colorOf('NORMAL'),
            OFFLINE: colorOf('OFFLINE'),
        }
        const distinctColors = new Set(Object.values(colorsByStatus).filter(Boolean))
        check(
            'C2-marker-colors-differ-per-status',
            distinctColors.size === 5 && Object.values(colorsByStatus).every(Boolean),
            `5 个状态 → ${distinctColors.size} 种颜色：${Object.entries(colorsByStatus).map(([k, v]) => `${k}=${v}`).join(' ')}`,
        )
        // 颜色必须**等于 token 的实测值**（而不只是"彼此不同"）：证明是读出来的，不是常量。
        const colorMismatch = Object.entries(colorsByStatus).filter(([key, color]) => {
            const toneKey = { ALARM: 'lv1', WARNING: 'lv2', WORK_ORDER: 'lv3', NORMAL: 'lv4', OFFLINE: 'neutral' }[key]
            return color.toLowerCase() !== settled.tokens[toneKey].toLowerCase()
        })
        check(
            'C3-marker-color-equals-token',
            colorMismatch.length === 0 && /^data:image\/svg\+xml/.test(imageOf('ALARM')),
            colorMismatch.length
                ? colorMismatch.map(([k, v]) => `${k} 图片是 ${v}`).join(' | ')
                : `五个状态的标记颜色逐个等于 .cockpit-shell 上 --lv1/--lv2/--lv3/--lv4/--neutral 的实测值`,
        )

        // ---------- D 图例与标记一致（DOM 与真实实体对照）----------
        check('D1-legend-rendered-once', settled.legendHosts === 1, `图例宿主 ${settled.legendHosts} 个`)
        check('D2-legend-lists-eight-rows', settled.legendCount === 8, `图例 ${settled.legendCount} 行（把八种含义都列出来）`)

        const legendByKey = new Map(settled.legend.map((row) => [row.key, row]))
        const entityMismatch = Object.entries(settled.entityByStatus).filter(([key, count]) => {
            const row = legendByKey.get(key)
            if (!row) return true
            // 图例文字形如「报警 1」；解析出计数与实体数对照。
            const shown = Number((row.label.match(/(\d+)\s*$/) || [])[1])
            return shown !== count
        })
        check(
            'D3-legend-counts-equal-entities',
            entityMismatch.length === 0,
            entityMismatch.length ? JSON.stringify(entityMismatch) : `图例计数与地图实体逐个相等：${settled.planLegend.join(' · ')}`,
        )

        // 形状与色键必须逐行对上（图例那一行画出来的形状，与地图上该状态的标记形状同名）。
        const shapeMismatch = settled.legend
            .filter((row) => {
                const image = settled.markerImages[row.key]
                return image && image.shape !== row.shape
            })
            .map((row) => `${row.key}: 图例 ${row.shape} vs 标记 ${settled.markerImages[row.key].shape}`)
        check('D4-legend-shape-matches-marker', shapeMismatch.length === 0, shapeMismatch.length ? shapeMismatch.join(' | ') : '八行形状逐个对上地图标记')

        const toneMismatch = settled.legend
            .filter((row) => {
                const image = settled.markerImages[row.key]
                return image && image.tone !== row.tone
            })
            .map((row) => `${row.key}: 图例 ${row.tone} vs 标记 ${settled.markerImages[row.key].tone}`)
        check('D5-legend-tone-matches-marker', toneMismatch.length === 0, toneMismatch.length ? toneMismatch.join(' | ') : '八行色键逐个对上地图标记')

        // 每行必须同时有形状 SVG 与文字（验收第 3 条）。
        const lacking = settled.legend.filter((row) => !row.hasShapeSvg || !row.label)
        check(
            'D6-every-legend-row-has-shape-and-text',
            lacking.length === 0,
            lacking.length ? lacking.map((row) => row.key).join(', ') : settled.legend.map((row) => `${row.label}[${row.shape}]`).join(' '),
        )
        // 形状是真的画出来的（内联 SVG 片段非空），不是一个空元素占位。
        const emptyShape = settled.legend.filter((row) => row.shapeMarkup.trim().length < 10)
        check('D7-shape-markup-not-empty', emptyShape.length === 0, emptyShape.length ? emptyShape.map((r) => r.key).join(', ') : '每行形状都有真实 SVG 片段')
        // 图例那一行的实际渲染颜色必须各不相同（颜色不是唯一线索，但仍要是对的）。
        const legendColors = new Set(settled.legend.filter((row) => row.tone !== 'neutral').map((row) => row.color))
        check(
            'D8-legend-colors-distinct',
            legendColors.size === 4,
            `四个语义色在页面上渲染成 ${legendColors.size} 种颜色：${[...legendColors].join(', ')}`,
        )

        // ---------- E 不与事件等级混用 ----------
        check(
            'E1-no-event-level-legend-on-map',
            settled.eventLevelTags === 0,
            '地图图例里没有「1级..4级」事件等级行（票 09：不把事件等级色混用为点位状态色）',
        )

        console.log(`\n图例快照：${settled.legend.map((row) => `${row.label}(${row.tone}/${row.shape})`).join(' | ')}`)
        console.log(`状态分布：${settled.dsStatus}`)
        await page.close()
    }

    // ---------- F 默认样例不受影响（票 07/08 的证据不能被本票改动）----------
    {
        const { page, errors } = await openPage(() => {
            window.__COCKPIT_MOCK_MAP__ = { pageSize: 2 }
        })
        const settled = await advanceUntilSettled(page)
        // 默认样例是 3 点 + 2 设备 = 5 个对象、其中 2 个可上图（票 07/08 原样）。
        check(
            'F1-default-sample-unchanged',
            settled.dsPlan === 2 && settled.entities === 2 && settled.loaded === 5,
            `默认样例仍为 计划 ${settled.dsPlan} · 实体 ${settled.entities} · 已加载 ${settled.loaded}（票 07/08 的数）`,
        )
        check('F2-default-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        await page.close()
    }

    // ---------- G 空快照：图例在位、标记为 0（不是「假绿」而是真的没有）----------
    {
        const { page, errors } = await openPage(() => {
            window.__COCKPIT_MOCK_SCENARIO__ = 'empty'
            window.__COCKPIT_MOCK_ONLY__ = '/map-snapshot'
        })
        await sleep(900)
        const state = await readMarkers(page)
        check(
            'G1-empty-snapshot-zero-markers',
            state.dsMarkers === 0 && state.entities === 0 && state.legendCount === 8,
            `标记 ${state.dsMarkers} · 实体 ${state.entities} · 图例仍 ${state.legendCount} 行（形状含义可查）`,
        )
        check('G2-empty-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        await page.close()
    }
    // ---------- H 首屏自动补画：不点任何按钮，标记也必须出现在地图上 ----------
    //
    // 这条是被**视觉探针**（截图里图例有计数、状态行却写「点位标记 0」）逼出来的：
    // 引擎冷启动比装载器慢得多，第一版的重试封顶 10 秒，超时后第一批点位就再也没画上，
    // 只有用户去点「加载下一页」才会因对象变化重新触发。走查当时没抓到 —— 因为它一路在点分页。
    // 所以这里**一次都不点**：只等引擎 ready，然后要求标记自己出现。
    {
        const { page, errors } = await openPage(() => {
            window.__COCKPIT_MOCK_SCENARIO__ = 'point-statuses'
            window.__COCKPIT_MOCK_MAP__ = { pageSize: 2 }
        })
        // 只等"标记数 > 0"，不点任何按钮；等不到就是没补画。
        const painted = await page
            .waitForFunction(
                () => {
                    const host = document.querySelector('.cockpit-shell__map .map-canvas')
                    return Number((host && host.dataset.mapMarkers) || 0) > 0
                },
                { timeout: 30000 },
            )
            .then(() => true)
            .catch(() => false)
        const state = await readMarkers(page)
        check(
            'H1-first-batch-auto-painted',
            painted && state.entities > 0 && state.dsMarkers === state.dsPlan,
            `未点任何按钮：实体 ${state.entities} · dataset ${state.dsMarkers} · 计划 ${state.dsPlan}（引擎 ${state.engine}）`,
        )
        check(
            'H2-first-batch-legend-consistent',
            state.legendCount === 8 && Object.entries(state.entityByStatus).every(([key, count]) => {
                const row = state.legend.find((item) => item.key === key)
                return row && Number((row.label.match(/(\d+)\s*$/) || [])[1]) === count
            }),
            `首屏图例 ${state.legendCount} 行，与实体 ${JSON.stringify(state.entityByStatus)} 逐个对上`,
        )
        check('H3-no-page-errors', errors.length === 0, JSON.stringify(errors.slice(0, 3)))
        await page.close()
    }
} finally {
    await browser.close()
}

const failed = results.filter((item) => !item.pass)
console.log(`\nT09 走查：${results.length - failed.length}/${results.length} 项通过${failed.length ? `，未通过：${failed.map((r) => r.id).join(', ')}` : ''}`)
process.exit(failed.length ? 1 : 0)