City-Lifeline-Cockpit/.scratch/cockpit-shell-panel-layout/verify/t13-event-list-walkthrough.mjs

/**
 * T13 真机走查：预警处置模式的「当前预警」面板真的画出事件列表 + 预警/报警切换（票 13）。
 *
 * 逻辑脚本（t13-event-list.mjs，48/48）已经把契约适配、切换视图同步、等级配色、
 * 默认 12 条上限、事件不建标记、不判断真伪与 store 竞态测透了；这里只补**只有在真机
 * 才成立**的部分：
 *   1. 进预警处置模式后，**界面真的**把当前预警面板画出来（DOM 实证，不是读 store）；
 *   2. 预警/报警分段切换**真的换内容**（WRN-* ↔ ALM-*），且**字段标签与状态标签同步变**
 *      （表头从「预警编号/预警状态」变「报警编号/报警状态」）；
 *   3. 事件等级**有颜色也有文字**（每行都有色键 + 'N级' 字样的 StatusTag）；
 *   4. 列表**只展示最新 12 条**且如实说「共 14 条」（验收第 2 条的可见口径）；
 *   5. 事件**不产生地图标记**（切换/加载后地图点位数不变，事件只靠设备编码回联）：
 *   6. 只读：列表内没有任何写操作按钮。
 *
 * 运行（需先起 `yarn dev`；**AGENTS.md 要求不自动跑构建/调试命令**，所以本脚本由
 * 维护者按需执行，票 18 已有同一先例）：
 *   node .scratch/cockpit-shell-panel-layout/verify/t13-event-list-walkthrough.mjs
 *   COCKPIT_BASE=http://localhost:8001 node ...（端口不是 8000 时）
 *
 * 演示开关（宿主全局键注入，不改代码重新构建）：
 *   `__COCKPIT_MOCK_ONLY__='/events/current'` + `__COCKPIT_MOCK_SCENARIO__='empty'`
 *     —— 只有事件端点空，地图/详情照常（对应逻辑脚本 H2 的真机版）
 */
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-t13-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()}`)

/** 当前预警面板的 DOM 状态（内容从 DOM 读，证明界面真的画出来了）。 */
const readState = (page) =>
    page.evaluate(() => {
        const host = document.querySelector('.cockpit-shell__map .map-canvas')
        const panel = document.querySelector('[data-panel-id="currentEvents"]')
        const dev = window.__cockpitMap
        // `getPointMarkers()` 返回 `{ markers: [...], onMap: N }`（t10 同一句柄）：
        // `onMap` 是真正画上引擎的点位数（本票断言「切换前后不增不减」用它）。
        const markers = dev && dev.getPointMarkers ? dev.getPointMarkers() : null
        const markerOnMap = markers && typeof markers.onMap === 'number' ? markers.onMap : null
        const table = panel && panel.querySelector('[data-event-table]')
        const headers = table
            ? Array.from(table.querySelectorAll('thead th')).map((th) => (th.textContent || '').trim())
            : []
        const rows = table
            ? Array.from(table.querySelectorAll('[data-event-row]')).map((tr) => ({
                  code: tr.dataset.eventRow || '',
                  name: ((tr.querySelector('[data-event-name]') || {}).textContent || '').trim(),
                  level: ((tr.querySelector('[data-event-level]') || {}).textContent || '').trim(),
                  levelTone: (tr.querySelector('[data-event-level] .status-tag') || {}).dataset
                      ? tr.querySelector('[data-event-level] .status-tag').dataset.tone || ''
                      : '',
                  status: ((tr.querySelector('[data-event-status]') || {}).textContent || '').trim(),
                  time: ((tr.querySelector('[data-event-time]') || {}).textContent || '').trim(),
                  device: ((tr.querySelector('[data-event-device]') || {}).textContent || '').trim(),
              }))
            : []
        const switchBtns = panel
            ? Array.from(panel.querySelectorAll('[data-event-switch]')).map((b) => ({
                  key: b.dataset.eventSwitch || '',
                  pressed: b.getAttribute('aria-pressed') === 'true',
              }))
            : []
        const placeholder = panel
            ? ((panel.querySelector('[data-event-placeholder]') || {}).textContent || '').trim()
            : ''
        const limitedNote = panel
            ? ((panel.querySelector('[data-event-limited]') || {}).textContent || '').trim()
            : ''
        // 「零写操作」= 除**分段切换按钮**（`data-event-switch`，视图切换不是业务写操作）
        // 与面板标题栏（`.cockpit-panel__head`）之外，没有任何 button/a/input/select。
        const writeButtons = panel
            ? Array.from(panel.querySelectorAll('button, a, input, select')).filter(
                  (el) => el !== panel.querySelector('.cockpit-panel__head') && !el.hasAttribute('data-event-switch'),
              ).length
            : 0
        return {
            mode: ((document.querySelector('.cockpit-shell__modes .is-active') || {}).textContent || '').trim(),
            panelRendered: !!panel,
            state: (panel && ((panel.querySelector('[data-section-state]') || {}).dataset || {}).sectionState) || '',
            placeholder,
            headers,
            rows,
            switchBtns,
            limitedNote,
            writeButtons,
            markerCount: markerOnMap,
            pageErrors: null,
        }
    })

/** 打开页面 → 切到预警处置模式 → 走真实的进入引导。 */
async function openPage(scenario, onlyPath = '') {
    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(
        ({ name, only }) => {
            window.__COCKPIT_MOCK_SCENARIO__ = name
            if (only) window.__COCKPIT_MOCK_ONLY__ = only
        },
        { name: scenario, only: onlyPath },
    )

    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(() => {})

    if (await page.$('[data-cockpit-intro]')) {
        await page.click('[data-cockpit-intro]')
        await page.waitForSelector('[data-cockpit-intro]', { hidden: true, timeout: 10000 }).catch(() => {})
    }
    await sleep(1200)

    // 切到预警处置模式（一级模式切换不重建地图，票 01）。
    await page.evaluate(() => {
        const button = Array.from(document.querySelectorAll('.cockpit-shell__mode')).find((b) => b.textContent.trim() === '预警处置')
        if (button) button.click()
    })
    await page
        .waitForFunction(() => !!document.querySelector('[data-panel-id="currentEvents"] [data-event-table]'), { timeout: 20000 })
        .catch(() => {})
    await sleep(800)
    return { page, errors }
}

// ================================================================ A 预警列表

{
    const { page, errors } = await openPage('success')
    const state = await readState(page)

    check('A1-warning-mode-active', state.mode === '预警处置', `当前一级模式：${state.mode}`)
    check('A2-current-events-panel-rendered', state.panelRendered && state.rows.length > 0, `画出的事件行：${state.rows.length}`)
    check(
        'A3-warning-list-by-default',
        state.switchBtns.find((b) => b.key === 'WARNING')?.pressed === true &&
            state.headers.includes('预警编号') &&
            state.headers.includes('预警状态') &&
            state.rows.every((r) => r.code.startsWith('WRN-')),
        `默认预警：表头 ${state.headers.join('/')}；行码示例 ${state.rows.slice(0, 2).map((r) => r.code).join(',')}`,
    )
    check(
        'A4-level-has-color-and-text',
        state.rows.length > 0 &&
            state.rows.every((r) => r.level.includes('级') && r.levelTone.length > 0),
        `每行等级=色键+文字（如 ${state.rows[0] ? `${state.rows[0].level}@${state.rows[0].levelTone}` : '(空)'}）`,
    )
    check(
        'A5-default-12-limited',
        state.rows.length === 12 && state.limitedNote.includes('共 14 条'),
        `仅展示最新 12 条：${state.limitedNote}`,
    )
    check(
        'A6-no-write-buttons',
        state.writeButtons === 0,
        `面板内业务按钮/输入：${state.writeButtons}（只有面板标题栏可点，零写操作）`,
    )

    // 切到报警：切换按钮按下、表头字段标签与状态标签同步变化、内容变成 ALM-*。
    await page.evaluate(() => {
        const btn = document.querySelector('[data-event-switch="ALARM"]')
        if (btn) btn.click()
    })
    await page
        .waitForFunction(() => document.querySelector('[data-event-switch="ALARM"]')?.getAttribute('aria-pressed') === 'true', { timeout: 10000 })
        .catch(() => {})
    await sleep(500)
    const alarmState = await readState(page)

    check(
        'B1-alarm-switch-pressed',
        alarmState.switchBtns.find((b) => b.key === 'ALARM')?.pressed === true,
        `报警按钮 ${alarmState.switchBtns.find((b) => b.key === 'ALARM') ? '已按下' : '未按下'}`,
    )
    check(
        'B2-fields-and-status-labels-sync',
        alarmState.headers.includes('报警编号') &&
            alarmState.headers.includes('报警状态') &&
            !alarmState.headers.includes('预警编号'),
        `切换后表头：${alarmState.headers.join('/')}（字段标签与状态标签一起换）`,
    )
    check(
        'B3-alarm-list-content-changed',
        alarmState.rows.length > 0 && alarmState.rows.every((r) => r.code.startsWith('ALM-')),
        `报警行 ${alarmState.rows.length} 条：${alarmState.rows.slice(0, 2).map((r) => r.code).join(',')}（内容真的换了）`,
    )
    check(
        'B4-events-do-not-add-map-markers',
        state.markerCount !== null && alarmState.markerCount !== null && state.markerCount === alarmState.markerCount,
        `切换前后地图点位数：${state.markerCount} → ${alarmState.markerCount}（事件不建独立标记，数字不变）`,
    )
    check(
        'A7-no-page-errors',
        errors.length === 0,
        errors.slice(0, 3).join(' | '),
    )

    await page.close()
}

// ================================================================ C 空样例（只有事件端点空）

{
    const { page, errors } = await openPage('empty', '/events/current')
    const state = await readState(page)

    check(
        'C1-empty-events-says-no-events',
        state.panelRendered && state.rows.length === 0 && state.placeholder.includes('没有事件'),
        `占位措辞：${state.placeholder}`,
    )
    check(
        'C2-empty-still-has-switch',
        state.switchBtns.length === 2,
        `空态分段切换仍在（${state.switchBtns.length} 段）`,
    )
    check(
        'C3-empty-no-fake-rows',
        state.rows.length === 0 && !state.limitedNote,
        '空态不画假行、不显示分页说明',
    )
    check('C4-empty-no-page-errors', errors.length === 0, errors.slice(0, 3).join(' | '))

    await page.close()
}

await browser.close()

const failed = results.filter((item) => !item.pass)
console.log('')
console.log(`T13 真机走查：${results.length - failed.length}/${results.length} 项通过。`)
if (failed.length) {
    console.log('未通过：')
    for (const item of failed) console.log(`  · ${item.id}`)
    process.exit(1)
}
console.log('T13 事件列表真机走查全部通过。')