test: cover placeholder

anday013 · Dec 8, 2024 · 88ff1b1 · 88ff1b1
1 parent e912ea3
commit 88ff1b1
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/OtpInput/OtpInput.tsx b/src/OtpInput/OtpInput.tsx
@@ -34,6 +34,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     focusedPinCodeContainerStyle,
     filledPinCodeContainerStyle,
     disabledPinCodeContainerStyle,
+    placeholderTextStyle,
   } = theme;
 
   useImperativeHandle(ref, () => ({ clear, focus, setValue: setTextWithRef }));
@@ -59,6 +60,11 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
     return stylesArray;
   };
 
+  const placeholderStyle = {
+    opacity: isPlaceholderActive ? 0.5 : pinCodeTextStyle?.opacity || 1,
+    ...(isPlaceholderActive ? placeholderTextStyle : []),
+  };
+
   return (
     <View style={[styles.container, containerStyle, inputsContainerStyle]}>
       {Array(numberOfDigits)
@@ -84,13 +90,7 @@ export const OtpInput = forwardRef<OtpInputRef, OtpInputProps>((props, ref) => {
                   focusStickBlinkingDuration={focusStickBlinkingDuration}
                 />
               ) : (
-                <Text
-                  style={[
-                    styles.codeText,
-                    { opacity: isPlaceholderActive ? 0.5 : 1 },
-                    pinCodeTextStyle,
-                  ]}
-                >
+                <Text style={[styles.codeText, pinCodeTextStyle, placeholderStyle]}>
                   {char && secureTextEntry ? "•" : char}
                 </Text>
               )}

diff --git a/src/OtpInput/OtpInput.types.ts b/src/OtpInput/OtpInput.types.ts
@@ -37,4 +37,5 @@ export interface Theme {
   focusStickStyle?: ViewStyle;
   focusedPinCodeContainerStyle?: ViewStyle;
   disabledPinCodeContainerStyle?: ViewStyle;
+  placeholderTextStyle?: TextStyle;
 }
diff --git a/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap b/src/OtpInput/__tests__/__snapshots__/OtpInput.test.tsx.snap
@@ -142,6 +142,9 @@ exports[`OtpInput UI should render correctly 1`] = `
             "fontSize": 28,
           },
           undefined,
+          {
+            "opacity": 1,
+          },
         ]
       }
     />
@@ -199,6 +202,9 @@ exports[`OtpInput UI should render correctly 1`] = `
             "fontSize": 28,
           },
           undefined,
+          {
+            "opacity": 1,
+          },
         ]
       }
     />
@@ -256,6 +262,9 @@ exports[`OtpInput UI should render correctly 1`] = `
             "fontSize": 28,
           },
           undefined,
+          {
+            "opacity": 1,
+          },
         ]
       }
     />
@@ -313,6 +322,9 @@ exports[`OtpInput UI should render correctly 1`] = `
             "fontSize": 28,
           },
           undefined,
+          {
+            "opacity": 1,
+          },
         ]
       }
     />
@@ -370,6 +382,9 @@ exports[`OtpInput UI should render correctly 1`] = `
             "fontSize": 28,
           },
           undefined,
+          {
+            "opacity": 1,
+          },
         ]
       }
     />

diff --git a/src/OtpInput/__tests__/useOtpInput.test.ts b/src/OtpInput/__tests__/useOtpInput.test.ts
@@ -1,4 +1,4 @@
-import { act, renderHook } from "@testing-library/react-native";
+import { act, renderHook, waitFor } from "@testing-library/react-native";
 import * as React from "react";
 import { Keyboard } from "react-native";
 import { OtpInputProps } from "../OtpInput.types";
@@ -10,6 +10,7 @@ const renderUseOtInput = (props?: Partial<OtpInputProps>) =>
 describe("useOtpInput", () => {
   afterEach(() => {
     jest.clearAllMocks();
+    jest.clearAllTimers();
   });
 
   test("should return models as defined", () => {
@@ -296,4 +297,77 @@ describe("useOtpInput", () => {
       expect(result.current.models.inputRef.current?.blur).not.toHaveBeenCalled();
     });
   });
+
+  describe("Placeholder", () => {
+    test("default state", () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+
+      waitFor(() => {
+        expect(result.current.models.isPlaceholderActive).toBe(true);
+      });
+    });
+
+    test("should set isPlaceholderActive to 'true' when placeholder is provided and input is not focused and text is empty", () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+
+      waitFor(() => {
+        expect(result.current.models.isPlaceholderActive).toBe(true);
+      });
+    });
+
+    test("should set isPlaceholderActive to 'true' when placeholder is provided and text is empty", () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleFocus();
+      result.current.actions.handleBlur();
+
+      waitFor(() => {
+        expect(result.current.models.isPlaceholderActive).toBe(true);
+      });
+    });
+
+    test("should set isPlaceholderActive to 'false' when placeholder is provided and input is focused", () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleFocus();
+      waitFor(() => {
+        expect(result.current.models.isPlaceholderActive).toBe(false);
+      });
+    });
+
+    test("should set isPlaceholderActive to 'false' when placeholder is provided and text is not empty", () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleTextChange("123456");
+      waitFor(() => {
+        expect(result.current.models.isPlaceholderActive).toBe(false);
+      });
+    });
+
+    test("should set isPlaceholderActive to 'false' when placeholder is provided and input is focused and text is not empty", async () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleTextChange("123456");
+      result.current.actions.handleFocus();
+      waitFor(() => expect(result.current.models.isPlaceholderActive).toBe(false));
+    });
+
+    test("should set isPlaceholderActive to 'false' when placeholder is provided and input is not focused and text is not empty", async () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleTextChange("123456");
+      result.current.actions.handleBlur();
+      waitFor(() => expect(result.current.models.isPlaceholderActive).toBe(false));
+    });
+
+    test("should set isPlaceholderActive to 'true' when placeholder is provided and input is focused and text is empty", async () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleFocus();
+      result.current.actions.handleBlur();
+      act(() => expect(result.current.models.isPlaceholderActive).toBe(true));
+    });
+
+    test("should set isPlaceholderActive to 'true' when placeholder is provided and input is not focused and text is empty", async () => {
+      const { result } = renderUseOtInput({ placeholder: "00000000" });
+      result.current.actions.handleTextChange("123456");
+      result.current.actions.handleTextChange("");
+      result.current.actions.handleBlur();
+      act(() => expect(result.current.models.isPlaceholderActive).toBe(true));
+    });
+  });
 });