Files
Starlight_Lancher/apps/telemetry-dashboard/test/ui/states.test.ts

45 lines
1.5 KiB
TypeScript

import { readFileSync } from 'node:fs'
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import AppState from '../../components/AppState.vue'
import TrendChart from '../../components/charts/TrendChart.vue'
import Skeleton from '../../components/ui/Skeleton.vue'
describe('dashboard states', () => {
it.each([
['error', '遥测数据暂不可用'],
['unauthenticated', '需要登录'],
['forbidden', '无权访问'],
] as const)('renders the %s state', (kind, title) => {
const wrapper = mount(AppState, { props: { kind } })
expect(wrapper.attributes('data-state')).toBe(kind)
expect(wrapper.text()).toContain(title)
})
it('renders stable loading and empty chart states', () => {
expect(mount(Skeleton, { props: { class: 'h-14' } }).classes()).toContain('h-14')
const chart = mount(TrendChart, {
props: {
data: [],
series: [{ key: 'errorOccurrences', label: '错误次数', color: '#d85d4a' }],
},
})
expect(chart.get('[data-state="empty"]').text()).toContain('暂无数据')
})
})
describe('responsive theme contract', () => {
it('keeps dark tokens and narrow layouts from creating page overflow', () => {
const root = process.cwd()
const css = readFileSync(`${root}/assets/styles/tailwind.css`, 'utf8')
const layout = readFileSync(`${root}/layouts/default.vue`, 'utf8')
expect(css).toContain('.dark')
expect(css).toContain('overflow-x-hidden')
expect(layout).toContain('min-w-0 md:pl-60')
expect(layout).toContain('w-60 -translate-x-full')
expect(layout).toContain('生产数据')
})
})