← back to Quadrille Showroom

scripts/verify-sample-table.js

55 lines

const { chromium } = require('playwright');
(async () => {
  const errors = [];
  const browser = await chromium.launch();
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });
  page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
  page.on('pageerror', e => errors.push('PAGEERROR: ' + e.message));

  await page.goto('http://127.0.0.1:7690/proto/sample-table.html', { waitUntil: 'networkidle' });
  await page.waitForSelector('.card .add', { timeout: 8000 });
  const cards = await page.$$('.card .add');
  console.log('rail cards:', cards.length);

  await page.screenshot({ path: 'proto/shots/sample-table.png' });

  // add 4 samples from spread-out cards
  for (const i of [0, 3, 7, 12]) {
    if (cards[i]) { await cards[i].click(); await page.waitForTimeout(900); }
  }
  await page.waitForTimeout(900);

  const samples = await page.$$('#surface .sample');
  const count = await page.textContent('#count');
  console.log('samples on table:', samples.length, '| count badge:', count);

  // assert samples actually sit inside the rotated table (not floating over rail)
  const tableBox = await (await page.$('#table')).boundingBox();
  let insideTable = 0;
  for (const s of samples) {
    const b = await s.boundingBox();
    if (b && b.y > tableBox.y && b.y < tableBox.y + tableBox.height) insideTable++;
  }
  console.log('samples within table bounds:', insideTable + '/' + samples.length);

  const reqDisabled = await page.getAttribute('#req', 'disabled');
  console.log('request button enabled:', reqDisabled === null);

  await page.screenshot({ path: 'proto/shots/sample-table-filled.png' });

  // remove one to confirm pick-up/remove works (invoke the handler directly —
  // the × handle can sit above the viewport since the table overscans the top)
  await page.evaluate(() => {
    const s = document.querySelector('#surface .sample');
    s.querySelector('.rm').dispatchEvent(new MouseEvent('click', { bubbles: true }));
  });
  await page.waitForTimeout(600);
  const after = await page.textContent('#count');
  console.log('count after remove:', after);

  console.log('CONSOLE ERRORS:', errors.length);
  errors.forEach(e => console.log('  ', e));
  await browser.close();
  process.exit(errors.length ? 1 : 0);
})();