@internetarchive/collection-browser 4.5.1 → 4.6.0

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/data-source/collection-browser-data-source.test.ts

@@ -0,0 +1,193 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import { ItemHit, SearchType } from '@internetarchive/search-service';
+import { CollectionBrowserDataSource } from '../../src/data-source/collection-browser-data-source';
+import { TileModel } from '../../src/models';
+import type { CollectionBrowser } from '../../src/collection-browser';
+import '../../src/collection-browser';
+import { MockSearchService } from '../mocks/mock-search-service';
+
+const dataPage: TileModel[] = [
+  new TileModel(
+    new ItemHit({
+      fields: {
+        identifier: 'foo',
+      },
+    }),
+  ),
+  new TileModel(
+    new ItemHit({
+      fields: {
+        identifier: 'bar',
+      },
+    }),
+  ),
+];
+
+describe('Collection Browser Data Source', () => {
+  let host: CollectionBrowser;
+
+  beforeEach(async () => {
+    host = await fixture<CollectionBrowser>(html`
+      <collection-browser></collection-browser>
+    `);
+  });
+
+  it('can add and retrieve data pages', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(1);
+    expect(dataSource.getPage(1).length).to.equal(2);
+    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
+    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
+  });
+
+  it('can add data split across multiple pages', () => {
+    const dataSource = new CollectionBrowserDataSource(host, 3);
+    const doubledDataPage = [...dataPage, ...dataPage];
+    dataSource.addMultiplePages(1, doubledDataPage);
+
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(2);
+    expect(dataSource.getPage(1).length).to.equal(3);
+    expect(dataSource.getPage(2).length).to.equal(1);
+    expect(dataSource.getPage(1)[0].identifier).to.equal('foo');
+    expect(dataSource.getPage(1)[1].identifier).to.equal('bar');
+    expect(dataSource.getPage(1)[2].identifier).to.equal('foo');
+    expect(dataSource.getPage(2)[0].identifier).to.equal('bar');
+  });
+
+  it('resets data when changing page size', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    dataSource.setPageSize(100);
+    expect(Object.keys(dataSource.getAllPages()).length).to.equal(0);
+    expect(dataSource.getPageSize()).to.equal(100);
+  });
+
+  it('can be installed on the host', async () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    host.installDataSourceAndQueryState(dataSource, {
+      searchType: SearchType.METADATA,
+      sortDirection: null,
+      selectedTitleFilter: null,
+      selectedCreatorFilter: null,
+      baseQuery: 'foobar',
+    });
+
+    await host.updateComplete;
+
+    expect(host.dataSource).to.equal(dataSource);
+    expect(host.baseQuery).to.equal('foobar');
+
+    host.removeController(dataSource);
+  });
+
+  it('can suppress further fetches', async () => {
+    host.searchService = new MockSearchService();
+
+    const pageFetchSpy = sinon.spy();
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.fetchPage = pageFetchSpy;
+
+    dataSource.addPage(1, dataPage);
+    dataSource.setFetchesSuppressed(true);
+    dataSource.handleQueryChange();
+
+    expect(pageFetchSpy.callCount).to.equal(0);
+  });
+
+  it('can set its initial page batch size', async () => {
+    host.searchService = new MockSearchService();
+
+    const pageFetchSpy = sinon.spy();
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.setNumInitialPages(10);
+    dataSource.fetchPage = pageFetchSpy;
+
+    dataSource.handleQueryChange();
+
+    // Uses specified number of initial pages
+    expect(pageFetchSpy.args[0][1]).to.equal(10);
+  });
+
+  it('refreshes prefix filter counts', () => {
+    const dataSource = new CollectionBrowserDataSource(host);
+    dataSource.addPage(1, dataPage);
+
+    dataSource.prefixFilterCountMap = {
+      title: {
+        X: 10,
+      },
+    };
+
+    dataSource.refreshLetterCounts();
+    expect(dataSource.prefixFilterCountMap).to.deep.equal({});
+  });
+
+  describe('empty FTS query in collection falls back to metadata search', () => {
+    it('allows search with empty query and FTS in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      expect(dataSource.canPerformSearch).to.be.true;
+      host.removeController(dataSource);
+    });
+
+    it('uses metadata search type for fetch when FTS query is empty in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      await dataSource.fetchPage(1);
+
+      expect(searchService.searchType).to.equal(SearchType.METADATA);
+      host.removeController(dataSource);
+    });
+
+    it('uses FTS search type for fetch when FTS query is non-empty in a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = 'test-collection';
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = 'some query';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      await dataSource.fetchPage(1);
+
+      expect(searchService.searchType).to.equal(SearchType.FULLTEXT);
+      host.removeController(dataSource);
+    });
+
+    it('does not allow search with empty FTS query outside a collection', async () => {
+      const searchService = new MockSearchService();
+      host.searchService = searchService;
+      host.withinCollection = undefined;
+      host.searchType = SearchType.FULLTEXT;
+      host.baseQuery = '';
+      await host.updateComplete;
+
+      const dataSource = new CollectionBrowserDataSource(host);
+      host.addController(dataSource);
+      expect(dataSource.canPerformSearch).to.be.false;
+      host.removeController(dataSource);
+    });
+  });
+});

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/empty-placeholder.test.ts

@@ -0,0 +1,88 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/empty-placeholder';
+
+import type { EmptyPlaceholder } from '../src/empty-placeholder';
+
+describe('Empty Placeholder', () => {
+  it('should render with empty-query placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = 'empty-query';
+    await el.updateComplete;
+
+    const placeholderElem = el.shadowRoot?.querySelector('.placeholder');
+    expect(placeholderElem).to.exist;
+    expect(placeholderElem).to.have.class('empty-query');
+  });
+
+  it('should render with empty-collection placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = 'empty-collection';
+    await el.updateComplete;
+
+    const placeholderElem = el.shadowRoot?.querySelector('.placeholder');
+    expect(placeholderElem).to.exist;
+    expect(placeholderElem).to.have.class('empty-collection');
+  });
+
+  it('should render with no-results placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = 'no-results';
+    await el.updateComplete;
+
+    const placeholderElem = el.shadowRoot?.querySelector('.placeholder');
+    expect(placeholderElem).to.exist;
+    expect(placeholderElem).to.have.class('no-results');
+  });
+
+  it('should render with query-error placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = 'query-error';
+    await el.updateComplete;
+
+    const placeholderElem = el.shadowRoot?.querySelector('.placeholder');
+    expect(placeholderElem).to.exist;
+    expect(placeholderElem).to.have.class('query-error');
+  });
+
+  it('should render with collection-error placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = 'collection-error';
+    await el.updateComplete;
+
+    const placeholderElem = el.shadowRoot?.querySelector('.placeholder');
+    expect(placeholderElem).to.exist;
+    expect(placeholderElem).to.have.class('collection-error');
+  });
+
+  it('should not render any empty placeholder', async () => {
+    const el = await fixture<EmptyPlaceholder>(
+      html`<empty-placeholder></empty-placeholder>`,
+    );
+
+    el.placeholderType = null;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.placeholder')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-query')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.empty-collection')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.no-results')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.query-error')).to.not.exist;
+    expect(el.shadowRoot?.querySelector('.collection-error')).to.not.exist;
+  });
+});

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/expanded-date-picker.test.ts

@@ -0,0 +1,201 @@
+import type { HistogramDateRange } from '@internetarchive/histogram-date-range';
+import {
+  ModalManager,
+  ModalManagerInterface,
+  ModalManagerMode,
+} from '@internetarchive/modal-manager';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../src/expanded-date-picker';
+
+import type { ExpandedDatePicker } from '../src/expanded-date-picker';
+import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
+import {
+  analyticsActions,
+  analyticsCategories,
+} from '../src/utils/analytics-events';
+
+describe('Expanded Date Picker', () => {
+  it('should render with a date picker and Apply button', async () => {
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker></expanded-date-picker>`,
+    );
+
+    expect(el.shadowRoot?.querySelector('#date-picker')).to.exist;
+    expect(el.shadowRoot?.querySelector('#apply-btn')).to.exist;
+  });
+
+  it('should update its min/max selected date when date picker changes', async () => {
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+      ></expanded-date-picker>`,
+    );
+
+    const datePicker = el.shadowRoot?.querySelector(
+      '#date-picker',
+    ) as HistogramDateRange;
+    expect(datePicker).to.exist;
+
+    datePicker.minSelectedDate = '2';
+    datePicker.maxSelectedDate = '4';
+    datePicker.dispatchEvent(
+      new CustomEvent('histogramDateRangeUpdated', {
+        detail: {
+          minDate: datePicker.minSelectedDate,
+          maxDate: datePicker.maxSelectedDate,
+        },
+      }),
+    );
+    await el.updateComplete;
+
+    expect(el.minSelectedDate).to.equal('2');
+    expect(el.maxSelectedDate).to.equal('4');
+  });
+
+  it('should emit an event when a date range is applied', async () => {
+    const applySpy = sinon.spy();
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        @histogramDateRangeApplied=${applySpy}
+      ></expanded-date-picker>`,
+    );
+
+    const applyBtn = el.shadowRoot?.querySelector(
+      '#apply-btn',
+    ) as HTMLButtonElement;
+    expect(applyBtn).to.exist;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(applySpy.callCount).to.equal(1);
+    expect(
+      applySpy.calledWithMatch({ detail: { minDate: '1', maxDate: '5' } }),
+    );
+  });
+
+  it('should close its modal and emit close event when date range applied', async () => {
+    const modalManager = await fixture<ModalManager>(
+      html`<modal-manager></modal-manager>`,
+    );
+    modalManager.mode = ModalManagerMode.Open;
+
+    const modalClosed = sinon.spy();
+
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        .modalManager=${modalManager}
+        @modalClosed=${modalClosed}
+      ></expanded-date-picker>`,
+    );
+
+    const applyBtn = el.shadowRoot?.querySelector(
+      '#apply-btn',
+    ) as HTMLButtonElement;
+    expect(applyBtn).to.exist;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(modalManager.getMode()).to.equal(ModalManagerMode.Closed);
+    expect(modalClosed.callCount).to.equal(1);
+  });
+
+  it('closes the modal when Esc key is pressed', async () => {
+    const modalManager = await fixture<ModalManager>(
+      html`<modal-manager></modal-manager>`,
+    );
+
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        .modalManager=${modalManager}
+      ></expanded-date-picker>`,
+    );
+
+    const closeModalSpy = sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'closeModal',
+    );
+
+    // Dispatch an Esc keydown event
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await el.updateComplete;
+
+    expect(closeModalSpy.callCount).to.equal(1);
+    expect(el.modalManager?.classList.contains('expanded-date-picker')).to.be
+      .false;
+  });
+
+  it('sends analytics when date range is applied', async () => {
+    const analyticsHandler = new MockAnalyticsHandler();
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .analyticsHandler=${analyticsHandler}
+      ></expanded-date-picker>`,
+    );
+
+    const applyBtn = el.shadowRoot?.querySelector(
+      '#apply-btn',
+    ) as HTMLButtonElement;
+    expect(applyBtn).to.exist;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
+    expect(analyticsHandler.callAction).to.equal(
+      analyticsActions.histogramChangedFromModal,
+    );
+    expect(analyticsHandler.callLabel).to.equal(window.location.href);
+
+    const datePicker = el.shadowRoot?.querySelector(
+      '#date-picker',
+    ) as HistogramDateRange;
+    expect(datePicker).to.exist;
+
+    datePicker.minSelectedDate = '2';
+    datePicker.maxSelectedDate = '5';
+    datePicker.dispatchEvent(
+      new CustomEvent('histogramDateRangeUpdated', {
+        detail: {
+          minDate: datePicker.minSelectedDate,
+          maxDate: datePicker.maxSelectedDate,
+        },
+      }),
+    );
+    await el.updateComplete;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(analyticsHandler.callCategory).to.equal(analyticsCategories.default);
+    expect(analyticsHandler.callAction).to.equal(
+      analyticsActions.histogramChangedFromModal,
+    );
+    expect(analyticsHandler.callLabel).to.equal(window.location.href);
+  });
+});

package/.claude/worktrees/WEBDEV-9119-migrate-to-pnpm/test/icon-overlay.test.ts

@@ -0,0 +1,38 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { IconOverlay } from '../src/tiles/overlay/icon-overlay';
+
+import '../src/tiles/overlay/icon-overlay';
+
+describe('Icon Overlay component', () => {
+  it('should render basic component', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay></icon-overlay>
+    `);
+
+    const overlayDiv = el.shadowRoot?.querySelector('.icon-overlay');
+    expect(overlayDiv).to.exist;
+  });
+
+  it('should render component with login-required type', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .type=${'login-required'}></icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Log in to view this item');
+  });
+
+  it('should render component with content-warning type', async () => {
+    const el = await fixture<IconOverlay>(html`
+      <icon-overlay .type=${'content-warning'}></icon-overlay>
+    `);
+
+    const svgTitle = el.shadowRoot
+      ?.querySelector('svg')
+      ?.querySelector('title')?.textContent;
+    expect(svgTitle).to.equal('Content may be inappropriate');
+  });
+});