56 lines
2.7 KiB
TypeScript
56 lines
2.7 KiB
TypeScript
|
import { readFileSync } from 'node:fs'
|
||
|
|
import { resolve } from 'node:path'
|
||
|
|
import { describe, expect, it } from 'vitest'
|
||
|
|
|
||
|
|
function source(path: string) {
|
||
|
|
return readFileSync(resolve(process.cwd(), path), 'utf8')
|
||
|
|
}
|
||
|
|
|
||
|
|
describe('Admin list typography baseline', () => {
|
||
|
|
it('freezes the UnifiedOrdersView desktop hierarchy as shared tokens', () => {
|
||
|
|
const foundation = source('src/styles/foundation.css')
|
||
|
|
for (const token of [
|
||
|
|
'--cc-list-page-title-font-size: 20px',
|
||
|
|
'--cc-list-page-description-font-size: 12px',
|
||
|
|
'--cc-list-query-font-size: 14px',
|
||
|
|
'--cc-list-table-font-size: 12px',
|
||
|
|
'--cc-list-primary-font-size: 12px',
|
||
|
|
'--cc-list-secondary-font-size: 12px',
|
||
|
|
'--cc-list-status-font-size: 11px',
|
||
|
|
'--cc-list-action-font-size: 12px',
|
||
|
|
'--cc-list-pagination-font-size: 12px',
|
||
|
|
'--cc-list-page-button-font-size: 14px',
|
||
|
|
]) expect(foundation).toContain(token)
|
||
|
|
})
|
||
|
|
|
||
|
|
it('applies the tokens through shared page, query, table, status, action, empty, and pagination styles', () => {
|
||
|
|
const shell = source('src/styles/shell.css')
|
||
|
|
const global = source('src/styles/index.css')
|
||
|
|
const table = source('src/shared/components/DataTable.vue')
|
||
|
|
const query = source('src/shared/components/QueryToolbar.vue')
|
||
|
|
expect(shell).toContain('font-size: var(--cc-list-page-title-font-size)')
|
||
|
|
expect(shell).toContain('font-size: var(--cc-list-page-description-font-size)')
|
||
|
|
expect(query).toContain('font-size: var(--cc-list-query-font-size)')
|
||
|
|
expect(table).toContain('.data-table :deep(.el-table) { font-size: var(--cc-list-table-font-size); }')
|
||
|
|
expect(table).toContain('.data-table :deep(.el-table .el-button) { font-size: var(--cc-list-action-font-size); }')
|
||
|
|
expect(table).toContain('.data-table :deep(.el-table__empty-text) { font-size: var(--cc-list-table-font-size); }')
|
||
|
|
expect(table).toContain('font-size: var(--cc-list-pagination-font-size)')
|
||
|
|
expect(global).toContain('font-size: var(--cc-list-primary-font-size)')
|
||
|
|
expect(global).toContain('font-size: var(--cc-list-secondary-font-size)')
|
||
|
|
expect(global).toContain('font-size: var(--cc-list-status-font-size)')
|
||
|
|
})
|
||
|
|
|
||
|
|
it.each([
|
||
|
|
'src/modules/ocean-bookings/pages/OceanBookingsView.vue',
|
||
|
|
'src/modules/trucking/pages/TruckAppointmentsView.vue',
|
||
|
|
'src/modules/customs/pages/CustomsCasesView.vue',
|
||
|
|
'src/modules/outbound-dispatch/pages/OutboundDispatchesView.vue',
|
||
|
|
'src/modules/port-schedules/pages/PortSchedulesView.vue',
|
||
|
|
])('keeps representative formal list %s on the shared components', (path) => {
|
||
|
|
const page = source(path)
|
||
|
|
expect(page).toContain('<ListPageLayout')
|
||
|
|
expect(page).toContain('<QueryToolbar')
|
||
|
|
expect(page).toContain('<DataTable')
|
||
|
|
})
|
||
|
|
})
|