@internetarchive/collection-browser 4.7.0 → 4.8.0

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

@@ -0,0 +1,401 @@
+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

@@ -0,0 +1,208 @@
+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);
+  });
+});

package/test/mocks/mock-search-responses.ts

@@ -1349,6 +1349,62 @@ export const getMockSuccessWithManyAggregations: () => Result<
   },
 });
 
+/**
+ * Returns a mock response with thousands of subject aggregation buckets
+ * (`subject-0` through `subject-4999`, in descending order of count), plus a
+ * few with punctuation and accents for exercising the More... dialog's filter.
+ */
+export const getMockSuccessWithLargeAggregations: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => {
+  const buckets = [
+    ...Array.from({ length: 5000 }, (_, i) => ({
+      key: `subject-${i}`,
+      doc_count: 10000 - i,
+    })),
+    { key: 'Dr. Drew', doc_count: 3 },
+    { key: 'A.O.R.', doc_count: 2 },
+    { key: 'Café society', doc_count: 1 },
+    { key: 'WC-TV', doc_count: 1 },
+    { key: 'Human-animal relationships', doc_count: 1 },
+  ];
+  return {
+    success: {
+      request: {
+        kind: 'aggregations',
+        clientParameters: {
+          user_query: 'large-facets',
+          sort: [],
+        },
+        backendRequests: {
+          primary: {
+            kind: 'aggregations',
+            finalized_parameters: {
+              user_query: 'large-facets',
+              sort: [],
+            },
+          },
+        },
+      },
+      rawResponse: {},
+      sessionContext: {},
+      response: {
+        totalResults: 0,
+        returnedCount: 0,
+        results: [],
+        aggregations: {
+          subject: new Aggregation({ buckets }),
+        },
+      },
+      responseHeader: {
+        succeeded: true,
+        query_time: 0,
+      },
+    },
+  };
+};
+
 export const getMockErrorResult: () => Result<
   SearchResponse,
   SearchServiceError

package/test/mocks/mock-search-service.ts

@@ -33,6 +33,7 @@ import {
   getMockSuccessNoResults,
   getMockSuccessWithWebArchiveHits,
   getMockSuccessWithManyAggregations,
+  getMockSuccessWithLargeAggregations,
   getMockSuccessTvFields,
   getMockSuccessArchiveOrgUserResult,
   getMockSuccessArchiveOrgUserNoBlurResult,
@@ -64,6 +65,7 @@ const responses: Record<
   'tv-collection': getMockSuccessForTvCollection,
   'web-archive': getMockSuccessWithWebArchiveHits,
   'more-facets': getMockSuccessWithManyAggregations,
+  'large-facets': getMockSuccessWithLargeAggregations,
   'many-fields': getMockSuccessManyFields,
   'tv-fields': getMockSuccessTvFields,
   'no-results': getMockSuccessNoResults,