Skip to content

Commit eba8f06

Browse files
Ivan KitanovIvan Kitanov
Ivan Kitanov
authored and
Ivan Kitanov
committed
Refactoring predefinde ranges tests in DateRangePicker component
1 parent 50af544 commit eba8f06

File tree

2 files changed

+78
-240
lines changed

2 files changed

+78
-240
lines changed

‎src/components/date-range-picker/date-range-picker.common.spec.ts‎

Lines changed: 78 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -505,103 +505,137 @@ describe('Date range picker - common tests for single and two inputs mode', () =
505505
picker.open = true;
506506
await elementUpdated(picker);
507507

508-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
509-
expect(chips.length).to.equal(0);
508+
const predefinedArea = picker.renderRoot.querySelectorAll(
509+
'igc-predefined-ranges-area'
510+
);
511+
const allRanges = (predefinedArea[0] as any)._allRanges;
512+
expect(allRanges.length).to.equal(0);
510513
});
511514

512-
it('should render all predefined ranges and content in the actions slot', async () => {
513-
picker = await fixture<IgcDateRangePickerComponent>(
514-
html`<igc-date-range-picker use-predefined-ranges>
515-
<span slot="actions">Actions Slot</span>
516-
</igc-date-range-picker>`
517-
);
515+
it('should emit igcChange when predefined date is selected and should close the picker - dropdown mode', async () => {
516+
const eventSpy = spy(picker, 'emitEvent');
517+
const popover = picker.renderRoot.querySelector('igc-popover');
518518

519-
picker.open = true;
519+
picker.usePredefinedRanges = true;
520+
picker.customRanges = customRanges;
520521

522+
picker.open = true;
521523
await elementUpdated(picker);
522524

523525
const predefinedArea = picker.renderRoot.querySelectorAll(
524526
'igc-predefined-ranges-area'
525527
);
526-
const allRanges = (predefinedArea[0] as any)._allRanges.length;
527-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
528-
const slot = picker.renderRoot.querySelector(
529-
`slot[name="actions"]`
530-
) as HTMLSlotElement;
531-
const elements = slot.assignedElements();
532-
533-
expect(elements.length).to.equal(1);
534-
expect(elements[0].tagName).to.equal('SPAN');
535-
expect(elements[0].innerHTML).to.equal('Actions Slot');
536-
537-
for (let i = 0; i < chips.length; i++) {
538-
expect(chips[i].innerText).to.equal(allRanges[i].label);
528+
const allRanges = (predefinedArea[0] as any)._allRanges;
529+
530+
for (let i = 0; i < allRanges.length; i++) {
531+
picker.open = true;
532+
await elementUpdated(picker);
533+
predefinedArea[0].dispatchEvent(
534+
new CustomEvent('range-select', { detail: allRanges[i] })
535+
);
536+
await elementUpdated(picker);
537+
538+
expect(eventSpy).calledWith('igcChange');
539+
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
540+
541+
checkSelectedRange(
542+
picker,
543+
{
544+
start: allRanges[i].dateRange.start,
545+
end: allRanges[i].dateRange.end,
546+
},
547+
false
548+
);
549+
expect(popover?.hasAttribute('open')).to.equal(false);
550+
eventSpy.resetHistory();
539551
}
540552
});
541553

542-
it('should emit igcChange when the chips are clicked and should close the picker - dropdown mode', async () => {
554+
it('should emit igcChange on committing the new selection through predefined ranges - dialog mode', async () => {
543555
const eventSpy = spy(picker, 'emitEvent');
544-
const popover = picker.renderRoot.querySelector('igc-popover');
556+
picker.mode = 'dialog';
557+
558+
await elementUpdated(picker);
545559

546560
picker.usePredefinedRanges = true;
547561
picker.customRanges = customRanges;
548562

549563
picker.open = true;
550564
await elementUpdated(picker);
551565

566+
let dialog = picker.renderRoot.querySelector('igc-dialog');
552567
const predefinedArea = picker.renderRoot.querySelectorAll(
553568
'igc-predefined-ranges-area'
554569
);
555-
const allRanges = (predefinedArea[0] as any)._allRanges.length;
556-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
570+
const allRanges = (predefinedArea[0] as any)._allRanges;
557571

558-
for (let i = 0; i < chips.length; i++) {
572+
for (let i = 0; i < allRanges.length; i++) {
559573
picker.open = true;
574+
dialog = picker.renderRoot.querySelector('igc-dialog');
560575
await elementUpdated(picker);
561-
chips[i].click();
576+
predefinedArea[0].dispatchEvent(
577+
new CustomEvent('range-select', { detail: allRanges[i] })
578+
);
562579
await elementUpdated(picker);
563580

564-
expect(eventSpy).calledWith('igcChange');
565581
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
582+
checkSelectedRange(
583+
picker,
584+
{
585+
start: allRanges[i].dateRange.start,
586+
end: allRanges[i].dateRange.end,
587+
},
588+
false
589+
);
590+
expect(dialog?.hasAttribute('open')).to.equal(true);
566591

567-
checkSelectedRange(picker, {
568-
start: allRanges[i].dateRange.start,
569-
end: allRanges[i].dateRange.end,
570-
});
571-
expect(popover?.hasAttribute('open')).to.equal(false);
592+
const doneBtn = picker.shadowRoot!.querySelector(
593+
'igc-button[slot="footer"]:last-of-type'
594+
) as HTMLButtonElement;
595+
doneBtn?.click();
596+
await elementUpdated(picker);
597+
598+
expect(eventSpy).calledWith('igcChange');
599+
expect(eventSpy).calledWith('igcClosing');
600+
expect(eventSpy).calledWith('igcClosed');
601+
expect(dialog?.hasAttribute('open')).to.equal(false);
572602
eventSpy.resetHistory();
573603
}
574604
});
575605

576-
it('should render only custom chips, when usePredefinedRanges is false and emit igcChange when chips are clicked', async () => {
606+
it('should render only custom chips, when usePredefinedRanges is false and emit igcChange when custeom date is selected', async () => {
577607
const eventSpy = spy(picker, 'emitEvent');
578608
const popover = picker.renderRoot.querySelector('igc-popover');
579609

580610
picker.usePredefinedRanges = false;
581611
picker.customRanges = customRanges;
582-
583612
picker.open = true;
584613
await elementUpdated(picker);
585614

586615
const predefinedArea = picker.renderRoot.querySelectorAll(
587616
'igc-predefined-ranges-area'
588617
);
589-
const allRanges = (predefinedArea[0] as any)._allRanges.length;
590-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
618+
const allRanges = (predefinedArea[0] as any)._allRanges;
591619

592-
for (let i = 0; i < chips.length; i++) {
620+
for (let i = 0; i < allRanges.length; i++) {
593621
picker.open = true;
594622
await elementUpdated(picker);
595-
chips[i].click();
623+
predefinedArea[0].dispatchEvent(
624+
new CustomEvent('range-select', { detail: allRanges[i] })
625+
);
596626
await elementUpdated(picker);
597627

598628
expect(eventSpy).calledWith('igcChange');
599629
expect(picker.activeDate).to.deep.equal(allRanges[i].dateRange.start);
600630

601-
checkSelectedRange(picker, {
602-
start: allRanges[i].dateRange.start,
603-
end: allRanges[i].dateRange.end,
604-
});
631+
checkSelectedRange(
632+
picker,
633+
{
634+
start: allRanges[i].dateRange.start,
635+
end: allRanges[i].dateRange.end,
636+
},
637+
false
638+
);
605639
expect(popover?.hasAttribute('open')).to.equal(false);
606640
eventSpy.resetHistory();
607641
}

‎src/components/date-range-picker/predefined-ranges-area.spec.ts‎

Lines changed: 0 additions & 196 deletions
Original file line numberDiff line numberDiff line change
@@ -152,199 +152,3 @@ describe('Predefined Area', () => {
152152
});
153153
});
154154
});
155-
156-
/* Paste from existing tests; TODO: rework according to new implementations;
157-
add tests for rendering of component to the common tests.
158-
describe('Selection via the range selection chips', () => {
159-
//const previousThreeDaysStart = CalendarDay.today.add('day', -3).native;
160-
//const nextThreeDaysEnd = CalendarDay.today.add('day', 3).native;
161-
162-
// const customRanges: CustomDateRange[] = [
163-
// {
164-
// label: 'Previous Three Days',
165-
// dateRange: {
166-
// start: previousThreeDaysStart,
167-
// end: today.native,
168-
// },
169-
// },
170-
// {
171-
// label: 'Next Three Days',
172-
// dateRange: {
173-
// start: today.native,
174-
// end: nextThreeDaysEnd,
175-
// },
176-
// },
177-
// ];
178-
179-
it('should not render any chips when usePredefinedRanges is false and there are no custom ranges added', async () => {
180-
picker.open = true;
181-
await elementUpdated(picker);
182-
183-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
184-
expect(chips.length).to.equal(0);
185-
});
186-
187-
it('should render all predefined ranges and content in the actions slot', async () => {
188-
picker = await fixture<IgcDateRangePickerComponent>(
189-
html`<igc-date-range-picker use-predefined-ranges>
190-
<span slot="actions">Actions Slot</span>
191-
</igc-date-range-picker>`
192-
);
193-
194-
picker.open = true;
195-
const predefinedRanges = (picker as any)._predefinedRanges;
196-
await elementUpdated(picker);
197-
198-
const chips = picker.renderRoot.querySelectorAll('igc-chip');
199-
const slot = picker.renderRoot.querySelector(
200-
`slot[name="actions"]`
201-
) as HTMLSlotElement;
202-
const elements = slot.assignedElements();
203-
204-
expect(elements.length).to.equal(1);
205-
expect(elements[0].tagName).to.equal('SPAN');
206-
expect(elements[0].innerHTML).to.equal('Actions Slot');
207-
208-
for (let i = 0; i < chips.length; i++) {
209-
expect(chips[i].innerText).to.equal(predefinedRanges[i].label);
210-
}
211-
});
212-
213-
// it('should emit igcChange when the chips are clicked and should be closed - dropdown mode', async () => {
214-
// const eventSpy = spy(picker, 'emitEvent');
215-
// const popover = picker.renderRoot.querySelector('igc-popover');
216-
217-
// const predefinedRanges = [
218-
// ...(picker as any)._predefinedRanges,
219-
// ...customRanges,
220-
// ];
221-
// picker.usePredefinedRanges = true;
222-
// picker.customRanges = customRanges;
223-
224-
// picker.open = true;
225-
// await elementUpdated(picker);
226-
227-
// const allRangesLength = (picker as any)._allRanges.length;
228-
// const chips = picker.renderRoot.querySelectorAll('igc-chip');
229-
// expect(chips.length).to.equal(allRangesLength);
230-
231-
// for (let i = 0; i < chips.length; i++) {
232-
// picker.open = true;
233-
// await elementUpdated(picker);
234-
235-
// expect(chips[i].innerText).to.equal(predefinedRanges[i].label);
236-
237-
// chips[i].click();
238-
// await elementUpdated(picker);
239-
240-
// expect(eventSpy).calledWith('igcChange');
241-
// expect(picker.activeDate).to.deep.equal(
242-
// predefinedRanges[i].dateRange.start
243-
// );
244-
245-
// checkSelectedRange(picker, {
246-
// start: predefinedRanges[i].dateRange.start,
247-
// end: predefinedRanges[i].dateRange.end,
248-
// });
249-
// expect(popover?.hasAttribute('open')).to.equal(false);
250-
// eventSpy.resetHistory();
251-
// }
252-
// });
253-
254-
// it('should emit igcChange on committing the new selection through chips - dialog mode', async () => {
255-
// const eventSpy = spy(picker, 'emitEvent');
256-
// picker.mode = 'dialog';
257-
258-
// const predefinedRanges = [
259-
// ...(picker as any)._predefinedRanges,
260-
// ...customRanges,
261-
// ];
262-
// picker.usePredefinedRanges = true;
263-
// picker.customRanges = customRanges;
264-
265-
// picker.open = true;
266-
// await elementUpdated(picker);
267-
268-
// let dialog = picker.renderRoot.querySelector('igc-dialog');
269-
// const allRangesLength = (picker as any)._allRanges.length;
270-
// const chips = picker.renderRoot.querySelectorAll('igc-chip');
271-
// expect(chips.length).to.equal(allRangesLength);
272-
273-
// for (let i = 0; i < chips.length; i++) {
274-
// picker.open = true;
275-
// await elementUpdated(picker);
276-
// dialog = picker.renderRoot.querySelector('igc-dialog');
277-
// expect(chips[i].innerText).to.equal(predefinedRanges[i].label);
278-
279-
// chips[i].click();
280-
// await elementUpdated(picker);
281-
282-
// expect(eventSpy).not.calledWith('igcChange');
283-
// expect(picker.activeDate).to.deep.equal(
284-
// predefinedRanges[i].dateRange.start
285-
// );
286-
287-
// checkSelectedRange(picker, {
288-
// start: predefinedRanges[i].dateRange.start,
289-
// end: predefinedRanges[i].dateRange.end,
290-
// });
291-
// expect(dialog?.hasAttribute('open')).to.equal(true);
292-
293-
// const doneBtn = picker.shadowRoot!.querySelector(
294-
// 'igc-button[slot="footer"]:last-of-type'
295-
// ) as HTMLButtonElement;
296-
// doneBtn?.click();
297-
// await elementUpdated(picker);
298-
299-
// expect(eventSpy).calledWith('igcChange');
300-
// expect(eventSpy).calledWith('igcClosing');
301-
// expect(eventSpy).calledWith('igcClosed');
302-
// expect(dialog?.hasAttribute('open')).to.equal(false);
303-
// eventSpy.resetHistory();
304-
// }
305-
// });
306-
307-
// it('should render only custom chips, when usePredefinedRanges is false and emit igcChange when chips are clicked', async () => {
308-
// const eventSpy = spy(picker, 'emitEvent');
309-
// const popover = picker.renderRoot.querySelector('igc-popover');
310-
311-
// picker.customRanges = customRanges;
312-
// picker.open = true;
313-
// await elementUpdated(picker);
314-
315-
// const chips = picker.renderRoot.querySelectorAll('igc-chip');
316-
// expect(chips.length).to.equal(picker.customRanges.length);
317-
318-
// expect(chips[0].innerText).to.equal('Previous Three Days');
319-
// expect(chips[1].innerText).to.equal('Next Three Days');
320-
321-
// chips[0].click();
322-
// await elementUpdated(picker);
323-
324-
// expect(eventSpy).calledWith('igcChange');
325-
// expect(picker.activeDate).to.deep.equal(previousThreeDaysStart);
326-
327-
// checkSelectedRange(picker, {
328-
// start: previousThreeDaysStart,
329-
// end: today.native,
330-
// });
331-
332-
// expect(popover?.hasAttribute('open')).to.equal(false);
333-
334-
// picker.open = true;
335-
// await elementUpdated(picker);
336-
// chips[1].click();
337-
// await elementUpdated(picker);
338-
339-
// expect(eventSpy).calledWith('igcChange');
340-
// expect(picker.activeDate).to.deep.equal(today.native);
341-
342-
// checkSelectedRange(picker, {
343-
// start: today.native,
344-
// end: nextThreeDaysEnd,
345-
// });
346-
347-
// expect(popover?.hasAttribute('open')).to.equal(false);
348-
// });
349-
});
350-
*/

0 commit comments

Comments
 (0)