city-life-line/tests/waterGisConsistency.test.mjs

import test from 'node:test'
import assert from 'node:assert/strict'
import { readFile } from 'node:fs/promises'

const pages = {
  facility: 'src/views/subSystem/waterSupply/facility/gis.vue',
  device: 'src/views/subSystem/waterSupply/components/WaterDeviceGisMap.vue',
  alarm: 'src/views/subSystem/waterSupply/components/WaterAlarmPage.vue'
}

const shellPath = 'src/components/WaterGisPageShell.vue'

test('the shared shell owns one metric grid, map error and map empty styling', async () => {
  const shell = await readFile(shellPath, 'utf8')

  assert.match(shell, /class="metric-grid"/u)
  assert.match(shell, /<slot name="metrics" \/>/u)
  assert.match(shell, /\.metric-grid :deep\(\.metric\)/u)
  assert.match(shell, /\.metric-grid :deep\(\.metric-icon\)/u)
  assert.match(shell, /\.metric-grid :deep\(\.metric-body\)/u)
  assert.match(shell, /\.metric-grid :deep\(\.metric-value\)/u)
  assert.match(shell, /:deep\(\.map-error\)/u)
  assert.match(shell, /:deep\(\.map-empty\)/u)
})

test('all three GIS maps fill the metrics slot without nesting another metric grid', async () => {
  for (const [name, path] of Object.entries(pages)) {
    const source = await readFile(path, 'utf8')
    const metricsSlot = source.match(/#metrics>[\s\S]*?<\/template>/u)?.[0] || ''

    assert.ok(metricsSlot, `${name} should declare a #metrics slot`)
    assert.doesNotMatch(metricsSlot, /class="metric-grid"/u, `${name} should not nest a metric grid`)
    assert.match(metricsSlot, /class="metric"/u, `${name} should render metric cards`)
    assert.match(metricsSlot, /class="metric-icon"/u, `${name} should render a metric icon`)
    assert.match(metricsSlot, /class="metric-body"/u, `${name} should render a metric body`)
    assert.match(metricsSlot, /class="metric-value"/u, `${name} should render a metric value row`)
    assert.match(metricsSlot, /<small>/u, `${name} should render a metric unit`)
  }
})

test('all three GIS maps keep the same refresh, empty, error and drawer contract', async () => {
  for (const [name, path] of Object.entries(pages)) {
    const source = await readFile(path, 'utf8')

    assert.match(source, />刷新<\/el-button>/u, `${name} should expose a refresh action`)
    assert.match(source, />全图<\/el-button>/u, `${name} should expose a fit-bounds action`)
    assert.match(source, /class="map-error"/u, `${name} should expose a map error state`)
    assert.match(source, /class="map-error"[\s\S]*?重试<\/el-button>/u, `${name} should offer a retry action on map errors`)
    assert.match(source, /class="map-empty"/u, `${name} should expose a map empty state`)
    assert.match(source, /<el-drawer/u, `${name} should render the shared detail drawer component`)
    assert.match(source, /direction="rtl"/u, `${name} should open the detail drawer from the right`)
    assert.match(source, /class="detail-drawer/u, `${name} should use the shared detail drawer class`)
    assert.match(source, /420px/u, `${name} should size the map detail drawer at 420px`)
  }
})

test('all three GIS maps share the searchable result list structure', async () => {
  for (const [name, path] of Object.entries(pages)) {
    const source = await readFile(path, 'utf8')

    assert.match(source, /class="device-result-list"/u, `${name} should render the shared result list`)
    assert.match(source, /class="device-name"/u, `${name} should render a result name`)
    assert.match(source, /class="device-meta"/u, `${name} should render a result meta line`)
  }
})
test('clustering preserves every valid input point in the rendered marker count', async () => {
  const { mergeMapPoints } = await import('../src/utils/gisMapClustering.js')
  const points = [
    { id: 'a', lng: 110.3, lat: 28.4 },
    { id: 'b', lng: 110.3004, lat: 28.4003 },
    { id: 'c', lng: 110.9, lat: 28.9 }
  ]
  const project = ({ lng, lat }) => ({ x: lng * 1000, y: lat * 1000 })

  const merged = mergeMapPoints(points, project, 48)
  const renderedCount = merged.reduce((sum, item) => sum + (item.type === 'cluster' ? item.count : 1), 0)

  assert.equal(renderedCount, points.length)
})
test('the shared metric card neutralises the global absolute metric icon rule', async () => {
  const shell = await readFile(shellPath, 'utf8')

  assert.match(shell, /\.metric-grid :deep\(\.metric\) \{\s*position: static;/u)
  assert.match(shell, /\.metric-grid :deep\(\.metric-icon\) \{\s*position: static;/u)
})

test('all three GIS maps render the shared shell inside the same map card and drawer layout', async () => {
  for (const [name, path] of Object.entries(pages)) {
    const source = await readFile(path, 'utf8')

    assert.match(source, /class="water-panel map-card"/u, `${name} should render the shared map card`)
    assert.match(source, /<WaterGisPageShell\s+embedded/u, `${name} should embed the shared shell in the card`)
    assert.match(source, /<section class="detail-hero">/u, `${name} should use the shared drawer hero`)
    assert.match(source, /<section class="detail-section">/u, `${name} should use the shared drawer section`)
  }
})
test('all three GIS maps share the page heading and filter card chrome', async () => {
  for (const [name, path] of Object.entries(pages)) {
    const source = await readFile(path, 'utf8')

    assert.match(source, /class="page-heading"/u, `${name} should render the page heading`)
    assert.match(source, /class="page-title-icon"/u, `${name} should render the page title icon`)
    assert.match(source, /class="water-panel filter-card"/u, `${name} should render the filter card`)
    assert.match(source, /class="filter-form"/u, `${name} should render the inline filter form`)
    assert.match(source, />查询<\/el-button>/u, `${name} should expose a query action`)
    assert.match(source, />重置<\/el-button>/u, `${name} should expose a reset action`)
  }
})

test('the GIS page chrome theme is shared by the facility and device maps', async () => {
  const theme = await readFile('src/views/subSystem/waterSupply/components/waterGisPageTheme.scss', 'utf8')
  const facility = await readFile(pages.facility, 'utf8')
  const device = await readFile(pages.device, 'utf8')

  assert.match(theme, /\.gis-page \.page-heading/u)
  assert.match(theme, /\.gis-page \.page-title-icon/u)
  assert.match(theme, /\.gis-page \.filter-form \.el-form-item/u)
  assert.match(theme, /\.gis-page \.card-heading/u)
  assert.match(facility, /@use '\.\.\/components\/waterGisPageTheme\.scss'/u)
  assert.match(device, /@use '\.\/waterGisPageTheme\.scss'/u)
})
test('every GIS map renders its points from the filtered layer state', async () => {
  const facility = await readFile(pages.facility, 'utf8')
  const device = await readFile(pages.device, 'utf8')
  const alarm = await readFile(pages.alarm, 'utf8')

  assert.match(facility, /const visibleMapModel = computed\(\(\) => filterFacilityMapModel\(fullMapModel\.value, layerState\)\)/u)
  assert.match(facility, /const mapPoints = computed\(\(\) => visibleMapModel\.value\.points\.map/u)
  assert.match(device, /const mapPoints = computed\(\(\) => filteredDevices\.value\.map/u)
  assert.match(alarm, /const gisMapPoints = computed\(\(\) => filteredAlarmPoints\.value\.map/u)
})