@internetarchive/collection-browser 1.0.0 → 1.1.1-alpha.1

package/test/expanded-date-picker.test.ts

@@ -0,0 +1,137 @@
+/* eslint-disable import/no-duplicates */
+import type { HistogramDateRange } from '@internetarchive/histogram-date-range';
+import {
+  ModalManager,
+  ModalManagerInterface,
+  ModalManagerMode,
+} from '@internetarchive/modal-manager';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+import sinon from 'sinon';
+import '../src/expanded-date-picker';
+
+import type { ExpandedDatePicker } from '../src/expanded-date-picker';
+
+describe('Expanded Date Picker', () => {
+  it('should render with a date picker and Apply button', async () => {
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker></expanded-date-picker>`
+    );
+
+    expect(el.shadowRoot?.querySelector('#date-picker')).to.exist;
+    expect(el.shadowRoot?.querySelector('#apply-btn')).to.exist;
+  });
+
+  it('should update its min/max selected date when date picker changes', async () => {
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+      ></expanded-date-picker>`
+    );
+
+    const datePicker = el.shadowRoot?.querySelector(
+      '#date-picker'
+    ) as HistogramDateRange;
+    expect(datePicker).to.exist;
+
+    datePicker.minSelectedDate = '2';
+    datePicker.maxSelectedDate = '4';
+    datePicker.dispatchEvent(
+      new CustomEvent('histogramDateRangeUpdated', {
+        detail: {
+          minDate: datePicker.minSelectedDate,
+          maxDate: datePicker.maxSelectedDate,
+        },
+      })
+    );
+    await el.updateComplete;
+
+    expect(el.minSelectedDate).to.equal('2');
+    expect(el.maxSelectedDate).to.equal('4');
+  });
+
+  it('should emit an event when a date range is applied', async () => {
+    const applySpy = sinon.spy();
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        @histogramDateRangeApplied=${applySpy}
+      ></expanded-date-picker>`
+    );
+
+    const applyBtn = el.shadowRoot?.querySelector(
+      '#apply-btn'
+    ) as HTMLButtonElement;
+    expect(applyBtn).to.exist;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(applySpy.callCount).to.equal(1);
+    expect(
+      applySpy.calledWithMatch({ detail: { minDate: '1', maxDate: '5' } })
+    );
+  });
+
+  it('should close and unstyle its modal when date range applied', async () => {
+    const modalManager = new ModalManager();
+    modalManager.mode = ModalManagerMode.Open;
+    modalManager.classList.add('expanded-date-picker');
+
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        .modalManager=${modalManager}
+      ></expanded-date-picker>`
+    );
+
+    const applyBtn = el.shadowRoot?.querySelector(
+      '#apply-btn'
+    ) as HTMLButtonElement;
+    expect(applyBtn).to.exist;
+
+    applyBtn.click();
+    await el.updateComplete;
+
+    expect(modalManager.getMode()).to.equal(ModalManagerMode.Closed);
+    expect(modalManager.classList.contains('expanded-date-picker')).to.be.false;
+  });
+
+  it('closes the modal when Esc key is pressed', async () => {
+    const el = await fixture<ExpandedDatePicker>(
+      html`<expanded-date-picker
+        .buckets=${[1, 2, 3, 4, 5]}
+        .minDate=${'1'}
+        .maxDate=${'5'}
+        .minSelectedDate=${'1'}
+        .maxSelectedDate=${'5'}
+        .modalManager=${new ModalManager()}
+      ></expanded-date-picker>`
+    );
+
+    const closeModalSpy = sinon.spy(
+      el.modalManager as ModalManagerInterface,
+      'closeModal'
+    );
+
+    // Dispatch an Esc keydown event
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    await el.updateComplete;
+
+    expect(closeModalSpy.callCount).to.equal(1);
+    expect(el.modalManager?.classList.contains('expanded-date-picker')).to.be
+      .false;
+  });
+});

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

@@ -183,6 +183,32 @@ describe('Restoration state handler', () => {
     );
   });
 
+  it('should restore selected facets with numbers in the square brackets', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?and[12]=subject:"foo"';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.selectedFacets.subject.foo.state).to.equal(
+      'selected'
+    );
+  });
+
+  it('should restore negative facets with numbers in the square brackets', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?not[12]=year:2018';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    const restorationState = handler.getRestorationState();
+    expect(restorationState.selectedFacets.year['2018'].state).to.equal(
+      'hidden'
+    );
+  });
+
   it('should restore sort from URL (space format)', async () => {
     const handler = new RestorationStateHandler({ context: 'search' });
 
@@ -270,4 +296,22 @@ describe('Restoration state handler', () => {
     handler.persistState({ selectedFacets: getDefaultSelectedFacets() });
     expect(window.location.search).to.equal('');
   });
+
+  it('round trip load/persist should erase numbers in square brackets', async () => {
+    const handler = new RestorationStateHandler({ context: 'search' });
+
+    const url = new URL(window.location.href);
+    url.search = '?and[0]=subject:"foo"';
+    window.history.replaceState({ path: url.href }, '', url.href);
+
+    // Load state from the URL and immediately persist it back to the URL
+    const restorationState = handler.getRestorationState();
+    handler.persistState(restorationState);
+
+    // Ensure the new URL includes the "normalized" facet parameter and not the numbered one
+    expect(decodeURIComponent(window.location.search)).to.include(
+      'and[]=subject:"foo"'
+    );
+    expect(new URL(window.location.href).searchParams.get('and[0]')).to.be.null;
+  });
 });