Files
crashtestdev/tests/check-post-header.mjs
T
Ken 42373521f0 feat: add PostHeader component with badge, title, meta, and responsive styles
Built the PostHeader.astro component per the design spec. It accepts props {title, date, type, readingTime}, formats dates with toLocaleDateString, renders a centered header with content type badge, h1 title, and meta line with date/reading time. Has responsive typography stepping down at 719px and 479px breakpoints. All 39 tests pass and npm run build succeeds.

Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
2026-05-26 22:49:09 +00:00

159 lines
4.4 KiB
JavaScript

/**
* Build-output test for PostHeader.astro
* Checks source content for expected structure, props, styles, and responsive breakpoints.
*/
import { readFileSync, existsSync } from 'fs';
import { resolve } from 'path';
const srcPath = resolve('src/components/PostHeader.astro');
let failures = 0;
let passes = 0;
function assert(condition, label) {
if (condition) {
console.log(`${label}`);
passes++;
} else {
console.error(` ✗ FAIL: ${label}`);
failures++;
}
}
// ── Source file existence ──
console.log('\n--- Source file checks ---');
assert(
existsSync(srcPath),
'src/components/PostHeader.astro exists'
);
if (existsSync(srcPath)) {
const src = readFileSync(srcPath, 'utf-8');
// ── Props interface ──
console.log('\n--- Props interface checks ---');
assert(
/title:\s*string/.test(src),
'Props has title: string'
);
assert(
/date:\s*Date/.test(src),
'Props has date: Date'
);
assert(
/type\?:\s*string/.test(src),
'Props has type?: string'
);
assert(
/readingTime\?:\s*number/.test(src),
'Props has readingTime?: number'
);
// ── Default values ──
console.log('\n--- Default value checks ---');
assert(
src.includes("'post'") || src.includes('"post"'),
'type defaults to "post"'
);
// ── Date formatting ──
console.log('\n--- Date formatting checks ---');
assert(
src.includes("toLocaleDateString('en-US'") || src.includes('toLocaleDateString("en-US"'),
'Uses toLocaleDateString with en-US locale'
);
assert(
src.includes("'numeric'") || src.includes('"numeric"'),
'Date format includes numeric option'
);
assert(
src.includes("'long'") || src.includes('"long"'),
'Date format includes long month'
);
assert(
src.includes("toISOString()"),
'Computes ISO date string'
);
// ── HTML structure ──
console.log('\n--- HTML structure checks ---');
assert(
src.includes('post-header'),
'Has .post-header class'
);
assert(
/<header[\s>]/.test(src),
'Uses <header> element'
);
assert(
src.includes('badge'),
'Has .badge class'
);
assert(
/<span[^>]*class.*badge/.test(src) || /<span[^>]*badge/.test(src),
'Badge uses <span> element'
);
assert(
/<h1/.test(src),
'Has <h1> element for title'
);
assert(
src.includes('title') && src.includes('class'),
'Has .title class'
);
assert(
/<p[^>]*class.*meta/.test(src) || src.includes("class=\"meta\"") || src.includes("class='meta'"),
'Meta uses <p> element with .meta class'
);
assert(
/<time[^>]*datetime/.test(src),
'Has <time> element with datetime attribute'
);
assert(
src.includes('min read'),
'Has reading time display text'
);
assert(
src.includes('readingTime'),
'Conditionally shows readingTime'
);
// ── Styles ──
console.log('\n--- Style checks ---');
assert(src.includes('--width-prose'), 'Uses prose max-width');
assert(src.includes('--font-structure'), 'Uses structure font');
assert(src.includes('--type-xs'), 'Badge uses type-xs');
assert(src.includes('--type-3xl'), 'Title uses type-3xl');
assert(src.includes('--type-sm'), 'Meta uses type-sm');
assert(src.includes('--accent-primary'), 'Badge uses accent-primary');
assert(src.includes('--text-primary'), 'Title uses text-primary');
assert(src.includes('--text-tertiary'), 'Meta uses text-tertiary');
assert(src.includes('--leading-tight'), 'Title uses leading-tight');
assert(src.includes('uppercase'), 'Badge is uppercase');
assert(src.includes('0.05em'), 'Badge has 0.05em tracking');
assert(src.includes('-0.02em'), 'Title has -0.02em tracking');
// ── Responsive breakpoints ──
console.log('\n--- Responsive breakpoint checks ---');
assert(src.includes('719px'), 'Has 719px breakpoint');
assert(src.includes('479px'), 'Has 479px breakpoint');
assert(src.includes('--type-2xl'), 'Uses type-2xl at tablet breakpoint');
assert(src.includes('--type-xl'), 'Uses type-xl at mobile breakpoint');
assert(src.includes('--leading-snug'), 'Uses leading-snug at smaller breakpoints');
assert(src.includes('--space-6'), 'Uses space-6 at tablet breakpoint');
assert(src.includes('--space-5'), 'Uses space-5 at mobile breakpoint');
}
// ── Summary ──
console.log(`\n--- Results: ${passes} passed, ${failures} failed ---`);
if (failures > 0) {
process.exit(1);
}