@internetarchive/collection-browser 4.7.1-alpha-webdev9189.0 → 4.8.1-alpha-webdev9189.0

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

@@ -1,421 +0,0 @@
-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';
-
-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);
-
-    const labelText = el.shadowRoot?.querySelector('.facet-info-display');
-    expect(labelText?.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('omits hide button when property is specified (and facet state is not hidden)', async () => {
-    const bucket = {
-      key: 'foo',
-      state: 'none' as FacetState,
-      count: 5,
-    };
-
-    const el = await fixture<FacetRow>(
-      html`<facet-row
-        .facetType=${'subject'}
-        .bucket=${bucket}
-        omitHideButton
-      ></facet-row>`,
-    );
-
-    // Hide button's container is hidden
-    expect(
-      el.shadowRoot
-        ?.querySelector('.hide-facet-container')
-        ?.hasAttribute('hidden'),
-    ).to.be.true;
-  });
-
-  it('does not omit hide button when facet state is hidden, even if property specified', async () => {
-    const bucket = {
-      key: 'foo',
-      state: 'hidden' as FacetState,
-      count: 5,
-    };
-
-    const el = await fixture<FacetRow>(
-      html`<facet-row
-        .facetType=${'subject'}
-        .bucket=${bucket}
-        omitHideButton
-      ></facet-row>`,
-    );
-
-    // Hide button's container is NOT hidden (i.e., we SHOW the hide button like normal)
-    expect(
-      el.shadowRoot
-        ?.querySelector('.hide-facet-container')
-        ?.hasAttribute('hidden'),
-    ).to.be.false;
-  });
-
-  it('renders correct accessible label for unchecked negative facets', 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>`,
-    );
-
-    const hideFacetLabel = el.shadowRoot?.querySelector('.hide-facet-icon');
-    expect(hideFacetLabel?.textContent?.trim()).to.match(/^Hide subject: foo$/);
-  });
-
-  it('renders correct accessible label for checked negative facets', 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>`,
-    );
-
-    const hideFacetLabel = el.shadowRoot?.querySelector('.hide-facet-icon');
-    expect(hideFacetLabel?.textContent?.trim()).to.match(
-      /^Unhide subject: foo$/,
-    );
-  });
-
-  it('renders collection facets as links', async () => {
-    const bucket = {
-      key: 'foo',
-      state: 'none' as FacetState,
-      count: 5,
-    };
-
-    const el = await fixture<FacetRow>(
-      html`<facet-row
-        .facetType=${'collection'}
-        .bucket=${bucket}
-      ></facet-row>`,
-    );
-
-    const collectionName = el.shadowRoot?.querySelector(
-      '.facet-title > a:link',
-    );
-    expect(collectionName).to.exist;
-    expect(collectionName?.getAttribute('href')).to.equal('/details/foo');
-  });
-
-  it('does not render non-collection facets as links', 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('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: {
-        key: 'foo',
-        state: 'selected',
-        count: 5,
-      },
-      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: {
-        key: 'foo',
-        state: 'none',
-        count: 5,
-      },
-      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: {
-        key: 'foo',
-        state: 'hidden',
-        count: 5,
-      },
-      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: {
-        key: 'foo',
-        state: 'none',
-        count: 5,
-      },
-      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: {
-        key: 'foo',
-        state: 'selected',
-        count: 5,
-      },
-      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: {
-        key: 'foo',
-        state: 'none',
-        count: 5,
-      },
-      negative: false,
-    });
-  });
-});

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

@@ -1,139 +0,0 @@
-import { expect, fixture } from '@open-wc/testing';
-import sinon from 'sinon';
-import { html } from 'lit';
-import type { FacetsTemplate } from '../../src/collection-facets/facets-template';
-import '../../src/collection-facets/facets-template';
-import type { FacetRow } from '../../src/collection-facets/facet-row';
-import type { FacetGroup } from '../../src/models';
-
-const facetGroup: 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 template renders facet rows', async () => {
-    const el = await fixture<FacetsTemplate>(
-      html`<facets-template .facetGroup=${facetGroup}></facets-template>`,
-    );
-
-    expect(el.shadowRoot?.querySelector('.facet-rows')).to.exist;
-  });
-
-  it('applies correct bucket values to facet row', async () => {
-    const el = await fixture<FacetsTemplate>(
-      html`<facets-template .facetGroup=${facetGroup}></facets-template>`,
-    );
-
-    const facetRows = el.shadowRoot?.querySelectorAll('facet-row');
-    expect(facetRows?.length).to.equal(facetGroup.buckets.length);
-
-    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 event when a facet is selected/deselected', async () => {
-    const facetClickSpy = sinon.spy();
-    const el = await fixture<FacetsTemplate>(
-      html`<facets-template
-        .facetGroup=${facetGroup}
-        @facetClick=${facetClickSpy}
-      ></facets-template>`,
-    );
-
-    const facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
-    expect(facetRow).to.exist;
-
-    const facetSelectCheck = facetRow.shadowRoot?.querySelector(
-      '.select-facet-checkbox',
-    ) as HTMLInputElement;
-    expect(facetSelectCheck).to.exist;
-
-    facetSelectCheck.click();
-    expect(facetClickSpy.callCount).to.equal(1);
-    expect(facetRow.bucket?.state).to.equal('selected');
-
-    facetSelectCheck.click();
-    expect(facetClickSpy.callCount).to.equal(2);
-    expect(facetRow.bucket?.state).to.equal('none');
-  });
-
-  it('emits facet click event when a facet is negated/un-negated', async () => {
-    const facetClickSpy = sinon.spy();
-    const el = await fixture<FacetsTemplate>(
-      html`<facets-template
-        .facetGroup=${facetGroup}
-        @facetClick=${facetClickSpy}
-      ></facets-template>`,
-    );
-
-    const facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
-    expect(facetRow).to.exist;
-
-    const facetNegateCheck = facetRow.shadowRoot?.querySelector(
-      '.hide-facet-checkbox',
-    ) as HTMLInputElement;
-    expect(facetNegateCheck).to.exist;
-
-    facetNegateCheck.click();
-    expect(facetClickSpy.callCount).to.equal(1);
-    expect(facetRow.bucket?.state).to.equal('hidden');
-
-    facetNegateCheck.click();
-    expect(facetClickSpy.callCount).to.equal(2);
-    expect(facetRow.bucket?.state).to.equal('none');
-  });
-
-  it('emits facet click event when a pre-selected facet is deselected', async () => {
-    const facetClickSpy = 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=${facetGroupWithSelection}
-        @facetClick=${facetClickSpy}
-      ></facets-template>`,
-    );
-
-    const facetRow = el.shadowRoot?.querySelector('facet-row') as FacetRow;
-    expect(facetRow).to.exist;
-
-    const facetSelectCheck = facetRow.shadowRoot?.querySelector(
-      '.select-facet-checkbox',
-    ) as HTMLInputElement;
-    expect(facetSelectCheck).to.exist;
-    expect(facetSelectCheck.checked).to.be.true;
-
-    facetSelectCheck.click();
-    expect(facetClickSpy.callCount).to.equal(1);
-    expect(facetRow.bucket?.state).to.equal('none');
-
-    facetSelectCheck.click();
-    expect(facetClickSpy.callCount).to.equal(2);
-    expect(facetRow.bucket?.state).to.equal('selected');
-  });
-});