From 455529fbdbaa5f66f11ec97604458048b2bc8aba Mon Sep 17 00:00:00 2001
From: riddhybansal <riddhybansal@gmail.com>
Date: Tue, 7 May 2024 21:07:05 +0530
Subject: [PATCH] fix: added test case

---
 .../components/DatePicker/DatePicker-test.js  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/DatePicker/DatePicker-test.js b/packages/react/src/components/DatePicker/DatePicker-test.js
index ea3ab3c0e4f4..89bfaefc3109 100644
--- a/packages/react/src/components/DatePicker/DatePicker-test.js
+++ b/packages/react/src/components/DatePicker/DatePicker-test.js
@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 import DatePicker from './DatePicker';
 import DatePickerInput from '../DatePickerInput';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Slug } from '../Slug';
 
@@ -100,6 +100,35 @@ describe('DatePicker', () => {
     ).toBeInTheDocument();
   });
 
+  it('should not fire onChange handler when clicking outside the datepicker in range mode', () => {
+    const handleChange = jest.fn();
+    const { getByLabelText, getByText } = render(
+      <DatePicker
+        onChange={handleChange}
+        dateFormat="m/d/Y"
+        datePickerType="range">
+        <DatePickerInput
+          id="date-picker-input-id-start"
+          placeholder="mm/dd/yyyy"
+          labelText="Start date"
+        />
+        <DatePickerInput
+          id="date-picker-input-id-finish"
+          placeholder="mm/dd/yyyy"
+          labelText="End date"
+        />
+      </DatePicker>
+    );
+    const startDateInput = getByLabelText('Start date');
+    const endDateInput = getByLabelText('End date');
+    // Change the dates
+    fireEvent.change(startDateInput, { target: { value: '01/01/2023' } });
+    fireEvent.change(endDateInput, { target: { value: '01/07/2023' } });
+    // Simulate a click event outside the datepicker
+    fireEvent.click(document.body);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
   it('should render the children as expected', () => {
     render(
       <DatePicker onChange={() => {}} dateFormat="m/d/Y" datePickerType="range">