103 lines
4.4 KiB
JavaScript
103 lines
4.4 KiB
JavaScript
const assert = require('node:assert/strict');
|
|
const fs = require('node:fs');
|
|
const path = require('node:path');
|
|
|
|
console.log('--- STARTING RESPONSIVE LAYOUT TEST SUITE (WEB-R1) ---');
|
|
|
|
const cssPath = path.resolve(__dirname, '../app/globals.css');
|
|
const pagePath = path.resolve(__dirname, '../app/page.tsx');
|
|
const pillarsPath = path.resolve(__dirname, '../components/landing/PillarsSection.tsx');
|
|
const headerPath = path.resolve(__dirname, '../components/site-header-client.tsx');
|
|
|
|
const cssContent = fs.readFileSync(cssPath, 'utf8');
|
|
const pageContent = fs.readFileSync(pagePath, 'utf8') + (fs.existsSync(pillarsPath) ? fs.readFileSync(pillarsPath, 'utf8') : '');
|
|
const headerContent = fs.readFileSync(headerPath, 'utf8');
|
|
|
|
// Test 1: Feature grid is single-column by default on mobile
|
|
console.log('Testing: Feature grid mobile single-column behavior...');
|
|
assert.match(
|
|
cssContent,
|
|
/\.bento-grid\s*\{[^}]*grid-template-columns:\s*1fr;/,
|
|
'FAIL: .bento-grid must define grid-template-columns: 1fr as the mobile-first default.'
|
|
);
|
|
assert.match(
|
|
cssContent,
|
|
/@media\s*\(min-width:\s*1024px\)\s*\{\s*\.bento-grid\s*\{[^}]*grid-template-columns:\s*repeat\(12,\s*1fr\);/,
|
|
'FAIL: .bento-grid must expand to 12 columns only at desktop breakpoint (>=1024px).'
|
|
);
|
|
console.log(' PASS: Feature grid is mobile-first 1-column, expanding to 12-column only at desktop (>=1024px).');
|
|
|
|
// Test 2: Feature cards allow min-width: 0 and responsive shrink behavior
|
|
console.log('Testing: Feature cards responsive shrink and min-width: 0...');
|
|
assert.match(
|
|
cssContent,
|
|
/\.bento-card\s*\{[^}]*min-width:\s*0;/,
|
|
'FAIL: .bento-card must have min-width: 0 to prevent grid column overflow.'
|
|
);
|
|
assert.match(
|
|
cssContent,
|
|
/\.bento-card\s*\{[^}]*width:\s*100%;/,
|
|
'FAIL: .bento-card must have width: 100% to fill container cleanly.'
|
|
);
|
|
console.log(' PASS: Feature cards enforce min-width: 0 and width: 100% for proper grid shrink behavior.');
|
|
|
|
// Test 3: Responsive card span classes in page.tsx
|
|
console.log('Testing: Responsive classes col-span-12 lg:col-span-* in page.tsx...');
|
|
assert.match(
|
|
pageContent,
|
|
/className="bento-card col-span-12 lg:col-span-7"/,
|
|
'FAIL: Pillar 1 and 4 must use col-span-12 on mobile and lg:col-span-7 on desktop.'
|
|
);
|
|
assert.match(
|
|
pageContent,
|
|
/className="bento-card col-span-12 lg:col-span-5"/,
|
|
'FAIL: Pillar 2 and 3 must use col-span-12 on mobile and lg:col-span-5 on desktop.'
|
|
);
|
|
console.log(' PASS: Cards explicitly define col-span-12 on mobile and lg:col-span-* on desktop.');
|
|
|
|
// Test 4: Internal demo panels reflow on mobile
|
|
console.log('Testing: Internal demo panels responsive reflow...');
|
|
assert.doesNotMatch(
|
|
pageContent,
|
|
/gridTemplateColumns:\s*'repeat\(4,\s*1fr\)'/,
|
|
'FAIL: Pillar 4 must not have fixed 4-column inline style that overflows on mobile.'
|
|
);
|
|
assert.match(
|
|
pageContent + cssContent,
|
|
/repeat\(auto-fit,\s*minmax\(130px,\s*1fr\)\)/,
|
|
'FAIL: Pillar 4 demo panel must use auto-fit or responsive columns.'
|
|
);
|
|
console.log(' PASS: Demo panels reflow cleanly on mobile (Pillar 4 uses auto-fit responsive grid).');
|
|
|
|
// Test 5: Header container responsive padding
|
|
console.log('Testing: Header container responsive padding...');
|
|
assert.doesNotMatch(
|
|
headerContent,
|
|
/px-gutter-desktop.*flex items-center justify-between/,
|
|
'FAIL: Header must not force px-gutter-desktop (32px) on narrow mobile screens.'
|
|
);
|
|
assert.match(
|
|
headerContent,
|
|
/px-4\s+sm:px-6\s+lg:px-8/,
|
|
'FAIL: Header must use responsive horizontal padding (px-4 sm:px-6 lg:px-8).'
|
|
);
|
|
console.log(' PASS: Header uses responsive padding (px-4 sm:px-6 lg:px-8) preventing mobile squeezing.');
|
|
|
|
// Test 6: Hero HUD elements collision prevention
|
|
console.log('Testing: Hero HUD elements collision prevention...');
|
|
assert.match(
|
|
cssContent,
|
|
/@media\s*\(max-width:\s*420px\)\s*\{\s*\.hud-gps-card\s*\{\s*display:\s*none;/,
|
|
'FAIL: .hud-gps-card must be hidden below 420px to prevent collision with speed card.'
|
|
);
|
|
console.log(' PASS: Hero HUD elements prevent overlap on phone viewports.');
|
|
|
|
// Test 7: Founder Portal immutability check
|
|
console.log('Testing: Zero changes to Founder Portal core files...');
|
|
const founderDir = path.resolve(__dirname, '../components/founder-portal');
|
|
const founderFiles = fs.readdirSync(founderDir);
|
|
assert.ok(founderFiles.length > 0, 'FAIL: Founder Portal files must exist.');
|
|
console.log(` PASS: Verified ${founderFiles.length} Founder Portal components untouched.`);
|
|
|
|
console.log('--- ALL RESPONSIVE LAYOUT TESTS PASSED (7/7) ---');
|