@internetarchive/collection-browser 0.3.4 → 0.3.5

package/src/tiles/grid/tile-stats.ts

@@ -21,6 +21,18 @@ export class TileStats extends LitElement {
   @property({ type: Number }) commentCount?: number;
 
   render() {
+    const formattedFavCount = formatCount(this.favCount, 'short', 'short');
+    const formattedReviewCount = formatCount(
+      this.commentCount,
+      'short',
+      'short'
+    );
+
+    const uploadsOrViewsTitle =
+      this.mediatype === 'account'
+        ? `${this.itemCount} uploads`
+        : `${this.viewCount} all-time views`;
+
     return html`
       <div class="item-stats">
         <p class="sr-only">
@@ -31,7 +43,7 @@ export class TileStats extends LitElement {
             <p class="sr-only">Mediatype:</p>
             <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
           </li>
-          <li class="col">
+          <li class="col" title="${uploadsOrViewsTitle}">
             ${this.mediatype === 'account' ? uploadIcon : viewsIcon}
             <p class="status-text">
               <span class="sr-only">
@@ -44,18 +56,18 @@ export class TileStats extends LitElement {
               )}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedFavCount} favorites">
             ${favoriteFilledIcon}
             <p class="status-text">
               <span class="sr-only">Favorites:</span>
-              ${formatCount(this.favCount, 'short', 'short')}
+              ${formattedFavCount}
             </p>
           </li>
-          <li class="col">
+          <li class="col" title="${formattedReviewCount} reviews">
             ${reviewsIcon}
             <p class="status-text">
               <span class="sr-only">Reviews:</span>
-              ${formatCount(this.commentCount, 'short', 'short')}
+              ${formattedReviewCount}
             </p>
           </li>
         </ul>
@@ -116,6 +128,7 @@ export class TileStats extends LitElement {
         width: 10px;
         display: block;
         margin: auto;
+        pointer-events: none;
       }
 
       .status-text {

package/src/tiles/list/tile-list-compact.ts

@@ -55,9 +55,7 @@ export class TileListCompact extends LitElement {
           >
           </mediatype-icon>
         </div>
-        <div id="views">
-          ${formatCount(this.model?.viewCount ?? 0, this.formatSize)}
-        </div>
+        <div id="views">${formatCount(this.views ?? 0, this.formatSize)}</div>
       </div>
     `;
   }
@@ -80,6 +78,12 @@ export class TileListCompact extends LitElement {
     }
   }
 
+  private get views(): number | undefined {
+    return this.sortParam?.field === 'week'
+      ? this.model?.weeklyViewCount // weekly views
+      : this.model?.viewCount; // all-time views
+  }
+
   private get classSize(): string {
     if (
       this.mobileBreakpoint &&

package/src/tiles/list/tile-list.ts

@@ -247,8 +247,13 @@ export class TileList extends LitElement {
   }
 
   private get viewsTemplate() {
+    const viewCount =
+      this.sortParam?.field === 'week'
+        ? this.model?.weeklyViewCount // weekly views
+        : this.model?.viewCount; // all-time views
+
     return this.metadataTemplate(
-      `${formatCount(this.model?.viewCount ?? 0, this.formatSize)}`,
+      `${formatCount(viewCount ?? 0, this.formatSize)}`,
       'Views'
     );
   }

package/src/tiles/mediatype-icon.ts

@@ -40,6 +40,7 @@ export class MediatypeIcon extends LitElement {
       <div
         id="icon"
         class="${this.showText ? 'show-text' : 'hide-text'}"
+        title="${config.text}"
         style="--iconFillColor: ${config.color}"
       >
         ${config.icon}
@@ -69,6 +70,7 @@ export class MediatypeIcon extends LitElement {
       svg {
         height: var(--iconHeight, 10px);
         width: var(--iconWidth, 10px);
+        pointer-events: none;
       }
 
       .fill-color {

package/test/collection-browser.test.ts

@@ -16,8 +16,24 @@ import { MockSearchService } from './mocks/mock-search-service';
 import { MockCollectionNameCache } from './mocks/mock-collection-name-cache';
 import { MockAnalyticsHandler } from './mocks/mock-analytics-handler';
 import { analyticsCategories } from '../src/utils/analytics-events';
+import type { TileDispatcher } from '../src/tiles/tile-dispatcher';
 
 describe('Collection Browser', () => {
+  beforeEach(async () => {
+    // Apparently query params set by one test can bleed into other tests.
+    // Since collection browser restores its state from certain query params, we need
+    // to clear these before each test to ensure they run in isolation from one another.
+    const url = new URL(window.location.href);
+    const { searchParams } = url;
+    searchParams.delete('sin');
+    searchParams.delete('sort');
+    searchParams.delete('query');
+    searchParams.delete('page');
+    searchParams.delete('and[]');
+    searchParams.delete('not[]');
+    window.history.replaceState({}, '', url);
+  });
+
   it('clear existing filter for facets & sort-bar', async () => {
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser></collection-browser>`
@@ -153,8 +169,11 @@ describe('Collection Browser', () => {
   });
 
   it('should render with a sort bar, facets, and infinite scroller', async () => {
+    const searchService = new MockSearchService();
+
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser></collection-browser>`
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
     );
 
     el.baseQuery = 'hello';
@@ -227,6 +246,141 @@ describe('Collection Browser', () => {
     ).to.contains('Results');
   });
 
+  it('queries the search service with facets selected/negated', async () => {
+    const searchService = new MockSearchService();
+    const selectedFacets: SelectedFacets = {
+      subject: {
+        foo: {
+          key: 'foo',
+          count: 1,
+          state: 'selected',
+        },
+        bar: {
+          key: 'bar',
+          count: 2,
+          state: 'hidden',
+        },
+      },
+      lending: {},
+      mediatype: {},
+      language: {
+        en: {
+          key: 'en',
+          count: 1,
+          state: 'selected',
+        },
+      },
+      creator: {},
+      collection: {},
+      year: {},
+    };
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    el.selectedFacets = selectedFacets;
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal(
+      'collection:foo AND (subject:("foo" OR -"bar") AND language:("en"))'
+    );
+  });
+
+  it('fails gracefully if no search service provided', async () => {
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser></collection-browser>`
+    );
+
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
+    // This shouldn't throw an error
+    expect(el.fetchPage(2)).to.exist;
+
+    // Should continue showing the empty placeholder
+    expect(el.shadowRoot?.querySelector('empty-placeholder')).to.exist;
+  });
+
+  it('restores search type from URL param', async () => {
+    // Add a sin=TXT param to the URL
+    const url = new URL(window.location.href);
+    url.searchParams.append('sin', 'TXT');
+    window.history.replaceState({}, '', url);
+
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    expect(el.searchType).to.equal(SearchType.FULLTEXT);
+  });
+
+  it('applies loggedin flag to tile models if needed', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'loggedin';
+    await el.updateComplete;
+
+    const cellTemplate = el.cellForIndex(0);
+    expect(cellTemplate).to.exist;
+
+    const cell = await fixture<TileDispatcher>(cellTemplate!);
+    expect(cell).to.exist;
+
+    expect(cell.model?.loginRequired).to.be.true;
+  });
+
+  it('applies no-preview flag to tile models if needed', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'no-preview';
+    await el.updateComplete;
+
+    const cellTemplate = el.cellForIndex(0);
+    expect(cellTemplate).to.exist;
+
+    const cell = await fixture<TileDispatcher>(cellTemplate!);
+    expect(cell).to.exist;
+
+    expect(cell.model?.contentWarning).to.be.true;
+  });
+
+  it('both loggedin and no-preview flags can be set simultaneously', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
+    );
+
+    el.baseQuery = 'loggedin-no-preview';
+    await el.updateComplete;
+
+    const cellTemplate = el.cellForIndex(0);
+    expect(cellTemplate).to.exist;
+
+    const cell = await fixture<TileDispatcher>(cellTemplate!);
+    expect(cell).to.exist;
+
+    expect(cell.model?.loginRequired).to.be.true;
+    expect(cell.model?.contentWarning).to.be.true;
+  });
+
   it('can search on demand if only search type has changed', async () => {
     const searchService = new MockSearchService();
 
@@ -370,8 +524,10 @@ describe('Collection Browser', () => {
   });
 
   it('sets sort properties when user changes sort', async () => {
+    const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser></collection-browser>`
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
     );
 
     expect(el.selectedSort).to.equal(SortField.relevance);
@@ -397,10 +553,16 @@ describe('Collection Browser', () => {
   });
 
   it('scrolls to page', async () => {
+    const searchService = new MockSearchService();
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser></collection-browser>`
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
     );
 
+    // Infinite scroller won't exist unless there's a base query
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
     const infiniteScroller = el.shadowRoot?.querySelector(
       'infinite-scroller'
     ) as InfiniteScroller;
@@ -435,6 +597,10 @@ describe('Collection Browser', () => {
     );
     const infiniteScrollerRefreshSpy = sinon.spy();
 
+    // Infinite scroller won't exist unless there's a base query
+    el.baseQuery = 'collection:foo';
+    await el.updateComplete;
+
     const infiniteScroller = el.shadowRoot?.querySelector('infinite-scroller');
     (infiniteScroller as InfiniteScroller).reload = infiniteScrollerRefreshSpy;
     expect(infiniteScrollerRefreshSpy.called).to.be.false;

package/test/collection-facets/facets-template.test.ts

@@ -49,17 +49,19 @@ describe('Render facets', () => {
     expect(el.shadowRoot?.querySelector('.facets-on-modal')).to.exist;
   });
 
-  it('find facet-title and facet-count for perticular facet group', async () => {
+  it('find facet-title and facet-count for particular facet group', async () => {
     const el = await fixture<FacetsTemplate>(
       html`<facets-template .facetGroup=${facetGroup}></facets-template>`
     );
     await el.updateComplete;
 
     const facetInfo = el.shadowRoot?.querySelector('.facet-info-display');
-    expect(facetInfo?.querySelector('.facet-title')?.textContent).equal(
+    expect(facetInfo?.querySelector('.facet-title')?.textContent).to.equal(
       'audio'
     );
-    expect(facetInfo?.querySelector('.facet-count')?.textContent).equal('1001');
+    expect(
+      facetInfo?.querySelector('.facet-count')?.textContent?.trim()
+    ).to.equal('1,001');
   });
 
   it('find the hidden facet item', async () => {

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

@@ -40,6 +40,113 @@ export const mockSuccessSingleResult: Result<
   },
 };
 
+export const mockSuccessLoggedInResult: Result<
+  SearchResponse,
+  SearchServiceError
+> = {
+  success: {
+    request: {
+      clientParameters: {
+        user_query: 'loggedin',
+        sort: [],
+      },
+      finalizedParameters: {
+        user_query: 'loggedin',
+        sort: [],
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            collection: ['foo', 'loggedin', 'bar'],
+            title: 'foo',
+            mediatype: 'data',
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+};
+
+export const mockSuccessNoPreviewResult: Result<
+  SearchResponse,
+  SearchServiceError
+> = {
+  success: {
+    request: {
+      clientParameters: {
+        user_query: 'no-preview',
+        sort: [],
+      },
+      finalizedParameters: {
+        user_query: 'no-preview',
+        sort: [],
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            collection: ['foo', 'no-preview', 'bar'],
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+};
+
+export const mockSuccessLoggedInAndNoPreviewResult: Result<
+  SearchResponse,
+  SearchServiceError
+> = {
+  success: {
+    request: {
+      clientParameters: {
+        user_query: 'loggedin-no-preview',
+        sort: [],
+      },
+      finalizedParameters: {
+        user_query: 'loggedin-no-preview',
+        sort: [],
+      },
+    },
+    rawResponse: {},
+    response: {
+      totalResults: 1,
+      returnedCount: 1,
+      results: [
+        new ItemHit({
+          fields: {
+            identifier: 'foo',
+            collection: ['foo', 'loggedin', 'no-preview', 'bar'],
+          },
+        }),
+      ],
+    },
+    responseHeader: {
+      succeeded: true,
+      query_time: 0,
+    },
+  },
+};
+
 export const getMockSuccessSingleResultWithSort: (
   resultsSpy: Function
 ) => Result<SearchResponse, SearchServiceError> = (resultsSpy: Function) => ({

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

@@ -10,6 +10,9 @@ import {
   mockSuccessSingleResult,
   mockSuccessMultipleResults,
   getMockSuccessSingleResultWithSort,
+  mockSuccessLoggedInResult,
+  mockSuccessNoPreviewResult,
+  mockSuccessLoggedInAndNoPreviewResult,
 } from './mock-search-responses';
 
 export class MockSearchService implements SearchServiceInterface {
@@ -40,14 +43,19 @@ export class MockSearchService implements SearchServiceInterface {
       });
     }
 
-    if (this.searchParams?.query === 'single-result') {
-      return mockSuccessSingleResult;
+    switch (this.searchParams?.query) {
+      case 'single-result':
+        return mockSuccessSingleResult;
+      case 'loggedin':
+        return mockSuccessLoggedInResult;
+      case 'no-preview':
+        return mockSuccessNoPreviewResult;
+      case 'loggedin-no-preview':
+        return mockSuccessLoggedInAndNoPreviewResult;
+      case 'with-sort':
+        return getMockSuccessSingleResultWithSort(this.resultsSpy);
+      default:
+        return mockSuccessMultipleResults;
     }
-
-    if (this.searchParams?.query === 'with-sort') {
-      return getMockSuccessSingleResultWithSort(this.resultsSpy);
-    }
-
-    return mockSuccessMultipleResults;
   }
 }

package/test/restoration-state-handler.test.ts

@@ -1,3 +1,4 @@
+import { SearchType } from '@internetarchive/search-service';
 import { expect } from '@open-wc/testing';
 import { RestorationStateHandler } from '../src/restoration-state-handler';
 
@@ -13,6 +14,17 @@ describe('Restoration state handler', () => {
     expect(restorationState.baseQuery).to.equal('boop');
   });
 
+  it('should restore full text search type from URL', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?sin=TXT';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.searchType).to.equal(SearchType.FULLTEXT);
+  });
+
   it('should restore page number from URL', async () => {
     const handler = new RestorationStateHandler({ context: 'search' });
 

package/test/tiles/list/tile-list-compact.test.ts

@@ -4,6 +4,7 @@ import { html } from 'lit';
 import type { TileListCompact } from '../../../src/tiles/list/tile-list-compact';
 
 import '../../../src/tiles/list/tile-list-compact';
+import type { TileModel } from '../../../src/models';
 
 describe('List Tile Compact', () => {
   it('should render initial component', async () => {
@@ -35,4 +36,113 @@ describe('List Tile Compact', () => {
 
     expect(creator).to.exist;
   });
+
+  it('should render weekly views when sorting by week', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${{ viewCount: 50, weeklyViewCount: 10 }}
+        .sortParam=${{ field: 'week', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('10');
+  });
+
+  it('should render 0 for views if missing model', async () => {
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact .sortParam=${{ field: 'week', direction: 'desc' }}>
+      </tile-list-compact>
+    `);
+
+    const viewsColumn = el.shadowRoot?.getElementById('views');
+    expect(viewsColumn).to.exist;
+    expect(viewsColumn?.textContent?.trim()).to.equal('0');
+  });
+
+  it('should render published date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-01'),
+      dateArchived: new Date('2011-01-01'),
+      datePublished: new Date('2012-01-01'),
+      dateReviewed: new Date('2013-01-01'),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'date', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2012');
+  });
+
+  it('should render added date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-01'),
+      dateArchived: new Date('2011-01-01'),
+      datePublished: new Date('2012-01-01'),
+      dateReviewed: new Date('2013-01-01'),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'addeddate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2010');
+  });
+
+  it('should render archived date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-01'),
+      dateArchived: new Date('2011-01-01'),
+      datePublished: new Date('2012-01-01'),
+      dateReviewed: new Date('2013-01-01'),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'publicdate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2011');
+  });
+
+  it('should render reviewed date when sorting by it', async () => {
+    const model: Partial<TileModel> = {
+      dateAdded: new Date('2010-01-01'),
+      dateArchived: new Date('2011-01-01'),
+      datePublished: new Date('2012-01-01'),
+      dateReviewed: new Date('2013-01-01'),
+    };
+
+    const el = await fixture<TileListCompact>(html`
+      <tile-list-compact
+        .model=${model}
+        .sortParam=${{ field: 'reviewdate', direction: 'desc' }}
+      >
+      </tile-list-compact>
+    `);
+
+    const dateColumn = el.shadowRoot?.getElementById('date');
+    expect(dateColumn).to.exist;
+    expect(dateColumn?.textContent?.trim()).to.equal('Jan 01, 2013');
+  });
 });