@internetarchive/histogram-date-range 1.3.2 → 1.4.0-alpha-webdev7756.1

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');
@@ -35,13 +35,31 @@ async function createCustomElementInHTMLContainer() {
     return fixture(subject, { parentNode });
 }
 describe('HistogramDateRange', () => {
-    it('shows scaled histogram bars when provided with data', async () => {
+    it('shows log-scaled histogram bars when provided with data', async () => {
         var _a;
         const el = await createCustomElementInHTMLContainer();
         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);
+        const heights = Array.from(bars, b => b.height.baseVal.value);
         expect(heights).to.eql([38, 7, 50]);
     });
+    it('uses linear bar height scaling when specified', async () => {
+        var _a;
+        const el = await createCustomElementInHTMLContainer();
+        el.barScaling = 'linear';
+        await el.updateComplete;
+        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const heights = Array.from(bars, b => b.height.baseVal.value);
+        expect(heights).to.eql([16, 0, 50]);
+    });
+    it('uses custom bar height scaling when specified', async () => {
+        var _a;
+        const el = await createCustomElementInHTMLContainer();
+        el.barScaling = (x) => Math.sqrt(x);
+        await el.updateComplete;
+        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const heights = Array.from(bars, b => b.height.baseVal.value);
+        expect(heights).to.eql([28, 5, 50]);
+    });
     it('changes the position of the sliders and standardizes date format when dates are entered', async () => {
         var _a, _b;
         const el = await createCustomElementInHTMLContainer();
@@ -302,7 +320,7 @@ describe('HistogramDateRange', () => {
         // include a number which will require commas (1,000,000)
         el.bins = [1000000, 1, 100];
         await aTimeout(10);
-        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltip = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#tooltip');
         expect(tooltip.innerText).to.eq('');
         // hover
@@ -320,10 +338,34 @@ describe('HistogramDateRange', () => {
         await el.updateComplete;
         expect(tooltip.innerText).to.match(/^1 item\n4\/23\/1940 - 8\/13\/1980/);
     });
+    it('uses provided tooltip label', async () => {
+        var _a, _b;
+        const el = await createCustomElementInHTMLContainer();
+        el.bins = [1000000, 1, 100];
+        el.tooltipLabel = 'foobar';
+        await aTimeout(10);
+        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
+        const tooltip = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#tooltip');
+        expect(tooltip.innerText).to.eq('');
+        // hover
+        bars[0].dispatchEvent(new PointerEvent('pointerenter'));
+        await el.updateComplete;
+        expect(tooltip.innerText).to.match(/^1,000,000 foobars\n1\/1\/1900 - 4\/23\/1940/);
+        expect(getComputedStyle(tooltip).display).to.eq('block');
+        // leave
+        bars[0].dispatchEvent(new PointerEvent('pointerleave'));
+        await el.updateComplete;
+        expect(getComputedStyle(tooltip).display).to.eq('none');
+        expect(tooltip.innerText).to.eq('');
+        // ensure singular item is not pluralized
+        bars[1].dispatchEvent(new PointerEvent('pointerenter'));
+        await el.updateComplete;
+        expect(tooltip.innerText).to.match(/^1 foobar\n4\/23\/1940 - 8\/13\/1980/);
+    });
     it('does not show tooltip while dragging', async () => {
         var _a, _b, _c;
         const el = await createCustomElementInHTMLContainer();
-        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
+        const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target');
         const tooltip = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#tooltip');
         expect(tooltip.innerText).to.eq('');
         const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
@@ -342,15 +384,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');
@@ -359,57 +401,57 @@ 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
+        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'));
         await el.updateComplete;
         expect(el.minSelectedDate).to.eq('1910'); // range was extended to left
-        const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar'))[8]; // click on second bar from the right
+        const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar-pointer-target'))[8]; // click on second bar from the right
         rightBarToClick.dispatchEvent(new Event('click'));
         expect(el.maxSelectedDate).to.eq('1998'); // range was extended to right
     });
     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
         ///////////////////////////////////////////////
-        const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar'))[3]; // click on fourth bar to the left
+        const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar-pointer-target'))[3]; // click on fourth bar to the left
         leftBarToClick.dispatchEvent(new Event('click'));
         expect(el.minSelectedDate).to.eq('1932'); // range was extended to the right
-        const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar'))[8]; // click on second bar from the right
+        const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar-pointer-target'))[8]; // click on second bar from the right
         rightBarToClick.dispatchEvent(new Event('click'));
         expect(el.maxSelectedDate).to.eq('1998'); // range was extended to the left
     });
     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
@@ -420,16 +462,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');
@@ -438,52 +480,52 @@ 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).map(b => b.height.baseVal.value);
+        const heights = Array.from(bars, b => b.height.baseVal.value);
         expect(heights).to.eql([157]);
     });
     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);
+        const heights = Array.from(bars, b => b.height.baseVal.value);
         expect(heights).to.eql([37, 40, 38, 38, 37, 36]);
     });
     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);
+        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);
         expect(tooltips).to.eql([
             'Jan 2020 - Mar 2020',
             'Apr 2020 - Jun 2020',
@@ -497,18 +539,18 @@ 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');
-        const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        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);
         expect(tooltips).to.eql([
             'Jan 50 - Jun 50',
             'Jul 50 - Dec 50',
@@ -546,16 +588,16 @@ 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');
-        const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        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);
         expect(tooltips).to.eql([
             '2000 - 2001',
             '2002 - 2003',
@@ -571,53 +613,53 @@ 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');
-        const tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        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);
         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);
+        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);
         expect(tooltips).to.eql(['2001', '2002', '2003', '2004', '2005']);
     });
     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);
+        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);
         expect(tooltips).to.eql(['2001', '2002', '2003', '2004', '2005']); // default YYYY date format
         el.dateFormat = 'YYYY/MM';
         el.minDate = '2001/01';
         el.maxDate = '2005/01';
         await el.updateComplete;
         // Should use dateFormat fallback for tooltips
-        tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        tooltips = Array.from(bars, b => b.dataset.tooltip);
         expect(tooltips).to.eql([
             '2001/01 - 2001/12',
             '2002/01 - 2002/12',
@@ -631,7 +673,7 @@ describe('HistogramDateRange', () => {
         el.maxDate = '2005';
         await el.updateComplete;
         // Should use defined tooltipDateFormat for tooltips
-        tooltips = Array.from(bars).map(b => b.dataset.tooltip);
+        tooltips = Array.from(bars, b => b.dataset.tooltip);
         expect(tooltips).to.eql([
             'January 2001 - December 2001',
             'January 2002 - December 2002',
@@ -642,14 +684,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');
@@ -667,28 +709,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');