31 lines
2.1 KiB
TypeScript
31 lines
2.1 KiB
TypeScript
import { readFileSync } from 'node:fs';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const components = readFileSync(new URL('../../src/styles/components.css', import.meta.url), 'utf8');
|
|
const legacyViews = readFileSync(new URL('../../src/styles/legacy-views.css', import.meta.url), 'utf8');
|
|
const tokens = readFileSync(new URL('../../src/styles/tokens.css', import.meta.url), 'utf8');
|
|
|
|
describe('Finding title typography', () => {
|
|
it('uses the emphasized 20px detail-title role in the reader', () => {
|
|
expect(components).toMatch(/\.reader-heading h2\s*\{[^}]*font-size:\s*var\(--type-detail-title-size\);/s);
|
|
expect(components).toMatch(/\.reader-summary h3\s*\{[^}]*font-size:\s*var\(--type-h3-size\);/s);
|
|
expect(legacyViews).toMatch(/\.reader-heading h2\s*\{[^}]*font-size:\s*var\(--type-detail-title-size\);/s);
|
|
expect(legacyViews).toMatch(/\.reader-summary h3\s*\{[^}]*font-size:\s*var\(--type-h3-size\);/s);
|
|
});
|
|
|
|
it('uses the readable 16px content-title role in list and matrix cards', () => {
|
|
expect(components).toMatch(/\.record-list \.finding-card h3\s*\{[^}]*font-size:\s*var\(--type-h4-size\);/s);
|
|
expect(components).toMatch(/\.record-list \.finding-card h3\s*\{[^}]*font-weight:\s*var\(--fw-content-medium\);/s);
|
|
expect(legacyViews).toMatch(/\.record-title\s*\{[^}]*font-size:\s*var\(--type-h4-size\);[^}]*font-weight:\s*var\(--fw-regular\);[^}]*line-height:\s*1\.28;/s);
|
|
expect(legacyViews).toMatch(/\.record-card\s*\{[^}]*grid-template-columns:\s*28px minmax\(0, 1fr\);[^}]*column-gap:\s*var\(--space-2\);/s);
|
|
expect(components).toMatch(/\.finding-card h3\s*\{[^}]*font-size:\s*var\(--type-h4-size\);/s);
|
|
expect(legacyViews).toMatch(/\.data-tile-content h3\s*\{[^}]*font-size:\s*var\(--type-h4-size\);/s);
|
|
});
|
|
|
|
it('uses the compact badge role for finding labels and outcomes', () => {
|
|
expect(tokens).toContain('--ui-badge-size: var(--type-badge-size);');
|
|
expect(legacyViews).toMatch(/\.finding-badges, \.mitre-line\s*\{[^}]*font-size:\s*var\(--ui-badge-size\);/s);
|
|
expect(legacyViews).toMatch(/\.status-badge, \.severity-badge, \.mitre-badge, \.reader-severity\s*\{[^}]*font-size:\s*var\(--ui-badge-size\);/s);
|
|
});
|
|
});
|