City-Lifeline-Cockpit/tests/cockpit-video/hosts.mjs

import assert from 'node:assert/strict'
import test from 'node:test'
import { createApp, h, nextTick } from 'vue'
import { createPinia, setActivePinia } from 'pinia'
import CockpitRoot from '../../src/pages/cockpit/index.vue'
import PipeEnhancement from '../../src/modules/cockpit/components/PipeEnhancement.vue'
import VideoMonitorPanel from '../../src/modules/cockpit/components/VideoMonitorPanel.vue'
import { useEnhancementDevicesStore } from '../../src/modules/cockpit/stores/enhancementDevicesStore.js'
import { loadCockpitConfig, resetCockpitConfigForTest } from '../../src/modules/cockpit/services/cockpitConfig.js'
import { useVideoStore } from '../../src/modules/cockpit/stores/videoStore.js'

const settle = async () => { for (let i = 0; i < 8; i++) { await new Promise(setImmediate); await nextTick() } }
const envelope = (data, status = 200) => Response.json({ code: 200, data }, { status })
const cameraCode = 'CAM/03 空格'
const coordinate = { state: 'INVALID', renderable: false, reasons: ['MISSING_LONGITUDE'], longitude: null, latitude: null }
const point = { pointCode: 'P-FIXED', pointName: '无位置摄像机监测点', pointStatus: 'NORMAL', industry: 'DRAINAGE',
    deviceCodes: [cameraCode], longitude: null, latitude: null, coordinateValidation: coordinate }
const camera = { deviceCode: cameraCode, deviceName: '无位置现场摄像机', deviceType: '20', deviceTypeName: '视频监控设备',
    deviceStatus: 'NORMAL', industry: 'DRAINAGE', longitude: null, latitude: null, coordinateValidation: coordinate }
const device = { deviceCode: cameraCode, deviceName: camera.deviceName, typeCode: '20', bound: true, capabilities: { live: true } }
const aggregate = { deviceCode: cameraCode, aggregateState: 'READY',
    archive: { state: 'SUCCESS', data: camera }, metrics: { state: 'EMPTY', data: null },
    warnings: { state: 'EMPTY', data: [] }, alarms: { state: 'EMPTY', data: [] }, workOrders: { state: 'EMPTY', data: null },
    timelines: { state: 'EMPTY', data: null }, latestImage: { state: 'EMPTY', data: null } }
const emptyEndpoints = new Set(['/overview/perception', '/overview/pipe-network', '/overview/warning-study', '/overview/alarm-disposal',
    '/monitoring/overview', '/monitoring/situation', '/events/current'])

function installGpu() {
    const viewers = []
    let visible = true, time = 0
    const frame = () => { for (const viewer of viewers) for (const callback of [...viewer.frames]) callback() }
    const projection = () => visible ? { x: 800, y: 450, visible: true, iconSize: 20 } : null
    const gpu = {
        createViewer(host) {
            const canvas = document.createElement('canvas'); host.appendChild(canvas)
            const frames = new Set()
            const viewer = { canvas, frames, points: [], devices: [],
                camera: { positionWC: { x: 0, y: 0, z: 6371000 }, directionWC: { x: 0, y: 0, z: -1 }, upWC: { x: 0, y: 1, z: 0 } },
                scene: { canvas, globe: { ellipsoid: {} }, requestRender() {},
                postRender: { addEventListener(callback) { frames.add(callback); return () => frames.delete(callback) } } } }
            viewers.push(viewer); return viewer
        },
        destroyViewer(viewer) { viewer.frames.clear(); viewer.canvas.remove(); viewers.splice(viewers.indexOf(viewer), 1) },
        resizeViewer() {}, applyOverlays: () => [], sampleTerrainHeight: async () => 0,
        sampleTerrainHeights: async (_viewer, points) => points.map(() => 0),
        groundHeightAt: () => 0, markerGroundHeight: () => 0,
        createCameraEngine(viewer) { return {
            applyView() {}, readView: () => ({ heading: 0, pitch: -45, range: 1000 }),
            pickGroundAtCenter: () => ({ lon: 110.4, lat: 28.4, height: 0 }), projectPivot: projection,
            inputTarget: () => viewer.canvas, viewport: () => ({ width: 1600, height: 900 }), fovY: () => Math.PI / 3,
            now: () => time, requestFrame: (callback) => setTimeout(() => { time += 100; callback(time) }, 0),
        } },
        createOverlayReadiness: () => ({ state: { ready: true, pending: 0, failed: 0, lastError: '' }, refresh() {}, detach() {} }),
        hasFogStage: () => false,
        syncPointMarkers(viewer, rows) { viewer.points = rows; return { rendered: rows.length, unchanged: 0, skipped: 0, complete: true } },
        syncAssociatedDevices(viewer, rows) { viewer.devices = rows; return { rendered: rows.length, skipped: 0 } },
        clearAssociatedDevices(viewer) { viewer.devices = [] }, clearPointMarkers(viewer) { viewer.points = [] },
        hasPointMarker: (viewer, kind, code) => viewer.points.some((row) => row.kind === kind && row.code === code),
        hasDeviceMarker: (viewer, code) => viewer.devices.some((row) => row.code === code),
        projectPointMarker: (viewer, kind, code) => gpu.hasPointMarker(viewer, kind, code) ? projection() : null,
        projectDeviceMarker: (viewer, code) => gpu.hasDeviceMarker(viewer, code) ? projection() : null,
        projectDeviceMarkers: (viewer) => viewer.devices.map((row) => ({ ...row, ...projection() })),
        projectOverlapSymbols: () => [], readPointMarkers: (viewer) => viewer.points,
        readAssociatedDevices: (viewer) => viewer.devices, readDeviceEffects: () => [], readOverlapTargets: () => [],
        highlightEntities: () => 1, syncPipeLayer: async () => ({ pipes: 0, components: 0, skipped: 0 }), pickPipeObjectAt: () => null,
    }
    for (const name of ['applyViewModeLayers', 'applyMotionResolution', 'applyDeviceEffects', 'applyDeviceReactions',
        'clearDeviceLead', 'syncDeviceLead', 'setOverlapPresentation', 'clearOverlapNudge', 'noteFrameInterval', 'tickAdaptiveResolution']) gpu[name] = () => {}
    globalThis.__VIDEO_GPU__ = gpu
    return { frame, viewers, setVisible(value) { visible = value; frame() } }
}

async function mountRoot({ positioned = false } = {}) {
    const gpu = installGpu()
    const location = positioned ? { state: 'VALID', renderable: true, reasons: [] } : coordinate
    const selectedPoint = { ...point, pointCode: positioned ? 'P-FLOAT' : 'P-FIXED',
        longitude: positioned ? 110.4 : null, latitude: positioned ? 28.4 : null, coordinateValidation: location }
    const selectedCamera = { ...camera, longitude: selectedPoint.longitude, latitude: selectedPoint.latitude, coordinateValidation: location }
    const requests = [], unexpected = [], errors = []
    const fetchImpl = async (address, options = {}) => {
        const url = new URL(address), path = url.pathname.replace('/api/cockpit/v1', '')
        const body = options.body ? JSON.parse(options.body) : null
        requests.push({ url, path, body, options })
        if (url.origin !== 'http://fixture.invalid') { unexpected.push(url.href); throw new Error('Offline origin rejected') }
        assert.equal(new Headers(options.headers).get('authorization'), null)
        if (path === '/map-snapshot') return envelope({ page: 1, pageSize: 100, snapshotAt: '2026-11-11T00:00:00Z',
            batchUpdatedAt: '2026-11-11T00:00:00Z', total: 1, complete: true, monitoringPoints: [selectedPoint], unassociatedEquipment: [] })
        if (path === '/monitoring/distribution') return envelope({ monitoringPoints: [selectedPoint], unassociatedEquipment: [],
            snapshotAt: '2026-11-11T00:00:00Z', pagination: { page: 1, pageSize: 100, total: 1, totalPages: 1, hasMore: false } })
        if (path === `/monitoring-points/${selectedPoint.pointCode}`) return envelope({ monitoringPointCode: selectedPoint.pointCode,
            monitoringPointName: point.pointName, pointStatus: 'NORMAL', coordinateValidation: location,
            deviceStatistics: { totalDeviceCount: 1, normalDeviceCount: 1 }, devices: [selectedCamera] })
        if (path.startsWith('/equipments/') && path.endsWith('/detail-aggregate')) return envelope(aggregate)
        if (path.startsWith('/equipments/') && path.endsWith('/collection-records')) return envelope({ deviceCode: cameraCode,
            state: 'EMPTY', recordView: { columns: [], rows: [] } })
        if (path.startsWith('/equipments/') && path.endsWith('/freshness')) return envelope({})
        if (emptyEndpoints.has(path)) return envelope({})
        if (path === '/video/device') { assert.equal(url.searchParams.get('deviceCode'), cameraCode); return envelope(device) }
        if (path === '/video/sessions/prepare') {
            assert.deepEqual(body, { deviceCode: cameraCode })
            return envelope({ ...device, sessionId: 'session-host', sessionToken: 'owner-host', mode: 'LIVE', status: 'PREPARED' }, 201)
        }
        if (path === '/video/sessions/session-host/live') {
            assert.deepEqual(body, { sessionToken: 'owner-host' })
            return envelope({ sessionId: 'session-host', deviceCode: cameraCode, mode: 'LIVE', status: 'ACTIVE',
                media: { native: true, url: 'https://media.invalid/live.mp4' } })
        }
        if (path === '/video/sessions/session-host/stop' || path === '/video/sessions/session-host/status') {
            assert.deepEqual(body, { sessionToken: 'owner-host' })
            return envelope({ sessionId: 'session-host', deviceCode: cameraCode, mode: 'LIVE', status: 'STOPPED' })
        }
        unexpected.push(path); throw new Error('Unconfigured offline request: ' + path)
    }
    globalThis.fetch = fetchImpl
    globalThis.__COCKPIT_CONFIG__ = { dataSource: 'real', api: { baseUrl: 'http://fixture.invalid/api/cockpit/v1' },
        map: { cesium: { enabled: positioned }, intro: { enabled: false }, fog: { enabled: false }, grade: { enabled: false }, handover: { enabled: false }, effects: { enabled: false } }, runtime: { polling: false }, ws: { url: '' } }
    resetCockpitConfigForTest()
    const { config } = await loadCockpitConfig()
    const pinia = createPinia(); setActivePinia(pinia)
    const video = useVideoStore(); video.configure({ config, fetchImpl })
    const host = document.createElement('main'); document.body.appendChild(host)
    const app = createApp(CockpitRoot); app.use(pinia)
    app.config.errorHandler = (error) => { errors.push(error) }
    app.mount(host); await settle()
    return { host, requests, unexpected, errors, video, gpu, selectedPoint, async dispose() {
        app.unmount(); await video.close(); host.remove(); delete globalThis.__COCKPIT_CONFIG__; await settle()
        globalThis.fetch = async () => { throw new Error('Uninjected network request in offline video test') }
    } }
}

// 真root→实际Shell固定态→既有点位设备卡→Latest TAB→监控；不直接调用视频store.open。
for (const positioned of [false, true]) test(`${positioned ? '浮动' : '无地图位置固定'}：真实台账设备详情打开唯一根监控面板`, async () => {
    const page = await mountRoot({ positioned })
    try {
        const mode = [...page.host.querySelectorAll('button')].find((button) => button.textContent.trim() === '运行监测')
        assert.ok(mode); mode.click(); await settle()
        const ledger = page.host.querySelector(`[data-ledger-card="${page.selectedPoint.pointCode}"]`)
        assert.ok(ledger, '使用真实监测点台账卡片')
        ledger.click(); await settle()
        const card = page.host.querySelector('[data-device-card][data-device-code="CAM/03 空格"]')
        assert.ok(card); card.click(); await settle(); page.gpu.frame(); await settle()
        const detail = page.host.querySelector('.cockpit-shell__detail')
        assert.equal(detail.getAttribute('data-anchor-state'), positioned ? 'visible' : 'fixed')
        assert.equal(Boolean(detail.querySelector('[data-point-no-location]')), !positioned)
        detail.querySelector('[data-equipment-tab="metrics"]').click(); await settle()
        const monitor = detail.querySelector('[data-video-open]')
        assert.ok(monitor); assert.equal(monitor.disabled, false); monitor.click(); await settle()
        const panels = document.querySelectorAll('[data-video-monitor]')
        assert.equal(panels.length, 1)
        const dialog = panels[0]
        assert.ok(dialog.textContent.includes(cameraCode))
        assert.ok(dialog.querySelector('video'), JSON.stringify({ text: dialog.textContent, unexpected: page.unexpected, errors: page.errors.map((error) => error.message) }))
        dialog.querySelector('video').dispatchEvent(new Event('playing')); await settle()
        assert.ok(dialog.textContent.includes('正在播放'))
        dialog.querySelector('[aria-label="关闭监控"]').click(); await settle()
        assert.equal(document.querySelector('[data-video-monitor]'), null)
        assert.equal(page.requests.filter((request) => request.path.endsWith('/stop')).length, 1)
        assert.deepEqual(page.errors, [])
        assert.deepEqual(page.unexpected, [])
    } finally { await page.dispose() }
})

// 地下管线宿主：真实 PipeEnhancement→其内设备详情→Latest TAB→监控；只替换物理渲染器。
async function mountUnderground() {
    const requests = [], unexpected = [], errors = []
    const config = { dataSource: 'real', api: { baseUrl: 'http://fixture.invalid/api/cockpit/v1' } }
    const fetchImpl = async (address, options = {}) => {
        const url = new URL(address), path = url.pathname.replace('/api/cockpit/v1', '')
        const body = options.body ? JSON.parse(options.body) : null
        requests.push({ url, path, body, options })
        if (url.origin !== 'http://fixture.invalid') { unexpected.push(url.href); throw new Error('Offline origin rejected') }
        if (path === '/video/device') return envelope(device)
        if (path === '/video/sessions/prepare') return envelope({ ...device, sessionId: 'session-under', sessionToken: 'owner-under', mode: 'LIVE', status: 'PREPARED' }, 201)
        if (path === '/video/sessions/session-under/live') return envelope({ sessionId: 'session-under', deviceCode: cameraCode, mode: 'LIVE', status: 'ACTIVE', media: { native: true, url: 'https://media.invalid/under.mp4' } })
        if (path === '/video/sessions/session-under/stop' || path === '/video/sessions/session-under/status') return envelope({ sessionId: 'session-under', status: 'STOPPED' })
        unexpected.push(path); throw new Error('Unconfigured offline request: ' + path)
    }
    globalThis.fetch = fetchImpl
    const pinia = createPinia(); setActivePinia(pinia)
    const video = useVideoStore(); video.configure({ config, fetchImpl })
    const enhancement = useEnhancementDevicesStore()
    await enhancement.open({ code: cameraCode, name: camera.deviceName, placementText: '地下清单' },
        { fetchDetail: async () => ({ state: 'success', data: aggregate }) })
    const plan = { visible: true, radiusM: 50, disclaimer: '显示示意', connectionNote: '仅供导引',
        object: { title: '重点管段 P-1', code: 'PIPE-1', sourceKind: 'pipe', renderKind: 'pipe', colorKey: 'UNKNOWN', diameterM: 0.3, path: [[110.4, 28.4], [110.4008, 28.4006], [110.4016, 28.4012]] },
        objects: [], devices: [], deviceList: [], coverage: null, deviceCoverage: null }
    const fakeRenderer = () => ({ setPixelRatio() {}, setSize() {}, render() {}, dispose() {},
        domElement: document.createElement('canvas') })
    const host = document.createElement('main'); document.body.appendChild(host)
    const app = createApp({ render: () => h('div', [
        h(PipeEnhancement, { plan, deviceState: enhancement, rendererOptions: { rendererFactory: fakeRenderer } }),
        h(VideoMonitorPanel)]) })
    app.config.errorHandler = (error) => { errors.push(error) }
    app.use(pinia).mount(host); await settle()
    return { host, requests, unexpected, errors, video, enhancement, async dispose() {
        app.unmount(); await video.close(); host.remove(); await settle()
        globalThis.fetch = async () => { throw new Error('Uninjected network request in offline video test') }
    } }
}

test('地下管线详情：真实设备详情打开唯一根监控面板且来源为 enhancement', async () => {
    const page = await mountUnderground()
    try {
        const detail = page.host.querySelector('[data-enhancement-device-detail]')
        assert.ok(detail, JSON.stringify({ text: page.host.textContent, unexpected: page.unexpected, errors: page.errors.map((error) => error.message) }))
        detail.querySelector('[data-equipment-tab="metrics"]').click(); await settle()
        const monitor = detail.querySelector('[data-video-open]')
        assert.ok(monitor); monitor.click(); await settle()
        assert.equal(page.video.state.ownerSource, 'enhancement')
        const panels = document.querySelectorAll('[data-video-monitor]')
        assert.equal(panels.length, 1)
        assert.ok(panels[0].querySelector('video'), JSON.stringify({ text: panels[0].textContent, unexpected: page.unexpected }))
        panels[0].querySelector('[aria-label="关闭监控"]').click(); await settle()
        assert.equal(document.querySelector('[data-video-monitor]'), null)
        assert.equal(page.requests.filter((request) => request.path.endsWith('/stop')).length, 1)
        assert.deepEqual(page.unexpected, [])
        assert.deepEqual(page.errors, [])
    } finally { await page.dispose() }
})