fix: validate responsive real-content targets

tests/browser/responsive-layout.spec.ts

@@ -1,6 +1,7 @@
 import { existsSync, readFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { expect, test, type Page, type TestInfo } from '@playwright/test';
+import { createServer, type ViteDevServer } from 'vite';
 
 const stylesheetFiles = [
   'src/styles/tokens.css',
@@ -19,10 +20,31 @@ function informationLayerCss(): string {
     .join('\n');
 }
 
-function informationLayerHarness(): string {
-  const navigation = ['Start', 'Profile', 'Experience', 'Infrastructure', 'Selected builds', 'Contact'];
-  const sections = ['start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'contact'];
+type ServerRenderer = { render: (url: string, inputs: unknown) => Promise<string> };
+type InputValidator = { validateProductionInputs: (content: unknown, manifest: unknown, site: unknown, preparedAssetRoot: URL) => unknown };
 
+let vite: ViteDevServer;
+let renderedPortfolio = '';
+
+test.beforeAll(async () => {
+  vite = await createServer({ server: { middlewareMode: true, hmr: false }, appType: 'custom' });
+  const { render } = await vite.ssrLoadModule('/src/entry-server.ts') as ServerRenderer;
+  const { validateProductionInputs } = await vite.ssrLoadModule('/src/content/schemas.ts') as InputValidator;
+  const fixture = (file: string): unknown => JSON.parse(readFileSync(resolve(process.cwd(), file), 'utf8')) as unknown;
+  const inputs = validateProductionInputs(
+    fixture('content/public/portfolio-content.json'),
+    fixture('content/public/asset-manifest.json'),
+    fixture('config/site.preview.json'),
+    new URL('file:///prepared-assets/'),
+  );
+  renderedPortfolio = await render('/', inputs);
+});
+
+test.afterAll(async () => {
+  await vite.close();
+});
+
+function informationLayerHarness(): string {
   return `<!doctype html>
     <html lang="en">
     <head>
@@ -30,32 +52,7 @@ function informationLayerHarness(): string {
       <style>${informationLayerCss()}</style>
     </head>
     <body>
-    <a class="skip-link" href="#portfolio-content">Skip to portfolio content</a>
-    <div class="portfolio-shell">
-      <header class="site-header">
-        <p class="route-label">00 / INTRODUCTION</p>
-        <h1>Luca Pîslaru</h1>
-        <p class="role">System Administrator &amp; Full-Stack Developer</p>
-        <nav class="site-navigation" aria-label="Portfolio sections">
-          <ul>${navigation.map((label, index) => `<li><a href="#${sections[index] ?? 'contact'}">${label}</a></li>`).join('')}</ul>
-        </nav>
-      </header>
-      <main id="portfolio-content" class="portfolio-main">
-        ${sections.map((id, index) => `
-          <section id="${id}" class="portfolio-section" data-section-index="${index + 1}" aria-labelledby="${id}-heading">
-            <p class="route-label">${String(index + 1).padStart(2, '0')} / ${id.toUpperCase()}</p>
-            <h2 id="${id}-heading">${navigation[index] ?? 'Contact'}</h2>
-            <p>Reliable systems and software evidence for hiring managers and technical interviewers.</p>
-            <article>
-              <h3>Operational detail</h3>
-              <p>Long unbroken technical reference: serviceorchestrationandobservabilityintegrationwithaverylongidentifierexampletestarchitectureproductionreadiness.</p>
-              <a href="https://example.test/portfolio/reference">Open project reference</a>
-            </article>
-          </section>
-        `).join('')}
-      </main>
-      <footer class="site-footer"><a href="mailto:luca@example.test">luca@example.test</a></footer>
-    </div>
+    ${renderedPortfolio}
     </body>
     </html>`;
 }
@@ -68,6 +65,21 @@ async function capture(page: Page, testInfo: TestInfo, name: string): Promise<vo
   await page.screenshot({ path: testInfo.outputPath(name), fullPage: true });
 }
 
+test('renders the validated eight-section portfolio structure before responsive checks', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await loadInformationLayer(page);
+
+  await expect(page.locator('.portfolio-main > .portfolio-section')).toHaveCount(8);
+  expect(await page.locator('.portfolio-main > .portfolio-section').evaluateAll((sections) => sections.map((section) => section.id)))
+    .toEqual(['start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact']);
+  expect(await page.locator('.site-navigation a').evaluateAll((links) => links.map((link) => link.getAttribute('href'))))
+    .toEqual(['#start', '#profile', '#experience', '#infrastructure', '#selected-builds', '#additional-work', '#toolkit', '#contact']);
+  await expect(page.locator('#selected-builds article, #additional-work article')).not.toHaveCount(0);
+  await expect(page.locator('#toolkit [data-testid="toolkit-technology"]')).not.toHaveCount(0);
+  await expect(page.locator('#contact a[href^="mailto:"]')).toHaveCount(1);
+  await expect(page.locator('#contact a[target="_blank"]')).not.toHaveCount(0);
+});
+
 for (const viewport of [
   { width: 320, height: 800 },
   { width: 768, height: 1024 },
@@ -139,6 +151,20 @@ test('uses a stable tablet rhythm and a single readable mobile column with usabl
   await capture(page, testInfo, 'information-layer-mobile.png');
 });
 
+test('keeps actual standalone project and contact destinations at least 44 by 44px on mobile', async ({ page }) => {
+  await page.setViewportSize({ width: 320, height: 800 });
+  await loadInformationLayer(page);
+
+  const targets = await page.locator('#selected-builds article > a, #additional-work article > a, #contact a').evaluateAll((links) =>
+    links.map((link) => {
+      const rect = link.getBoundingClientRect();
+      return { href: link.getAttribute('href'), width: rect.width, height: rect.height };
+    }),
+  );
+  expect(targets.length).toBeGreaterThan(0);
+  expect(targets.every((target) => target.width >= 44 && target.height >= 44)).toBe(true);
+});
+
 test('removes nonessential information-layer motion when reduced motion is requested', async ({ page }) => {
   await page.emulateMedia({ reducedMotion: 'reduce' });
   await loadInformationLayer(page);
@@ -146,9 +172,13 @@ test('removes nonessential information-layer motion when reduced motion is reque
   expect(duration).toBe('0.001s');
 });
 
-test('creates a clean print portfolio with navigation removed', async ({ page }) => {
+test('creates a clean print portfolio with a visible label but no resume packaging', async ({ page }) => {
   await page.emulateMedia({ media: 'print' });
   await loadInformationLayer(page);
   await expect(page.locator('.site-navigation')).toBeHidden();
+  await expect(page.locator('.print-portfolio-label')).toBeVisible();
   await expect(page.locator('.portfolio-section').first()).toHaveCSS('break-inside', 'avoid');
+  const printCopy = await page.locator('body').innerText();
+  expect(printCopy).not.toMatch(/résumé|resume/iu);
+  await expect(page.locator('a[download]')).toHaveCount(0);
 });