atoms-element v5.0.0

// Real-browser test for the example app, run with: npm run test:e2e

// Requires Chromium once: npx playwright install chromium

// Named .spec.js (not .test.js) so it's never picked up by a bare `node --test`.

import { test, before, after } from 'node:test';

import assert from 'node:assert/strict';

import { spawn } from 'node:child_process';

import { chromium } from 'playwright';

import { createElement, getElement, html } from '../index.js';

const PORT = 3987;

const BASE_URL = `http://localhost:${PORT}/`;

let serverProcess;

let browser;

let page;

const pageErrors = [];

before(async () => {

  serverProcess = spawn(process.execPath, ['examples/server.js', String(PORT)], { stdio: 'ignore' });

  const deadline = Date.now() + 15000;

  for (;;) {

    try {

      if ((await fetch(BASE_URL)).ok) break;

    } catch {

      // server not up yet

    }

    if (Date.now() > deadline) throw new Error('example server did not start in time');

    await new Promise((resolve) => setTimeout(resolve, 200));

  }

  browser = await chromium.launch();

  page = await browser.newPage();

  page.on('pageerror', (err) => pageErrors.push(err.message));

  await page.goto(BASE_URL, { waitUntil: 'networkidle' });

  await page.waitForSelector('app-counter');

});

after(async () => {

  await browser?.close();

  serverProcess?.kill();

});

test('renders each counter exactly once, with no leftover duplicate SSR markup', async () => {

  const counters = page.locator('app-counter');

  assert.strictEqual(await counters.count(), 2);

  for (let i = 0; i < 2; i++) {

    assert.strictEqual(await counters.nth(i).locator('output').count(), 1, `counter ${i} should render exactly one <output>`);

  }

});

test('seeds each counter from its count attribute, and app-total sums them with no manual sync', async () => {

  const first = page.locator('app-counter').nth(0);

  const second = page.locator('app-counter').nth(1);

  assert.strictEqual((await first.locator('output').textContent()).trim(), '5', 'first app-counter has count="5"');

  assert.strictEqual((await second.locator('output').textContent()).trim(), '7', 'second app-counter has count="7"');

  // computed server-side by cheerio-parsing the already-rendered preceding

  // markup (both app-counter tags), via Total.watch — not a separately-

  // tracked total, and no shared store between the two components.

  assert.strictEqual((await page.locator('app-total h1').textContent()).trim(), 'Total of 2 Counters: 12');

});

test('clicking +/- updates the counter and the derived total', async () => {

  const first = page.locator('app-counter').nth(0);

  const second = page.locator('app-counter').nth(1);

  // Buttons carry an aria-label ("Increment"/"Decrement") that overrides their

  // visible "+"/"-" glyph as the accessible name, so query by that instead.

  await first.getByRole('button', { name: 'Increment' }).click();

  await first.getByRole('button', { name: 'Increment' }).click();

  await first.getByRole('button', { name: 'Increment' }).click();

  await second.getByRole('button', { name: 'Increment' }).click();

  await first.getByRole('button', { name: 'Decrement' }).click();

  // first: 5 + 3 - 1 = 7, second: 7 + 1 = 8, total: sum of both, live. Reflection

  // and the MutationObserver it feeds are both async, so wait for the total to

  // actually settle rather than asserting immediately after the last click.

  await page.waitForFunction(() => document.querySelector('app-total h1').textContent.trim() === 'Total of 2 Counters: 15');

  assert.strictEqual((await first.locator('output').textContent()).trim(), '7');

  assert.strictEqual((await second.locator('output').textContent()).trim(), '8');

  assert.strictEqual((await page.locator('app-total h1').textContent()).trim(), 'Total of 2 Counters: 15');

});

test('external attribute writes are adopted directly, with no separate internal state to conflict with', async () => {

  // Continuing from the previous test, the first counter currently shows 7.

  // count now lives only in the attribute (via prop) — there's no reducer

  // value to reconcile it against, so an external write just is the new

  // state, and app-total (via its watch declaration) picks it up automatically.

  const first = page.locator('app-counter').nth(0);

  await first.evaluate((el) => el.setAttribute('count', '30'));

  await page.waitForFunction(() => document.querySelector('app-counter').querySelector('output').textContent.trim() === '30');

  assert.strictEqual((await first.locator('output').textContent()).trim(), '30');

  await page.waitForFunction(() => document.querySelector('app-total h1').textContent.trim() === 'Total of 2 Counters: 38');

  assert.strictEqual((await page.locator('app-total h1').textContent()).trim(), 'Total of 2 Counters: 38');

});

test('no console/page errors were thrown', () => {

  assert.deepStrictEqual(pageErrors, []);

});

test('hydration reuses the exact SSR DOM node, so focus survives it naturally', async () => {

  // Server-render the fixture the same way examples/server.js does, so the

  // markup handed to the browser has real lit hydration markers rather than

  // hand-typed HTML — hydrate() only works against genuine SSR structure.

  const Comp = () => html`<div class="wrap"><button>-</button><button>+</button></div>`;

  createElement({ url: '/focus-test-element.js' }, Comp);

  const ssrMarkup = new (getElement('focus-test-element'))().render();

  const result = await page.evaluate(async (markup) => {

    const { createElement, html } = await import('/index.js');

    const Comp = () => html`<div class="wrap"><button>-</button><button>+</button></div>`;

    createElement({ url: '/focus-test-element.js' }, Comp);

    const el = document.createElement('focus-test-element');

    el.innerHTML = markup;

    document.body.appendChild(el);

    const originalPlus = el.querySelectorAll('button')[1];

    originalPlus.focus();

    const focusedBefore = document.activeElement === originalPlus;

    // the hydration render is scheduled on a microtask by connectedCallback; wait for it

    await new Promise((resolve) => queueMicrotask(resolve));

    const newPlus = el.querySelectorAll('button')[1];

    const focusedAfter = document.activeElement === newPlus;

    const sameNode = originalPlus === newPlus;

    el.remove();

    return { focusedBefore, focusedAfter, sameNode };

  }, ssrMarkup);

  assert.strictEqual(result.focusedBefore, true, 'button should be focused before the hydration render runs');

  assert.strictEqual(result.sameNode, true, 'hydration should attach to the existing SSR node, not recreate it');

  assert.strictEqual(result.focusedAfter, true, 'focus should remain on the same node through hydration');

});