Merge pull request #153 from ZeroGachis/task/sdet-208-add-date-select…

…or-bis Task/sdet 208 add date selector bis
ZeroGachis · Dec 20, 2023 · 3b7fbe5 · 3b7fbe5
2 parents 77690de + b898c13
commit 3b7fbe5
Show file tree

Hide file tree

Showing 8 changed files with 403 additions and 1 deletion.
diff --git a/Storybook/.ondevice/storybook.requires.js b/Storybook/.ondevice/storybook.requires.js
@@ -55,6 +55,7 @@ const getStories = () => {
     "./components/Button/Button.stories.tsx": require("../components/Button/Button.stories.tsx"),
     "./components/Card/Card.stories.tsx": require("../components/Card/Card.stories.tsx"),
     "./components/DateSelector/DateField.stories.tsx": require("../components/DateSelector/DateField.stories.tsx"),
+    "./components/DateSelector/DateSelector.stories.tsx": require("../components/DateSelector/DateSelector.stories.tsx"),
     "./components/Dialog/Dialog.stories.tsx": require("../components/Dialog/Dialog.stories.tsx"),
     "./components/Divider/Divider.stories.tsx": require("../components/Divider/Divider.stories.tsx"),
     "./components/DropDown/DropDown.stories.tsx": require("../components/DropDown/DropDown.stories.tsx"),

diff --git a/Storybook/components/DateSelector/DateSelector.stories.tsx b/Storybook/components/DateSelector/DateSelector.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { DateSelector } from '../../../src/components/dateSelector/DateSelector';
+import type { ComponentMeta, ComponentStory } from '@storybook/react-native';
+import { StyleSheet, View } from 'react-native';
+
+export default {
+    title: 'components/DateSelector',
+    component: DateSelector,
+    argTypes: {
+        prefilled: { control: { type: 'date' } },
+    },
+    args: {
+        prefilled: new Date(2023, 0, 8),
+    },
+    decorators: [
+        (Story) => {
+            const styles = StyleSheet.create({
+                container: { paddingTop: 16 },
+            });
+            return (
+                <View style={styles.container}>
+                    <Story />
+                </View>
+            );
+        },
+    ],
+} as ComponentMeta<typeof DateSelector>;
+
+export const Base: ComponentStory<typeof DateSelector> = (args) => (
+    <DateSelector {...args} />
+);
diff --git a/src/__tests__/components/DateSelector.test.tsx b/src/__tests__/components/DateSelector.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { fireEvent, render, act } from '@testing-library/react-native';
+import { ThemeProvider } from '../../styles/themes';
+import { DateSelector } from '../../components';
+
+const mockedCallback = jest.fn();
+const mockedTestID = 'mockedTestID';
+
+describe('MODULE | DateField', () => {
+    it('component renders correctly with prefilled values in DD/MM/YY', () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateSelector prefilled={new Date(2003, 1, 1)} />
+            </ThemeProvider>,
+        );
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('fires callback with correctly formatted date', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateSelector
+                    prefilled={new Date(2003, 1, 1)}
+                    onChange={mockedCallback}
+                    testID={mockedTestID}
+                />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent.changeText(
+                tree.getByTestId(mockedTestID + '/first'),
+                '12',
+            );
+        });
+
+        await act(async () => {
+            fireEvent(tree.getByTestId(mockedTestID + '/first'), 'blur');
+        });
+
+        expect(mockedCallback).toHaveBeenCalledWith(new Date(2003, 1, 12));
+    });
+});
diff --git a/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap b/src/__tests__/components/__snapshots__/DateSelector.test.tsx.snap
@@ -0,0 +1,183 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MODULE | DateField component renders correctly with prefilled values in DD/MM/YY 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "alignItems": "center",
+          "alignSelf": "center",
+          "flexDirection": "row",
+        }
+      }
+    >
+      <TextInput
+        cursorColor="#18A586"
+        keyboardType="numeric"
+        maxLength={2}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder="01"
+        placeholderTextColor="#919EAB"
+        selectTextOnFocus={true}
+        selectionColor="#18A58629"
+        style={
+          {
+            "backgroundColor": "#919EAB14",
+            "borderColor": undefined,
+            "borderRadius": 18,
+            "borderWidth": 0,
+            "color": "#919EAB",
+            "fontFamily": "PublicSans-Bold",
+            "fontSize": 20,
+            "height": 48,
+            "lineHeight": 23.5,
+            "marginVertical": 0,
+            "paddingVertical": 0,
+            "width": 72,
+          }
+        }
+        testID="undefined/first"
+        textAlign="center"
+        value=""
+      />
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "width": 26,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#212B36",
+                "fontFamily": "PublicSans-Bold",
+                "fontSize": 20,
+              },
+              {
+                "color": "#919EAB",
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          /
+        </Text>
+      </View>
+      <TextInput
+        cursorColor="#18A586"
+        keyboardType="numeric"
+        maxLength={2}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder="02"
+        placeholderTextColor="#919EAB"
+        selectTextOnFocus={true}
+        selectionColor="#18A58629"
+        style={
+          {
+            "backgroundColor": "#919EAB14",
+            "borderColor": undefined,
+            "borderRadius": 18,
+            "borderWidth": 0,
+            "color": "#919EAB",
+            "fontFamily": "PublicSans-Bold",
+            "fontSize": 20,
+            "height": 48,
+            "lineHeight": 23.5,
+            "marginVertical": 0,
+            "paddingVertical": 0,
+            "width": 72,
+          }
+        }
+        testID="undefined/second"
+        textAlign="center"
+        value=""
+      />
+      <View
+        style={
+          {
+            "alignItems": "center",
+            "justifyContent": "center",
+            "width": 26,
+          }
+        }
+      >
+        <Text
+          style={
+            [
+              {
+                "color": "#212B36",
+                "fontFamily": "PublicSans-Bold",
+                "fontSize": 20,
+              },
+              {
+                "color": "#919EAB",
+                "fontSize": 20,
+              },
+            ]
+          }
+        >
+          /
+        </Text>
+      </View>
+      <TextInput
+        cursorColor="#18A586"
+        keyboardType="numeric"
+        maxLength={2}
+        onBlur={[Function]}
+        onChangeText={[Function]}
+        onFocus={[Function]}
+        placeholder="03"
+        placeholderTextColor="#919EAB"
+        selectTextOnFocus={true}
+        selectionColor="#18A58629"
+        style={
+          {
+            "backgroundColor": "#919EAB14",
+            "borderColor": undefined,
+            "borderRadius": 18,
+            "borderWidth": 0,
+            "color": "#919EAB",
+            "fontFamily": "PublicSans-Bold",
+            "fontSize": 20,
+            "height": 48,
+            "lineHeight": 23.5,
+            "marginVertical": 0,
+            "paddingVertical": 0,
+            "width": 72,
+          }
+        }
+        testID="undefined/third"
+        textAlign="center"
+        value=""
+      />
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;
diff --git a/src/components/datePicker/DateField.tsx → src/components/dateSelector/DateField.tsx b/src/components/datePicker/DateField.tsx → src/components/dateSelector/DateField.tsx