meshcore-analyzer/tests/e2e/test-table-fluid-e2e.js

/**
 * E2E (#1056): Fluid table columns + "+N hidden" pill.
 *
 * Boots Chromium against a local corescope-server and verifies that the
 * primary tables (Packets, Nodes, Observers) collapse priority-tagged
 * columns at narrow viewports, render a "+N hidden" pill in the header
 * showing the count, and that clicking the pill reveals the hidden columns.
 *
 * Tested viewports: 768, 1080, 1440 (parent task: 768/1080/1440/1920).
 *
 * Usage: BASE_URL=http://localhost:13581 node test-table-fluid-e2e.js
 */
'use strict';
const { chromium } = require('playwright');

const BASE = process.env.BASE_URL || 'http://localhost:13581';

let passed = 0, failed = 0;
async function step(name, fn) {
  try { await fn(); passed++; console.log('  ✓ ' + name); }
  catch (e) { failed++; console.error('  ✗ ' + name + ': ' + e.message); }
}
function assert(c, m) { if (!c) throw new Error(m || 'assertion failed'); }

const PAGES = [
  { hash: '#/packets',   tableSel: '#pktTable',    name: 'packets'   },
  { hash: '#/nodes',     tableSel: '#nodesTable',  name: 'nodes'     },
  { hash: '#/observers', tableSel: '#obsTable',    name: 'observers' },
];

const VIEWPORTS = [
  { w: 768,  h: 900, expectHidden: true  },
  { w: 1080, h: 900, expectHidden: true  },
  { w: 1440, h: 900, expectHidden: false }, // wide enough — no hide expected (or 0)
  { w: 1920, h: 900, expectHidden: false }, // AC #5: also exercise 1920px
];

// Per-(page, viewport) override map. After #1415 the packets table's
// column priorities were rewritten to the locked spec — at 1080px (>1024)
// every packets column is visible (data-priority 3 columns reveal above
// 1024px, priority 5 above 768px). The /nodes and /observers tables still
// match the original #1056 contract. Default falls through to VIEWPORTS.
function expectHidden(pageName, w) {
  if (pageName === 'packets' && w >= 1080) return false;
  const vp = VIEWPORTS.find(v => v.w === w);
  return vp ? vp.expectHidden : false;
}

(async () => {
  const browser = await chromium.launch({
    headless: true,
    executablePath: process.env.CHROMIUM_PATH || undefined,
    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
  });

  console.log(`\n=== #1056 fluid tables E2E against ${BASE} ===`);

  await step('#2079: responsive columns preserve full-width status and spacer rows', async () => {
    const ctx = await browser.newContext({ viewport: { width: 375, height: 900 } });
    try {
      const page = await ctx.newPage();
      await page.goto(BASE + '/#/home', { waitUntil: 'domcontentloaded' });
      await page.waitForFunction(() => !!window.TableResponsive);
      const result = await page.evaluate(() => {
        const table = document.createElement('table');
        table.id = 'responsiveSpanFixture';
        table.className = 'data-table';
        table.innerHTML = '<thead><tr><th>Kept</th><th data-priority="5">Hidden</th>' +
          '<th data-priority="5">Hidden</th><th>Kept</th></tr></thead>' +
          '<tbody><tr data-normal><td>A</td><td>B</td><td>C</td><td>D</td></tr>' +
          '<tr data-status="empty"><td colspan="4">No packets found</td></tr>' +
          '<tr data-status="error"><td colspan="4">Failed to load packets</td></tr>' +
          '<tr data-status="spacer"><td colspan="4" style="height:48px;padding:0"></td></tr>' +
          '<tr data-partial><td>A</td><td colspan="2">Partial span</td><td>D</td></tr></tbody>';
        document.getElementById('app').appendChild(table);
        window.TableResponsive.apply(table);
        return {
          normalHidden: Array.from(table.querySelector('[data-normal]').children)
            .map(cell => getComputedStyle(cell).display === 'none'),
          partialHidden: getComputedStyle(table.querySelector('[data-partial] td[colspan]')).display === 'none',
          status: Array.from(table.querySelectorAll('[data-status]')).map(row => ({
            name: row.dataset.status,
            visible: getComputedStyle(row.firstElementChild).display !== 'none',
            height: row.firstElementChild.getBoundingClientRect().height,
          })),
        };
      });
      assert(JSON.stringify(result.normalHidden) === '[false,true,true,false]',
        'ordinary priority cells must still hide: ' + JSON.stringify(result));
      assert(result.partialHidden, 'a partial span must retain column-index mapping');
      for (const row of result.status) {
        assert(row.visible && row.height > 0, row.name + ' full-width row must remain visible');
      }
      assert(result.status.find(row => row.name === 'spacer').height >= 48,
        'virtual-scroll spacer must retain its height');
      await page.locator('#responsiveSpanFixture .col-hidden-pill').click();
      assert(await page.locator('#responsiveSpanFixture .col-hidden').count() === 0,
        'reveal must still restore ordinary and partial-span cells');
    } finally {
      await ctx.close();
    }
  });

  for (const vp of VIEWPORTS) {
    const ctx = await browser.newContext({ viewport: { width: vp.w, height: vp.h } });
    const page = await ctx.newPage();
    page.setDefaultTimeout(8000);
    page.on('pageerror', (e) => console.error('[pageerror]', e.message));

    for (const p of PAGES) {
      const tag = `${p.name}@${vp.w}`;

      await step(`${tag}: page renders`, async () => {
        await page.goto(BASE + '/' + p.hash, { waitUntil: 'domcontentloaded' });
        await page.waitForSelector(p.tableSel, { timeout: 8000 });
        // give responsive logic a tick
        await page.waitForTimeout(300);
      });

      await step(`${tag}: no horizontal table scroll`, async () => {
        const overflow = await page.evaluate((sel) => {
          const t = document.querySelector(sel);
          if (!t) return { ok: false, reason: 'no table' };
          // Either the table itself or a wrapper must not horizontally overflow
          // its container at this viewport.
          const wrap = t.closest('.table-fluid-wrap, .obs-table-scroll, .table-scroll-wrap') || t.parentElement;
          return {
            tableW: t.scrollWidth,
            wrapW: wrap.clientWidth,
            // Allow a few px tolerance for sub-pixel rounding / scrollbar gutter.
          ok: t.scrollWidth <= wrap.clientWidth + 8,
          };
        }, p.tableSel);
        assert(overflow.ok, `table overflows: tableW=${overflow.tableW} wrapW=${overflow.wrapW}`);
      });

      await step(`${tag}: +N hidden pill state matches hidden columns`, async () => {
        const info = await page.evaluate((sel) => {
          const t = document.querySelector(sel);
          if (!t) return { ok: false, reason: 'no table' };
          const heads = Array.from(t.querySelectorAll('thead th'));
          const hiddenHeads = heads.filter(h => h.classList.contains('col-hidden'));
          const pill = t.querySelector('.col-hidden-pill');
          return {
            hiddenCount: hiddenHeads.length,
            hasPill: !!pill,
            pillText: pill ? pill.textContent.trim() : '',
            pillVisible: pill ? pill.offsetParent !== null : false,
          };
        }, p.tableSel);

        if (expectHidden(p.name, vp.w)) {
          assert(info.hiddenCount >= 1, `expected ≥1 hidden col at ${vp.w}px, got ${info.hiddenCount}`);
          assert(info.hasPill && info.pillVisible, `expected visible +N pill at ${vp.w}px`);
          assert(/\+\d+/.test(info.pillText), `pill text "${info.pillText}" missing +N marker`);
          const m = info.pillText.match(/\+(\d+)/);
          const n = m ? parseInt(m[1], 10) : -1;
          assert(n === info.hiddenCount, `pill says +${n} but ${info.hiddenCount} columns are hidden`);
        } else {
          // wide: no hidden cols, pill should be absent or hidden
          if (info.hasPill) assert(!info.pillVisible || /\+0/.test(info.pillText), `expected no/zero pill at ${vp.w}px, got "${info.pillText}"`);
        }
      });

      if (expectHidden(p.name, vp.w)) {
        await step(`${tag}: clicking pill reveals hidden columns`, async () => {
          // Click pill
          const pillSel = `${p.tableSel} .col-hidden-pill`;
          await page.click(pillSel);
          await page.waitForTimeout(150);
          const after = await page.evaluate((sel) => {
            const t = document.querySelector(sel);
            const heads = Array.from(t.querySelectorAll('thead th'));
            return heads.filter(h => h.classList.contains('col-hidden')).length;
          }, p.tableSel);
          assert(after === 0, `expected 0 hidden cols after pill click, got ${after}`);
        });
      }
    }

    await ctx.close();
  }

  await browser.close();

  console.log(`\n=== #1056 fluid tables E2E: ${passed} passed, ${failed} failed ===`);
  process.exit(failed ? 1 : 0);
})();