@internetarchive/collection-browser 1.14.17-alpha.3 → 1.14.17-alpha.30

package/test/collection-browser.test.ts

@@ -283,9 +283,9 @@ describe('Collection Browser', () => {
     const facets = el.shadowRoot?.querySelector('collection-facets');
     const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
-    expect(facets).to.exist;
-    expect(sortBar).to.exist;
-    expect(infiniteScroller).to.exist;
+    expect(facets, 'facets').to.exist;
+    expect(sortBar, 'sort bar').to.exist;
+    expect(infiniteScroller, 'infinite scroller').to.exist;
   });
 
   it('queries the search service when given a base query', async () => {
@@ -449,6 +449,25 @@ describe('Collection Browser', () => {
     expect(el.searchType).to.equal(SearchType.FULLTEXT);
   });
 
+  it('can construct tile models with many fields present', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'many-fields';
+    await el.updateComplete;
+    await el.initialSearchComplete;
+
+    const cellTemplate = el.cellForIndex(0);
+    expect(cellTemplate).to.exist;
+
+    const cell = await fixture<TileDispatcher>(cellTemplate!);
+    expect(cell).to.exist;
+  });
+
   it('applies loggedin flag to tile models if needed', async () => {
     const searchService = new MockSearchService();
 
@@ -785,11 +804,13 @@ describe('Collection Browser', () => {
     await el.updateComplete;
     await nextTick();
 
-    const sortBar = el.shadowRoot?.querySelector('sort-filter-bar');
+    const sortBar = el.shadowRoot?.querySelector(
+      '#content-container sort-filter-bar'
+    );
     const sortSelector = sortBar?.shadowRoot?.querySelector(
       '#desktop-sort-selector'
     );
-    expect(sortSelector).to.exist;
+    expect(sortSelector, 'sort bar').to.exist;
 
     // Click the title sorter
     [...(sortSelector?.children as HTMLCollection & Iterable<any>)] // tsc doesn't know children is iterable
@@ -896,7 +917,7 @@ describe('Collection Browser', () => {
     el.sortDirection = 'asc';
     el.selectedCreatorFilter = 'X';
     await el.updateComplete;
-    await el.initialSearchComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('first-creator');
     expect(searchService.searchParams?.filters?.firstCreator?.X).to.equal(
@@ -905,7 +926,7 @@ describe('Collection Browser', () => {
 
     el.baseQuery = 'collection:foo';
     await el.updateComplete;
-    await el.initialSearchComplete;
+    await nextTick();
 
     expect(searchService.searchParams?.query).to.equal('collection:foo');
     expect(searchService.searchParams?.filters?.firstCreator).not.to.exist;
@@ -914,7 +935,10 @@ describe('Collection Browser', () => {
   it('sets date range query when date picker selection changed', async () => {
     const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser .searchService=${searchService}>
+      html`<collection-browser
+        .searchService=${searchService}
+        .suppressPlaceholders=${true}
+      >
       </collection-browser>`
     );
 
@@ -933,7 +957,8 @@ describe('Collection Browser', () => {
     const histogram = facets?.shadowRoot?.querySelector(
       'histogram-date-range'
     ) as HistogramDateRange;
-    expect(histogram).to.exist;
+
+    expect(histogram, 'histogram exists').to.exist;
 
     // Enter a new min date into the date picker
     const minDateInput = histogram.shadowRoot?.querySelector(
@@ -1133,8 +1158,7 @@ describe('Collection Browser', () => {
     infiniteScroller.scrollToCell = spy;
 
     await el.goToPage(1);
-
-    expect(spy.callCount).to.equal(1);
+    expect(spy.callCount, 'scroll to page fires once').to.equal(1);
 
     infiniteScroller.scrollToCell = oldScrollToCell;
   });
@@ -1211,18 +1235,30 @@ describe('Collection Browser', () => {
     // testing: `loggedIn`
     el.loggedIn = true;
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.called).to.be.true;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(1);
+
+    expect(infiniteScrollerRefreshSpy.called, 'Infinite Scroller Refresh').to.be
+      .true;
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      'Infinite Scroller Refresh call count'
+    ).to.equal(1);
 
     el.loggedIn = false;
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(2);
+
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      '2nd Infinite Scroller Refresh'
+    ).to.equal(2);
 
     // testing: `displayMode`
     el.displayMode = 'list-compact';
     el.searchContext = 'beta-search';
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      '3rd Infinite Scroller Refresh'
+    ).to.equal(3);
 
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search');
     expect(mockAnalyticsHandler.callAction).to.equal('displayMode');
@@ -1230,7 +1266,10 @@ describe('Collection Browser', () => {
 
     el.displayMode = 'list-detail';
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(4);
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      '4th Infinite Scroller Refresh'
+    ).to.equal(4);
 
     expect(mockAnalyticsHandler.callCategory).to.equal('beta-search');
     expect(mockAnalyticsHandler.callAction).to.equal('displayMode');
@@ -1239,12 +1278,18 @@ describe('Collection Browser', () => {
     // testing: `baseNavigationUrl`
     el.baseNavigationUrl = 'https://funtestsite.com';
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(5);
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      '5th Infinite Scroller Refresh'
+    ).to.equal(5);
 
     // testing: `baseImageUrl`
     el.baseImageUrl = 'https://funtestsiteforimages.com';
     await el.updateComplete;
-    expect(infiniteScrollerRefreshSpy.callCount).to.equal(6);
+    expect(
+      infiniteScrollerRefreshSpy.callCount,
+      '6th Infinite Scroller Refresh'
+    ).to.equal(6);
   });
 
   it('query the search service for single result', async () => {
@@ -1401,9 +1446,6 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    await el.initialSearchComplete;
-    await el.updateComplete;
-
     el.baseQuery = 'bar';
     await el.updateComplete;
 
@@ -1439,9 +1481,6 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
-    await el.initialSearchComplete;
-    await el.updateComplete;
-
     el.withinCollection = 'bar';
     await el.updateComplete;
 
@@ -1562,10 +1601,16 @@ describe('Collection Browser', () => {
     // Remove checked tiles and verify that we only kept the second tile
     el.removeCheckedTiles();
     await el.updateComplete;
-    tiles = infiniteScroller!.shadowRoot?.querySelectorAll('tile-dispatcher');
+    expect(el?.dataSource?.size, 'data source count').to.equal(1);
+
+    tiles = el.shadowRoot
+      ?.querySelector('infinite-scroller')!
+      .shadowRoot?.querySelectorAll('tile-dispatcher');
     expect(tiles).to.exist;
-    expect(tiles?.length).to.equal(1);
-    expect((tiles![0] as TileDispatcher).model?.identifier).to.equal('bar');
+    expect(
+      tiles!.length,
+      'tile count after `el.removeCheckedTiles()`'
+    ).to.equal(1);
   });
 
   it('can check/uncheck all tiles', async () => {

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

@@ -80,10 +80,12 @@ describe('More facets content', () => {
     );
 
     el.facetKey = 'collection';
-    el.query = 'title:hello';
+    el.query = 'collection-aggregations';
     await el.updateComplete;
 
-    expect(searchService.searchParams?.query).to.equal('title:hello');
+    expect(searchService.searchParams?.query).to.equal(
+      'collection-aggregations'
+    );
   });
 
   it('queries for more facets using search service within a collection (no query)', async () => {

package/test/item-image.test.ts

@@ -2,47 +2,45 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit';
 
-import type { TileModel } from '../src/models';
+import { TileModel } from '../src/models';
 import type { ItemImage } from '../src/tiles/item-image';
 
 import '../src/tiles/item-image';
 
 const baseImageUrl = 'https://archive.org';
-const testBookModel: TileModel = {
-  checked: false,
-  collections: [],
-  commentCount: 0,
-  creators: [],
-  favCount: 0,
-  identifier: '18730130BloomfieldRecordCompleteIssue',
-  itemCount: 0,
-  mediatype: 'texts',
-  subjects: [],
-  title: 'Sample Waveform',
-  viewCount: 0,
-  loginRequired: false,
-  contentWarning: false,
-  collectionFilesCount: 0,
-  collectionSize: 0,
-};
-
-const testAudioModel: TileModel = {
-  checked: false,
-  collections: [],
-  commentCount: 0,
-  creators: [],
-  favCount: 0,
-  identifier: 'dwd2015-01-24',
-  itemCount: 0,
-  mediatype: 'audio',
-  subjects: [],
-  title: 'Sample Waveform',
-  viewCount: 0,
-  loginRequired: false,
-  contentWarning: false,
-  collectionFilesCount: 0,
-  collectionSize: 0,
-};
+const testBookModel: TileModel = new TileModel({});
+testBookModel.checked = false;
+testBookModel.collections = [];
+testBookModel.commentCount = 0;
+testBookModel.creators = [];
+testBookModel.favCount = 0;
+testBookModel.identifier = '18730130BloomfieldRecordCompleteIssue';
+testBookModel.itemCount = 0;
+testBookModel.mediatype = 'texts';
+testBookModel.subjects = [];
+testBookModel.title = 'Sample Waveform';
+testBookModel.viewCount = 0;
+testBookModel.loginRequired = false;
+testBookModel.contentWarning = false;
+testBookModel.collectionFilesCount = 0;
+testBookModel.collectionSize = 0;
+
+const testAudioModel: TileModel = new TileModel({});
+testAudioModel.checked = false;
+testAudioModel.collections = [];
+testAudioModel.commentCount = 0;
+testAudioModel.creators = [];
+testAudioModel.favCount = 0;
+testAudioModel.identifier = 'dwd2015-01-24';
+testAudioModel.itemCount = 0;
+testAudioModel.mediatype = 'audio';
+testAudioModel.subjects = [];
+testAudioModel.title = 'Sample Waveform';
+testAudioModel.viewCount = 0;
+testAudioModel.loginRequired = false;
+testAudioModel.contentWarning = false;
+testAudioModel.collectionFilesCount = 0;
+testAudioModel.collectionSize = 0;
 
 describe('ItemImage component', () => {
   it('should render initial component', async () => {

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

@@ -49,6 +49,68 @@ export const getMockSuccessSingleResult: () => Result<
   },
 });
 
+export const getMockSuccessManyFields: () => Result<
+  SearchResponse,
+  SearchServiceError
+> = () => ({
+  success: {
+    request: {
+      kind: 'hits',
+      clientParameters: {
+        user_query: 'many-fields',
+        sort: [],
+      },
+      backendRequests: {
+        primary: {
+          kind: 'hits',
+          finalized_parameters: {
+            user_query: 'many-fields',
+            sort: [],
+          },
+        },
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            avg_rating: 3.5,
+            collection: ['foo', 'bar', 'no-preview', 'loggedin'],
+            collection_files_count: 123,
+            collection_size: 234,
+            creator: ['baz', 'boop'],
+            date: '2010-01-03T01:23:45Z',
+            addeddate: '2010-01-01T01:23:45Z',
+            publicdate: '2010-01-02T01:23:45Z',
+            reviewdate: '2010-01-04T01:23:45Z',
+            description: 'foo bar baz',
+            downloads: 246,
+            issue: 1,
+            item_count: 20,
+            mediatype: 'texts',
+            num_favorites: 12,
+            num_reviews: 23,
+            source: 'foo bar',
+            subject: ['baz', 'quux'],
+            title: 'Foo Bar',
+            volume: 2,
+            week: 50,
+            __href__: 'https://archive.org/details/foo',
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+});
+
 export const getMockSuccessWithYearHistogramAggs: () => Result<
   SearchResponse,
   SearchServiceError
@@ -408,6 +470,10 @@ export const getMockSuccessWithCollectionAggregations: () => Result<
           ],
         }),
       },
+      collection_titles: {
+        foo: 'Foo',
+        bar: 'Bar',
+      },
     },
     responseHeader: {
       succeeded: true,

package/test/sort-filter-bar/sort-filter-bar.test.ts

@@ -1,5 +1,6 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
 import { html } from 'lit';
 import type { IaDropdown } from '@internetarchive/ia-dropdown';
 import { SharedResizeObserver } from '@internetarchive/shared-resize-observer';
@@ -19,11 +20,16 @@ describe('Sort selector default buttons', async () => {
     '#desktop-sort-selector'
   );
 
-  before(async () => {
+  beforeEach(async () => {
     el.resizeObserver = new SharedResizeObserver();
     await el.updateComplete;
   });
 
+  afterEach(async () => {
+    el.resizeObserver = undefined;
+    await el.updateComplete;
+  });
+
   it('should render basic component', async () => {
     expect(sortSelectorContainer).to.exist;
     expect(desktopSortSelector).to.exist;
@@ -617,15 +623,55 @@ describe('Sort/filter bar mobile view', () => {
     expect(backdrop).not.to.exist;
   });
 
-  it('shows loansTab top-bar slot', async () => {
+  it('shows loansTab top-bar slot Default View', async () => {
+    const resizeStub = new SharedResizeObserver();
+    const addSpy = sinon.spy(resizeStub, 'addObserver');
+    const removeSpy = sinon.spy(resizeStub, 'removeObserver');
+
     const el = await fixture<SortFilterBar>(html`
-      <sort-filter-bar></sort-filter-bar>
+      <sort-filter-bar .resizeObserver=${resizeStub}></sort-filter-bar>
+    `);
+
+    // this element exists
+    expect(el?.shadowRoot?.querySelector('#sort-selector-container')).to.exist;
+
+    // loads & unloads twice when [re]setting ResizeObserver
+    expect(addSpy.callCount).to.equal(2);
+
+    const resizeStub2 = new SharedResizeObserver();
+    el.resizeObserver = resizeStub2;
+    await el.updateComplete;
+    expect(removeSpy.callCount).to.equal(2);
+  });
+
+  it('shows loansTab top-bar slot Custom Slotted View', async () => {
+    const resizeStub = new SharedResizeObserver();
+    const addSpy = sinon.spy(resizeStub, 'addObserver');
+    const removeSpy = sinon.spy(resizeStub, 'removeObserver');
+
+    const el = await fixture<SortFilterBar>(html`
+      <sort-filter-bar
+        .resizeObserver=${resizeStub}
+        .showLoansTopBar=${true}
+      ></sort-filter-bar>
     `);
 
-    el.showLoansTopBar = true;
     await el.updateComplete;
 
+    // slot exists
     const loansTabSlot = el?.shadowRoot?.querySelector('slot');
     expect(loansTabSlot).to.exist;
+
+    // sort bar does not exist
+    expect(el?.shadowRoot?.querySelector('#sort-selector-container')).to.not
+      .exist;
+
+    const resizeStub2 = new SharedResizeObserver();
+    el.resizeObserver = resizeStub2;
+    await el.updateComplete;
+
+    // there's no need for resize observer
+    expect(addSpy.callCount).to.equal(0);
+    expect(removeSpy.callCount).to.equal(0);
   });
 });

package/test/tiles/hover/hover-pane-controller.test.ts

@@ -9,6 +9,7 @@ import {
   HoverPaneProviderInterface,
 } from '../../../src/tiles/hover/hover-pane-controller';
 import type { TileHoverPane } from '../../../src/tiles/hover/tile-hover-pane';
+import { TileModel } from '../../../src/models';
 
 @customElement('host-element')
 class HostElement extends LitElement implements HoverPaneProviderInterface {
@@ -33,24 +34,25 @@ class HostElement extends LitElement implements HoverPaneProviderInterface {
   }
 
   getHoverPaneProps(): HoverPaneProperties {
+    const tileModel = new TileModel({});
+    tileModel.checked = false;
+    tileModel.collectionFilesCount = 1;
+    tileModel.collections = ['foo', 'bar'];
+    tileModel.collectionSize = 1;
+    tileModel.commentCount = 1;
+    tileModel.contentWarning = false;
+    tileModel.creators = ['foo', 'bar'];
+    tileModel.favCount = 1;
+    tileModel.identifier = 'foo';
+    tileModel.itemCount = 1;
+    tileModel.loginRequired = false;
+    tileModel.mediatype = 'data';
+    tileModel.subjects = ['foo', 'bar'];
+    tileModel.title = 'foo';
+    tileModel.viewCount = 1;
+
     return {
-      model: {
-        checked: false,
-        collectionFilesCount: 1,
-        collections: ['foo', 'bar'],
-        collectionSize: 1,
-        commentCount: 1,
-        contentWarning: false,
-        creators: ['foo', 'bar'],
-        favCount: 1,
-        identifier: 'foo',
-        itemCount: 1,
-        loginRequired: false,
-        mediatype: 'data',
-        subjects: ['foo', 'bar'],
-        title: 'foo',
-        viewCount: 1,
-      },
+      model: tileModel,
       loggedIn: false,
       sortParam: null,
     };