@internetarchive/collection-browser 4.8.0 → 4.8.1-webdev-9227.1

package/test/data-source/collection-browser-data-source.test.ts

@@ -1,193 +0,0 @@
-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/test/empty-placeholder.test.ts

@@ -1,88 +0,0 @@
-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/test/expanded-date-picker.test.ts

@@ -1,201 +0,0 @@
-import type { IAHistogramDateRange } from '@internetarchive/elements/ia-histogram-date-range/ia-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 IAHistogramDateRange;
-    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 IAHistogramDateRange;
-    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/test/icon-overlay.test.ts

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