@operato/data-grist 10.29.5 → 10.29.7

package/dist/test/grid-single-scroller.test.js

@@ -0,0 +1,107 @@
+/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/data-grist.js';
+const settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms));
+async function grid() {
+    const columns = [
+        { type: 'gutter', gutterName: 'sequence' },
+        { type: 'string', name: 'id', hidden: true },
+        { type: 'string', name: 'code', header: 'code', width: 120, fixed: true }
+    ];
+    for (let i = 0; i < 12; i++) {
+        columns.push({ type: 'string', name: 'c' + i, header: 'col ' + i, width: 110 });
+    }
+    const records = Array.from({ length: 60 }, (_, r) => {
+        const record = { id: String(r), code: 'C-' + r };
+        for (let i = 0; i < 12; i++)
+            record['c' + i] = `v${r}-${i}`;
+        return record;
+    });
+    const el = (await fixture(html `
+    <ox-grist
+      style="width: 600px; height: 320px"
+      mode="GRID"
+      .config=${{ columns, pagination: { pages: [100] } }}
+      .fetchHandler=${async () => ({ total: records.length, records })}
+    ></ox-grist>
+  `));
+    await el.fetch();
+    await settle();
+    await el.updateComplete;
+    const grist = el.renderRoot.querySelector('#grist');
+    const scroller = grist.renderRoot.querySelector('div[grid]');
+    const header = grist.renderRoot.querySelector('ox-grid-header');
+    const body = grist.renderRoot.querySelector('ox-grid-body');
+    await body.updateComplete;
+    return { grist, scroller, header, body };
+}
+/** The largest horizontal distance between a column's header cell and its cell in the first row. */
+function misalignment(header, body) {
+    const heads = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]'));
+    const row = body.renderRoot.querySelector('div[grid-row]');
+    const cells = Array.from(row.querySelectorAll('ox-grid-field'));
+    const n = Math.min(heads.length, cells.length);
+    let worst = 0;
+    for (let i = 0; i < n; i++) {
+        worst = Math.max(worst, Math.abs(heads[i].getBoundingClientRect().left - cells[i].getBoundingClientRect().left));
+    }
+    return { n, worst };
+}
+describe('grid header and body share one scroller', () => {
+    /* Resizing the grid body inside a fixture trips Chrome's benign "ResizeObserver loop" error. */
+    const ignoreResizeLoop = (e) => {
+        if (String(e.message).includes('ResizeObserver loop')) {
+            e.stopImmediatePropagation();
+            e.preventDefault();
+        }
+    };
+    let previousOnError = null;
+    before(() => {
+        window.addEventListener('error', ignoreResizeLoop, true);
+        previousOnError = window.onerror;
+        window.onerror = (message, ...rest) => String(message).includes('ResizeObserver loop') ? true : previousOnError === null || previousOnError === void 0 ? void 0 : previousOnError.call(window, message, ...rest);
+    });
+    after(() => {
+        window.removeEventListener('error', ignoreResizeLoop, true);
+        window.onerror = previousOnError;
+    });
+    it('neither the header nor the body scrolls on its own', async () => {
+        const { scroller, header, body } = await grid();
+        expect(scroller.scrollWidth, 'the grid must overflow, or this measures nothing').to.be.greaterThan(scroller.clientWidth);
+        expect(getComputedStyle(body).overflowX).to.equal('visible');
+        expect(getComputedStyle(header).overflowX).to.equal('visible');
+        expect(header.offsetWidth, 'header and body span the same width').to.equal(body.offsetWidth);
+    });
+    for (const where of ['start', 'middle', 'end']) {
+        it(`every column lines up with its header at the ${where}`, async () => {
+            const { scroller, header, body } = await grid();
+            const max = scroller.scrollWidth - scroller.clientWidth;
+            scroller.scrollLeft = where === 'start' ? 0 : where === 'middle' ? Math.round(max / 2) : max;
+            await settle(50);
+            const { n, worst } = misalignment(header, body);
+            expect(n, 'columns must be drawn, or this measures nothing').to.be.greaterThan(10);
+            expect(worst).to.equal(0);
+        });
+    }
+    it('the header stays on top when the rows scroll', async () => {
+        const { scroller, header } = await grid();
+        scroller.scrollTop = 600;
+        await settle(50);
+        expect(scroller.scrollTop, 'the rows must scroll, or this measures nothing').to.be.greaterThan(0);
+        expect(header.getBoundingClientRect().top).to.equal(scroller.getBoundingClientRect().top);
+    });
+    it('a focused row that was under the header is brought out below it', async () => {
+        const { grist, scroller, header, body } = await grid();
+        scroller.scrollTop = 600;
+        await settle(50);
+        grist.focused = { row: 2, column: 3 };
+        await grist.updateComplete;
+        await body.updateComplete;
+        await settle(50);
+        const focused = body.renderRoot.querySelector('ox-grid-field[focused]');
+        expect(!!focused, 'a cell must take the focus').to.equal(true);
+        expect(focused.getBoundingClientRect().top).to.be.at.least(header.getBoundingClientRect().bottom - 1);
+    });
+});
+//# sourceMappingURL=grid-single-scroller.test.js.map

package/dist/test/grid-single-scroller.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-single-scroller.test.js","sourceRoot":"","sources":["../../test/grid-single-scroller.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* Elements are compared by presence, not by value: a failing element comparison makes chai render the DOM and hang the runner. */\nimport { expect, fixture } from '@open-wc/testing'\nimport { html } from 'lit'\n\nimport '../src/data-grist.js'\n\n/**\n * Header and body move as one.\n *\n * The body used to be its own scroller, and the header a second scroller that copied the body's\n * scrollLeft from its scroll event (and the other way round). Three things went wrong:\n *\n * ```\n * gap      the compositor moves the body at once; the header only moves after the main thread\n *          handles the event, so on a busy screen it trails by several frames\n * shake    the sync ran both ways, so a late header event put the body back one frame\n * the end  when the two scroll widths differ, the header stops while the body goes on\n * ```\n *\n * Now the role=grid box is the only scroller. The header sticks to its top and the body does not\n * scroll. Nothing copies a position, so nothing can trail or pull back.\n */\n\ntype Root = HTMLElement & { renderRoot: ShadowRoot; updateComplete: Promise<unknown> }\n\nconst settle = (ms = 150) => new Promise(resolve => setTimeout(resolve, ms))\n\nasync function grid() {\n  const columns: any[] = [\n    { type: 'gutter', gutterName: 'sequence' },\n    { type: 'string', name: 'id', hidden: true },\n    { type: 'string', name: 'code', header: 'code', width: 120, fixed: true }\n  ]\n  for (let i = 0; i < 12; i++) {\n    columns.push({ type: 'string', name: 'c' + i, header: 'col ' + i, width: 110 })\n  }\n\n  const records = Array.from({ length: 60 }, (_, r) => {\n    const record: any = { id: String(r), code: 'C-' + r }\n    for (let i = 0; i < 12; i++) record['c' + i] = `v${r}-${i}`\n    return record\n  })\n\n  const el = (await fixture(html`\n    <ox-grist\n      style=\"width: 600px; height: 320px\"\n      mode=\"GRID\"\n      .config=${{ columns, pagination: { pages: [100] } }}\n      .fetchHandler=${async () => ({ total: records.length, records })}\n    ></ox-grist>\n  `)) as Root & { fetch(): Promise<void> }\n\n  await el.fetch()\n  await settle()\n  await el.updateComplete\n\n  const grist = el.renderRoot.querySelector('#grist') as Root & { focused?: { row: number; column: number } }\n  const scroller = grist.renderRoot.querySelector('div[grid]') as HTMLElement\n  const header = grist.renderRoot.querySelector('ox-grid-header') as Root\n  const body = grist.renderRoot.querySelector('ox-grid-body') as Root\n  await body.updateComplete\n\n  return { grist, scroller, header, body }\n}\n\n/** The largest horizontal distance between a column's header cell and its cell in the first row. */\nfunction misalignment(header: Root, body: Root) {\n  const heads = Array.from(header.renderRoot.querySelectorAll('[role=columnheader]')) as HTMLElement[]\n  const row = body.renderRoot.querySelector('div[grid-row]') as HTMLElement\n  const cells = Array.from(row.querySelectorAll('ox-grid-field')) as HTMLElement[]\n  const n = Math.min(heads.length, cells.length)\n\n  let worst = 0\n  for (let i = 0; i < n; i++) {\n    worst = Math.max(worst, Math.abs(heads[i].getBoundingClientRect().left - cells[i].getBoundingClientRect().left))\n  }\n  return { n, worst }\n}\n\ndescribe('grid header and body share one scroller', () => {\n  /* Resizing the grid body inside a fixture trips Chrome's benign \"ResizeObserver loop\" error. */\n  const ignoreResizeLoop = (e: ErrorEvent) => {\n    if (String(e.message).includes('ResizeObserver loop')) {\n      e.stopImmediatePropagation()\n      e.preventDefault()\n    }\n  }\n  let previousOnError: OnErrorEventHandler = null\n  before(() => {\n    window.addEventListener('error', ignoreResizeLoop, true)\n    previousOnError = window.onerror\n    window.onerror = (message, ...rest) =>\n      String(message).includes('ResizeObserver loop') ? true : previousOnError?.call(window, message, ...rest)\n  })\n  after(() => {\n    window.removeEventListener('error', ignoreResizeLoop, true)\n    window.onerror = previousOnError\n  })\n\n  it('neither the header nor the body scrolls on its own', async () => {\n    const { scroller, header, body } = await grid()\n\n    expect(scroller.scrollWidth, 'the grid must overflow, or this measures nothing').to.be.greaterThan(\n      scroller.clientWidth\n    )\n    expect(getComputedStyle(body).overflowX).to.equal('visible')\n    expect(getComputedStyle(header).overflowX).to.equal('visible')\n    expect(header.offsetWidth, 'header and body span the same width').to.equal(body.offsetWidth)\n  })\n\n  for (const where of ['start', 'middle', 'end'] as const) {\n    it(`every column lines up with its header at the ${where}`, async () => {\n      const { scroller, header, body } = await grid()\n\n      const max = scroller.scrollWidth - scroller.clientWidth\n      scroller.scrollLeft = where === 'start' ? 0 : where === 'middle' ? Math.round(max / 2) : max\n      await settle(50)\n\n      const { n, worst } = misalignment(header, body)\n      expect(n, 'columns must be drawn, or this measures nothing').to.be.greaterThan(10)\n      expect(worst).to.equal(0)\n    })\n  }\n\n  it('the header stays on top when the rows scroll', async () => {\n    const { scroller, header } = await grid()\n\n    scroller.scrollTop = 600\n    await settle(50)\n\n    expect(scroller.scrollTop, 'the rows must scroll, or this measures nothing').to.be.greaterThan(0)\n    expect(header.getBoundingClientRect().top).to.equal(scroller.getBoundingClientRect().top)\n  })\n\n  it('a focused row that was under the header is brought out below it', async () => {\n    const { grist, scroller, header, body } = await grid()\n\n    scroller.scrollTop = 600\n    await settle(50)\n\n    grist.focused = { row: 2, column: 3 }\n    await grist.updateComplete\n    await body.updateComplete\n    await settle(50)\n\n    const focused = body.renderRoot.querySelector('ox-grid-field[focused]') as HTMLElement\n    expect(!!focused, 'a cell must take the focus').to.equal(true)\n    expect(focused.getBoundingClientRect().top).to.be.at.least(header.getBoundingClientRect().bottom - 1)\n  })\n})\n"]}