@internetarchive/collection-browser 0.2.20-alpha.1 → 0.2.21

package/test/collection-browser.test.ts

@@ -7,12 +7,13 @@ import type { CollectionBrowser } from '../src/collection-browser';
 import '../src/collection-browser';
 import {
   defaultSelectedFacets,
-  mockedSelectedFacets,
+  SelectedFacets,
   SortField,
 } from '../src/models';
 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';
 
 describe('Collection Browser', () => {
   it('clear existing filter for facets & sort-bar', async () => {
@@ -32,6 +33,30 @@ describe('Collection Browser', () => {
     expect(el.selectedTitleFilter).to.null;
   });
 
+  it('filterBy creator with analytics', async () => {
+    const mockAnalyticsHandler = new MockAnalyticsHandler();
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
+      </collection-browser>`
+    );
+
+    el.searchContext = 'betaSearchService';
+    el.selectedCreatorFilter = 'A';
+    await el.updateComplete;
+
+    expect(mockAnalyticsHandler.callCategory).to.equal('betaSearchService');
+    expect(mockAnalyticsHandler.callAction).to.equal('filterByCreator');
+    expect(mockAnalyticsHandler.callLabel).to.equal('start-A');
+
+    el.clearFilters();
+    await el.updateComplete;
+
+    expect(el.selectedTitleFilter).to.null;
+    expect(mockAnalyticsHandler.callCategory).to.equal('betaSearchService');
+    expect(mockAnalyticsHandler.callAction).to.equal('filterByCreator');
+    expect(mockAnalyticsHandler.callLabel).to.equal('clear-A');
+  });
+
   it('filterBy title with analytics', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
     const el = await fixture<CollectionBrowser>(
@@ -39,11 +64,12 @@ describe('Collection Browser', () => {
       </collection-browser>`
     );
 
+    el.searchContext = 'beta-search-service';
     el.selectedSort = 'title' as SortField;
     el.selectedTitleFilter = 'A';
     await el.updateComplete;
 
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('filterByTitle');
     expect(mockAnalyticsHandler.callLabel).to.equal('start-A');
 
@@ -51,51 +77,71 @@ describe('Collection Browser', () => {
     await el.updateComplete;
 
     expect(el.selectedTitleFilter).to.null;
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('filterByTitle');
     expect(mockAnalyticsHandler.callLabel).to.equal('clear-A');
   });
 
   it('selected facets with analytics - not negative facets', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
+    const mockedSelectedFacets: SelectedFacets = {
+      subject: {},
+      mediatype: { data: 'selected' },
+      language: {},
+      creator: {},
+      collection: {},
+      year: {},
+    };
+
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`
     );
 
+    el.searchContext = 'search-service';
     el.selectedFacets = mockedSelectedFacets;
     await el.updateComplete;
 
     el.facetClickHandler('mediatype', true, false);
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetSelected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
 
     el.facetClickHandler('mediatype', false, false);
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetDeselected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
   });
 
   it('selected facets with analytics - negative facets', async () => {
     const mockAnalyticsHandler = new MockAnalyticsHandler();
+    const mockedSelectedFacets: SelectedFacets = {
+      subject: {},
+      mediatype: { data: 'selected' },
+      language: {},
+      creator: {},
+      collection: {},
+      year: {},
+    };
+
     const el = await fixture<CollectionBrowser>(
       html`<collection-browser .analyticsHandler=${mockAnalyticsHandler}>
       </collection-browser>`
     );
 
+    el.searchContext = 'beta-search-service';
     el.selectedFacets = mockedSelectedFacets;
     await el.updateComplete;
 
     el.facetClickHandler('mediatype', true, true);
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetNegativeSelected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
 
     el.facetClickHandler('mediatype', false, true);
     expect(el.selectedFacets).to.equal(mockedSelectedFacets);
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('beta-search-service');
     expect(mockAnalyticsHandler.callAction).to.equal('facetNegativeDeselected');
     expect(mockAnalyticsHandler.callLabel).to.equal('mediatype');
   });
@@ -120,9 +166,8 @@ describe('Collection Browser', () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser
-        .searchService=${searchService}
-      ></collection-browser>`
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
     );
 
     el.baseQuery = 'collection:foo';
@@ -187,10 +232,11 @@ describe('Collection Browser', () => {
 
     // testing: `displayMode`
     el.displayMode = 'list-compact';
+    el.searchContext = 'beta-search';
     await el.updateComplete;
     expect(infiniteScrollerRefreshSpy.callCount).to.equal(3);
 
-    expect(mockAnalyticsHandler.callCategory).to.equal('collection-browser');
+    expect(mockAnalyticsHandler.callCategory).to.equal('beta-search');
     expect(mockAnalyticsHandler.callAction).to.equal('displayMode');
     expect(mockAnalyticsHandler.callLabel).to.equal('list-compact');
 
@@ -217,9 +263,8 @@ describe('Collection Browser', () => {
     const searchService = new MockSearchService();
 
     const el = await fixture<CollectionBrowser>(
-      html`<collection-browser
-        .searchService=${searchService}
-      ></collection-browser>`
+      html`<collection-browser .searchService=${searchService}>
+      </collection-browser>`
     );
 
     el.baseQuery = 'single-result';
@@ -229,4 +274,20 @@ describe('Collection Browser', () => {
       el.shadowRoot?.querySelector('#big-results-label')?.textContent
     ).to.contains('Result');
   });
+
+  it('`searchContext` prop helps describe where component is being used', async () => {
+    const el = await fixture<CollectionBrowser>(
+      html`<collection-browser></collection-browser>`
+    );
+
+    expect(el.searchContext).to.equal(analyticsCategories.default);
+
+    el.searchContext = 'unicorn-search';
+    await el.updateComplete;
+
+    expect(el.searchContext).to.equal('unicorn-search');
+
+    // property is reflected as attribute
+    expect(el.getAttribute('searchcontext')).to.equal('unicorn-search');
+  });
 });

package/test/collection-facets.test.ts

@@ -0,0 +1,163 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { Aggregation } from '@internetarchive/search-service';
+import type { CollectionFacets } from '../src/collection-facets';
+import '../src/collection-facets';
+
+describe('Collection Facets', () => {
+  it('renders aggregations as facets', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets></collection-facets>`
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      'user_aggs__terms__field:subjectSorter__size:1': {
+        buckets: [
+          {
+            key: 'foo',
+            doc_count: 5,
+          },
+        ],
+      },
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');
+    expect(facetGroups?.length).to.equal(1);
+
+    const titleFacetGroup = facetGroups?.[0];
+    const facetGroupHeader = titleFacetGroup?.querySelector('h1');
+    expect(facetGroupHeader?.textContent?.trim()).to.equal('Subject');
+
+    const titleFacetRow = titleFacetGroup?.querySelector('.facet-row');
+    expect(titleFacetRow?.textContent?.trim()).to.satisfy((text: string) =>
+      /^foo\s*5$/.test(text)
+    );
+  });
+
+  it('renders multiple aggregation types', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets></collection-facets>`
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      'user_aggs__terms__field:subjectSorter__size:1': {
+        buckets: [
+          {
+            key: 'foo',
+            doc_count: 5,
+          },
+        ],
+      },
+      'user_aggs__terms__field:mediatypeSorter__size:1': {
+        buckets: [
+          {
+            key: 'bar',
+            doc_count: 10,
+          },
+        ],
+      },
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const facetGroups = el.shadowRoot?.querySelectorAll('.facet-group');
+    expect(facetGroups?.length).to.equal(2);
+  });
+
+  it('renders collection facets as links', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets></collection-facets>`
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      'user_aggs__terms__field:collection__size:1': {
+        buckets: [
+          {
+            key: 'foo',
+            doc_count: 5,
+          },
+        ],
+      },
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const collectionName = el.shadowRoot?.querySelector(
+      'async-collection-name'
+    );
+    expect(collectionName?.parentElement).to.be.instanceOf(HTMLAnchorElement);
+    expect(collectionName?.parentElement?.getAttribute('href')).to.equal(
+      '/details/foo'
+    );
+  });
+
+  it('renders non-collection facets without links', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets></collection-facets>`
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      'user_aggs__terms__field:subjectSorter__size:1': {
+        buckets: [
+          {
+            key: 'foo',
+            doc_count: 5,
+          },
+        ],
+      },
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const collectionName = el.shadowRoot?.querySelector(
+      'async-collection-name'
+    );
+    expect(collectionName?.parentElement).to.not.be.instanceOf(
+      HTMLAnchorElement
+    );
+  });
+
+  it('toggles selected facets on click', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets></collection-facets>`
+    );
+
+    const aggs: Record<string, Aggregation> = {
+      'user_aggs__terms__field:subjectSorter__size:1': {
+        buckets: [
+          {
+            key: 'foo',
+            doc_count: 5,
+          },
+        ],
+      },
+    };
+
+    el.aggregations = aggs;
+    await el.updateComplete;
+
+    const checkbox = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(checkbox.checked).to.be.false;
+
+    // Select the facet
+    checkbox?.click();
+    await el.updateComplete;
+
+    expect(el.selectedFacets?.subject.foo).to.equal('selected');
+
+    // Unselect the facet
+    checkbox?.click();
+    await el.updateComplete;
+
+    expect(el.selectedFacets?.subject.foo).to.be.undefined;
+  });
+});