Adding minor improvements to stories, visibleMonths setter and tests

Author: Ivan Kitanov

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

@@ -169,19 +169,14 @@ describe('Date range picker', () => {
   });
   describe('Properties', () => {
     it('should set the visibleMonths property correctly', async () => {
-      // picker = await fixture<IgcDateRangePickerComponent>(f
-      //   html`<igc-date-range-picker
-
-      //   ></igc-date-range-picker>`
-      // );
-
       expect(picker.visibleMonths).to.equal(2);
 
       picker.visibleMonths = 1;
       await elementUpdated(picker);
       expect(picker.visibleMonths).to.equal(1);
 
       // in case value other than 1 or 2 the value defaults to 2
+      // @ts-expect-error: testing with an invalid visibleMonths value
       picker.visibleMonths = 11;
       await elementUpdated(picker);
       expect(picker.visibleMonths).to.equal(2);
@@ -197,6 +192,15 @@ describe('Date range picker', () => {
       await elementUpdated(picker);
       expect(picker.visibleMonths).to.equal(1);
 
+      picker = await fixture<IgcDateRangePickerComponent>(
+        html`<igc-date-range-picker
+          visible-months="11"
+        ></igc-date-range-picker>`
+      );
+
+      await elementUpdated(picker);
+      expect(picker.visibleMonths).to.equal(2);
+
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker visible-months="2"></igc-date-range-picker>`
       );
@@ -769,7 +773,7 @@ describe('Date range picker', () => {
         await elementUpdated(picker);
 
         await selectDates(date1, date2, calendar);
-        expect(eventSpy).not.to.be.calledWith('igcChange'); // TODO: should igcChange be emitted for dialog selection before clicking DONE?
+        expect(eventSpy).not.to.be.calledWith('igcChange');
         let dialog = picker.renderRoot.querySelector('igc-dialog');
         expect(dialog?.hasAttribute('open')).to.equal(true);
         checkSelectedRange(picker, { start: date1.native, end: date2.native });
@@ -801,7 +805,7 @@ describe('Date range picker', () => {
         await elementUpdated(picker);
 
         await selectDates(date1, date2, calendar);
-        expect(eventSpy).not.to.be.calledWith('igcChange'); // TODO: should igcChange be emitted for dialog selection before clicking DONE?
+        expect(eventSpy).not.to.be.calledWith('igcChange');
         let dialog = picker.renderRoot.querySelector('igc-dialog');
         expect(dialog?.hasAttribute('open')).to.equal(true);
         checkSelectedRange(picker, { start: date1.native, end: date2.native });
@@ -826,6 +830,38 @@ describe('Date range picker', () => {
         expect(dateTimeInputs[1].value).to.equal(null);
         expect(calendar.values).to.deep.equal([]);
       });
+
+      it('should not emit igcChange when escape is pressed and the value should be the initial value', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        picker.mode = 'dialog';
+        const date1 = today.add('day', -3);
+        const date2 = today.add('day', 3);
+        picker.value = { start: today.native, end: tomorrow.native };
+        await elementUpdated(picker);
+
+        picker.open = true;
+        await elementUpdated(picker);
+
+        await selectDates(date1, date2, calendar);
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        let dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(true);
+        checkSelectedRange(picker, { start: date1.native, end: date2.native });
+
+        simulateKeyboard(picker, escapeKey);
+        await elementUpdated(picker);
+        await elementUpdated(dateTimeInputs[0]);
+        await elementUpdated(dateTimeInputs[1]);
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(false);
+
+        checkSelectedRange(picker, {
+          start: today.native,
+          end: tomorrow.native,
+        });
+      });
     });
     describe('Selection via the range selection chips', () => {
       const previousThreeDaysStart = CalendarDay.from(today.native).add(

src/components/date-range-picker/date-range-picker.ts

@@ -386,12 +386,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
     return this._visibleMonths;
   }
   // setter used to ensure that the property is set to either 1 or 2
-  public set visibleMonths(value: number) {
-    if (value !== 1 && value !== 2) {
-      this._visibleMonths = 2;
-    } else {
-      this._visibleMonths = value as 1 | 2;
-    }
+  public set visibleMonths(value: 1 | 2) {
+    this._visibleMonths = [1, 2].includes(value) ? value : 2;
   }
 
   /**
@@ -646,6 +642,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   protected handleDialogClosing(event: Event) {
     event.stopPropagation();
+    this.revertValue();
     this._hide(true);
   }
 
@@ -1049,8 +1046,8 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       ? html`
           <igc-popover ?open=${this.open} anchor="${id}" flip shift>
             <igc-focus-trap ?disabled=${!this.open || this.disabled}>
-              ${this.renderCalendar(id)} ${this.renderActions()}
-              ${this.renderRanges()}
+              ${this.renderCalendar(id)} ${this.renderRanges()}
+              ${this.renderActions()}
             </igc-focus-trap>
           </igc-popover>
         `

stories/date-range-picker.stories.ts

@@ -358,10 +358,12 @@ const disabledDates: DateRangeDescriptor[] = [
   },
 ];
 
-function selectToday() {
+function selectToday(
+  pickerType: '#singleInput' | '#twoInputs' = '#singleInput'
+) {
   const picker =
-    document.querySelector<IgcDateRangePickerComponent>('#picker')!;
-  picker.value = { start: new Date(), end: new Date() };
+    document.querySelector<IgcDateRangePickerComponent>(pickerType)!;
+  picker.select({ start: new Date(), end: new Date() });
   picker.hide();
 }
 
@@ -511,7 +513,7 @@ export const Slots: Story = {
   render: (args) =>
     html` <h5>Two inputs</h5>
       <igc-date-range-picker
-        id="picker"
+        id="twoInputs"
         .displayFormat=${args.displayFormat}
         .inputFormat=${args.inputFormat}
         .locale=${args.locale}
@@ -528,6 +530,7 @@ export const Slots: Story = {
         .activeDate=${args.activeDate}
         .visibleMonths=${args.visibleMonths}
         .useTwoInputs=${true}
+        .usePredefinedRanges="${args.usePredefinedRanges};"
         ?disabled=${args.disabled}
         ?invalid=${args.invalid}
         ?readonly=${args.readOnly}
@@ -559,14 +562,14 @@ export const Slots: Story = {
         <p slot="title">🎉 Custom title 🎉</p>
 
         <div slot="actions">
-          <igc-button variant="flat" @click=${selectToday}
+          <igc-button variant="flat" @click=${() => selectToday('#twoInputs')}
             >Select today</igc-button
           >
         </div>
       </igc-date-range-picker>
       <h5>Single input</h5>
       <igc-date-range-picker
-        id="picker"
+        id="singleInput"
         .label=${args.label}
         .placeholder=${args.placeholder}
         .displayFormat=${args.displayFormat}
@@ -608,7 +611,7 @@ export const Slots: Story = {
         <p slot="title">🎉 Custom title 🎉</p>
 
         <div slot="actions">
-          <igc-button variant="flat" @click=${selectToday}
+          <igc-button variant="flat" @click=${() => selectToday()}
             >Select today</igc-button
           >
         </div>