@internetarchive/collection-browser 1.14.9-alpha1 → 1.14.9-alpha10

package/test/collection-facets/facet-row.test.ts

@@ -0,0 +1,328 @@
+import { expect, fixture } from '@open-wc/testing';
+import sinon from 'sinon';
+import { html } from 'lit';
+import type { FacetRow } from '../../src/collection-facets/facet-row';
+import '../../src/collection-facets/facet-row';
+import type { FacetState } from '../../src/models';
+import { MockCollectionNameCache } from '../mocks/mock-collection-name-cache';
+
+describe('Facet row', () => {
+  it('renders nothing if no bucket provided', async () => {
+    const el = await fixture<FacetRow>(
+      html`<facet-row .facetType=${'subject'}></facet-row>`
+    );
+
+    expect(el.shadowRoot?.querySelector('.facet-row-container')).not.to.exist;
+  });
+
+  it('renders nothing if no facet type provided', async () => {
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row .bucket=${bucket}></facet-row>`
+    );
+
+    expect(el.shadowRoot?.querySelector('.facet-row-container')).not.to.exist;
+  });
+
+  it('renders provided bucket as facet row', async () => {
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row .facetType=${'subject'} .bucket=${bucket}></facet-row>`
+    );
+
+    expect(el.shadowRoot?.querySelector('.facet-row-container')).to.exist;
+    expect(
+      el.shadowRoot?.querySelectorAll('input[type="checkbox"]')
+    ).to.have.length(2);
+    expect(el.shadowRoot?.querySelectorAll('label')).to.have.length(2);
+
+    expect(el.shadowRoot?.textContent?.trim()).to.match(/^foo\s*5$/);
+  });
+
+  it('renders locale-appropriate facet count', async () => {
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 54321,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row .facetType=${'subject'} .bucket=${bucket}></facet-row>`
+    );
+
+    const facetCount = el.shadowRoot?.querySelector('.facet-count');
+    expect(facetCount?.textContent).to.equal('54,321');
+  });
+
+  it('renders selected facets with checked checkbox', async () => {
+    const bucket = {
+      key: 'foo',
+      state: 'selected' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row .facetType=${'subject'} .bucket=${bucket}></facet-row>`
+    );
+
+    // "Positive" checkbox is checked; "Negative" checkbox is not checked
+    const selectCheckbox = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    const hideCheckbox = el.shadowRoot?.querySelector(
+      '.hide-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(selectCheckbox?.checked).to.be.true;
+    expect(hideCheckbox?.checked).to.be.false;
+
+    // Eye icon is not in its active state
+    expect(
+      el.shadowRoot?.querySelector('.hide-facet-icon')
+    ).to.exist.and.satisfy(
+      (icon: HTMLElement) => !icon.classList.contains('active')
+    );
+  });
+
+  it('renders hidden facets with closed eye icon', async () => {
+    const bucket = {
+      key: 'foo',
+      state: 'hidden' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row .facetType=${'subject'} .bucket=${bucket}></facet-row>`
+    );
+
+    // "Positive" checkbox is not checked; "Negative" checkbox is checked
+    const selectCheckbox = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    const hideCheckbox = el.shadowRoot?.querySelector(
+      '.hide-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(selectCheckbox?.checked).to.be.false;
+    expect(hideCheckbox?.checked).to.be.true;
+
+    // Eye icon is in its "active" state
+    expect(
+      el.shadowRoot?.querySelector('.hide-facet-icon')
+    ).to.exist.and.satisfy((icon: HTMLElement) =>
+      icon.classList.contains('active')
+    );
+  });
+
+  it('renders collection facets as links', async () => {
+    const collectionNameCache = new MockCollectionNameCache();
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'collection'}
+        .bucket=${bucket}
+        .collectionNameCache=${collectionNameCache}
+      ></facet-row>`
+    );
+
+    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('does not render non-collection facets as links', async () => {
+    const collectionNameCache = new MockCollectionNameCache();
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        .collectionNameCache=${collectionNameCache}
+      ></facet-row>`
+    );
+
+    expect(el.shadowRoot?.querySelector('a:link')).not.to.exist;
+  });
+
+  it('emits event when facet checkbox is clicked', async () => {
+    const facetClickSpy = sinon.spy();
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        @facetClick=${facetClickSpy}
+      ></facet-row>`
+    );
+
+    const positiveFacetCheck = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(positiveFacetCheck).to.exist;
+    positiveFacetCheck.click();
+
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: false,
+    });
+  });
+
+  it('emits event when facet checkbox is unchecked', async () => {
+    const facetClickSpy = sinon.spy();
+    const bucket = {
+      key: 'foo',
+      state: 'selected' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        @facetClick=${facetClickSpy}
+      ></facet-row>`
+    );
+
+    const positiveFacetCheck = el.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(positiveFacetCheck).to.exist;
+    positiveFacetCheck.click();
+
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: false,
+    });
+  });
+
+  it('emits event when facet negative icon is clicked', async () => {
+    const facetClickSpy = sinon.spy();
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        @facetClick=${facetClickSpy}
+      ></facet-row>`
+    );
+
+    const negativeFacetIcon = el.shadowRoot?.querySelector(
+      '.hide-facet-icon'
+    ) as HTMLLabelElement;
+    expect(negativeFacetIcon).to.exist;
+    negativeFacetIcon.click();
+
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: true,
+    });
+  });
+
+  it('emits event when facet negative icon is unchecked', async () => {
+    const facetClickSpy = sinon.spy();
+    const bucket = {
+      key: 'foo',
+      state: 'hidden' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        @facetClick=${facetClickSpy}
+      ></facet-row>`
+    );
+
+    const negativeFacetIcon = el.shadowRoot?.querySelector(
+      '.hide-facet-icon'
+    ) as HTMLLabelElement;
+    expect(negativeFacetIcon).to.exist;
+    negativeFacetIcon.click();
+
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: true,
+    });
+  });
+
+  it('selects/deselects facet when label is clicked', async () => {
+    const facetClickSpy = sinon.spy();
+    const bucket = {
+      key: 'foo',
+      state: 'none' as FacetState,
+      count: 5,
+    };
+
+    const el = await fixture<FacetRow>(
+      html`<facet-row
+        .facetType=${'subject'}
+        .bucket=${bucket}
+        @facetClick=${facetClickSpy}
+      ></facet-row>`
+    );
+
+    const facetLabel = el.shadowRoot?.querySelector(
+      '.facet-info-display'
+    ) as HTMLLabelElement;
+    expect(facetLabel).to.exist;
+
+    // Select facet by clicking label
+    facetLabel.click();
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: false,
+    });
+
+    // Deselect facet by clicking label
+    facetLabel.click();
+    expect(facetClickSpy.callCount).to.equal(2);
+    expect(facetClickSpy.lastCall.args[0]?.detail).to.deep.equal({
+      facetType: 'subject',
+      bucket,
+      negative: false,
+    });
+  });
+});

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

@@ -3,9 +3,10 @@ import sinon from 'sinon';
 import { html } from 'lit';
 import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
 import '../../src/collection-facets/facets-template';
-import { getDefaultSelectedFacets, FacetEventDetails } from '../../src/models';
+import type { FacetRow } from '../../src/collection-facets/facet-row';
+import type { FacetGroup } from '../../src/models';
 
-const facetGroup = {
+const facetGroup: FacetGroup = {
   title: 'Media Type',
   key: 'mediatype',
   buckets: [
@@ -24,7 +25,7 @@ describe('Render facets', () => {
     );
     await el.updateComplete;
 
-    expect(el.shadowRoot?.querySelector('.facet-row')).to.exist;
+    expect(el.shadowRoot?.querySelector('facet-row')).to.exist;
   });
 
   it('facets render on page', async () => {
@@ -34,7 +35,6 @@ describe('Render facets', () => {
         .renderOn=${'page'}
       ></facets-template>`
     );
-    await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.facets-on-page')).to.exist;
   });
@@ -46,158 +46,120 @@ describe('Render facets', () => {
         .renderOn=${'modal'}
       ></facets-template>`
     );
-    await el.updateComplete;
 
     expect(el.shadowRoot?.querySelector('.facets-on-modal')).to.exist;
   });
 
-  it('find facet-title and facet-count for particular facet group', async () => {
+  it('applies correct bucket values to facet row', 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).to.equal(
-      'audio'
-    );
-    expect(
-      facetInfo?.querySelector('.facet-count')?.textContent?.trim()
-    ).to.equal('1,001');
-  });
+    const facetRows = el.shadowRoot?.querySelectorAll('facet-row');
+    expect(facetRows?.length).to.equal(facetGroup.buckets.length);
 
-  it('find the hidden facet item', async () => {
-    const selectedFacets = { ...facetGroup };
-    selectedFacets.buckets[2].state = 'hidden'; // hide 'texts' mediatype
+    facetRows?.forEach((elmt, i) => {
+      const facetRow = elmt as FacetRow;
+      expect(facetRow).to.exist;
+      expect(facetRow.bucket).to.equal(facetGroup.buckets[i]);
+      expect(facetRow.facetType).to.equal(facetGroup.key);
+    });
+  });
 
+  it('emits facet click and change events when a facet is selected/deselected', async () => {
+    const facetClickSpy = sinon.spy();
+    const facetChangeSpy = sinon.spy();
     const el = await fixture<FacetsTemplate>(
       html`<facets-template
         .facetGroup=${facetGroup}
-        .selectedFacets=${selectedFacets}
+        @facetClick=${facetClickSpy}
+        @selectedFacetsChanged=${facetChangeSpy}
       ></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 facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
+    expect(facetRow).to.exist;
 
-    const el = await fixture<FacetsTemplate>(
-      html`<facets-template
-        .facetGroup=${facetGroup}
-        .selectedFacets=${selectedFacets}
-      ></facets-template>`
-    );
-    await el.updateComplete;
+    const facetSelectCheck = facetRow.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
+    ) as HTMLInputElement;
+    expect(facetSelectCheck).to.exist;
 
-    const selectedFacet =
-      el.shadowRoot?.querySelectorAll('.hide-facet-icon')[0];
+    facetSelectCheck.click();
+    expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetChangeSpy.callCount).to.equal(1);
+    expect(facetRow.bucket?.state).to.equal('selected');
 
-    // check title attribute for 'movies' mediatype
-    expect(selectedFacet?.getAttribute('title')).equal(
-      'Hide mediatype: movies'
-    );
+    facetSelectCheck.click();
+    expect(facetClickSpy.callCount).to.equal(2);
+    expect(facetChangeSpy.callCount).to.equal(2);
+    expect(facetRow.bucket?.state).to.equal('none');
   });
 
-  it('emits facetClick events for normal facets', async () => {
+  it('emits facet click and change events when a facet is negated/un-negated', async () => {
     const facetClickSpy = sinon.spy();
-    const mediatypeGroup = {
-      title: 'Media Type',
-      key: 'mediatype',
-      buckets: [
-        { displayText: 'audio', key: 'audio', count: 42, state: 'none' },
-      ],
-    };
-    const selectedFacets = getDefaultSelectedFacets();
+    const facetChangeSpy = sinon.spy();
     const el = await fixture<FacetsTemplate>(
       html`<facets-template
-        .facetGroup=${mediatypeGroup}
-        .selectedFacets=${selectedFacets}
+        .facetGroup=${facetGroup}
         @facetClick=${facetClickSpy}
+        @selectedFacetsChanged=${facetChangeSpy}
       ></facets-template>`
     );
 
-    const checkbox = el.shadowRoot?.querySelector(
-      '.select-facet-checkbox'
+    const facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
+    expect(facetRow).to.exist;
+
+    const facetNegateCheck = facetRow.shadowRoot?.querySelector(
+      '.hide-facet-checkbox'
     ) as HTMLInputElement;
-    expect(checkbox).to.exist;
+    expect(facetNegateCheck).to.exist;
 
-    // Select it
-    checkbox.click();
-    await el.updateComplete;
+    facetNegateCheck.click();
     expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetChangeSpy.callCount).to.equal(1);
+    expect(facetRow.bucket?.state).to.equal('hidden');
 
-    const selectEvent = facetClickSpy
-      .args[0][0] as CustomEvent<FacetEventDetails>;
-    expect(selectEvent).to.exist;
-    expect(selectEvent?.detail?.key).to.equal('mediatype');
-    expect(selectEvent?.detail?.state).to.equal('selected');
-    expect(selectEvent?.detail?.negative).to.be.false;
-
-    // Unselect it
-    checkbox.click();
-    await el.updateComplete;
+    facetNegateCheck.click();
     expect(facetClickSpy.callCount).to.equal(2);
-
-    const unselectEvent = facetClickSpy
-      .args[1][0] as CustomEvent<FacetEventDetails>;
-    expect(unselectEvent).to.exist;
-    expect(unselectEvent?.detail?.key).to.equal('mediatype');
-    expect(unselectEvent?.detail?.state).to.equal('none');
-    expect(unselectEvent?.detail?.negative).to.be.false;
+    expect(facetChangeSpy.callCount).to.equal(2);
+    expect(facetRow.bucket?.state).to.equal('none');
   });
 
-  it('emits facetClick events for negative facets', async () => {
+  it('emits facet click and change events when a pre-selected facet is deselected', async () => {
     const facetClickSpy = sinon.spy();
-    const mediatypeGroup = {
-      title: 'Media Type',
-      key: 'mediatype',
-      buckets: [
-        { displayText: 'audio', key: 'audio', count: 42, state: 'none' },
-      ],
-    };
-    const selectedFacets = getDefaultSelectedFacets();
+    const facetChangeSpy = sinon.spy();
+    const facetGroupWithSelection = { ...facetGroup };
+    facetGroupWithSelection.buckets = [
+      { ...facetGroup.buckets[0], state: 'selected' },
+      ...facetGroup.buckets.slice(1),
+    ];
+
     const el = await fixture<FacetsTemplate>(
       html`<facets-template
-        .facetGroup=${mediatypeGroup}
-        .selectedFacets=${selectedFacets}
+        .facetGroup=${facetGroupWithSelection}
         @facetClick=${facetClickSpy}
+        @selectedFacetsChanged=${facetChangeSpy}
       ></facets-template>`
     );
 
-    const checkbox = el.shadowRoot?.querySelector(
-      '.hide-facet-checkbox'
+    const facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
+    expect(facetRow).to.exist;
+
+    const facetSelectCheck = facetRow.shadowRoot?.querySelector(
+      '.select-facet-checkbox'
     ) as HTMLInputElement;
-    expect(checkbox).to.exist;
+    expect(facetSelectCheck).to.exist;
+    expect(facetSelectCheck.checked).to.be.true;
 
-    // Select it
-    checkbox.click();
-    await el.updateComplete;
+    facetSelectCheck.click();
     expect(facetClickSpy.callCount).to.equal(1);
+    expect(facetChangeSpy.callCount).to.equal(1);
+    expect(facetRow.bucket?.state).to.equal('none');
 
-    const selectEvent = facetClickSpy
-      .args[0][0] as CustomEvent<FacetEventDetails>;
-    expect(selectEvent).to.exist;
-    expect(selectEvent?.detail?.key).to.equal('mediatype');
-    expect(selectEvent?.detail?.state).to.equal('hidden');
-    expect(selectEvent?.detail?.negative).to.be.true;
-
-    // Unselect it
-    checkbox.click();
-    await el.updateComplete;
+    facetSelectCheck.click();
     expect(facetClickSpy.callCount).to.equal(2);
-
-    const unselectEvent = facetClickSpy
-      .args[1][0] as CustomEvent<FacetEventDetails>;
-    expect(unselectEvent).to.exist;
-    expect(unselectEvent?.detail?.key).to.equal('mediatype');
-    expect(unselectEvent?.detail?.state).to.equal('none');
-    expect(unselectEvent?.detail?.negative).to.be.true;
+    expect(facetChangeSpy.callCount).to.equal(2);
+    expect(facetRow.bucket?.state).to.equal('selected');
   });
 });