@internetarchive/histogram-date-range 0.0.11-beta → 0.1.2-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -9,9 +9,8 @@ const subject = html `
9
9
  tooltipWidth="140"
10
10
  height="50"
11
11
  dateFormat="M/D/YYYY"
12
- updateDelay="10"
13
12
  minDate="1900"
14
- maxDate="Dec 4, 2020"
13
+ maxDate="12/4/2020"
15
14
  bins="[33, 1, 100]"
16
15
  >
17
16
  </histogram-date-range>
@@ -52,45 +51,45 @@ describe('HistogramDateRange', () => {
52
51
  // valid min date
53
52
  minDateInput.value = '1950';
54
53
  minDateInput.dispatchEvent(new Event('blur'));
55
- await aTimeout(20);
56
54
  expect(Math.floor(el.minSliderX)).to.eq(84);
57
55
  expect(el.minSelectedDate).to.eq('1/1/1950'); // set to correct format
58
56
  // attempt to set date earlier than first item
59
- minDateInput.value = 'October 1, 1850';
57
+ minDateInput.value = '10/1/1850';
60
58
  minDateInput.dispatchEvent(new Event('blur'));
61
- await aTimeout(100);
62
59
  expect(Math.floor(el.minSliderX)).to.eq(SLIDER_WIDTH); // leftmost valid position
63
- expect(el.minSelectedDate).to.eq('1/1/1900'); // leftmost valid date
60
+ // allow date value less than slider range
61
+ expect(el.minSelectedDate).to.eq('10/1/1850');
64
62
  /* -------------------------- maximum (right) slider ------------------------- */
65
63
  expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH);
66
64
  const maxDateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-max');
67
65
  // set valid max date
68
- maxDateInput.value = 'March 12 1975';
66
+ maxDateInput.value = '3/12/1975';
69
67
  maxDateInput.dispatchEvent(new Event('blur'));
70
- await aTimeout(20);
68
+ await el.updateComplete;
71
69
  expect(Math.floor(el.maxSliderX)).to.eq(121);
72
70
  expect(maxDateInput.value).to.eq('3/12/1975');
73
71
  // attempt to set date later than last item
74
- maxDateInput.value = 'Dec 31 2199';
72
+ maxDateInput.value = '12/31/2199';
75
73
  maxDateInput.dispatchEvent(new Event('blur'));
76
- await aTimeout(20);
74
+ await el.updateComplete;
77
75
  expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH); // rightmost valid position
78
- expect(maxDateInput.value).to.eq('12/4/2020'); // rightmost valid date
76
+ // allow date value greater than slider range
77
+ expect(maxDateInput.value).to.eq('12/31/2199');
79
78
  });
80
79
  it('handles invalid date inputs', async () => {
81
80
  var _a, _b;
82
81
  const el = await createCustomElementInHTMLContainer();
83
82
  /* -------------------------- minimum (left) slider ------------------------- */
84
83
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
85
- minDateInput.value = 'May 17, 1961';
84
+ minDateInput.value = '5/17/1961';
86
85
  minDateInput.dispatchEvent(new Event('blur'));
87
- await aTimeout(20);
86
+ await el.updateComplete;
88
87
  expect(Math.floor(el.minSliderX)).to.eq(101);
89
88
  expect(minDateInput.value).to.eq('5/17/1961');
90
89
  // enter invalid value
91
90
  minDateInput.value = 'invalid';
92
91
  minDateInput.dispatchEvent(new Event('blur'));
93
- await aTimeout(20);
92
+ await el.updateComplete;
94
93
  expect(Math.floor(el.minSliderX)).to.eq(101); // does not move
95
94
  expect(minDateInput.value).to.eq('5/17/1961'); // resets back to previous date
96
95
  /* -------------------------- maximum (right) slider ------------------------- */
@@ -101,7 +100,7 @@ describe('HistogramDateRange', () => {
101
100
  // enter invalid value
102
101
  maxDateInput.value = 'Abc 12, 1YYY';
103
102
  maxDateInput.dispatchEvent(new Event('blur'));
104
- await aTimeout(20);
103
+ await el.updateComplete;
105
104
  expect(Math.floor(el.maxSliderX)).to.eq(WIDTH - SLIDER_WIDTH); // does not move
106
105
  expect(maxDateInput.value).to.eq('12/4/2020'); // resets back to previous date
107
106
  });
@@ -117,19 +116,21 @@ describe('HistogramDateRange', () => {
117
116
  expect(Array.from(minSlider.classList).join(' ')).to.eq('draggable');
118
117
  // pointer down
119
118
  minSlider.dispatchEvent(new PointerEvent('pointerdown'));
120
- await aTimeout(20);
119
+ await el.updateComplete;
121
120
  // cursor changes to 'grab'
122
- expect(Array.from(minSlider.classList).join(' ')).to.eq('draggable dragging');
121
+ const classList = minSlider.classList;
122
+ expect(classList.contains('draggable')).to.be.true;
123
+ expect(classList.contains('dragging')).to.be.true;
123
124
  // slide to right
124
125
  window.dispatchEvent(new PointerEvent('pointermove', { clientX: 70 }));
125
- await aTimeout(20);
126
+ await el.updateComplete;
126
127
  // slider has moved
127
128
  expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(168);
128
129
  // min date is updated
129
130
  expect(minDateInput.value).to.eq('4/23/1940');
130
131
  // stop dragging
131
132
  window.dispatchEvent(new PointerEvent('pointerup'));
132
- await aTimeout(20);
133
+ await el.updateComplete;
133
134
  // cursor returns to normal
134
135
  expect(Array.from(container.classList)).not.to.include('dragging');
135
136
  /* -------------------------- maximum (right) slider ------------------------- */
@@ -140,56 +141,84 @@ describe('HistogramDateRange', () => {
140
141
  // slide to left
141
142
  maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 195 }));
142
143
  window.dispatchEvent(new PointerEvent('pointermove', { clientX: 160 }));
143
- await aTimeout(20);
144
+ await el.updateComplete;
144
145
  // slider has moved
145
146
  expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268);
146
147
  // max date is updated
147
148
  expect(maxDateInput.value).to.eq('10/8/2000');
148
- await aTimeout(20);
149
+ await el.updateComplete;
149
150
  // try to slide min slider past max slider
150
151
  minSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 62 }));
151
152
  window.dispatchEvent(new PointerEvent('pointermove', { clientX: 190 }));
152
- await aTimeout(20);
153
+ await el.updateComplete;
153
154
  // slider moves all the way to meet the right slider
154
155
  expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(258);
155
156
  // try to slide max slider past min slider
156
157
  maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 120 }));
157
158
  window.dispatchEvent(new PointerEvent('pointermove', { clientX: 50 }));
158
- await aTimeout(20);
159
+ await el.updateComplete;
159
160
  expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268); // max slider didn't move
160
161
  });
161
- it('emits a custom event when the element date range changes', async () => {
162
+ it("emits a custom event when the element's date range changes", async () => {
162
163
  var _a;
163
164
  const el = await createCustomElementInHTMLContainer();
165
+ el.updateDelay = 30; // set debounce delay of 30ms
164
166
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
165
- const dateRangeUpdatedEventListener = oneEvent(el, 'histogramDateRangeUpdated');
167
+ const updateEventPromise = oneEvent(el, 'histogramDateRangeUpdated');
166
168
  // simulate typing a new value into input
167
169
  minDateInput.value = '1955';
168
170
  minDateInput.dispatchEvent(new Event('blur'));
171
+ // will wait longer than debounce delay
172
+ const { detail } = await updateEventPromise;
169
173
  // verify that event is emitted
170
- const { detail } = await dateRangeUpdatedEventListener;
171
174
  expect(detail.minDate).to.equal('1/1/1955');
172
175
  expect(detail.maxDate).to.equal('12/4/2020');
176
+ let eventCount = 0;
177
+ el.addEventListener('histogramDateRangeUpdated', () => (eventCount += 1));
178
+ // events are not sent if no change since the last event that was sent
179
+ minDateInput.value = '1955';
180
+ minDateInput.dispatchEvent(new Event('blur'));
181
+ await aTimeout(60); // wait longer than debounce delay
182
+ expect(eventCount).to.equal(0);
183
+ const updateEventPromise2 = oneEvent(el, 'histogramDateRangeUpdated');
184
+ // with the debounce, multiple quick changes only result in one event sent
185
+ minDateInput.value = '1965';
186
+ minDateInput.dispatchEvent(new Event('blur'));
187
+ await aTimeout(10); // wait less than the debounce delay
188
+ minDateInput.dispatchEvent(new Event('focus'));
189
+ minDateInput.value = '1975';
190
+ minDateInput.dispatchEvent(new Event('blur'));
191
+ await aTimeout(10);
192
+ minDateInput.dispatchEvent(new Event('focus'));
193
+ minDateInput.value = '1985';
194
+ minDateInput.dispatchEvent(new Event('blur'));
195
+ await aTimeout(10);
196
+ const event2 = await updateEventPromise2;
197
+ expect(event2.detail.minDate).to.equal('1/1/1985');
198
+ expect(eventCount).to.equal(1); // only one event was fired
173
199
  });
174
200
  it('shows/hides tooltip when hovering over (or pointing at) a bar', async () => {
175
201
  var _a, _b;
176
202
  const el = await createCustomElementInHTMLContainer();
203
+ // include a number which will require commas (1,000,000)
204
+ el.bins = [1000000, 1, 100];
205
+ await aTimeout(10);
177
206
  const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
178
207
  const tooltip = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#tooltip');
179
208
  expect(tooltip.innerText).to.eq('');
180
209
  // hover
181
210
  bars[0].dispatchEvent(new PointerEvent('pointerenter'));
182
- await aTimeout(20);
183
- expect(tooltip.innerText).to.match(/^33 items\n1\/1\/1900 - 4\/23\/1940/);
211
+ await el.updateComplete;
212
+ expect(tooltip.innerText).to.match(/^1,000,000 items\n1\/1\/1900 - 4\/23\/1940/);
184
213
  expect(getComputedStyle(tooltip).display).to.eq('block');
185
214
  // leave
186
215
  bars[0].dispatchEvent(new PointerEvent('pointerleave'));
187
- await aTimeout(20);
216
+ await el.updateComplete;
188
217
  expect(getComputedStyle(tooltip).display).to.eq('none');
189
218
  expect(tooltip.innerText).to.eq('');
190
219
  // ensure singular item is not pluralized
191
220
  bars[1].dispatchEvent(new PointerEvent('pointerenter'));
192
- await aTimeout(20);
221
+ await el.updateComplete;
193
222
  expect(tooltip.innerText).to.match(/^1 item\n4\/23\/1940 - 8\/13\/1980/);
194
223
  });
195
224
  it('does not show tooltip while dragging', async () => {
@@ -202,10 +231,10 @@ describe('HistogramDateRange', () => {
202
231
  // pointer down and slide right
203
232
  minSlider.dispatchEvent(new PointerEvent('pointerdown'));
204
233
  window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100 }));
205
- await aTimeout(20);
234
+ await el.updateComplete;
206
235
  // hover over bar
207
236
  bars[0].dispatchEvent(new PointerEvent('pointerenter'));
208
- await aTimeout(20);
237
+ await el.updateComplete;
209
238
  // tooltip display is suppressed while dragging
210
239
  expect(tooltip.style.display).to.eq('');
211
240
  });
@@ -229,6 +258,49 @@ describe('HistogramDateRange', () => {
229
258
  const maxDateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-max');
230
259
  expect(maxDateInput.value).to.eq('2019');
231
260
  });
261
+ it('extends the selected range when the histogram is clicked outside of the current range', async () => {
262
+ var _a, _b;
263
+ const el = await fixture(html `
264
+ <histogram-date-range
265
+ minDate="1900"
266
+ maxDate="2020"
267
+ minSelectedDate="1950"
268
+ maxSelectedDate="1955"
269
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
270
+ >
271
+ </histogram-date-range>
272
+ `);
273
+ const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar'))[1]; // click on second bar to the left
274
+ leftBarToClick.dispatchEvent(new Event('click'));
275
+ await el.updateComplete;
276
+ debugger;
277
+ expect(el.minSelectedDate).to.eq('1910'); // range was extended to left
278
+ const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar'))[8]; // click on second bar from the right
279
+ rightBarToClick.dispatchEvent(new Event('click'));
280
+ expect(el.maxSelectedDate).to.eq('1998'); // range was extended to right
281
+ });
282
+ it('narrows the selected range when the histogram is clicked inside of the current range', async () => {
283
+ var _a, _b;
284
+ const el = await fixture(html `
285
+ <histogram-date-range
286
+ minDate="1900"
287
+ maxDate="2020"
288
+ minSelectedDate="1900"
289
+ maxSelectedDate="2020"
290
+ bins="[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]"
291
+ >
292
+ </histogram-date-range>
293
+ `);
294
+ ///////////////////////////////////////////////
295
+ // NB: the slider nearest the clicked bar moves
296
+ ///////////////////////////////////////////////
297
+ const leftBarToClick = Array.from((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar'))[3]; // click on fourth bar to the left
298
+ leftBarToClick.dispatchEvent(new Event('click'));
299
+ expect(el.minSelectedDate).to.eq('1932'); // range was extended to the right
300
+ const rightBarToClick = Array.from((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.bar'))[8]; // click on second bar from the right
301
+ rightBarToClick.dispatchEvent(new Event('click'));
302
+ expect(el.maxSelectedDate).to.eq('1998'); // range was extended to the left
303
+ });
232
304
  it('handles invalid pre-selected range by defaulting to overall max and min', async () => {
233
305
  var _a, _b;
234
306
  const el = await fixture(html `
@@ -242,9 +314,11 @@ describe('HistogramDateRange', () => {
242
314
  </histogram-date-range>
243
315
  `);
244
316
  const minDateInput = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#date-min');
317
+ // malformed min date defaults to overall min
245
318
  expect(minDateInput.value).to.eq('1900');
246
319
  const maxDateInput = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('#date-max');
247
- expect(maxDateInput.value).to.eq('2020');
320
+ // well-formed max date is allowed
321
+ expect(maxDateInput.value).to.eq('5000');
248
322
  });
249
323
  it('handles missing data', async () => {
250
324
  var _a, _b;
@@ -260,8 +334,18 @@ describe('HistogramDateRange', () => {
260
334
  ></histogram-date-range>`);
261
335
  expect((_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.innerHTML).to.contain('no data available');
262
336
  });
337
+ it('correctly displays data consisting of a single bin', async () => {
338
+ var _a;
339
+ const el = await fixture(html `
340
+ <histogram-date-range minDate="2020" maxDate="2020" bins="[50]">
341
+ </histogram-date-range>
342
+ `);
343
+ const bars = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.bar');
344
+ const heights = Array.from(bars).map(b => b.height.baseVal.value);
345
+ expect(heights).to.eql([157]);
346
+ });
263
347
  it('has a disabled state', async () => {
264
- var _a, _b;
348
+ var _a, _b, _c;
265
349
  const el = await fixture(html `
266
350
  <histogram-date-range
267
351
  minDate="1900"
@@ -272,6 +356,18 @@ describe('HistogramDateRange', () => {
272
356
  </histogram-date-range>
273
357
  `);
274
358
  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);
359
+ const minSlider = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('#slider-min');
360
+ expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(8); // initial state
361
+ // attempt to slide to right
362
+ minSlider.dispatchEvent(new PointerEvent('pointerdown'));
363
+ await el.updateComplete;
364
+ // cursor is not draggable if disabled
365
+ expect(Array.from(minSlider.classList).join(' ')).to.eq('');
366
+ // attempt to slide to right
367
+ window.dispatchEvent(new PointerEvent('pointermove', { clientX: 70 }));
368
+ await el.updateComplete;
369
+ // slider does not moved if element disabled
370
+ expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(8);
275
371
  });
276
372
  it('has a loading state with an activity indicator', async () => {
277
373
  var _a, _b, _c, _d;
@@ -1 +1 @@
1
- {"version":3,"file":"histogram-date-range.test.js","sourceRoot":"","sources":["../../test/histogram-date-range.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\nimport { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';\n\nimport { HistogramDateRange } from '../src/histogram-date-range';\nimport '../src/histogram-date-range';\n\nconst SLIDER_WIDTH = 10;\nconst WIDTH = 200;\n\nconst subject = html`\n <histogram-date-range\n width=\"${WIDTH}\"\n tooltipWidth=\"140\"\n height=\"50\"\n dateFormat=\"M/D/YYYY\"\n updateDelay=\"10\"\n minDate=\"1900\"\n maxDate=\"Dec 4, 2020\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n`;\n\nasync function createCustomElementInHTMLContainer(): Promise<HistogramDateRange> {\n document.head.insertAdjacentHTML(\n 'beforeend',\n `<style>\n html {\n font-size:10px;\n }\n .container {\n width: 400px;\n height: 400px;\n display: flex;\n background: #FFF6E1;\n justify-content: center;\n align-items: center;\n }\n </style>`\n );\n // https://open-wc.org/docs/testing/helpers/#customize-the-fixture-container\n const parentNode = document.createElement('div');\n parentNode.setAttribute('class', 'container');\n return fixture<HistogramDateRange>(subject, { parentNode });\n}\n\ndescribe('HistogramDateRange', () => {\n it('shows scaled histogram bars when provided with data', async () => {\n const el = await createCustomElementInHTMLContainer();\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const heights = Array.from(bars).map(b => b.height.baseVal.value);\n\n expect(heights).to.eql([38, 7, 50]);\n });\n\n it('changes the position of the sliders and standardizes date format when dates are entered', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n expect(el.minSliderX).to.eq(SLIDER_WIDTH);\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n // valid min date\n minDateInput.value = '1950';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(20);\n\n expect(Math.floor(el.minSliderX)).to.eq(84);\n expect(el.minSelectedDate).to.eq('1/1/1950'); // set to correct format\n\n // attempt to set date earlier than first item\n minDateInput.value = 'October 1, 1850';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(100);\n\n expect(Math.floor(el.minSliderX)).to.eq(SLIDER_WIDTH); // leftmost valid position\n expect(el.minSelectedDate).to.eq('1/1/1900'); // leftmost valid date\n\n /* -------------------------- maximum (right) slider ------------------------- */\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH);\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // set valid max date\n maxDateInput.value = 'March 12 1975';\n maxDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(20);\n\n expect(Math.floor(el.maxSliderX)).to.eq(121);\n expect(maxDateInput.value).to.eq('3/12/1975');\n\n // attempt to set date later than last item\n maxDateInput.value = 'Dec 31 2199';\n maxDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(20);\n\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH); // rightmost valid position\n expect(maxDateInput.value).to.eq('12/4/2020'); // rightmost valid date\n });\n\n it('handles invalid date inputs', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n minDateInput.value = 'May 17, 1961';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(20);\n\n expect(Math.floor(el.minSliderX)).to.eq(101);\n expect(minDateInput.value).to.eq('5/17/1961');\n\n // enter invalid value\n minDateInput.value = 'invalid';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(20);\n\n expect(Math.floor(el.minSliderX)).to.eq(101); // does not move\n expect(minDateInput.value).to.eq('5/17/1961'); // resets back to previous date\n\n /* -------------------------- maximum (right) slider ------------------------- */\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // initial values\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH);\n expect(maxDateInput.value).to.eq('12/4/2020');\n\n // enter invalid value\n maxDateInput.value = 'Abc 12, 1YYY';\n maxDateInput.dispatchEvent(new Event('blur'));\n\n await aTimeout(20);\n expect(Math.floor(el.maxSliderX)).to.eq(WIDTH - SLIDER_WIDTH); // does not move\n expect(maxDateInput.value).to.eq('12/4/2020'); // resets back to previous date\n });\n\n it('updates the date inputs when the sliders are moved', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;\n const container = el.shadowRoot?.querySelector(\n '#container'\n ) as HTMLDivElement;\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n // initial state\n expect(minSlider.getBoundingClientRect().x).to.eq(108);\n expect(Array.from(minSlider.classList).join(' ')).to.eq('draggable');\n\n // pointer down\n minSlider.dispatchEvent(new PointerEvent('pointerdown'));\n await aTimeout(20);\n // cursor changes to 'grab'\n expect(Array.from(minSlider.classList).join(' ')).to.eq(\n 'draggable dragging'\n );\n\n // slide to right\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 70 }));\n await aTimeout(20);\n\n // slider has moved\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(168);\n // min date is updated\n expect(minDateInput.value).to.eq('4/23/1940');\n\n // stop dragging\n window.dispatchEvent(new PointerEvent('pointerup'));\n await aTimeout(20);\n // cursor returns to normal\n expect(Array.from(container.classList)).not.to.include('dragging');\n\n /* -------------------------- maximum (right) slider ------------------------- */\n const maxSlider = el.shadowRoot?.querySelector('#slider-max') as SVGElement;\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // initial state\n expect(maxSlider.getBoundingClientRect().x).to.eq(298);\n\n // slide to left\n maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 195 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 160 }));\n await aTimeout(20);\n\n // slider has moved\n expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268);\n // max date is updated\n expect(maxDateInput.value).to.eq('10/8/2000');\n await aTimeout(20);\n\n // try to slide min slider past max slider\n minSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 62 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 190 }));\n await aTimeout(20);\n\n // slider moves all the way to meet the right slider\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(258);\n\n // try to slide max slider past min slider\n maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 120 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 50 }));\n await aTimeout(20);\n expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268); // max slider didn't move\n });\n\n it('emits a custom event when the element date range changes', async () => {\n const el = await createCustomElementInHTMLContainer();\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n const dateRangeUpdatedEventListener = oneEvent(\n el,\n 'histogramDateRangeUpdated'\n );\n\n // simulate typing a new value into input\n minDateInput.value = '1955';\n minDateInput.dispatchEvent(new Event('blur'));\n\n // verify that event is emitted\n const { detail } = await dateRangeUpdatedEventListener;\n expect(detail.minDate).to.equal('1/1/1955');\n expect(detail.maxDate).to.equal('12/4/2020');\n });\n\n it('shows/hides tooltip when hovering over (or pointing at) a bar', async () => {\n const el = await createCustomElementInHTMLContainer();\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;\n expect(tooltip.innerText).to.eq('');\n\n // hover\n bars[0].dispatchEvent(new PointerEvent('pointerenter'));\n await aTimeout(20);\n expect(tooltip.innerText).to.match(/^33 items\\n1\\/1\\/1900 - 4\\/23\\/1940/);\n expect(getComputedStyle(tooltip).display).to.eq('block');\n\n // leave\n bars[0].dispatchEvent(new PointerEvent('pointerleave'));\n await aTimeout(20);\n expect(getComputedStyle(tooltip).display).to.eq('none');\n expect(tooltip.innerText).to.eq('');\n\n // ensure singular item is not pluralized\n bars[1].dispatchEvent(new PointerEvent('pointerenter'));\n await aTimeout(20);\n expect(tooltip.innerText).to.match(/^1 item\\n4\\/23\\/1940 - 8\\/13\\/1980/);\n });\n\n it('does not show tooltip while dragging', async () => {\n const el = await createCustomElementInHTMLContainer();\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;\n expect(tooltip.innerText).to.eq('');\n const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;\n\n // pointer down and slide right\n minSlider.dispatchEvent(new PointerEvent('pointerdown'));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100 }));\n await aTimeout(20);\n\n // hover over bar\n bars[0].dispatchEvent(new PointerEvent('pointerenter'));\n await aTimeout(20);\n // tooltip display is suppressed while dragging\n expect(tooltip.style.display).to.eq('');\n });\n\n it('passes the a11y audit', async () => {\n await fixture<HistogramDateRange>(subject).then(el =>\n expect(el).shadowDom.to.be.accessible()\n );\n });\n\n it('allows range to be pre-selected', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"Dec 4, 2020\"\n minSelectedDate=\"2012\"\n maxSelectedDate=\"2019\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n expect(minDateInput.value).to.eq('2012');\n\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n expect(maxDateInput.value).to.eq('2019');\n });\n\n it('handles invalid pre-selected range by defaulting to overall max and min', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n minSelectedDate=\"2000xyz\"\n maxSelectedDate=\"5000\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n expect(minDateInput.value).to.eq('1900');\n\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n expect(maxDateInput.value).to.eq('2020');\n });\n\n it('handles missing data', async () => {\n let el = await fixture<HistogramDateRange>(\n html`<histogram-date-range>\n minDate=\"1900\" maxDate=\"2020\" bins=\"\"\n </histogram-date-range>`\n );\n expect(el.shadowRoot?.innerHTML).to.contain('no data');\n el = await fixture<HistogramDateRange>(\n html`<histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n bins=\"[]\"\n missingDataMessage=\"no data available\"\n ></histogram-date-range>`\n );\n expect(el.shadowRoot?.innerHTML).to.contain('no data available');\n });\n\n it('has a disabled state', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n disabled\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n expect(\n el.shadowRoot\n ?.querySelector('.inner-container')\n ?.classList.contains('disabled')\n ).to.eq(true);\n });\n\n it('has a loading state with an activity indicator', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n loading\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n expect(\n el.shadowRoot\n ?.querySelector('ia-activity-indicator')\n ?.attributes?.getNamedItem('mode')?.value\n ).to.eq('processing');\n });\n});\n"]}
1
+ {"version":3,"file":"histogram-date-range.test.js","sourceRoot":"","sources":["../../test/histogram-date-range.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-debugger */\nimport { html, fixture, expect, oneEvent, aTimeout } from '@open-wc/testing';\n\nimport { HistogramDateRange } from '../src/histogram-date-range';\nimport '../src/histogram-date-range';\n\nconst SLIDER_WIDTH = 10;\nconst WIDTH = 200;\n\nconst subject = html`\n <histogram-date-range\n width=\"${WIDTH}\"\n tooltipWidth=\"140\"\n height=\"50\"\n dateFormat=\"M/D/YYYY\"\n minDate=\"1900\"\n maxDate=\"12/4/2020\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n`;\n\nasync function createCustomElementInHTMLContainer(): Promise<HistogramDateRange> {\n document.head.insertAdjacentHTML(\n 'beforeend',\n `<style>\n html {\n font-size:10px;\n }\n .container {\n width: 400px;\n height: 400px;\n display: flex;\n background: #FFF6E1;\n justify-content: center;\n align-items: center;\n }\n </style>`\n );\n // https://open-wc.org/docs/testing/helpers/#customize-the-fixture-container\n const parentNode = document.createElement('div');\n parentNode.setAttribute('class', 'container');\n return fixture<HistogramDateRange>(subject, { parentNode });\n}\n\ndescribe('HistogramDateRange', () => {\n it('shows scaled histogram bars when provided with data', async () => {\n const el = await createCustomElementInHTMLContainer();\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const heights = Array.from(bars).map(b => b.height.baseVal.value);\n\n expect(heights).to.eql([38, 7, 50]);\n });\n\n it('changes the position of the sliders and standardizes date format when dates are entered', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n expect(el.minSliderX).to.eq(SLIDER_WIDTH);\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n // valid min date\n minDateInput.value = '1950';\n minDateInput.dispatchEvent(new Event('blur'));\n\n expect(Math.floor(el.minSliderX)).to.eq(84);\n expect(el.minSelectedDate).to.eq('1/1/1950'); // set to correct format\n\n // attempt to set date earlier than first item\n minDateInput.value = '10/1/1850';\n minDateInput.dispatchEvent(new Event('blur'));\n\n expect(Math.floor(el.minSliderX)).to.eq(SLIDER_WIDTH); // leftmost valid position\n // allow date value less than slider range\n expect(el.minSelectedDate).to.eq('10/1/1850');\n\n /* -------------------------- maximum (right) slider ------------------------- */\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH);\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // set valid max date\n maxDateInput.value = '3/12/1975';\n maxDateInput.dispatchEvent(new Event('blur'));\n await el.updateComplete;\n\n expect(Math.floor(el.maxSliderX)).to.eq(121);\n expect(maxDateInput.value).to.eq('3/12/1975');\n\n // attempt to set date later than last item\n maxDateInput.value = '12/31/2199';\n maxDateInput.dispatchEvent(new Event('blur'));\n await el.updateComplete;\n\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH); // rightmost valid position\n // allow date value greater than slider range\n expect(maxDateInput.value).to.eq('12/31/2199');\n });\n\n it('handles invalid date inputs', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n minDateInput.value = '5/17/1961';\n minDateInput.dispatchEvent(new Event('blur'));\n await el.updateComplete;\n\n expect(Math.floor(el.minSliderX)).to.eq(101);\n expect(minDateInput.value).to.eq('5/17/1961');\n\n // enter invalid value\n minDateInput.value = 'invalid';\n minDateInput.dispatchEvent(new Event('blur'));\n await el.updateComplete;\n\n expect(Math.floor(el.minSliderX)).to.eq(101); // does not move\n expect(minDateInput.value).to.eq('5/17/1961'); // resets back to previous date\n\n /* -------------------------- maximum (right) slider ------------------------- */\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // initial values\n expect(el.maxSliderX).to.eq(WIDTH - SLIDER_WIDTH);\n expect(maxDateInput.value).to.eq('12/4/2020');\n\n // enter invalid value\n maxDateInput.value = 'Abc 12, 1YYY';\n maxDateInput.dispatchEvent(new Event('blur'));\n await el.updateComplete;\n\n expect(Math.floor(el.maxSliderX)).to.eq(WIDTH - SLIDER_WIDTH); // does not move\n expect(maxDateInput.value).to.eq('12/4/2020'); // resets back to previous date\n });\n\n it('updates the date inputs when the sliders are moved', async () => {\n const el = await createCustomElementInHTMLContainer();\n\n /* -------------------------- minimum (left) slider ------------------------- */\n const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;\n const container = el.shadowRoot?.querySelector(\n '#container'\n ) as HTMLDivElement;\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n\n // initial state\n expect(minSlider.getBoundingClientRect().x).to.eq(108);\n expect(Array.from(minSlider.classList).join(' ')).to.eq('draggable');\n\n // pointer down\n minSlider.dispatchEvent(new PointerEvent('pointerdown'));\n await el.updateComplete;\n\n // cursor changes to 'grab'\n const classList = minSlider.classList;\n expect(classList.contains('draggable')).to.be.true;\n expect(classList.contains('dragging')).to.be.true;\n\n // slide to right\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 70 }));\n await el.updateComplete;\n\n // slider has moved\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(168);\n // min date is updated\n expect(minDateInput.value).to.eq('4/23/1940');\n\n // stop dragging\n window.dispatchEvent(new PointerEvent('pointerup'));\n await el.updateComplete;\n\n // cursor returns to normal\n expect(Array.from(container.classList)).not.to.include('dragging');\n\n /* -------------------------- maximum (right) slider ------------------------- */\n const maxSlider = el.shadowRoot?.querySelector('#slider-max') as SVGElement;\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n\n // initial state\n expect(maxSlider.getBoundingClientRect().x).to.eq(298);\n\n // slide to left\n maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 195 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 160 }));\n await el.updateComplete;\n\n // slider has moved\n expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268);\n // max date is updated\n expect(maxDateInput.value).to.eq('10/8/2000');\n await el.updateComplete;\n\n // try to slide min slider past max slider\n minSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 62 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 190 }));\n await el.updateComplete;\n\n // slider moves all the way to meet the right slider\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(258);\n\n // try to slide max slider past min slider\n maxSlider.dispatchEvent(new PointerEvent('pointerdown', { clientX: 120 }));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 50 }));\n await el.updateComplete;\n expect(Math.round(maxSlider.getBoundingClientRect().x)).to.eq(268); // max slider didn't move\n });\n\n it(\"emits a custom event when the element's date range changes\", async () => {\n const el = await createCustomElementInHTMLContainer();\n el.updateDelay = 30; // set debounce delay of 30ms\n\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n const updateEventPromise = oneEvent(el, 'histogramDateRangeUpdated');\n\n // simulate typing a new value into input\n minDateInput.value = '1955';\n minDateInput.dispatchEvent(new Event('blur'));\n\n // will wait longer than debounce delay\n const { detail } = await updateEventPromise;\n // verify that event is emitted\n expect(detail.minDate).to.equal('1/1/1955');\n expect(detail.maxDate).to.equal('12/4/2020');\n\n let eventCount = 0;\n el.addEventListener('histogramDateRangeUpdated', () => (eventCount += 1));\n\n // events are not sent if no change since the last event that was sent\n minDateInput.value = '1955';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(60); // wait longer than debounce delay\n expect(eventCount).to.equal(0);\n\n const updateEventPromise2 = oneEvent(el, 'histogramDateRangeUpdated');\n\n // with the debounce, multiple quick changes only result in one event sent\n minDateInput.value = '1965';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(10); // wait less than the debounce delay\n\n minDateInput.dispatchEvent(new Event('focus'));\n minDateInput.value = '1975';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(10);\n\n minDateInput.dispatchEvent(new Event('focus'));\n minDateInput.value = '1985';\n minDateInput.dispatchEvent(new Event('blur'));\n await aTimeout(10);\n\n const event2 = await updateEventPromise2;\n expect(event2.detail.minDate).to.equal('1/1/1985');\n expect(eventCount).to.equal(1); // only one event was fired\n });\n\n it('shows/hides tooltip when hovering over (or pointing at) a bar', async () => {\n const el = await createCustomElementInHTMLContainer();\n // include a number which will require commas (1,000,000)\n el.bins = [1000000, 1, 100];\n await aTimeout(10);\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;\n expect(tooltip.innerText).to.eq('');\n\n // hover\n bars[0].dispatchEvent(new PointerEvent('pointerenter'));\n await el.updateComplete;\n expect(tooltip.innerText).to.match(\n /^1,000,000 items\\n1\\/1\\/1900 - 4\\/23\\/1940/\n );\n expect(getComputedStyle(tooltip).display).to.eq('block');\n\n // leave\n bars[0].dispatchEvent(new PointerEvent('pointerleave'));\n await el.updateComplete;\n expect(getComputedStyle(tooltip).display).to.eq('none');\n expect(tooltip.innerText).to.eq('');\n\n // ensure singular item is not pluralized\n bars[1].dispatchEvent(new PointerEvent('pointerenter'));\n await el.updateComplete;\n expect(tooltip.innerText).to.match(/^1 item\\n4\\/23\\/1940 - 8\\/13\\/1980/);\n });\n\n it('does not show tooltip while dragging', async () => {\n const el = await createCustomElementInHTMLContainer();\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const tooltip = el.shadowRoot?.querySelector('#tooltip') as HTMLDivElement;\n expect(tooltip.innerText).to.eq('');\n const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;\n\n // pointer down and slide right\n minSlider.dispatchEvent(new PointerEvent('pointerdown'));\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 100 }));\n await el.updateComplete;\n\n // hover over bar\n bars[0].dispatchEvent(new PointerEvent('pointerenter'));\n await el.updateComplete;\n // tooltip display is suppressed while dragging\n expect(tooltip.style.display).to.eq('');\n });\n\n it('passes the a11y audit', async () => {\n await fixture<HistogramDateRange>(subject).then(el =>\n expect(el).shadowDom.to.be.accessible()\n );\n });\n\n it('allows range to be pre-selected', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"Dec 4, 2020\"\n minSelectedDate=\"2012\"\n maxSelectedDate=\"2019\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n expect(minDateInput.value).to.eq('2012');\n\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n expect(maxDateInput.value).to.eq('2019');\n });\n\n it('extends the selected range when the histogram is clicked outside of the current range', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n minSelectedDate=\"1950\"\n maxSelectedDate=\"1955\"\n bins=\"[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]\"\n >\n </histogram-date-range>\n `\n );\n\n const leftBarToClick = Array.from(\n el.shadowRoot?.querySelectorAll('.bar') as NodeList\n )[1]; // click on second bar to the left\n\n leftBarToClick.dispatchEvent(new Event('click'));\n await el.updateComplete;\n debugger;\n expect(el.minSelectedDate).to.eq('1910'); // range was extended to left\n\n const rightBarToClick = Array.from(\n el.shadowRoot?.querySelectorAll('.bar') as NodeList\n )[8]; // click on second bar from the right\n\n rightBarToClick.dispatchEvent(new Event('click'));\n expect(el.maxSelectedDate).to.eq('1998'); // range was extended to right\n });\n\n it('narrows the selected range when the histogram is clicked inside of the current range', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n minSelectedDate=\"1900\"\n maxSelectedDate=\"2020\"\n bins=\"[33, 1, 1, 1, 10, 10, 1, 1, 1, 50, 100]\"\n >\n </histogram-date-range>\n `\n );\n\n ///////////////////////////////////////////////\n // NB: the slider nearest the clicked bar moves\n ///////////////////////////////////////////////\n\n const leftBarToClick = Array.from(\n el.shadowRoot?.querySelectorAll('.bar') as NodeList\n )[3]; // click on fourth bar to the left\n\n leftBarToClick.dispatchEvent(new Event('click'));\n expect(el.minSelectedDate).to.eq('1932'); // range was extended to the right\n\n const rightBarToClick = Array.from(\n el.shadowRoot?.querySelectorAll('.bar') as NodeList\n )[8]; // click on second bar from the right\n\n rightBarToClick.dispatchEvent(new Event('click'));\n expect(el.maxSelectedDate).to.eq('1998'); // range was extended to the left\n });\n\n it('handles invalid pre-selected range by defaulting to overall max and min', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n minSelectedDate=\"2000xyz\"\n maxSelectedDate=\"5000\"\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n const minDateInput = el.shadowRoot?.querySelector(\n '#date-min'\n ) as HTMLInputElement;\n // malformed min date defaults to overall min\n expect(minDateInput.value).to.eq('1900');\n\n const maxDateInput = el.shadowRoot?.querySelector(\n '#date-max'\n ) as HTMLInputElement;\n // well-formed max date is allowed\n expect(maxDateInput.value).to.eq('5000');\n });\n\n it('handles missing data', async () => {\n let el = await fixture<HistogramDateRange>(\n html`<histogram-date-range>\n minDate=\"1900\" maxDate=\"2020\" bins=\"\"\n </histogram-date-range>`\n );\n expect(el.shadowRoot?.innerHTML).to.contain('no data');\n el = await fixture<HistogramDateRange>(\n html`<histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n bins=\"[]\"\n missingDataMessage=\"no data available\"\n ></histogram-date-range>`\n );\n expect(el.shadowRoot?.innerHTML).to.contain('no data available');\n });\n\n it('correctly displays data consisting of a single bin', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range minDate=\"2020\" maxDate=\"2020\" bins=\"[50]\">\n </histogram-date-range>\n `\n );\n const bars = (el.shadowRoot?.querySelectorAll(\n '.bar'\n ) as unknown) as SVGRectElement[];\n const heights = Array.from(bars).map(b => b.height.baseVal.value);\n expect(heights).to.eql([157]);\n });\n\n it('has a disabled state', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n disabled\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n expect(\n el.shadowRoot\n ?.querySelector('.inner-container')\n ?.classList.contains('disabled')\n ).to.eq(true);\n\n const minSlider = el.shadowRoot?.querySelector('#slider-min') as SVGElement;\n\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(8); // initial state\n\n // attempt to slide to right\n minSlider.dispatchEvent(new PointerEvent('pointerdown'));\n await el.updateComplete;\n\n // cursor is not draggable if disabled\n expect(Array.from(minSlider.classList).join(' ')).to.eq('');\n\n // attempt to slide to right\n window.dispatchEvent(new PointerEvent('pointermove', { clientX: 70 }));\n await el.updateComplete;\n\n // slider does not moved if element disabled\n expect(Math.round(minSlider.getBoundingClientRect().x)).to.eq(8);\n });\n\n it('has a loading state with an activity indicator', async () => {\n const el = await fixture<HistogramDateRange>(\n html`\n <histogram-date-range\n minDate=\"1900\"\n maxDate=\"2020\"\n loading\n bins=\"[33, 1, 100]\"\n >\n </histogram-date-range>\n `\n );\n expect(\n el.shadowRoot\n ?.querySelector('ia-activity-indicator')\n ?.attributes?.getNamedItem('mode')?.value\n ).to.eq('processing');\n });\n});\n"]}