From 305347131c29889fdde1d538ef7d8ece3f1bf1b7 Mon Sep 17 00:00:00 2001
From: Thet Aung <maksimsenkevich@MacBook-Pro-von-Maksim.local>
Date: Thu, 22 Dec 2022 17:08:50 +0300
Subject: [PATCH] added interaction tests for DatePickerInput

---
 .../DatePickerInput.stories.tsx               | 64 +++++++++++++++++++
 1 file changed, 64 insertions(+)

diff --git a/example/stories/components/DatePickerInput/DatePickerInput.stories.tsx b/example/stories/components/DatePickerInput/DatePickerInput.stories.tsx
index ec32fcf3..ff80f04d 100644
--- a/example/stories/components/DatePickerInput/DatePickerInput.stories.tsx
+++ b/example/stories/components/DatePickerInput/DatePickerInput.stories.tsx
@@ -1,5 +1,8 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
 
+import { delay } from '../../common';
 import { ControlledExample } from './DatePickerInput';
 
 export default {
@@ -37,3 +40,64 @@ Default.parameters = {
         },
     },
 };
+
+export const Interactions = Default.bind({});
+
+Interactions.args = {
+    ...Default.args,
+    testID: 'datepickerInputInteractions',
+};
+
+Interactions.parameters = {
+    ...Default.parameters,
+};
+
+Interactions.play = async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await delay(500);
+
+    // first clear the input
+    await userEvent.clear(canvas.getByTestId('datepickerInputInteractions-flat'));
+
+    await delay(500);
+
+    // type in the wrong format
+    await userEvent.type(canvas.getByTestId('datepickerInputInteractions-flat'), '1311');
+
+    await delay(500);
+
+    await userEvent.type(canvas.getByTestId('datepickerInputInteractions-flat'), '111');
+
+    await delay(500);
+
+    // should show an error
+    await expect(canvas.getByText('Date format must be MM/dd/yy')).toBeInTheDocument();
+
+    await delay(500);
+
+    // clear again
+    await userEvent.clear(canvas.getByTestId('datepickerInputInteractions-flat'));
+
+    await delay(500);
+
+    // type in the correct format
+    await userEvent.type(canvas.getByTestId('datepickerInputInteractions-flat'), '121122');
+
+    await delay(500);
+
+    // the error should be gone
+    await expect(canvas.queryByText('Date format must be MM/dd/yy')).not.toBeTruthy();
+
+    await delay(500);
+
+    // click the calendar icon
+    await userEvent.click(canvas.getByRole('button'));
+
+    await delay(500);
+
+    // the modal should show up
+    await expect(
+        within(canvasElement.ownerDocument.body).getByText('SELECT DATE'),
+    ).toBeInTheDocument();
+};