@internetarchive/histogram-date-range 1.4.1 → 1.4.2

package/dist/test/histogram-date-range.test.js

@@ -3,31 +3,31 @@ import { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';
 import '../src/histogram-date-range';
 const SLIDER_WIDTH = 10;
 const WIDTH = 200;
-const subject = html `
-  <histogram-date-range
-    width="${WIDTH}"
-    tooltipWidth="140"
-    height="50"
-    dateFormat="M/D/YYYY"
-    minDate="1900"
-    maxDate="12/4/2020"
-    bins="[33, 1, 100]"
-  >
-  </histogram-date-range>
+const subject = html `
+  <histogram-date-range
+    width="${WIDTH}"
+    tooltipWidth="140"
+    height="50"
+    dateFormat="M/D/YYYY"
+    minDate="1900"
+    maxDate="12/4/2020"
+    bins="[33, 1, 100]"
+  >
+  </histogram-date-range>
 `;
 async function createCustomElementInHTMLContainer() {
-    document.head.insertAdjacentHTML('beforeend', `<style>
-      html {
-        font-size:10px;
-      }
-      .container {
-        width: 400px;
-        height: 400px;
-        display: flex;
-        background: #FFF6E1;
-        justify-content: center;
-        align-items: center;
-      }
+    document.head.insertAdjacentHTML('beforeend', `<style>
+      html {
+        font-size:10px;
+      }
+      .container {
+        width: 400px;
+        height: 400px;
+        display: flex;
+        background: #FFF6E1;
+        justify-content: center;
+        align-items: center;
+      }
     </style>`);
     // https://open-wc.org/docs/testing/helpers/#customize-the-fixture-container
     const parentNode = document.createElement('div');
@@ -314,6 +314,21 @@ describe('HistogramDateRange', () => {
         expect(event2.detail.minDate).to.equal('1/1/1985');
         expect(eventCount).to.equal(1); // only one event was fired
     });
+    it('emits a custom event when sliders are dragged to a new range', async () => {
+        var _a;
+        const el = await createCustomElementInHTMLContainer();
+        el.updateDelay = 0;
+        await el.updateComplete;
+        const minSlider = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#slider-min');
+        const updateEventPromise = oneEvent(el, 'histogramDateRangeUpdated');
+        // simulate dragging the min slider to the right and releasing
+        minSlider.dispatchEvent(new PointerEvent('pointerdown'));
+        window.dispatchEvent(new PointerEvent('pointermove', { clientX: 75 }));
+        window.dispatchEvent(new PointerEvent('pointerup'));
+        const { detail } = await updateEventPromise;
+        expect(detail.minDate).to.equal('5/21/1950');
+        expect(detail.maxDate).to.equal('12/4/2020');
+    });
     it('shows/hides tooltip when hovering over (or pointing at) a bar', async () => {
         var _a, _b;
         const el = await createCustomElementInHTMLContainer();
@@ -384,15 +399,15 @@ describe('HistogramDateRange', () => {
     });
     it('allows range to be pre-selected', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="Dec 4, 2020"
-          minSelectedDate="2012"
-          maxSelectedDate="2019"
-          bins="[33, 1, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="Dec 4, 2020"
+          minSelectedDate="2012"
+          maxSelectedDate="2019"
+          bins="[33, 1, 100]"
+        >
+        </histogram-date-range>
       `);
         const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
         expect(minDateInput.value).to.eq('2012');
@@ -401,15 +416,15 @@ describe('HistogramDateRange', () => {
     });
     it('extends the selected range when the histogram is clicked outside of the current range', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          minSelectedDate="1950"
-          maxSelectedDate="1955"
-          bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          minSelectedDate="1950"
+          maxSelectedDate="1955"
+          bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
+        >
+        </histogram-date-range>
       `);
         const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target'))[1]; // click on second bar to the left
         leftBarToClick.dispatchEvent(new Event('click'));
@@ -421,15 +436,15 @@ describe('HistogramDateRange', () => {
     });
     it('narrows the selected range when the histogram is clicked inside of the current range', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          minSelectedDate="1900"
-          maxSelectedDate="2020"
-          bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          minSelectedDate="1900"
+          maxSelectedDate="2020"
+          bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
+        >
+        </histogram-date-range>
       `);
         ///////////////////////////////////////////////
         // NB: the slider nearest the clicked bar moves
@@ -443,15 +458,15 @@ describe('HistogramDateRange', () => {
     });
     it('handles invalid pre-selected range by defaulting to overall max and min', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          minSelectedDate="2000xyz"
-          maxSelectedDate="5000"
-          bins="[33, 1, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          minSelectedDate="2000xyz"
+          maxSelectedDate="5000"
+          bins="[33, 1, 100]"
+        >
+        </histogram-date-range>
       `);
         const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
         // malformed min date defaults to overall min
@@ -462,16 +477,16 @@ describe('HistogramDateRange', () => {
     });
     it('handles year values less than 1000 correctly', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          dateFormat="M/D/YYYY"
-          minDate="-2000"
-          maxDate="2000"
-          minSelectedDate="-500"
-          maxSelectedDate="500"
-          bins="[33, 1, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          dateFormat="M/D/YYYY"
+          minDate="-2000"
+          maxDate="2000"
+          minSelectedDate="-500"
+          maxSelectedDate="500"
+          bins="[33, 1, 100]"
+        >
+        </histogram-date-range>
       `);
         const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
         expect(minDateInput.value).to.eq('1/1/-500');
@@ -480,23 +495,23 @@ describe('HistogramDateRange', () => {
     });
     it('handles missing data', async () => {
         var _a, _b;
-        let el = await fixture(html `<histogram-date-range>
-        minDate="1900" maxDate="2020" bins=""
+        let el = await fixture(html `<histogram-date-range>
+        minDate="1900" maxDate="2020" bins=""
       </histogram-date-range>`);
         expect((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.innerHTML).to.contain('no data');
-        el = await fixture(html `<histogram-date-range
-        minDate="1900"
-        maxDate="2020"
-        bins="[]"
-        missingDataMessage="no data available"
+        el = await fixture(html `<histogram-date-range
+        minDate="1900"
+        maxDate="2020"
+        bins="[]"
+        missingDataMessage="no data available"
       ></histogram-date-range>`);
         expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.innerHTML).to.contain('no data available');
     });
     it('correctly displays data consisting of a single bin', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
+        </histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
         const heights = Array.from(bars, b => b.height.baseVal.value);
@@ -504,9 +519,9 @@ describe('HistogramDateRange', () => {
     });
     it('correctly displays small diff between max and min values', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range bins="[1519,2643,1880,2041,1638,1441]">
+        </histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
         const heights = Array.from(bars, b => b.height.baseVal.value);
@@ -514,15 +529,15 @@ describe('HistogramDateRange', () => {
     });
     it('correctly aligns bins to exact month boundaries when binSnapping=month', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="month"
-          dateFormat="YYYY-MM"
-          tooltipDateFormat="MMM YYYY"
-          minDate="2020-01"
-          maxDate="2021-12"
-          bins="[10,20,30,40,50,60,70,80]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="month"
+          dateFormat="YYYY-MM"
+          tooltipDateFormat="MMM YYYY"
+          minDate="2020-01"
+          maxDate="2021-12"
+          bins="[10,20,30,40,50,60,70,80]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -539,15 +554,15 @@ describe('HistogramDateRange', () => {
     });
     it('correctly handles month snapping for years 0-99', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="month"
-          dateFormat="YYYY-MM"
-          tooltipDateFormat="MMM YYYY"
-          minDate="0050-01"
-          maxDate="0065-12"
-          bins="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="month"
+          dateFormat="YYYY-MM"
+          tooltipDateFormat="MMM YYYY"
+          minDate="0050-01"
+          maxDate="0065-12"
+          bins="[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -588,13 +603,13 @@ describe('HistogramDateRange', () => {
     });
     it('correctly aligns bins to exact year boundaries when binSnapping=year', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="year"
-          minDate="2000"
-          maxDate="2019"
-          bins="[10,20,30,40,50,60,70,80,90,100]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="year"
+          minDate="2000"
+          maxDate="2019"
+          bins="[10,20,30,40,50,60,70,80,90,100]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -613,14 +628,14 @@ describe('HistogramDateRange', () => {
     });
     it('correctly handles year snapping for years 0-99', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="year"
-          dateFormat="YYYY"
-          minDate="0020"
-          maxDate="0025"
-          bins="[1,2,3,4,5,6]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="year"
+          dateFormat="YYYY"
+          minDate="0020"
+          maxDate="0025"
+          bins="[1,2,3,4,5,6]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -628,14 +643,14 @@ describe('HistogramDateRange', () => {
     });
     it('does not duplicate start/end date in tooltips when representing a single year', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="year"
-          dateFormat="YYYY"
-          minDate="2001"
-          maxDate="2005"
-          bins="[10,20,30,40,50]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="year"
+          dateFormat="YYYY"
+          minDate="2001"
+          maxDate="2005"
+          bins="[10,20,30,40,50]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -643,13 +658,13 @@ describe('HistogramDateRange', () => {
     });
     it('falls back to default date format for tooltips if no tooltip date format provided', async () => {
         var _a;
-        const el = await fixture(html `
-        <histogram-date-range
-          binSnapping="year"
-          minDate="2001"
-          maxDate="2005"
-          bins="[10,20,30,40,50]"
-        ></histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          binSnapping="year"
+          minDate="2001"
+          maxDate="2005"
+          bins="[10,20,30,40,50]"
+        ></histogram-date-range>
       `);
         const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         let tooltips = Array.from(bars, b => b.dataset.tooltip);
@@ -684,14 +699,14 @@ describe('HistogramDateRange', () => {
     });
     it('has a disabled state', async () => {
         var _a, _b, _c;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          disabled
-          bins="[33, 1, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          disabled
+          bins="[33, 1, 100]"
+        >
+        </histogram-date-range>
       `);
         expect((_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.inner-container')) === null || _b === void 0 ? void 0 : _b.classList.contains('disabled')).to.eq(true);
         const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
@@ -709,28 +724,28 @@ describe('HistogramDateRange', () => {
     });
     it('has a loading state with an activity indicator', async () => {
         var _a, _b, _c, _d;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          loading
-          bins="[33, 1, 100]"
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          loading
+          bins="[33, 1, 100]"
+        >
+        </histogram-date-range>
       `);
         expect((_d = (_c = (_b = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ia-activity-indicator')) === null || _b === void 0 ? void 0 : _b.attributes) === null || _c === void 0 ? void 0 : _c.getNamedItem('mode')) === null || _d === void 0 ? void 0 : _d.value).to.eq('processing');
     });
     it('can use LitElement bound properties', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          .minDate=${1900}
-          .maxDate=${'Dec 4, 2020'}
-          .minSelectedDate=${2012}
-          .maxSelectedDate=${2019}
-          .bins=${[33, 1, 100]}
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          .minDate=${1900}
+          .maxDate=${'Dec 4, 2020'}
+          .minSelectedDate=${2012}
+          .maxSelectedDate=${2019}
+          .bins=${[33, 1, 100]}
+        >
+        </histogram-date-range>
       `);
         const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
         expect(minDateInput.value).to.eq('2012');
@@ -739,48 +754,48 @@ describe('HistogramDateRange', () => {
     });
     it('SVG accessbility - dynamic title for MIN and MAX date', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range
-          minDate="1900"
-          maxDate="2020"
-          .bins=${[33, 1, 100]}
-        >
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range
+          minDate="1900"
+          maxDate="2020"
+          .bins=${[33, 1, 100]}
+        >
+        </histogram-date-range>
       `);
         const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates from 1900 to 2020');
     });
     it('SVG accessbility - dynamic title for MIN date', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range minDate="1900" .bins=${[33, 1, 100]}>
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range minDate="1900" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
       `);
         const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates from 1900');
     });
     it('SVG accessbility - dynamic title for MAX date', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
       `);
         const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates up to 2020');
     });
     it('SVG accessbility - dynamic title for all dates', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range .bins=${[33, 1, 100]}> </histogram-date-range>
       `);
         const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         expect((_b = svg.querySelector('title')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('Filter results for dates');
     });
     it('SVG accessibility - dynamic desc', async () => {
         var _a, _b;
-        const el = await fixture(html `
-        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
-        </histogram-date-range>
+        const el = await fixture(html `
+        <histogram-date-range maxDate="2020" .bins=${[33, 1, 100]}>
+        </histogram-date-range>
       `);
         const svg = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('svg');
         expect((_b = svg.querySelector('desc')) === null || _b === void 0 ? void 0 : _b.textContent).to.equal('This histogram shows the distribution of dates up to 2020');