48 lines
2.4 KiB
JavaScript
48 lines
2.4 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import { readFile } from 'node:fs/promises';
|
|
import test from 'node:test';
|
|
|
|
const sourcePath = new URL('../src/pages/TemplateHome.tsx', import.meta.url);
|
|
const stylesPath = new URL('../src/styles.css', import.meta.url);
|
|
|
|
test('template details are rendered through one reusable right-panel component', async () => {
|
|
const source = await readFile(sourcePath, 'utf8');
|
|
|
|
assert.match(source, /function TemplateDetailPanel\(/);
|
|
assert.match(source, /<TemplateDetailPanel/);
|
|
assert.match(source, /className="[^"]*template-detail-panel/);
|
|
});
|
|
|
|
test('template detail styles separate summary, specifications, and actions', async () => {
|
|
const styles = await readFile(stylesPath, 'utf8');
|
|
|
|
assert.match(styles, /\.template-detail-summary/);
|
|
assert.match(styles, /\.template-detail-specs/);
|
|
assert.match(styles, /\.template-detail-actions/);
|
|
});
|
|
|
|
test('template detail specifications and actions stack on narrow screens', async () => {
|
|
const styles = await readFile(stylesPath, 'utf8');
|
|
|
|
assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.template-detail-specs\s*\{\s*grid-template-columns: 1fr;/);
|
|
assert.match(styles, /@media \(max-width: 560px\) \{[\s\S]*?\.template-detail-actions\s*\{\s*grid-template-columns: 1fr;/);
|
|
});
|
|
|
|
test('narrow-screen modal keeps the action row reachable under the viewport cap', async () => {
|
|
const styles = await readFile(stylesPath, 'utf8');
|
|
|
|
// The modal caps height with overflow:hidden. On single-column mobile the
|
|
// detail panel must keep its own scroll so actions cannot be clipped away.
|
|
assert.match(styles, /\.template-modal\s*\{[^}]*max-height:\s*calc\(100vh\s*-\s*56px\);/);
|
|
assert.match(styles, /\.template-modal\s*\{[^}]*overflow:\s*hidden;/);
|
|
assert.match(styles, /\.template-detail-panel\s*\{[^}]*overflow-y:\s*auto;/);
|
|
});
|
|
|
|
test('modal previews fill their column with a white SVG backdrop and thumbnails stay opaque', async () => {
|
|
const styles = await readFile(stylesPath, 'utf8');
|
|
|
|
assert.match(styles, /\.template-home \.template-modal \.template-preview\.large\s*\{[^}]*align-self: stretch;[^}]*aspect-ratio: 4 \/ 3;[^}]*background: #fff;/);
|
|
assert.match(styles, /\.template-home \.template-modal \.template-preview\.large img\s*\{[^}]*height: 100%;[^}]*max-height: none;/);
|
|
assert.match(styles, /\.template-home \.template-detail-references \.reference-strip img\s*\{[^}]*background: #fff;/);
|
|
});
|