/** * Build-output test for NavBar.astro * Runs after `npm run build` and checks source + dist HTML for expected structure. */ import { readFileSync, existsSync, readdirSync } from 'fs'; import { resolve } from 'path'; const distDir = resolve('dist'); const indexPath = resolve(distDir, 'index.html'); 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 checks ── console.log('\n--- Source file checks ---'); assert( existsSync(resolve('src/components/NavBar.astro')), 'src/components/NavBar.astro exists' ); // ── Source content checks ── console.log('\n--- NavBar source content checks ---'); if (existsSync(resolve('src/components/NavBar.astro'))) { const navSrc = readFileSync(resolve('src/components/NavBar.astro'), 'utf-8'); assert( navSrc.includes('Astro.url.pathname'), 'NavBar reads Astro.url.pathname' ); assert( navSrc.includes('import.meta.env.BASE_URL'), 'NavBar reads import.meta.env.BASE_URL' ); assert( navSrc.includes("'Posts'") || navSrc.includes('"Posts"'), 'navLinks has Posts entry' ); assert( /aria-label\s*=\s*['"]Site navigation['"]/.test(navSrc), 'nav has aria-label="Site navigation"' ); assert( navSrc.includes('aria-current'), 'NavBar uses aria-current attribute' ); assert( navSrc.includes('Crash Test Dev'), 'NavBar has site name "Crash Test Dev"' ); assert( navSrc.includes('site-name'), 'NavBar has .site-name class' ); assert( navSrc.includes('nav-links'), 'NavBar has .nav-links class' ); assert( navSrc.includes('nav-link'), 'NavBar has .nav-link class' ); assert( navSrc.includes('nav-inner'), 'NavBar has .nav-inner class' ); assert( navSrc.includes('isActive') || navSrc.includes('is_active'), 'NavBar has isActive function' ); assert( navSrc.includes('border-bottom') || navSrc.includes('border-bottom'), 'nav has border-bottom style' ); assert( navSrc.includes('--font-structure'), 'Uses structure font' ); assert( navSrc.includes('max-width: var(--width-container)') || navSrc.includes('width-container'), '.nav-inner uses container max-width' ); assert( navSrc.includes('599px'), 'Has responsive breakpoint at 599px' ); } // ── index.astro includes NavBar ── console.log('\n--- index.astro integration checks ---'); if (existsSync(resolve('src/pages/index.astro'))) { const indexSrc = readFileSync(resolve('src/pages/index.astro'), 'utf-8'); assert( indexSrc.includes('NavBar'), 'index.astro imports/uses NavBar' ); assert( indexSrc.includes("slot='nav'") || indexSrc.includes('slot="nav"') || indexSrc.includes("slot='nav'") || indexSrc.includes('slot=\"nav\"'), 'NavBar is placed in nav slot' ); } // ── Build output checks ── console.log('\n--- Build output checks ---'); assert(existsSync(indexPath), 'dist/crashtestdev/index.html exists'); if (existsSync(indexPath)) { const html = readFileSync(indexPath, 'utf-8'); assert( html.includes(' element' ); assert( html.includes('Crash Test Dev'), 'dist HTML contains "Crash Test Dev"' ); assert( html.includes('Posts'), 'dist HTML contains "Posts" nav link' ); assert( /aria-label\s*=\s*["']Site navigation["']/.test(html), 'dist HTML has aria-label="Site navigation"' ); // Check CSS is present in dist (HTML or linked CSS) let distCss = ''; // Astro may output CSS in dist/_astro/ or dist/crashtestdev/_astro/ for (const cssDir of [resolve(distDir, '_astro'), resolve(distDir, 'crashtestdev', '_astro')]) { if (existsSync(cssDir)) { for (const f of readdirSync(cssDir)) { if (f.endsWith('.css')) { distCss += readFileSync(resolve(cssDir, f), 'utf-8'); } } } } assert( html.includes('nav-inner') || distCss.includes('nav-inner'), 'dist output contains nav-inner styling' ); } // ── Summary ── console.log(`\n--- Results: ${passes} passed, ${failures} failed ---`); if (failures > 0) { process.exit(1); }