✅ #292 - chore: Stable test results for date range picker

Currently, the date range picker storybook tests finish on an empty selected. With this, the current date is selected as default value. When running chromatic the date range picker components are always flagged as "modified" because the selected date is different then before.

By making the date range picker tests finish on a stable predetermined selected date, we ensure that future chromatic tests will result to the same UI and don't trigger false-positive "modified" results.

Author: robinmolen

src/components/form/datepicker/datepicker.stories.tsx

@@ -136,6 +136,17 @@ export const DateRangePicker: Story = {
     await waitFor(testFormDataSerialization.bind(this, ""));
     await waitFor(testEventListener.bind(this, ""));
 
+    // Test type date.
+    await userEvent.type(input, "2023/09/14 - 2023/09/15", { delay: 10 });
+    // Close and re-open the datepicker to update the UI
+    await userEvent.tab();
+    await userEvent.click(input, { delay: 10 });
+
+    await waitFor(
+      testFormDataSerialization.bind(this, "2023-09-14/2023-09-15"),
+    );
+    await waitFor(testEventListener.bind(this, "09/14/2023 - 09/15/2023"));
+
     async function testFormDataSerialization(expectedDate: string) {
       const pre = await canvas.findByRole("log");
       const data = JSON.parse(pre?.textContent || "{}");