@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/collection-facets/more-facets-content.test.ts

@@ -0,0 +1,231 @@
+import { aTimeout, expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';
+import '../../src/collection-facets/more-facets-content';
+import { MockSearchService } from '../mocks/mock-search-service';
+import { MockAnalyticsHandler } from '../mocks/mock-analytics-handler';
+import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
+import type { SelectedFacets } from '../../src/models';
+
+const selectedFacetsGroup = {
+  title: 'Media Type',
+  key: 'mediatype',
+  buckets: [
+    { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },
+    { displayText: 'movies', key: 'movies', count: 901, state: 'none' },
+    { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },
+    { displayText: 'data', key: 'data', count: 230, state: 'none' },
+    { displayText: 'web', key: 'web', count: 453, state: 'none' },
+  ],
+};
+
+const yearSelectedFacets: SelectedFacets = {
+  mediatype: {},
+  lending: {},
+  year: {
+    '2000': { key: '2000', count: 5, state: 'selected' },
+  },
+  subject: {},
+  collection: {},
+  creator: {},
+  language: {},
+};
+
+describe('More facets content', () => {
+  it('should render more facets template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`,
+    );
+
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;
+  });
+
+  it('should render more facets loader template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`,
+    );
+
+    el.facetsLoading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
+  });
+
+  it('should render pagination for more facets', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'year';
+    el.query = 'more-facets'; // Produces a response with 40+ aggregations for multiple pages
+    await el.updateComplete;
+    await aTimeout(50); // Give it a moment to perform the (mock) search query after the initial update
+
+    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
+  });
+
+  it('query for more facets content using search service', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'collection';
+    el.query = 'collection-aggregations';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal(
+      'collection-aggregations',
+    );
+  });
+
+  it('queries for more facets using search service within a collection (no query)', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .pageSpecifierParams=${{
+          pageType: 'collection_details',
+          pageTarget: 'foobar',
+        }}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'subject';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.be.empty;
+    expect(searchService.searchParams?.pageTarget).to.equal('foobar');
+  });
+
+  it('queries for more facets using search service within a collection (with query)', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .pageSpecifierParams=${{
+          pageType: 'collection_details',
+          pageTarget: 'foobar',
+        }}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'subject';
+    el.query = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+    expect(searchService.searchParams?.pageTarget).to.equal('foobar');
+  });
+
+  it('filter raw selectedFacets object', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .selectedFacets=${selectedFacetsGroup}
+      ></more-facets-content>`,
+    );
+
+    el.facetKey = 'collection';
+    el.query = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+  });
+
+  it('combines selectedFacets and aggregationFacets and renders on modal', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .facetKey=${'year'}
+        .query=${'more-facets'}
+        .searchService=${searchService}
+        .selectedFacets=${yearSelectedFacets}
+      ></more-facets-content>`,
+    );
+
+    const facetsTemplate = el.shadowRoot?.querySelector(
+      'facets-template',
+    ) as FacetsTemplate;
+    expect(facetsTemplate).to.exist;
+
+    const { facetGroup } = facetsTemplate;
+    expect(facetGroup?.key).to.equal('year');
+    expect(facetGroup?.title).to.equal('Year');
+
+    // First bucket is the one that was included in the selected facets
+    const firstBucket = facetGroup?.buckets[0];
+    expect(firstBucket?.key).to.equal('2000');
+    expect(firstBucket?.count).to.equal(5);
+
+    // Second bucket is the most recent year, since year facets default to descending order of year
+    const secondBucket = facetGroup?.buckets[1];
+    expect(secondBucket?.key).to.equal('2024');
+    expect(secondBucket?.count).to.equal(5);
+  });
+
+  it('cancel button clicked event', async () => {
+    const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .facetKey=${'collection'}
+        .query=${'collection-aggregations'}
+        .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></more-facets-content>`,
+    );
+
+    // select cancel button
+    const cancelButton = el.shadowRoot?.querySelector(
+      '.footer > .btn-cancel',
+    ) as HTMLButtonElement;
+    expect(cancelButton).to.exist;
+    cancelButton?.click();
+
+    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callAction).to.equal('closeMoreFacetsModal');
+    expect(mockAnalyticsHandler.callLabel).to.equal('collection');
+  });
+
+  it('facet apply button clicked event', async () => {
+    const searchService = new MockSearchService();
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .facetKey=${'collection'}
+        .query=${'collection-aggregations'}
+        .searchService=${searchService}
+        .analyticsHandler=${mockAnalyticsHandler}
+      ></more-facets-content>`,
+    );
+
+    // select submit button
+    const submitButton = el.shadowRoot?.querySelector(
+      '.footer > .btn-submit',
+    ) as HTMLButtonElement;
+    expect(submitButton).to.exist;
+    submitButton?.click();
+
+    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callAction).to.equal('applyMoreFacetsModal');
+    expect(mockAnalyticsHandler.callLabel).to.equal('collection');
+  });
+});

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/collection-facets/more-facets-pagination.test.ts

@@ -0,0 +1,201 @@
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../../src/collection-facets/more-facets-pagination';
+import type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';
+
+afterEach(() => {
+  sinon.restore();
+});
+
+describe('More facets pagination', () => {
+  describe('5 pages or less', () => {
+    it('shows all pages', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination .size=${5}></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+
+      const pageButtons = el.shadowRoot?.querySelectorAll(
+        'button[data-page]',
+      ) as NodeList;
+      expect(pageButtons.length).to.greaterThan(0);
+
+      pageButtons.forEach((button, index) => {
+        expect(button.textContent).to.contain(index + 1);
+      });
+    });
+  });
+
+  it('should render pagination template', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination .size=${10}></more-facets-pagination>`,
+    );
+
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
+    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
+  });
+
+  it('should render page numbers', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination .size=${3}></more-facets-pagination>`,
+    );
+
+    await el.updateComplete;
+
+    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
+    expect(pageNumberElement).to.exist;
+    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
+  });
+
+  it('check current page and total pages', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`,
+    );
+
+    await el.updateComplete;
+
+    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
+    expect(pageNumberElement).to.exist;
+    expect(
+      pageNumberElement
+        ?.querySelectorAll('button')[1]
+        .classList.contains('current'),
+    ).to.be.true;
+    expect(el.pages?.length).to.equal(4);
+  });
+
+  it('get page numbers based of size and currentPage', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`,
+    );
+
+    await el.updateComplete;
+
+    expect(el.pages?.length).to.equal(4);
+  });
+
+  describe('Selecting a page', () => {
+    it('fires event', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination></more-facets-pagination>`,
+      );
+
+      await el.updateComplete;
+
+      setTimeout(() =>
+        el.dispatchEvent(
+          new CustomEvent('pageNumberClicked', { detail: { page: 15 } }),
+        ),
+      );
+      const { detail } = await oneEvent(el, 'pageNumberClicked');
+      expect(detail?.page).to.equal(15);
+    });
+    it('sets off side effects with `onChange`', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`,
+      );
+
+      expect(el.currentPage).to.equal(2); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const pageButton = el.shadowRoot?.querySelector(
+        '.page-numbers > button',
+      ) as HTMLButtonElement;
+      // confirm button isn't selected
+      expect(pageButton.classList.contains('current')).to.be.false;
+      pageButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(1); // brings us back to currentPage
+      // confirm button is selected
+      expect(pageButton.classList.contains('current')).to.be.true;
+    });
+  });
+
+  describe('Using Arrows', () => {
+    it('going backwards', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`,
+      );
+
+      expect(el.currentPage).to.equal(2); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const rewindButton = el.shadowRoot?.querySelector(
+        '.facets-pagination > button.rewind',
+      ) as HTMLButtonElement;
+      rewindButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(1); // brings us back 1 page
+      // confirm button is selected
+      expect(
+        (
+          el.shadowRoot?.querySelector(
+            '.page-numbers > button[data-page="1"]',
+          ) as HTMLButtonElement
+        ).classList.contains('current'),
+      ).to.be.true;
+    });
+
+    it('going forwards', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${5}
+        ></more-facets-pagination>`,
+      );
+
+      expect(el.currentPage).to.equal(5); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const forwardButton = el.shadowRoot?.querySelector(
+        '.facets-pagination > button.forward',
+      ) as HTMLButtonElement;
+      forwardButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(6); // brings us forward 1 page
+    });
+  });
+});

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/collection-facets/toggle-switch.test.ts

@@ -0,0 +1,164 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import type { ToggleSwitch } from '../../src/collection-facets/toggle-switch';
+
+import '../../src/collection-facets/toggle-switch';
+
+describe('Toggle switch', () => {
+  it('renders component', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch></toggle-switch>`,
+    );
+
+    expect(el.shadowRoot?.querySelector('#switch-button')).to.exist;
+    expect(el.shadowRoot?.querySelector('#knob')).to.exist;
+  });
+
+  it('renders provided L/R values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+      ></toggle-switch>`,
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim(),
+    ).to.equal('L');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim(),
+    ).to.equal('R');
+  });
+
+  it('renders provided L/R labels instead of values', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .leftLabel=${'L-label'}
+        .rightValue=${'R'}
+        .rightLabel=${'R-label'}
+      ></toggle-switch>`,
+    );
+
+    expect(el.value).to.equal('L');
+    expect(el.selectedLabel).to.equal('L-label');
+
+    expect(
+      (el.shadowRoot?.querySelector('#switch-left') as HTMLInputElement)?.value,
+    ).to.equal('L');
+    expect(
+      (el.shadowRoot?.querySelector('#switch-right') as HTMLInputElement)
+        ?.value,
+    ).to.equal('R');
+
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-left]')
+        ?.textContent?.trim(),
+    ).to.equal('L-label');
+    expect(
+      el.shadowRoot
+        ?.querySelector('label[for=switch-right]')
+        ?.textContent?.trim(),
+    ).to.equal('R-label');
+  });
+
+  it('sets the initial side', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        .side=${'right'}
+      ></toggle-switch>`,
+    );
+
+    expect(el.value).to.equal('R');
+    expect(el.selectedLabel).to.equal('R');
+  });
+
+  it('toggles on click', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+      ></toggle-switch>`,
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button',
+    ) as HTMLButtonElement;
+
+    expect(el.value).to.equal('L');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    button.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('toggles on radio change', async () => {
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+      ></toggle-switch>`,
+    );
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left',
+    ) as HTMLInputElement;
+    const rightRadio = el.shadowRoot?.querySelector(
+      '#switch-right',
+    ) as HTMLInputElement;
+
+    expect(el.value).to.equal('L');
+    rightRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('R');
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(el.value).to.equal('L');
+  });
+
+  it('emits change event when toggled', async () => {
+    const changeSpy = sinon.spy();
+    const el = await fixture<ToggleSwitch>(
+      html`<toggle-switch
+        .leftValue=${'L'}
+        .rightValue=${'R'}
+        @change=${changeSpy}
+      ></toggle-switch>`,
+    );
+
+    const button = el.shadowRoot?.querySelector(
+      '#switch-button',
+    ) as HTMLButtonElement;
+
+    button.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(1);
+
+    const leftRadio = el.shadowRoot?.querySelector(
+      '#switch-left',
+    ) as HTMLInputElement;
+
+    leftRadio.click();
+    await el.updateComplete;
+
+    expect(changeSpy.callCount).to.equal(2);
+  });
+});