refactor: add util function to compare date range and use it where applicable

Author: ddaribo

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

@@ -61,15 +61,15 @@ describe('Date range picker', () => {
       await expect(picker).lightDom.to.be.accessible();
     });
 
-    xit('is accessible (open state) - default dropdown mode', async () => {
+    it('is accessible (open state) - default dropdown mode', async () => {
       picker.open = true;
       await elementUpdated(picker);
 
       await expect(picker).shadowDom.to.be.accessible();
       await expect(picker).lightDom.to.be.accessible();
     });
 
-    xit('is accessible (open state) - dialog mode', async () => {
+    it('is accessible (open state) - dialog mode', async () => {
       picker.open = true;
       picker.mode = 'dialog';
       await elementUpdated(picker);
@@ -753,6 +753,27 @@ describe('Date range picker', () => {
         });
       });
 
+      it('should not emit igcChange when value is unchanged and done is clicked (dialog)', async () => {
+        const eventSpy = spy(picker, 'emitEvent');
+        picker.value = { start: today.native, end: tomorrow.native };
+        picker.mode = 'dialog';
+        await elementUpdated(picker);
+
+        picker.open = true;
+        await elementUpdated(picker);
+
+        expect(eventSpy).not.to.be.calledWith('igcChange');
+        const 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).not.calledWith('igcChange');
+      });
+
       it('should select a range of dates in dialog mode and emit igcChange when done is clicked', async () => {
         const eventSpy = spy(picker, 'emitEvent');
 
@@ -2033,12 +2054,8 @@ const checkSelectedRange = (
     IgcCalendarComponent.tagName
   )!;
 
-  if (expectedValue?.start) {
-    checkDatesEqual(picker.value?.start!, expectedValue.start);
-  }
-  if (expectedValue?.end) {
-    checkDatesEqual(picker.value?.end!, expectedValue.end);
-  }
+  DateTimeUtil.areDateRangesEqual(picker.value, expectedValue);
+
   if (!useTwoInputs) {
     const input = picker.renderRoot.querySelector(IgcInputComponent.tagName)!;
     const start = expectedValue?.start

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

@@ -652,7 +652,9 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   }
 
   protected dialogDone() {
-    this.emitEvent('igcChange', { detail: this.value });
+    if (!DateTimeUtil.areDateRangesEqual(this.value, this._oldValue)) {
+      this.emitEvent('igcChange', { detail: this.value });
+    }
     this._hide(true);
   }
 
@@ -723,11 +725,12 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
   protected handleFocusOut({ relatedTarget }: FocusEvent) {
     if (!this.contains(relatedTarget as Node)) {
       this.checkValidity();
-      if (
-        !this.useTwoInputs &&
-        !this.readOnly &&
-        this._oldValue !== this.value
-      ) {
+
+      const isSameValue = DateTimeUtil.areDateRangesEqual(
+        this.value,
+        this._oldValue
+      );
+      if (!this.useTwoInputs && !this.readOnly && !isSameValue) {
         this.emitEvent('igcChange', { detail: this.value });
       }
     }

src/components/date-time-input/date-util.spec.ts

@@ -645,4 +645,28 @@ describe('Date Util', () => {
     DateTimeUtil.spinAmPm(currentDate, newDate, 'AM');
     expect(currentDate.getHours()).to.equal(4);
   });
+
+  it('should correctly compare DateRangeValue objects', () => {
+    const now = new Date();
+    const later = new Date(now.getTime() + 1000 * 60 * 60); // 1 hour later
+
+    const range1 = { start: now, end: later };
+    const range2 = { start: new Date(now), end: new Date(later) };
+    const range3 = { start: new Date(now), end: new Date(now) };
+
+    expect(DateTimeUtil.areDateRangesEqual(range1, range2)).to.be.true;
+
+    expect(DateTimeUtil.areDateRangesEqual(range1, range3)).to.be.false;
+
+    expect(DateTimeUtil.areDateRangesEqual(range1, null)).to.be.false;
+    expect(DateTimeUtil.areDateRangesEqual(null, range2)).to.be.false;
+
+    expect(DateTimeUtil.areDateRangesEqual(null, null)).to.be.true;
+
+    const partial1 = { start: null, end: later };
+    const partial2 = { start: null, end: new Date(later) };
+    const partial3 = { start: now, end: later };
+    expect(DateTimeUtil.areDateRangesEqual(partial1, partial2)).to.be.true;
+    expect(DateTimeUtil.areDateRangesEqual(partial1, partial3)).to.be.false;
+  });
 });

src/components/date-time-input/date-util.ts

@@ -1,4 +1,5 @@
 import { parseISODate } from '../calendar/helpers.js';
+import type { DateRangeValue } from '../date-range-picker/date-range-picker.js';
 import { MaskParser } from '../mask-input/mask-parser.js';
 
 export enum FormatDesc {
@@ -553,6 +554,29 @@ export abstract class DateTimeUtil {
       : format;
   }
 
+  /**
+   * Compares two date-range values.
+   *
+   * @param first, @param second - the values to compare
+   */
+  public static areDateRangesEqual(
+    first: DateRangeValue | null,
+    second: DateRangeValue | null
+  ): boolean {
+    if (!first && !second) {
+      return true;
+    }
+
+    if (!first || !second) {
+      return false;
+    }
+
+    const isStartEqual = first.start?.getTime() === second.start?.getTime();
+    const isEndEqual = first.end?.getTime() === second.end?.getTime();
+
+    return isStartEqual && isEndEqual;
+  }
+
   private static setDisplayFormatOptions(
     value: Date,
     format: string,