@internetarchive/collection-browser 4.8.0 → 4.8.1-alpha-webdev9189.1

package/test/collection-facets/more-facets-scroller.test.ts

@@ -1,401 +0,0 @@
-import {
-  aTimeout,
-  expect,
-  fixture,
-  oneEvent,
-  waitUntil,
-} from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
-import { html } from 'lit';
-import type { MoreFacetsScroller } from '../../src/collection-facets/more-facets-scroller';
-import '../../src/collection-facets/more-facets-scroller';
-import type { FacetBucket, FacetEventDetails } from '../../src/models';
-
-const COL_WIDTH = 250;
-
-function makeBuckets(n: number): FacetBucket[] {
-  return Array.from({ length: n }, (_, i) => ({
-    key: `value-${i}`,
-    count: n - i,
-    state: 'none',
-  }));
-}
-
-/**
- * Renders a scroller wide enough for three columns per page. With 1000
- * buckets in columns of 12, that's 84 columns over 28 pages.
- */
-async function createScroller({
-  buckets = makeBuckets(1000),
-  rowsPerColumn = 12,
-} = {}): Promise<MoreFacetsScroller> {
-  const wrapper = await fixture<HTMLDivElement>(
-    html`<div style="width: 900px">
-      <more-facets-scroller
-        .facetType=${'subject'}
-        .buckets=${buckets}
-        .rowsPerColumn=${rowsPerColumn}
-      ></more-facets-scroller>
-    </div>`,
-  );
-  const el = wrapper.querySelector(
-    'more-facets-scroller',
-  ) as MoreFacetsScroller;
-  await waitUntil(
-    () => buckets.length === 0 || el.shadowRoot?.querySelector('.page'),
-    'pages never rendered',
-  );
-  await el.updateComplete;
-  return el;
-}
-
-function scrollerOf(el: MoreFacetsScroller): HTMLElement {
-  return el.shadowRoot?.querySelector('.scroller') as HTMLElement;
-}
-
-function mountedPages(el: MoreFacetsScroller): number[] {
-  const pages = el.shadowRoot?.querySelectorAll<HTMLElement>('.page') ?? [];
-  return [...pages].map(p => Number(p.dataset.page));
-}
-
-function checkbox(
-  el: MoreFacetsScroller,
-  key: string,
-  kind: 'select' | 'hide' = 'select',
-): HTMLInputElement {
-  const inputs = el.shadowRoot?.querySelectorAll<HTMLInputElement>(
-    `.${kind}-facet-checkbox`,
-  );
-  return [...(inputs ?? [])].find(i => i.value === key) as HTMLInputElement;
-}
-
-async function restOnPage(el: MoreFacetsScroller, page: number) {
-  el.scrollToPage(page);
-  await waitUntil(() => el.currentPage === page, `never rested on ${page}`);
-  await el.updateComplete;
-}
-
-describe('More facets scroller', () => {
-  it('fits a whole number of columns in the viewport', async () => {
-    const el = await createScroller();
-
-    expect(scrollerOf(el).clientWidth).to.equal(3 * COL_WIDTH);
-    expect(el.pageCount).to.equal(28);
-  });
-
-  it('renders a snap stub for every page, but rows only near the viewport', async () => {
-    const el = await createScroller();
-    const root = el.shadowRoot as ShadowRoot;
-
-    expect(root.querySelectorAll('.snap-stub')).to.have.length(28);
-    expect(mountedPages(el)).to.deep.equal([0, 1, 2]);
-    expect(root.querySelectorAll('.facet-row-container')).to.have.length(
-      3 * 3 * 12,
-    );
-  });
-
-  it('renders rows as plain DOM rather than an element per row', async () => {
-    const el = await createScroller();
-
-    expect(el.shadowRoot?.querySelectorAll('facet-row')).to.have.length(0);
-    expect(
-      el.shadowRoot?.querySelectorAll('.facet-row-container').length,
-    ).to.be.greaterThan(0);
-  });
-
-  it('stacks buckets top to bottom in columns of rowsPerColumn', async () => {
-    const el = await createScroller({ rowsPerColumn: 5 });
-    const columns = el.shadowRoot?.querySelectorAll(
-      '.page[data-page="0"] .column',
-    );
-    const keysIn = (col?: Element) =>
-      [
-        ...(col?.querySelectorAll<HTMLInputElement>('.select-facet-checkbox') ??
-          []),
-      ].map(i => i.value);
-
-    expect(columns).to.have.length(3);
-    expect(keysIn(columns?.[0])).to.deep.equal([
-      'value-0',
-      'value-1',
-      'value-2',
-      'value-3',
-      'value-4',
-    ]);
-    expect(keysIn(columns?.[1])[0]).to.equal('value-5');
-    expect(el.pageCount).to.equal(Math.ceil(200 / 3));
-  });
-
-  it('keeps the number of mounted pages flat while scrolling end to end', async () => {
-    const el = await createScroller();
-    const root = el.shadowRoot as ShadowRoot;
-    const nodeCounts: number[] = [];
-
-    for (const page of [5, 10, 15, 20]) {
-      await restOnPage(el, page);
-      expect(mountedPages(el)).to.deep.equal([
-        page - 1,
-        page,
-        page + 1,
-        page + 2,
-      ]);
-      nodeCounts.push(root.querySelectorAll('*').length);
-    }
-    expect(new Set(nodeCounts).size).to.equal(1);
-
-    await restOnPage(el, 27);
-    expect(mountedPages(el)).to.deep.equal([26, 27]);
-  });
-
-  it('keeps the same element for a page that stays mounted', async () => {
-    const el = await createScroller();
-    const page1 = el.shadowRoot?.querySelector('.page[data-page="1"]');
-
-    await restOnPage(el, 1);
-
-    expect(el.shadowRoot?.querySelector('.page[data-page="1"]')).to.equal(
-      page1,
-    );
-  });
-
-  it('eases a release partway through a page to the nearest page boundary', async () => {
-    const el = await createScroller();
-    const scroller = scrollerOf(el);
-    const pageWidth = 3 * COL_WIDTH;
-
-    scroller.scrollLeft = 3 * pageWidth + 500; // Two-thirds into page 3
-    await waitUntil(() => el.currentPage === 4, 'did not ease forward');
-    expect(scroller.scrollLeft).to.equal(4 * pageWidth);
-
-    scroller.scrollLeft = 4 * pageWidth + 200; // A quarter into page 4
-    await waitUntil(
-      () => scroller.scrollLeft === 4 * pageWidth,
-      'did not ease back',
-    );
-    expect(el.currentPage).to.equal(4);
-  });
-
-  it('emits facetClick with the new state when a row is checked', async () => {
-    const el = await createScroller();
-
-    setTimeout(() => checkbox(el, 'value-0').click());
-    const selected = await oneEvent(el, 'facetClick');
-    expect((selected as CustomEvent<FacetEventDetails>).detail).to.deep.equal({
-      facetType: 'subject',
-      bucket: { key: 'value-0', count: 1000, state: 'selected' },
-      negative: false,
-    });
-
-    setTimeout(() => checkbox(el, 'value-1', 'hide').click());
-    const hidden = await oneEvent(el, 'facetClick');
-    expect((hidden as CustomEvent<FacetEventDetails>).detail).to.deep.include({
-      negative: true,
-    });
-    expect(
-      (hidden as CustomEvent<FacetEventDetails>).detail.bucket.state,
-    ).to.equal('hidden');
-  });
-
-  it('reflects bucket states in the checkboxes', async () => {
-    const buckets = makeBuckets(50);
-    buckets[0] = { ...buckets[0], state: 'selected' };
-    buckets[1] = { ...buckets[1], state: 'hidden' };
-    const el = await createScroller({ buckets });
-
-    expect(checkbox(el, 'value-0').checked).to.be.true;
-    expect(checkbox(el, 'value-1', 'hide').checked).to.be.true;
-    expect(checkbox(el, 'value-2').checked).to.be.false;
-  });
-
-  it('emits pageChanged only when resting on a different page', async () => {
-    const el = await createScroller();
-    const landed: number[] = [];
-    el.addEventListener('pageChanged', e =>
-      landed.push((e as CustomEvent<number>).detail),
-    );
-
-    await restOnPage(el, 2);
-    el.scrollToPage(2);
-    await restOnPage(el, 3);
-
-    expect(landed).to.deep.equal([2, 3]);
-  });
-
-  it('pages with the arrow buttons', async () => {
-    const el = await createScroller();
-    const prev = el.shadowRoot?.querySelector(
-      '.scroll-arrow.prev',
-    ) as HTMLButtonElement;
-    const next = el.shadowRoot?.querySelector(
-      '.scroll-arrow.next',
-    ) as HTMLButtonElement;
-    expect(prev.disabled).to.be.true;
-    expect(next.disabled).to.be.false;
-
-    next.click();
-    await waitUntil(() => el.currentPage === 1, 'next did not move');
-    await el.updateComplete;
-    expect(prev.disabled).to.be.false;
-
-    await restOnPage(el, 27);
-    expect(next.disabled).to.be.true;
-
-    prev.click();
-    await waitUntil(() => el.currentPage === 26, 'prev did not move');
-  });
-
-  it('only leaves out hide buttons when told to', async () => {
-    const buckets = makeBuckets(1);
-    const lone = await createScroller({ buckets });
-    const hideContainer = (el: MoreFacetsScroller) =>
-      el.shadowRoot?.querySelector('.hide-facet-container') as HTMLElement;
-
-    // One row on its own doesn't mean there's only one value in all
-    expect(hideContainer(lone).hidden).to.be.false;
-
-    lone.omitHideButtons = true;
-    await lone.updateComplete;
-    expect(hideContainer(lone).hidden).to.be.true;
-  });
-
-  it('hides the arrow buttons when every value fits on one page', async () => {
-    const el = await createScroller({ buckets: makeBuckets(10) });
-    const arrows = el.shadowRoot?.querySelectorAll('.scroll-arrow');
-
-    expect(el.pageCount).to.equal(1);
-    expect(arrows).to.have.length(2);
-    arrows?.forEach(a => expect(a.classList.contains('unneeded')).to.be.true);
-  });
-
-  it('moves focus to the scroller when the focused row is about to be removed', async () => {
-    const el = await createScroller();
-    checkbox(el, 'value-0').focus();
-
-    await restOnPage(el, 10);
-
-    expect(el.shadowRoot?.activeElement).to.equal(scrollerOf(el));
-  });
-
-  describe('keyboard focus', () => {
-    const pageWidth = 3 * COL_WIDTH;
-    const rowsPerPage = 3 * 12;
-
-    function focused(el: MoreFacetsScroller): string {
-      const active = el.shadowRoot?.activeElement as HTMLInputElement | null;
-      if (!active) return 'nothing';
-      if (active === scrollerOf(el)) return 'scroller';
-      const kind = active.classList.contains('hide-facet-checkbox')
-        ? 'hide'
-        : 'select';
-      return `${kind}:${active.value}`;
-    }
-
-    function arrow(el: MoreFacetsScroller, which: 'prev' | 'next') {
-      return el.shadowRoot?.querySelector(
-        `.scroll-arrow.${which}`,
-      ) as HTMLButtonElement;
-    }
-
-    /** Presses Shift+Tab (this runner's sendKeys doesn't take key combos) */
-    async function shiftTab() {
-      await sendKeys({ down: 'Shift' });
-      await sendKeys({ press: 'Tab' });
-      await sendKeys({ up: 'Shift' });
-    }
-
-    /** Waits long enough for any scroll the focus change set off to settle */
-    async function settle(el: MoreFacetsScroller) {
-      await aTimeout(300);
-      await el.updateComplete;
-    }
-
-    it('is a labeled tab stop of its own while there are values', async () => {
-      const el = await createScroller();
-      el.label = 'Subject values';
-      await el.updateComplete;
-      const scroller = scrollerOf(el);
-
-      expect(scroller.tabIndex).to.equal(0);
-      expect(scroller.getAttribute('role')).to.equal('group');
-      expect(scroller.getAttribute('aria-label')).to.equal('Subject values');
-
-      el.buckets = [];
-      await el.updateComplete;
-      expect(scroller.tabIndex).to.equal(-1);
-    });
-
-    it('lands on the current page when tabbing in from the previous arrow', async () => {
-      const el = await createScroller();
-      await restOnPage(el, 3);
-      arrow(el, 'prev').focus();
-
-      await sendKeys({ press: 'Tab' });
-      await settle(el);
-      expect(focused(el)).to.equal('scroller');
-
-      await sendKeys({ press: 'Tab' });
-      await settle(el);
-      expect(focused(el)).to.equal(`select:value-${3 * rowsPerPage}`);
-      expect(el.currentPage).to.equal(3);
-      expect(scrollerOf(el).scrollLeft).to.equal(3 * pageWidth);
-    });
-
-    it('lands on the last row of the current page when tabbing back in from the next arrow', async () => {
-      const el = await createScroller();
-      await restOnPage(el, 3);
-      arrow(el, 'next').focus();
-
-      await shiftTab();
-      await settle(el);
-
-      expect(focused(el)).to.equal(`hide:value-${4 * rowsPerPage - 1}`);
-      expect(el.currentPage).to.equal(3);
-      expect(scrollerOf(el).scrollLeft).to.equal(3 * pageWidth);
-    });
-
-    it('still tabs from the last row of a page on into the next page', async () => {
-      const el = await createScroller();
-      await restOnPage(el, 3);
-      checkbox(el, `value-${4 * rowsPerPage - 1}`, 'hide').focus();
-
-      await sendKeys({ press: 'Tab' });
-      await settle(el);
-
-      expect(focused(el)).to.equal(`select:value-${4 * rowsPerPage}`);
-      await waitUntil(() => el.currentPage === 4, 'did not follow focus');
-    });
-
-    it('still tabs back from the first row of a page into the previous page', async () => {
-      const el = await createScroller();
-      await restOnPage(el, 3);
-      checkbox(el, `value-${3 * rowsPerPage}`).focus();
-
-      await shiftTab();
-      await settle(el);
-
-      expect(focused(el)).to.equal(`hide:value-${3 * rowsPerPage - 1}`);
-      await waitUntil(() => el.currentPage === 2, 'did not follow focus');
-    });
-
-    it('lands on the current page when tabbing on from the scroller itself', async () => {
-      const el = await createScroller();
-      checkbox(el, 'value-0').focus();
-      await restOnPage(el, 10);
-      expect(focused(el)).to.equal('scroller');
-
-      await sendKeys({ press: 'Tab' });
-      await settle(el);
-
-      expect(focused(el)).to.equal(`select:value-${10 * rowsPerPage}`);
-      expect(el.currentPage).to.equal(10);
-    });
-  });
-
-  it('renders no pages for an empty list', async () => {
-    const el = await createScroller({ buckets: [] });
-
-    expect(el.pageCount).to.equal(0);
-    expect(el.shadowRoot?.querySelectorAll('.page')).to.have.length(0);
-    expect(el.shadowRoot?.querySelectorAll('.snap-stub')).to.have.length(0);
-  });
-});

package/test/collection-facets/page-window.test.ts

@@ -1,208 +0,0 @@
-import { expect, fixture, nextFrame, waitUntil } from '@open-wc/testing';
-import sinon from 'sinon';
-import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { ref } from 'lit/directives/ref.js';
-import { repeat } from 'lit/directives/repeat.js';
-import { PageWindow } from '../../src/collection-facets/page-window';
-
-const COL_WIDTH = 100;
-
-/**
- * Minimal host for the controller: a 300px-wide scroller (three columns per
- * page) over 49 columns, so the last of its 17 pages holds a single column.
- * No snapping, so tests can park the scroller anywhere.
- */
-@customElement('page-window-test-host')
-class PageWindowTestHost extends LitElement {
-  rests: number[] = [];
-
-  renders = 0;
-
-  win = new PageWindow(this, {
-    colWidth: COL_WIDTH,
-    total: 49,
-    onRest: page => this.rests.push(page),
-  });
-
-  get scroller(): HTMLElement {
-    return this.shadowRoot?.querySelector('.scroller') as HTMLElement;
-  }
-
-  render() {
-    this.renders += 1;
-    const w = this.win;
-    const live: number[] = [];
-    for (let i = w.first; i <= w.last; i++) live.push(i);
-    return html`
-      <div class="scroller" ${ref(w.attach)}>
-        <div class="sizer" style="width:${w.totalWidth}px">
-          ${repeat(
-            live,
-            i => i,
-            i =>
-              html`<div
-                class="page"
-                data-page=${i}
-                style="left:${i * w.pageWidth}px;width:${w.pageSpan(i)}px"
-              ></div>`,
-          )}
-        </div>
-      </div>
-    `;
-  }
-
-  static styles = css`
-    .scroller {
-      width: var(--scrollerWidth, 300px);
-      height: 50px;
-      overflow-x: auto;
-      overflow-y: hidden;
-    }
-    .sizer {
-      position: relative;
-      height: 100%;
-    }
-    .page {
-      position: absolute;
-      top: 0;
-      height: 100%;
-    }
-  `;
-}
-
-async function createHost(): Promise<PageWindowTestHost> {
-  const el = await fixture<PageWindowTestHost>(
-    html`<page-window-test-host></page-window-test-host>`,
-  );
-  await waitUntil(() => el.win.colsPerPage === 3, 'viewport never measured');
-  await el.updateComplete;
-  return el;
-}
-
-/** Scrolls the host and waits for the controller to catch up */
-async function scrollHostTo(el: PageWindowTestHost, left: number) {
-  el.scroller.scrollLeft = left;
-  await nextFrame();
-  await nextFrame();
-  await el.updateComplete;
-}
-
-describe('PageWindow', () => {
-  afterEach(() => {
-    sinon.restore();
-  });
-
-  it('derives the page size from the measured scroller width', async () => {
-    const el = await createHost();
-    const { win } = el;
-
-    expect(win.colsPerPage).to.equal(3);
-    expect(win.pageWidth).to.equal(300);
-    expect(win.pageCount).to.equal(17);
-    expect(win.totalWidth).to.equal(4900);
-  });
-
-  it('trims the partial last page so nothing extends past the total width', async () => {
-    const el = await createHost();
-    const { win } = el;
-
-    expect(win.pageSpan(0)).to.equal(300);
-    expect(win.pageSpan(16)).to.equal(100);
-    expect(el.scroller.scrollWidth).to.equal(4900);
-  });
-
-  it('mounts the visible pages plus one buffer page on each side', async () => {
-    const el = await createHost();
-    expect([el.win.first, el.win.last]).to.deep.equal([0, 2]);
-
-    await scrollHostTo(el, 1500); // Page 5
-    expect([el.win.first, el.win.last]).to.deep.equal([4, 7]);
-    const pages = el.shadowRoot?.querySelectorAll<HTMLElement>('.page') ?? [];
-    const mounted = [...pages].map(p => Number(p.dataset.page));
-    expect(mounted).to.deep.equal([4, 5, 6, 7]);
-  });
-
-  it('only re-renders when a scroll crosses a page boundary', async () => {
-    const el = await createHost();
-    await scrollHostTo(el, 1510);
-    const rendersBefore = el.renders;
-
-    // Several scrolls within the same page leave the window alone (and all
-    // rest nearest to the same page)
-    await scrollHostTo(el, 1560);
-    await scrollHostTo(el, 1600);
-    await scrollHostTo(el, 1640);
-    expect(el.renders).to.equal(rendersBefore);
-
-    // Crossing into the next page shifts it
-    await scrollHostTo(el, 1810);
-    expect(el.renders).to.be.greaterThan(rendersBefore);
-    expect(el.win.first).to.equal(5);
-  });
-
-  it('reports the page the scroller comes to rest on', async () => {
-    const el = await createHost();
-
-    el.win.scrollToPage(4);
-    await waitUntil(() => el.win.currentPage === 4, 'never rested on page 4');
-    expect(el.scroller.scrollLeft).to.equal(1200);
-    expect(el.rests).to.include(4);
-  });
-
-  it('counts resting at the far end as the last page, even when it is partial', async () => {
-    const el = await createHost();
-
-    // The last page starts at 4800, but the scroller can only reach 4600
-    el.win.scrollToPage(16);
-    await waitUntil(() => el.win.currentPage === 16, 'never reached the end');
-    expect(el.scroller.scrollLeft).to.equal(4600);
-  });
-
-  it('clamps the window when the number of columns shrinks', async () => {
-    const el = await createHost();
-
-    el.win.setTotal(4);
-    el.requestUpdate();
-    await el.updateComplete;
-
-    expect(el.win.pageCount).to.equal(2);
-    expect([el.win.first, el.win.last]).to.deep.equal([0, 1]);
-    expect(el.shadowRoot?.querySelectorAll('.page')).to.have.length(2);
-  });
-
-  it('keeps the leftmost column on screen when a resize changes the page size', async () => {
-    const el = await createHost();
-    await scrollHostTo(el, 900); // Page 3, whose first column is 9
-
-    el.style.setProperty('--scrollerWidth', '200px');
-    await waitUntil(() => el.win.colsPerPage === 2, 'resize never observed');
-    await el.updateComplete;
-
-    // Column 9 is on page 4 when pages are two columns wide
-    expect(el.scroller.scrollLeft).to.equal(800);
-    await waitUntil(() => el.win.currentPage === 4, 'did not land on page 4');
-    expect(el.win.pageCount).to.equal(25);
-  });
-
-  it('stops listening once the host is disconnected', async () => {
-    const el = await createHost();
-    const { scroller } = el;
-    const removeSpy = sinon.spy(scroller, 'removeEventListener');
-
-    el.remove();
-
-    expect(removeSpy.calledWith('scroll')).to.be.true;
-  });
-
-  it('listens again when the host is reconnected', async () => {
-    const el = await createHost();
-    const parent = el.parentElement as HTMLElement;
-    el.remove();
-    parent.appendChild(el);
-    await el.updateComplete;
-
-    await scrollHostTo(el, 1500);
-    expect(el.win.first).to.equal(4);
-  });
-});