`verification/grateful-dead-gallery.e2e.js`

60 lines
#!/usr/bin/env node
const { chromium } = require('/Users/macstudio3/Projects/Designer-Wallcoverings/node_modules/playwright');

const ids = [
  'long-strange-archive',
  'deadhead-print-lab',
  'wall-of-sound',
  'routes-residencies-rituals',
  'objects-golden-road',
];
const titles = [
  'The Long Strange Archive',
  'Deadhead Print Lab',
  'Wall of Sound: An Immersive Room',
  'Routes, Residencies & Rituals',
  'Objects in the Golden Road',
];

(async () => {
  const base = process.env.GALLERY_URL || 'http://127.0.0.1:8792/';
  const browser = await chromium.launch({ executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 1100 } });
  const errors = [];
  page.on('pageerror', error => errors.push(String(error)));
  page.on('console', message => {
    if (message.type() === 'error' && !/^Failed to load resource:/.test(message.text())) errors.push(message.text());
  });
  await page.goto(base, { waitUntil: 'networkidle' });
  await page.waitForSelector('.card');
  if (await page.locator('.card').count() !== 6) throw new Error('expected six gallery cards');
  const text = await page.locator('#grid').innerText();
  for (const title of titles) if (!text.includes(title)) throw new Error(`missing gallery title: ${title}`);

  for (const id of ids) {
    const card = page.locator(`.card[data-id="${id}"]`);
    const image = card.locator('img');
    if (!await image.evaluate(node => node.complete && node.naturalWidth > 0)) throw new Error(`${id} cover failed`);
    await card.locator('.preview').click();
    await page.waitForSelector('#overlay.open');
    await page.waitForFunction(expected => {
      const frame = document.querySelector('#ovFrame');
      try { return frame.contentWindow.location.pathname.includes(expected); } catch (_) { return false; }
    }, id);
    const frame = page.frameLocator('#ovFrame');
    await frame.locator('body').waitFor();
    const bodyText = await frame.locator('body').innerText();
    if (bodyText.trim().length < 100) throw new Error(`${id} preview is empty`);
    await page.locator('#ovClose').click();
  }

  await page.selectOption('#sort', 'newest');
  await page.locator('#density').fill('2');
  const persisted = await page.evaluate(() => ({ sort: localStorage.getItem('gallery:sort'), density: localStorage.getItem('gallery:density') }));
  if (persisted.sort !== 'newest' || persisted.density !== '2') throw new Error(`controls did not persist: ${JSON.stringify(persisted)}`);
  await page.screenshot({ path: 'verification/grateful-dead-gallery-live.png', fullPage: true });
  if (errors.length) throw new Error(`browser errors: ${errors.join(' | ')}`);
  console.log(JSON.stringify({ pass: true, cards: 6, deadBuilds: ids.length, previews: ids.length, persisted, browserErrors: 0 }));
  await browser.close();
})().catch(error => { console.error(error.stack || error); process.exit(1); });