add date range change event to DateRangePicker (#1811)

* add date range change emitter to date-range-picker * Cast eventSpy to stop TS errors
momentum-design · Nov 1, 2024 · afb3ed3 · afb3ed3
1 parent 4b58188
commit afb3ed3
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 0 deletions.
diff --git a/web-components/src/components/date-range-picker/DateRangePicker.test.ts b/web-components/src/components/date-range-picker/DateRangePicker.test.ts
@@ -71,6 +71,37 @@ describe("DatePicker Component", () => {
     expect(el.startDate).toEqual(secondDate.toSQLDate());
     expect(el.endDate).toEqual(firstDate.toSQLDate());
   });
+
+  test("should only emit date-range-change event when both start and end dates set", async () => {
+    const el: DateRangePicker.ELEMENT = new DateRangePicker.ELEMENT();
+    expect(el.startDate).toBeUndefined();
+    expect(el.endDate).toBeUndefined();
+
+    let capturedEvent: CustomEvent | null = null;
+    const eventSpy = jest.fn((event: CustomEvent) => {
+      capturedEvent = event;
+    }) as unknown as EventListener;
+    el.addEventListener('date-range-change', eventSpy as EventListener);
+
+    el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 1 }) } });
+    expect(el.startDate).not.toBeUndefined();
+    expect(el.endDate).toBeUndefined();
+
+    expect(eventSpy).not.toHaveBeenCalled();
+    expect(capturedEvent).toBeNull();
+
+    el.handleDateSelection({ detail: { data: DateTime.fromObject({ month: 1, day: 2 }) } });
+    expect(el.startDate).not.toBeUndefined();
+    expect(el.startDate).not.toBeUndefined();
+
+    expect(eventSpy).toHaveBeenCalledTimes(1);
+    expect(capturedEvent).not.toBeNull();
+    expect(capturedEvent!.detail).toEqual({
+      startDate: el.startDate,
+      endDate: el.endDate,
+    });
+  });
+
   describe("should handle range modification scenarios", () => {
     const startDate = DateTime.fromObject({ month: 11, day: 15 });
     const endDate = startDate.plus({ days: 5 });

diff --git a/web-components/src/components/date-range-picker/DateRangePicker.ts b/web-components/src/components/date-range-picker/DateRangePicker.ts
@@ -80,8 +80,23 @@ export namespace DateRangePicker {
       } else {
         this.startDate = this.dateToSqlTranslate(e.detail.data);
       }
+      this.emitDateRange();
       this.updateValue();
     };
+
+    emitDateRange() {
+      if (!this.startDate || !this.endDate) {
+        return;
+      }
+
+      const event = new CustomEvent("date-range-change", {
+        detail: {
+          startDate: this.startDate,
+          endDate: this.endDate,
+        },
+      });
+      this.dispatchEvent(event);
+    }
   }
 }