From 3709a0502ccf979f1acbe67413fdeb43c0c749e9 Mon Sep 17 00:00:00 2001
From: Josselin TILLAY <j.tillay@smartway.ai>
Date: Mon, 18 Dec 2023 09:36:53 +0100
Subject: [PATCH] :white_check_mark: DateField - add tests

---
 src/__tests__/components/DateField.test.tsx   | 117 ++++++++
 .../__snapshots__/DateField.test.tsx.snap     | 279 ++++++++++++++++++
 2 files changed, 396 insertions(+)
 create mode 100644 src/__tests__/components/DateField.test.tsx
 create mode 100644 src/__tests__/components/__snapshots__/DateField.test.tsx.snap

diff --git a/src/__tests__/components/DateField.test.tsx b/src/__tests__/components/DateField.test.tsx
new file mode 100644
index 00000000..36e24b96
--- /dev/null
+++ b/src/__tests__/components/DateField.test.tsx
@@ -0,0 +1,117 @@
+import React from 'react';
+import { fireEvent, render, act } from '@testing-library/react-native';
+import { ThemeProvider } from '../../styles/themes';
+import { DateField } from '../../components';
+
+const mockedCallback = jest.fn();
+const mockedTestID = 'mockedTestID';
+
+describe('MODULE | DateField', () => {
+    it('component renders correctly in empty mode', () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField placeholder='01' />
+            </ThemeProvider>,
+        );
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('component renders correctly empty focused state', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField testID={mockedTestID} placeholder='01' />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent(tree.getByTestId(mockedTestID), 'focus');
+        });
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('component renders correctly filled focused state', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField testID={mockedTestID} placeholder='01' value='12' />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent(tree.getByTestId(mockedTestID), 'focus');
+        });
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('component renders correctly filled unfocused state', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField testID={mockedTestID} placeholder='01' value='12' />
+            </ThemeProvider>,
+        );
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('component renders correctly in error state', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField placeholder='01' hasError={true} />
+            </ThemeProvider>,
+        );
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('fires callback when on input value change', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField
+                    testID={mockedTestID}
+                    onChangeText={mockedCallback}
+                />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent.changeText(tree.getByTestId(mockedTestID), '12');
+        });
+
+        expect(mockedCallback).toHaveBeenCalledWith('12');
+    });
+
+    it('shouldnt send more than 2 characters', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField
+                    testID={mockedTestID}
+                    onChangeText={mockedCallback}
+                />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent.changeText(tree.getByTestId(mockedTestID), '1234');
+        });
+
+        expect(mockedCallback).toHaveBeenCalledWith('12');
+    });
+
+    it('shouldnt accept non number characters', async () => {
+        const tree = render(
+            <ThemeProvider>
+                <DateField
+                    testID={mockedTestID}
+                    onChangeText={mockedCallback}
+                />
+            </ThemeProvider>,
+        );
+
+        await act(async () => {
+            fireEvent.changeText(tree.getByTestId(mockedTestID), '1.');
+        });
+
+        expect(mockedCallback).toHaveBeenCalledWith('1');
+    });
+});
diff --git a/src/__tests__/components/__snapshots__/DateField.test.tsx.snap b/src/__tests__/components/__snapshots__/DateField.test.tsx.snap
new file mode 100644
index 00000000..1f89916f
--- /dev/null
+++ b/src/__tests__/components/__snapshots__/DateField.test.tsx.snap
@@ -0,0 +1,279 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MODULE | DateField component renders correctly empty focused state 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <TextInput
+      cursorColor="#18A586"
+      keyboardType="numeric"
+      maxLength={2}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      placeholder="01"
+      placeholderTextColor="#18A586"
+      selectTextOnFocus={true}
+      selectionColor="#18A58629"
+      style={
+        {
+          "backgroundColor": "#18A58629",
+          "borderColor": "#18A586",
+          "borderRadius": 18,
+          "borderWidth": 1,
+          "color": "#18A586",
+          "fontFamily": "PublicSans-Bold",
+          "fontSize": 20,
+          "height": 48,
+          "lineHeight": 23.5,
+          "marginVertical": 0,
+          "paddingVertical": 0,
+          "width": 72,
+        }
+      }
+      testID="mockedTestID"
+      textAlign="center"
+      value=""
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`MODULE | DateField component renders correctly filled focused state 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <TextInput
+      cursorColor="#18A586"
+      keyboardType="numeric"
+      maxLength={2}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      placeholder="01"
+      placeholderTextColor="#919EAB"
+      selectTextOnFocus={true}
+      selectionColor="#18A58629"
+      style={
+        {
+          "backgroundColor": "#FFFFFF",
+          "borderColor": "#18A586",
+          "borderRadius": 18,
+          "borderWidth": 1,
+          "color": "#212B36",
+          "fontFamily": "PublicSans-Bold",
+          "fontSize": 20,
+          "height": 48,
+          "lineHeight": 23.5,
+          "marginVertical": 0,
+          "paddingVertical": 0,
+          "width": 72,
+        }
+      }
+      testID="mockedTestID"
+      textAlign="center"
+      value="12"
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`MODULE | DateField component renders correctly filled unfocused state 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <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": "#212B36",
+          "fontFamily": "PublicSans-Bold",
+          "fontSize": 20,
+          "height": 48,
+          "lineHeight": 23.5,
+          "marginVertical": 0,
+          "paddingVertical": 0,
+          "width": 72,
+        }
+      }
+      testID="mockedTestID"
+      textAlign="center"
+      value="12"
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`MODULE | DateField component renders correctly in empty mode 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <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,
+        }
+      }
+      textAlign="center"
+      value=""
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;
+
+exports[`MODULE | DateField component renders correctly in error state 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    pointerEvents="box-none"
+    style={
+      {
+        "flex": 1,
+      }
+    }
+  >
+    <TextInput
+      cursorColor="#18A586"
+      keyboardType="numeric"
+      maxLength={2}
+      onBlur={[Function]}
+      onChangeText={[Function]}
+      onFocus={[Function]}
+      placeholder="01"
+      placeholderTextColor="#919EAB"
+      selectTextOnFocus={true}
+      selectionColor="#18A58629"
+      style={
+        {
+          "backgroundColor": "#FF563014",
+          "borderColor": undefined,
+          "borderRadius": 18,
+          "borderWidth": 0,
+          "color": "#FF5630",
+          "fontFamily": "PublicSans-Bold",
+          "fontSize": 20,
+          "height": 48,
+          "lineHeight": 23.5,
+          "marginVertical": 0,
+          "paddingVertical": 0,
+          "width": 72,
+        }
+      }
+      textAlign="center"
+      value=""
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;