chore: add few tests, fix styles lint error

Author: ddaribo

src/components/date-range-picker/date-range-picker.base.scss

@@ -2,14 +2,17 @@
     display: flex;
     flex-direction: column;
   }
+
   [part='inputs'] {
     display: flex;
     flex-direction: row;
     align-items: end;
   }
+
   [part='separator'] {
     margin: 0 20px;
   }
+
   [part='predefined-ranges'] {
     display: flex;
     flex-direction: row;

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

@@ -6,6 +6,8 @@ import { CalendarDay } from '../calendar/model.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
 import { simulateClick } from '../common/utils.spec.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
+import { DateTimeUtil } from '../date-time-input/date-util.js';
+import IgcInputComponent from '../input/input.js';
 import IgcDateRangePickerComponent from './date-range-picker.js';
 
 describe('Date range picker', () => {
@@ -15,6 +17,9 @@ describe('Date range picker', () => {
   let _dateTimeInput: IgcDateTimeInputComponent;
   let calendar: IgcCalendarComponent;
 
+  const today = CalendarDay.from(new Date());
+  const tomorrow = today.add('day', 1);
+
   beforeEach(async () => {
     picker = await fixture<IgcDateRangePickerComponent>(
       html`<igc-date-range-picker></igc-date-range-picker>`
@@ -82,18 +87,14 @@ describe('Date range picker', () => {
     });
 
     it('should be successfully initialized with value', async () => {
-      const expectedValue = [new Date(2024, 2, 19), new Date(2025, 2, 20)];
+      const expectedValue = [today.native, tomorrow.native];
       picker = await fixture<IgcDateRangePickerComponent>(
         html`<igc-date-range-picker
           .value="${expectedValue}"
         ></igc-date-range-picker>`
       );
-      _dateTimeInput = picker.renderRoot.querySelector(
-        IgcDateTimeInputComponent.tagName
-      )!;
 
-      expect(picker.value).not.to.be.null;
-      expect(picker.value).to.deep.equal(expectedValue);
+      checkSelectedRange(picker, expectedValue);
     });
 
     it('should be successfully initialized in open state in dropdown mode', async () => {
@@ -125,104 +126,155 @@ describe('Date range picker', () => {
       expect(calendar).not.to.be.undefined;
       expect(calendar.parentElement).to.equal(dialog);
     });
-  });
-  describe('Selection via the calendar', () => {
-    const today = CalendarDay.from(new Date());
-    const tomorrow = today.add('day', 1);
-
-    it('should select a single date in dropdown mode and emit igcChange', async () => {
-      const eventSpy = spy(picker, 'emitEvent');
-      picker.open = true;
-      await elementUpdated(picker);
-
-      await selectDates(today, null, calendar);
 
-      expect(eventSpy).calledWith('igcChange');
-      expect(picker.value?.length).to.equal(2);
-      expect(picker.value?.[0]).to.deep.equal(today.native);
-      expect(picker.value?.[1]).to.deep.equal(today.native);
-
-      const popover = picker.renderRoot.querySelector('igc-popover');
-      // when selecting a single date, the calendar won't close
-      expect(popover?.hasAttribute('open')).to.equal(true);
-    });
-
-    it('should select a range of dates in dropdown mode and emit igcChange', async () => {
-      const eventSpy = spy(picker, 'emitEvent');
-
-      picker.open = true;
-      await elementUpdated(picker);
-
-      await selectDates(today, tomorrow, calendar);
+    it('should be initialized as single input', async () => {
+      picker = await fixture<IgcDateRangePickerComponent>(
+        html`<igc-date-range-picker single-input></igc-date-range-picker>`
+      );
 
-      expect(eventSpy).calledWith('igcChange');
-      expect(picker.value?.length).to.equal(2);
-      expect(picker.value?.[0]).to.deep.equal(today.native);
-      expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
+      expect(picker.singleInput).to.equal(true);
+      await picker.show();
 
-      const popover = picker.renderRoot.querySelector('igc-popover');
-      // with the second click, the calendar closes
-      expect(popover?.hasAttribute('open')).to.equal(false);
+      const input = picker.renderRoot.querySelectorAll(
+        IgcInputComponent.tagName
+      )!;
+      expect(input).to.have.length(1);
+      const dateTimeInputs = picker.renderRoot.querySelectorAll(
+        IgcDateTimeInputComponent.tagName
+      );
+      expect(dateTimeInputs).to.have.length(0);
     });
+  });
+  describe('Properties', () => {
+    it('should keep the calendar selection and input values on changing the mode', async () => {
+      const expectedValue = [today.native, tomorrow.native];
+      picker = await fixture<IgcDateRangePickerComponent>(
+        html`<igc-date-range-picker
+          .value="${expectedValue}"
+        ></igc-date-range-picker>`
+      );
 
-    it('should select a range of dates in dialog mode and emit igcChange when done is clicked', async () => {
-      const eventSpy = spy(picker, 'emitEvent');
+      checkSelectedRange(picker, expectedValue);
 
       picker.mode = 'dialog';
       await elementUpdated(picker);
-      picker.open = true;
-      await elementUpdated(picker);
-
-      await selectDates(today, tomorrow, calendar);
-
-      expect(eventSpy).not.to.be.calledWith('igcChange');
-      let dialog = picker.renderRoot.querySelector('igc-dialog');
-      expect(dialog?.hasAttribute('open')).to.equal(true);
 
-      const doneBtn = picker.shadowRoot!.querySelector(
-        'igc-button[slot="footer"]:last-of-type'
-      ) as HTMLButtonElement;
-      doneBtn?.click();
-      await elementUpdated(picker);
-
-      expect(eventSpy).calledWith('igcChange');
-      expect(picker.value?.length).to.equal(2);
-      expect(picker.value?.[0]).to.deep.equal(today.native);
-      expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
-
-      dialog = picker.renderRoot.querySelector('igc-dialog');
-      expect(dialog?.hasAttribute('open')).to.equal(false);
+      checkSelectedRange(picker, expectedValue);
     });
 
-    it('should not emit igcChange when cancel is clicked and the value should be the initial value', async () => {
-      const eventSpy = spy(picker, 'emitEvent');
+    it('should keep the calendar selection and input values on switching to singleInput and back', async () => {
+      const expectedValue = [today.native, tomorrow.native];
+      picker = await fixture<IgcDateRangePickerComponent>(
+        html`<igc-date-range-picker
+          .value="${expectedValue}"
+        ></igc-date-range-picker>`
+      );
+      checkSelectedRange(picker, expectedValue);
 
-      picker.mode = 'dialog';
-      const date1 = today.add('day', -2);
-      const date2 = today.add('day', 2);
-      picker.value = [date1.native, date2.native];
+      picker.singleInput = true;
       await elementUpdated(picker);
-      picker.open = true;
+      checkSelectedRange(picker, expectedValue, true);
+      picker.singleInput = false;
       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);
-
-      const cancelBtn = picker.shadowRoot!.querySelector(
-        'igc-button[slot="footer"]'
-      ) as HTMLButtonElement;
-      cancelBtn?.click();
-      await elementUpdated(picker);
-
-      expect(eventSpy).not.to.be.calledWith('igcChange');
-      expect(picker.value?.length).to.equal(2);
-      expect(picker.value?.[0]).to.deep.equal(date1.native);
-      expect(picker.value?.[1]).to.deep.equal(date2.native);
-      dialog = picker.renderRoot.querySelector('igc-dialog');
-      expect(dialog?.hasAttribute('open')).to.equal(false);
+      checkSelectedRange(picker, expectedValue);
+    });
+  });
+  describe('Interactions', () => {
+    describe('Selection via the calendar', () => {
+      it('should select a single date in dropdown mode and emit igcChange', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        picker.open = true;
+        await elementUpdated(picker);
+
+        await selectDates(today, null, calendar);
+
+        expect(eventSpy).calledWith('igcChange');
+        expect(picker.value?.length).to.equal(2);
+        expect(picker.value?.[0]).to.deep.equal(today.native);
+        expect(picker.value?.[1]).to.deep.equal(today.native);
+
+        const popover = picker.renderRoot.querySelector('igc-popover');
+        // when selecting a single date, the calendar won't close
+        expect(popover?.hasAttribute('open')).to.equal(true);
+      });
+
+      it('should select a range of dates in dropdown mode and emit igcChange', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        picker.open = true;
+        await elementUpdated(picker);
+
+        await selectDates(today, tomorrow, calendar);
+
+        expect(eventSpy).calledWith('igcChange');
+        expect(picker.value?.length).to.equal(2);
+        expect(picker.value?.[0]).to.deep.equal(today.native);
+        expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
+
+        const popover = picker.renderRoot.querySelector('igc-popover');
+        // with the second click, the calendar closes
+        expect(popover?.hasAttribute('open')).to.equal(false);
+      });
+
+      it('should select a range of dates in dialog mode and emit igcChange when done is clicked', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        picker.mode = 'dialog';
+        await elementUpdated(picker);
+        picker.open = true;
+        await elementUpdated(picker);
+
+        await selectDates(today, tomorrow, calendar);
+
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        let dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(true);
+
+        const doneBtn = picker.shadowRoot!.querySelector(
+          'igc-button[slot="footer"]:last-of-type'
+        ) as HTMLButtonElement;
+        doneBtn?.click();
+        await elementUpdated(picker);
+
+        expect(eventSpy).calledWith('igcChange');
+        expect(picker.value?.length).to.equal(2);
+        expect(picker.value?.[0]).to.deep.equal(today.native);
+        expect(picker.value?.[1]).to.deep.equal(tomorrow.native);
+
+        dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(false);
+      });
+
+      it('should not emit igcChange when cancel is clicked and the value should be the initial value', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+
+        picker.mode = 'dialog';
+        const date1 = today.add('day', -2);
+        const date2 = today.add('day', 2);
+        picker.value = [date1.native, date2.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);
+
+        const cancelBtn = picker.shadowRoot!.querySelector(
+          'igc-button[slot="footer"]'
+        ) as HTMLButtonElement;
+        cancelBtn?.click();
+        await elementUpdated(picker);
+
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        expect(picker.value?.length).to.equal(2);
+        expect(picker.value?.[0]).to.deep.equal(date1.native);
+        expect(picker.value?.[1]).to.deep.equal(date2.native);
+        dialog = picker.renderRoot.querySelector('igc-dialog');
+        expect(dialog?.hasAttribute('open')).to.equal(false);
+      });
     });
   });
 });
@@ -244,3 +296,38 @@ const selectDates = async (
     await elementUpdated(calendar);
   }
 };
+
+const checkSelectedRange = (
+  picker: IgcDateRangePickerComponent,
+  expectedValue: (Date | null)[],
+  singleInput = false
+) => {
+  const calendar = picker.renderRoot.querySelector(
+    IgcCalendarComponent.tagName
+  )!;
+
+  expect(picker.value).not.to.be.null;
+  expect(picker.value).to.deep.equal(expectedValue);
+
+  if (singleInput) {
+    const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
+    const start = DateTimeUtil.formatDate(
+      expectedValue[0]!,
+      picker.locale,
+      picker.displayFormat || picker.inputFormat
+    );
+    const end = DateTimeUtil.formatDate(
+      expectedValue[1]!,
+      picker.locale,
+      picker.displayFormat || picker.inputFormat
+    );
+    expect(input.value).to.equal(`${start} - ${end}`);
+  } else {
+    const inputs = picker.renderRoot.querySelectorAll(
+      IgcDateTimeInputComponent.tagName
+    );
+    expect(inputs[0].value).to.deep.equal(expectedValue[0]);
+    expect(inputs[1].value).to.deep.equal(expectedValue[1]);
+  }
+  expect(calendar.values).to.deep.equal(expectedValue);
+};

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

@@ -425,22 +425,6 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
       .set(escapeKey, this.onEscapeKey);
   }
 
-  protected override createRenderRoot() {
-    const root = super.createRenderRoot();
-    root.addEventListener('slotchange', () => {
-      if (!this.singleInput) {
-        this.setFormats();
-        this.setKeepOpenOnSelectForDialog();
-        if (this.value) {
-          this.updateInputValues();
-        }
-        this.setDateConstraints();
-      }
-      this.requestUpdate();
-    });
-    return root;
-  }
-
   protected override firstUpdated() {
     this.setCalendarRangeValues();
   }
@@ -600,6 +584,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   @watch('inputFormat')
   @watch('displayFormat')
   @watch('locale')
+  @watch('singleInput')
   private updateMaskedRangeValue() {
     if (!this.singleInput) {
       return;
@@ -625,13 +610,14 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   @watch('mode')
-  private async setKeepOpenOnSelectForDialog() {
+  private async modeChanged() {
     if (this.mode === 'dialog') {
       this.keepOpenOnSelect = true;
     }
+    await this.setCalendarRangeValues();
   }
 
-  @watch('mode')
+  @watch('singleInput')
   private async setCalendarRangeValues() {
     if (!this._calendar || !this._startDate || !this._endDate) {
       return;
@@ -941,12 +927,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   private renderInputs(idStart: string, idEnd: string) {
     return html`
       <div part="inputs">
-        ${this.renderInput(idStart, 'start')}${this.renderPicker(idStart)}
+        ${this.renderInput(idStart, 'start')}
         <!-- TODO: localize separator string -->
         <span part="separator">to</span>
         ${this.renderInput(idEnd, 'end')}
       </div>
-      ${this.renderHelperText()}
+      ${this.renderPicker(idStart)} ${this.renderHelperText()}
     `;
   }