meshcore-analyzer/test-channels-list-render-e2e.js

/**
 * #1297 B3 — channels.js list-rendering coverage.
 *
 * Exercises sidebar section composition, encrypted collapse toggle,
 * empty-state rendering, channel color clear, and sidebar resize handle.
 * Pure coverage suite — does not change channels.js logic.
 *
 * Usage: BASE_URL=http://localhost:13581 node test-channels-list-render-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'); }

(async () => {
  const browser = await chromium.launch({
    headless: true,
    executablePath: process.env.CHROMIUM_PATH || undefined,
    args: ['--no-sandbox', '--disable-gpu', '--disable-dev-shm-usage'],
  });
  const ctx = await browser.newContext({ viewport: { width: 1280, height: 800 } });
  const page = await ctx.newPage();
  page.setDefaultTimeout(8000);
  page.on('pageerror', (e) => console.error('[pageerror]', e.message));

  console.log(`\n=== #1297 B3 channels list-render E2E against ${BASE} ===`);

  // Always start clean so prior runs don't leak keys/colors.
  await page.goto(BASE + '/', { waitUntil: 'domcontentloaded' });
  await page.evaluate(() => {
    try { localStorage.clear(); } catch (e) {}
    // #1409/#1410: channels.js no longer force-enables this flag at init.
    // Encrypted channels are excluded from /api/channels by default, so the
    // sidebar's Encrypted section renders 0 rows and the "lock badge" step
    // has nothing to assert against. Opt in explicitly so this suite
    // exercises the encrypted-row rendering path (which is what it's for).
    try { localStorage.setItem('channels-show-encrypted', 'true'); } catch (e) {}
  });

  await page.goto(BASE + '/#/channels', { waitUntil: 'domcontentloaded' });
  await page.waitForSelector('#chList .ch-item', { timeout: 10000 });

  await step('renders Network section header', async () => {
    const headers = await page.$$eval('.ch-section-header',
      (els) => els.map((e) => e.textContent.trim()));
    assert(headers.some((h) => /Network/i.test(h)), 'Network header missing');
  });

  await step('Encrypted section header + count', async () => {
    const txt = await page.textContent('#chEncryptedToggle');
    assert(/Encrypted\s*\(\d+\)/.test(txt), 'Encrypted header missing count: ' + txt);
  });

  await step('Encrypted section is collapsed by default and toggles open', async () => {
    var collapsed0 = await page.getAttribute(
      '.ch-section-encrypted', 'data-encrypted-collapsed');
    assert(collapsed0 === 'true', 'should start collapsed, got: ' + collapsed0);
    var bodyHidden = await page.$eval('#chEncryptedBody', (el) => el.hasAttribute('hidden'));
    assert(bodyHidden, 'encrypted body should start hidden');
    await page.click('#chEncryptedToggle');
    // localStorage + re-render
    await page.waitForFunction(() => {
      const s = document.querySelector('.ch-section-encrypted');
      return s && s.getAttribute('data-encrypted-collapsed') === 'false';
    }, { timeout: 3000 });
    var expanded = await page.$eval('#chEncryptedBody', (el) => !el.hasAttribute('hidden'));
    assert(expanded, 'encrypted body should be visible after toggle');
    // Toggle back
    await page.click('#chEncryptedToggle');
    await page.waitForFunction(() => {
      const s = document.querySelector('.ch-section-encrypted');
      return s && s.getAttribute('data-encrypted-collapsed') === 'true';
    }, { timeout: 3000 });
  });

  await step('encrypted rows render with lock badge', async () => {
    // Expand again to inspect rows.
    await page.click('#chEncryptedToggle');
    await page.waitForFunction(() =>
      !document.getElementById('chEncryptedBody').hasAttribute('hidden'));
    const lockBadge = await page.$('.ch-section-encrypted .ch-badge');
    assert(lockBadge, 'encrypted section should render badges');
    // #1648 M3: lock badge is a Phosphor sprite ref (was 🔒 emoji)
    const html = await page.$eval('.ch-section-encrypted .ch-badge', el => el.innerHTML);
    assert(/#ph-lock/.test(html), 'encrypted badge should reference ph-lock sprite: ' + html);
  });

  await step('Network row preview shows last sender:message', async () => {
    const preview = await page.$$eval('.ch-section-network .ch-item-preview',
      (els) => els.map((e) => e.textContent.trim()).filter(Boolean));
    assert(preview.length > 0, 'expected at least one preview line');
    // At least one entry should look like "Sender: text" or "N messages"
    const hasShape = preview.some((p) => /:/.test(p) || /messages?/i.test(p));
    assert(hasShape, 'preview shape unexpected: ' + JSON.stringify(preview.slice(0, 3)));
  });

  await step('channel color picker dot exists per row + clears via ChannelColors', async () => {
    const firstDot = await page.$('.ch-section-network .ch-color-dot');
    assert(firstDot, '.ch-color-dot missing on network row');
    var dataCh = await firstDot.getAttribute('data-channel');
    assert(dataCh, 'data-channel attr missing');
    // Programmatically set a color so the clear control renders, then click it.
    await page.evaluate((ch) => {
      if (window.ChannelColors && typeof window.ChannelColors.set === 'function') {
        window.ChannelColors.set(ch, '#ff00aa');
      } else {
        // Fallback for older API surface: write localStorage directly.
        try {
          var map = JSON.parse(localStorage.getItem('channel-colors') || '{}');
          map[ch] = '#ff00aa';
          localStorage.setItem('channel-colors', JSON.stringify(map));
        } catch (e) {}
      }
    }, dataCh);
    // Re-render the sidebar so the .ch-color-clear span is emitted.
    await page.evaluate(() => {
      // No public re-render hook; bounce route or call internal helper if exposed.
      // _channelsLoadChannelsForTest re-renders after load — invoke it.
      if (typeof window._channelsLoadChannelsForTest === 'function') {
        window._channelsLoadChannelsForTest(true);
      }
    });
    await page.waitForTimeout(300);
    const clearEl = await page.$('.ch-color-clear[data-channel="' + dataCh + '"]');
    if (clearEl) {
      await clearEl.click();
      await page.waitForTimeout(100);
      const stillThere = await page.$('.ch-color-clear[data-channel="' + dataCh + '"]');
      assert(!stillThere, 'clear button should be gone after click');
    } else {
      // ChannelColors API absent — assert the structural invariant we
      // actually need from this branch: the color dot stays in the DOM,
      // anchored to the row's data-channel identifier.
      const stillThere = await page.$('.ch-section-network .ch-color-dot[data-channel="' + dataCh + '"]');
      assert(stillThere, 'color dot for data-channel should remain rendered');
    }
  });

  await step('empty-state branch renders when channels array cleared', async () => {
    // Drive renderChannelList's empty branch via the test hook.
    await page.evaluate(() => {
      if (typeof window._channelsSetStateForTest === 'function') {
        window._channelsSetStateForTest({ channels: [], messages: [], selectedHash: null });
      }
    });
    // Re-render via a route bounce — re-init the page.
    await page.goto(BASE + '/#/nodes', { waitUntil: 'domcontentloaded' });
    await page.goto(BASE + '/#/channels', { waitUntil: 'domcontentloaded' });
    await page.waitForSelector('.ch-sidebar', { timeout: 5000 });
    // After re-init, channels reload from API — we don't assert ".No channels"
    // here; the assertion is that the page reloaded clean without exceptions.
    var loaded = await page.$('#chList');
    assert(loaded, '#chList should re-render after route bounce');
  });

  await step('sidebar resize handle persists width to localStorage', async () => {
    // Prior "empty state" step does a hash-route bounce that re-renders
    // the sidebar — channels.js' #89 init IIFE wires `mousedown` to the
    // ORIGINAL handle node, so the new node has no listener. Full reload
    // ensures init runs against the live handle.
    await page.goto(BASE + '/#/channels', { waitUntil: 'domcontentloaded' });
    await page.waitForSelector('.ch-sidebar-resize');
    // Clear any prior value so the assertion proves THIS drag wrote it.
    await page.evaluate(() => { try { localStorage.removeItem('channels-sidebar-width'); } catch (e) {} });

    // NOTE: real-mouse drag does NOT work here. The handle is positioned
    // `right:-3px` (6px wide) but its parent `.ch-sidebar` has
    // `overflow:hidden`. Half the handle is therefore clipped from hit
    // testing — `elementFromPoint(bbox.x + bbox.width/2, ...)` resolves to
    // `.ch-sidebar` (or `.ch-messages` past the sidebar edge), NOT the
    // handle. `page.mouse.down()` at the bbox center never fires the
    // handle's mousedown, the `dragging` flag stays false, and the
    // mouseup listener never writes localStorage.
    //
    // Driving the wiring correctly therefore requires dispatching the
    // mousedown directly on the handle (bubbling up to its listener) and
    // synthesising mousemove/mouseup on `document` (where channels.js
    // attaches them). This exercises the SAME production code path,
    // just bypasses the viewport hit-test that the CSS prevents from
    // hitting the half-clipped handle.
    const result = await page.evaluate(() => {
      const handle = document.querySelector('.ch-sidebar-resize');
      const sidebar = document.querySelector('.ch-sidebar');
      const r = handle.getBoundingClientRect();
      const cx = r.x + r.width / 2;
      const cy = r.y + r.height / 2;
      const mk = (type, x) => new MouseEvent(type, {
        bubbles: true, cancelable: true, view: window,
        clientX: x, clientY: cy, button: 0,
      });
      handle.dispatchEvent(mk('mousedown', cx));
      // Drag right ~80px in a few steps so listeners observe each move.
      for (let i = 1; i <= 8; i++) {
        document.dispatchEvent(mk('mousemove', cx + i * 10));
      }
      const widthMid = sidebar.style.width;
      document.dispatchEvent(mk('mouseup', cx + 80));
      return {
        widthMid,
        widthFinal: sidebar.style.width,
        stored: localStorage.getItem('channels-sidebar-width'),
      };
    });
    assert(result.widthMid && /\d+px/.test(result.widthMid),
      'sidebar width should update during drag, got: ' + result.widthMid);
    assert(result.stored !== null,
      'sidebar width should be persisted, got: ' + result.stored);
    assert(parseInt(result.stored, 10) >= 180,
      'sidebar width should be >= 180, got: ' + result.stored);
  });

  await browser.close();
  console.log(`\n=== B3 list-render: ${passed} passed, ${failed} failed ===\n`);
  process.exit(failed === 0 ? 0 : 1);
})().catch((e) => { console.error(e); process.exit(1); });