@internetarchive/histogram-date-range 1.3.0 → 1.3.1-alpha-webdev7745.0

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

@@ -2,31 +2,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');
@@ -341,15 +341,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');
@@ -358,15 +358,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'))[1]; // click on second bar to the left
         leftBarToClick.dispatchEvent(new Event('click'));
@@ -378,15 +378,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
@@ -400,15 +400,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
@@ -417,43 +417,43 @@ describe('HistogramDateRange', () => {
         // well-formed max date is allowed
         expect(maxDateInput.value).to.eq('5000');
     });
-    it('handles year values less than 1000 by overriding date format to just display year', async () => {
+    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('-500');
+        expect(minDateInput.value).to.eq('1/1/-500');
         const maxDateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-max');
-        expect(maxDateInput.value).to.eq('500');
+        expect(maxDateInput.value).to.eq('1/1/500');
     });
     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).map(b => b.height.baseVal.value);
@@ -461,9 +461,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).map(b => b.height.baseVal.value);
@@ -471,15 +471,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');
         const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -494,15 +494,64 @@ describe('HistogramDateRange', () => {
             'Oct 2021 - Dec 2021',
         ]);
     });
+    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 bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        expect(tooltips).to.eql([
+            'Jan 50 - Jun 50',
+            'Jul 50 - Dec 50',
+            'Jan 51 - Jun 51',
+            'Jul 51 - Dec 51',
+            'Jan 52 - Jun 52',
+            'Jul 52 - Dec 52',
+            'Jan 53 - Jun 53',
+            'Jul 53 - Dec 53',
+            'Jan 54 - Jun 54',
+            'Jul 54 - Dec 54',
+            'Jan 55 - Jun 55',
+            'Jul 55 - Dec 55',
+            'Jan 56 - Jun 56',
+            'Jul 56 - Dec 56',
+            'Jan 57 - Jun 57',
+            'Jul 57 - Dec 57',
+            'Jan 58 - Jun 58',
+            'Jul 58 - Dec 58',
+            'Jan 59 - Jun 59',
+            'Jul 59 - Dec 59',
+            'Jan 60 - Jun 60',
+            'Jul 60 - Dec 60',
+            'Jan 61 - Jun 61',
+            'Jul 61 - Dec 61',
+            'Jan 62 - Jun 62',
+            'Jul 62 - Dec 62',
+            'Jan 63 - Jun 63',
+            'Jul 63 - Dec 63',
+            'Jan 64 - Jun 64',
+            'Jul 64 - Dec 64',
+            'Jan 65 - Jun 65',
+            'Jul 65 - Dec 65',
+        ]);
+    });
     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');
         const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -519,16 +568,31 @@ describe('HistogramDateRange', () => {
             '2018 - 2019',
         ]);
     });
+    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 bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        expect(tooltips).to.eql(['20', '21', '22', '23', '24', '25']);
+    });
     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');
         const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -536,13 +600,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');
         let tooltips = Array.from(bars).map(b => b.dataset.tooltip);
@@ -577,14 +641,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');
@@ -602,28 +666,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');