@internetarchive/collection-browser 0.2.21 → 0.2.22

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

@@ -0,0 +1,103 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
+import '../../src/collection-facets/facets-template';
+
+const facetGroup = {
+  title: 'Media Type',
+  key: 'mediatype',
+  buckets: [
+    { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },
+    { displayText: 'movies', key: 'movies', count: 901, state: 'none' },
+    { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },
+    { displayText: 'data', key: 'data', count: 230, state: 'none' },
+    { displayText: 'web', key: 'web', count: 453, state: 'none' },
+  ],
+};
+
+describe('Render facets', () => {
+  it('should render more facets template', async () => {
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template .facetGroup=${facetGroup}></facets-template>`
+    );
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facet-row')).to.exist;
+  });
+
+  it('facets render on page', async () => {
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${facetGroup}
+        .renderOn=${'page'}
+      ></facets-template>`
+    );
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-on-page')).to.exist;
+  });
+
+  it('facets render on modal', async () => {
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${facetGroup}
+        .renderOn=${'modal'}
+      ></facets-template>`
+    );
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-on-modal')).to.exist;
+  });
+
+  it('find facet-title and facet-count for perticular 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(
+      'audio'
+    );
+    expect(facetInfo?.querySelector('.facet-count')?.textContent).equal('1001');
+  });
+
+  it('find the hidden facet item', async () => {
+    const selectedFacets = { ...facetGroup };
+    selectedFacets.buckets[2].state = 'hidden'; // hide 'texts' mediatype
+
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${facetGroup}
+        .selectedFacets=${selectedFacets}
+      ></facets-template>`
+    );
+    await el.updateComplete;
+
+    const hiddenFacet = el.shadowRoot?.querySelectorAll('.hide-facet-icon')[0];
+
+    // check title attribute for 'texts' mediatype
+    expect(hiddenFacet?.getAttribute('title')).equal('Unhide mediatype: texts');
+  });
+
+  it('find the selected facet item', async () => {
+    const selectedFacets = { ...facetGroup };
+    selectedFacets.buckets[1].state = 'selected'; // select 'movies' mediatype
+
+    const el = await fixture<FacetsTemplate>(
+      html`<facets-template
+        .facetGroup=${facetGroup}
+        .selectedFacets=${selectedFacets}
+      ></facets-template>`
+    );
+    await el.updateComplete;
+
+    const selectedFacet =
+      el.shadowRoot?.querySelectorAll('.hide-facet-icon')[0];
+
+    // check title attribute for 'movies' mediatype
+    expect(selectedFacet?.getAttribute('title')).equal(
+      'Hide mediatype: movies'
+    );
+  });
+});

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

@@ -0,0 +1,18 @@
+import { expect } from '@open-wc/testing';
+import { getFacetOptionFromKey } from '../../src/collection-facets/facets-util';
+
+describe('formatCount', () => {
+  // for mediatype aggregate key
+  it('Parse the aggregate key title into the human readable title', () => {
+    expect(
+      getFacetOptionFromKey('user_aggs__terms__field:mediatypeSorter__size:6')
+    ).to.equal('mediatype');
+  });
+
+  // for collection aggregate key
+  it('Parse the aggregate key title into the human readable title', () => {
+    expect(
+      getFacetOptionFromKey('ser_aggs__terms__field:collection__size:12')
+    ).to.equal('collection');
+  });
+});

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

@@ -0,0 +1,146 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import type { Aggregation } from '@internetarchive/search-service';
+import type { MoreFacetsContent } from '../../src/collection-facets/more-facets-content';
+import '../../src/collection-facets/more-facets-content';
+import { MockSearchService } from '../mocks/mock-search-service';
+
+const selectedFacetsGroup = {
+  title: 'Media Type',
+  key: 'mediatype',
+  buckets: [
+    { displayText: 'audio', key: 'audio', count: 1001, state: 'none' },
+    { displayText: 'movies', key: 'movies', count: 901, state: 'none' },
+    { displayText: 'texts', key: 'texts', count: 2101, state: 'none' },
+    { displayText: 'data', key: 'data', count: 230, state: 'none' },
+    { displayText: 'web', key: 'web', count: 453, state: 'none' },
+  ],
+};
+
+const aggregation: Record<string, Aggregation> = {
+  'user_aggs__terms__field:collectionSorter__size:1': {
+    buckets: [
+      {
+        key: 'foo',
+        doc_count: 5,
+      },
+    ],
+  },
+};
+
+describe('More facets content', () => {
+  it('should render more facets template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-content')).to.exist;
+  });
+
+  it('should render more facets loader template', async () => {
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content></more-facets-content>`
+    );
+
+    el.facetsLoading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-loader')).to.exist;
+  });
+
+  it('should render pagination for more facets', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'mediatype';
+    el.facetsLoading = false;
+    el.paginationSize = 6;
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelectorAll('more-facets-pagination')).to.exist;
+  });
+
+  it('query for more facets content using search service', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'collection';
+    el.fullQuery = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+  });
+
+  it('filter raw selectedFacets object', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .selectedFacets=${selectedFacetsGroup}
+      ></more-facets-content>`
+    );
+
+    el.facetKey = 'collection';
+    el.fullQuery = 'title:hello';
+    await el.updateComplete;
+
+    expect(searchService.searchParams?.query).to.equal('title:hello');
+  });
+
+  it('combine selectedFacets and aggregationFacets and render on modal', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+        .selectedFacets=${selectedFacetsGroup}
+        .aggregations=${aggregation}
+      ></more-facets-content>`
+    );
+
+    await el.updateComplete;
+
+    expect(el.facetGroupTitle).to.equal('Collection');
+
+    const facetGroup = el.facetGroup?.shift();
+    expect(facetGroup?.key).to.equal('collection');
+    expect(facetGroup?.title).to.equal('Collection');
+
+    const bucket = facetGroup?.buckets[0];
+    expect(bucket?.key).to.equal('foo');
+    expect(bucket?.count).to.equal(5);
+  });
+
+  it('page number clicked event', async () => {
+    const searchService = new MockSearchService();
+
+    const el = await fixture<MoreFacetsContent>(
+      html`<more-facets-content
+        .searchService=${searchService}
+      ></more-facets-content>`
+    );
+
+    setTimeout(() =>
+      el.dispatchEvent(
+        new CustomEvent('pageNumberClicked', { detail: { page: 15 } })
+      )
+    );
+    const { detail } = await oneEvent(el, 'pageNumberClicked');
+    expect(detail?.page).to.equal(15);
+  });
+});

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

@@ -0,0 +1,202 @@
+/* eslint-disable import/no-duplicates */
+import { expect, fixture, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../../src/collection-facets/more-facets-pagination';
+import type { MoreFacetsPagination } from '../../src/collection-facets/more-facets-pagination';
+
+afterEach(() => {
+  sinon.restore();
+});
+
+describe('More facets pagination', () => {
+  describe('5 pages or less', () => {
+    it('shows all pages', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination .size=${5}></more-facets-pagination>`
+      );
+
+      await el.updateComplete;
+
+      const pageButtons = el.shadowRoot?.querySelectorAll(
+        'button[data-page]'
+      ) as NodeList;
+      expect(pageButtons.length).to.greaterThan(0);
+
+      pageButtons.forEach((button, index) => {
+        expect(button.textContent).to.contain(index + 1);
+      });
+    });
+  });
+
+  it('should render pagination template', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination .size=${10}></more-facets-pagination>`
+    );
+
+    await el.updateComplete;
+
+    expect(el.shadowRoot?.querySelector('.facets-pagination')).to.exist;
+    expect(el.shadowRoot?.querySelector('.arrow-icon')).to.exist;
+  });
+
+  it('should render page numbers', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination .size=${3}></more-facets-pagination>`
+    );
+
+    await el.updateComplete;
+
+    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
+    expect(pageNumberElement).to.exist;
+    expect(pageNumberElement?.querySelectorAll('button').length).to.equal(3);
+  });
+
+  it('check current page and total pages', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`
+    );
+
+    await el.updateComplete;
+
+    const pageNumberElement = el.shadowRoot?.querySelector('.page-numbers');
+    expect(pageNumberElement).to.exist;
+    expect(
+      pageNumberElement
+        ?.querySelectorAll('button')[1]
+        .classList.contains('current')
+    ).to.be.true;
+    expect(el.pages?.length).to.equal(4);
+  });
+
+  it('get page numbers based of size and currentPage', async () => {
+    const el = await fixture<MoreFacetsPagination>(
+      html`<more-facets-pagination
+        .size=${4}
+        .currentPage=${2}
+      ></more-facets-pagination>`
+    );
+
+    await el.updateComplete;
+
+    expect(el.pages?.length).to.equal(4);
+  });
+
+  describe('Selecting a page', () => {
+    it('fires event', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination></more-facets-pagination>`
+      );
+
+      await el.updateComplete;
+
+      setTimeout(() =>
+        el.dispatchEvent(
+          new CustomEvent('pageNumberClicked', { detail: { page: 15 } })
+        )
+      );
+      const { detail } = await oneEvent(el, 'pageNumberClicked');
+      expect(detail?.page).to.equal(15);
+    });
+    it('sets off side effects with `onChange`', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`
+      );
+
+      expect(el.currentPage).to.equal(2); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const pageButton = el.shadowRoot?.querySelector(
+        '.page-numbers > button'
+      ) as HTMLButtonElement;
+      // confirm button isn't selected
+      expect(pageButton.classList.contains('current')).to.be.false;
+      pageButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(1); // brings us back to currentPage
+      // confirm button is selected
+      expect(pageButton.classList.contains('current')).to.be.true;
+    });
+  });
+
+  describe('Using Arrows', () => {
+    it('going backwards', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${2}
+        ></more-facets-pagination>`
+      );
+
+      expect(el.currentPage).to.equal(2); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const rewindButton = el.shadowRoot?.querySelector(
+        '.facets-pagination > button.rewind'
+      ) as HTMLButtonElement;
+      rewindButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(1); // brings us back 1 page
+      // confirm button is selected
+      expect(
+        (
+          el.shadowRoot?.querySelector(
+            '.page-numbers > button[data-page="1"]'
+          ) as HTMLButtonElement
+        ).classList.contains('current')
+      ).to.be.true;
+    });
+
+    it('going forwards', async () => {
+      const el = await fixture<MoreFacetsPagination>(
+        html`<more-facets-pagination
+          .size=${'10'}
+          .currentPage=${5}
+        ></more-facets-pagination>`
+      );
+
+      expect(el.currentPage).to.equal(5); // confirm current page
+
+      const fake1 = sinon.fake();
+      const fake2 = sinon.fake();
+      el.observePageCount = fake1;
+      el.emitPageClick = fake2;
+
+      // select first page button
+      const forwardButton = el.shadowRoot?.querySelector(
+        '.facets-pagination > button.forward'
+      ) as HTMLButtonElement;
+      forwardButton.click();
+
+      await el.updateComplete;
+
+      expect(fake1.callCount).to.equal(1);
+      expect(fake2.callCount).to.equal(1);
+      expect(el.currentPage).to.equal(6); // brings us forward 1 page
+    });
+  });
+});

package/test/collection-facets.test.ts

@@ -1,11 +1,34 @@
 /* eslint-disable import/no-duplicates */
 import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
 import { html } from 'lit';
 import type { Aggregation } from '@internetarchive/search-service';
+import {
+  ModalManager,
+  ModalManagerInterface,
+} from '@internetarchive/modal-manager';
 import type { CollectionFacets } from '../src/collection-facets';
+import '@internetarchive/modal-manager';
 import '../src/collection-facets';
+import type { FacetOption } from '../src/models';
 
 describe('Collection Facets', () => {
+  it('has loader', async () => {
+    const el = await fixture<CollectionFacets>(
+      html`<collection-facets ?facetsLoading=${true}></collection-facets>`
+    );
+
+    expect(
+      el.shadowRoot?.querySelector('#container')?.classList.contains('loading')
+    ).to.be.true;
+
+    el.facetsLoading = false;
+    await el.updateComplete;
+
+    expect(
+      el.shadowRoot?.querySelector('#container')?.classList.contains('loading')
+    ).to.be.false;
+  });
   it('renders aggregations as facets', async () => {
     const el = await fixture<CollectionFacets>(
       html`<collection-facets></collection-facets>`
@@ -24,15 +47,16 @@ describe('Collection Facets', () => {
 
     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');
+    const titleFacetRow = titleFacetGroup
+      ?.querySelector('facets-template')
+      ?.shadowRoot?.querySelector('.facet-row');
+    console.log(titleFacetGroup?.querySelector('facets-template'));
     expect(titleFacetRow?.textContent?.trim()).to.satisfy((text: string) =>
       /^foo\s*5$/.test(text)
     );
@@ -88,9 +112,9 @@ describe('Collection Facets', () => {
     el.aggregations = aggs;
     await el.updateComplete;
 
-    const collectionName = el.shadowRoot?.querySelector(
-      'async-collection-name'
-    );
+    const collectionName = el.shadowRoot
+      ?.querySelector('facets-template')
+      ?.shadowRoot?.querySelector('async-collection-name');
     expect(collectionName?.parentElement).to.be.instanceOf(HTMLAnchorElement);
     expect(collectionName?.parentElement?.getAttribute('href')).to.equal(
       '/details/foo'
@@ -116,48 +140,107 @@ describe('Collection Facets', () => {
     el.aggregations = aggs;
     await el.updateComplete;
 
-    const collectionName = el.shadowRoot?.querySelector(
-      'async-collection-name'
-    );
+    const collectionName = el.shadowRoot
+      ?.querySelector('facets-template')
+      ?.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;
+  describe('More Facets', () => {
+    it('Does not render < allowedFacetCount', 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 moreLink = el.shadowRoot?.querySelector('.more-link');
+      expect(moreLink).to.be.null;
+    });
+    it('Render More Facets', async () => {
+      const el = await fixture<CollectionFacets>(
+        html`<collection-facets
+          .modalManager=${new ModalManager()}
+        ></collection-facets>`
+      );
+
+      const aggs: Record<string, Aggregation> = {
+        'user_aggs__terms__field:subjectSorter__size:1': {
+          buckets: [
+            {
+              key: 'foo',
+              doc_count: 5,
+            },
+            {
+              key: 'fi',
+              doc_count: 5,
+            },
+            {
+              key: 'fum',
+              doc_count: 5,
+            },
+            {
+              key: 'flee',
+              doc_count: 5,
+            },
+            {
+              key: 'wheee',
+              doc_count: 5,
+            },
+            {
+              key: 'whooo',
+              doc_count: 5,
+            },
+            {
+              key: 'boop',
+              doc_count: 5,
+            },
+          ],
+        },
+      };
+
+      el.aggregations = aggs;
+      await el.updateComplete;
+
+      let eventCaught = false;
+      let eventFacet = '';
+      el.addEventListener('showMoreFacets', e => {
+        eventFacet = (e as CustomEvent).detail;
+        eventCaught = true;
+      });
+
+      const moreLink = el.shadowRoot?.querySelector(
+        '.more-link'
+      ) as HTMLButtonElement;
+      expect(moreLink).to.exist; // has link
+
+      const showModalSpy = sinon.spy(
+        el.modalManager as ModalManagerInterface,
+        'showModal'
+      );
+      // let's pop up modal
+      moreLink?.click();
+      await el.updateComplete;
+
+      expect(showModalSpy.callCount).to.equal(1);
+      expect(el.modalManager?.classList.contains('more-search-facets')).to.be
+        .true;
+      expect(eventCaught).to.be.true;
+      expect(eventFacet).to.equal('subject' as FacetOption);
+    });
   });
 });