test(datepicker): it should render the empty date label property afte…

…r clicking clear button"

A new optional property with a default value was added to the component definition to define what
text the developer wants to use when the datepicker component has its date cleared ( which means no
date selected ).

themesberg#1039 themesberg#1167

src/components/Datepicker/Datepicker.spec.tsx

@@ -34,20 +34,30 @@ describe('Components / Datepicker', () => {
     expect((screen.getByRole('textbox') as HTMLInputElement).value?.includes(`${anotherDay}`)).toBeTruthy();
   });
 
-  it("should reset to today's date when Clear button is clicked", async () => {
-    const labelEmptyDate = 'No date selected'; // Replace with your actual label for empty date
-    const todaysDayOfMonth = new Date().getDate();
-    const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
-
-    render(<Datepicker />);
-
-    await userEvent.click(screen.getByRole('textbox'));
-    await userEvent.click(screen.getAllByText(anotherDay)[0]);
-    await userEvent.click(screen.getByRole('textbox'));
-    await userEvent.click(screen.getByText('Clear'));
-
-    expect(screen.getByDisplayValue(labelEmptyDate)).toBeInTheDocument();
-    expect(screen.queryByRole('gridcell', { selected: true })).toBeNull();
+  describe('Clear button functionality', () => {
+    const testClearButton = async (labelEmptyDate?: string) => {
+      const todaysDayOfMonth = new Date().getDate();
+      const anotherDay = todaysDayOfMonth === 1 ? 2 : 1;
+
+      render(<Datepicker labelEmptyDate={labelEmptyDate ? labelEmptyDate : undefined} />);
+
+      await userEvent.click(screen.getByRole('textbox'));
+      await userEvent.click(screen.getAllByText(anotherDay)[0]);
+      await userEvent.click(screen.getByRole('textbox'));
+      await userEvent.click(screen.getByText('Clear'));
+
+      expect(screen.getByDisplayValue(labelEmptyDate ? labelEmptyDate : 'No date selected')).toBeInTheDocument();
+      expect(screen.queryByRole('gridcell', { selected: true })).toBeNull();
+    };
+
+    it('should reset date to null and show default empty label when Clear button is clicked', async () => {
+      await testClearButton();
+    });
+
+    it('should reset date to null and show custom empty label when Clear button is clicked', async () => {
+      const labelEmptyDate = 'Custom empty label';
+      await testClearButton(labelEmptyDate);
+    });
   });
 
   it("should use today's date when Today button is clicked", async () => {