Merge pull request #15 from farmisen/fa/bug/it_should_accept_the_0_digit

Allow entering codes that contain one or more zero digits
keyurparalkar · Nov 27, 2023 · 205ade9 · 205ade9
2 parents ca369cc + f7734ca
commit 205ade9
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 7 deletions.
diff --git a/package/lib/hook/usePasscode.test.tsx b/package/lib/hook/usePasscode.test.tsx
@@ -48,25 +48,75 @@ describe("test basic workflow", () => {
         await waitFor(() => {
             expect(secondtInput).toHaveFocus();
         });
+
+        // Verify that the value of first input is 1
+        expect(firstInput).toHaveValue("1");
     });
 
-    it("3. test if the focus changes to previous element when backspaced", async () => {
+
+    it("3. test if the focus changes to next element when the zero digit is typed", async () => {
         render(<TestComponent isAlphaNumeric={false} />);
         // focus on the first input
         const firstInput: HTMLInputElement = screen.getByTestId("index-0");
         firstInput.focus();
+        expect(firstInput).toHaveFocus();
 
         //Type in first input and check the focus of next input
-        userEvent.type(firstInput, "1");
+        userEvent.type(firstInput, "0");
         const secondtInput: HTMLInputElement = screen.getByTestId("index-1");
         await waitFor(() => {
             expect(secondtInput).toHaveFocus();
         });
 
+        // Verify that the value of first input is 0
+        expect(firstInput).toHaveValue("0");
+    });
+
+
+    it("4. test if the focus changes to previous element when backspaced", async () => {
+        render(<TestComponent isAlphaNumeric={false} />);
+        // focus on the first input
+        const firstInput: HTMLInputElement = screen.getByTestId("index-0");
+        firstInput.focus();
+
+        //Type in first input and check the focus of next input
+        userEvent.type(firstInput, "1");
+        const secondInput: HTMLInputElement = screen.getByTestId("index-1");
+        await waitFor(() => {
+            expect(secondInput).toHaveFocus();
+        });
+
+        //Backspace and observe focus shift
+        userEvent.keyboard("{Backspace}");
+        await waitFor(() => {
+            expect(firstInput).toHaveFocus();
+        });
+
+        // Verify that the value of second input is empty
+        expect(secondInput).toHaveValue("");
+    });
+
+
+    it("5. test if the focus changes to previous element when backspaced over the zero digit", async () => {
+        render(<TestComponent isAlphaNumeric={false} />);
+        // focus on the first input
+        const firstInput: HTMLInputElement = screen.getByTestId("index-0");
+        firstInput.focus();
+
+        //Type in first input and check the focus of next input
+        userEvent.type(firstInput, "0");
+        const secondInput: HTMLInputElement = screen.getByTestId("index-1");
+        await waitFor(() => {
+            expect(secondInput).toHaveFocus();
+        });
+
         //Backspace and observe focus shift
         userEvent.keyboard("{Backspace}");
         await waitFor(() => {
             expect(firstInput).toHaveFocus();
         });
+
+        // Verify that the value of second input is empty
+        expect(secondInput).toHaveValue("");
     });
 });
diff --git a/package/lib/hook/usePasscode.ts b/package/lib/hook/usePasscode.ts
@@ -10,6 +10,7 @@ import {
     getClipboardContent,
     getClipboardReadPermission,
     getFilledArray,
+    isNumeric,
     shouldPreventDefault,
 } from "../utils";
 
@@ -75,7 +76,7 @@ const usePasscode = (props: PasscodeProps) => {
                 if (
                     (isAlphaNumeric
                         ? ALPHANUMERIC_REGEX.test(e.key)
-                        : parseInt(e.key)) &&
+                        : isNumeric(e.key)) &&
                     index <= passcode.length - 2
                 ) {
                     setCurrentFocusedIndex(index + 1);

diff --git a/package/lib/utils/index.ts b/package/lib/utils/index.ts
@@ -1,14 +1,17 @@
 export const ALPHANUMERIC_REGEX = /^[a-z0-9]$/i;
 
+
+export const isNumeric = (key: string) => !isNaN(Number(key))
+
 export const shouldPreventDefault = (
     key: string,
     isAlphaNumeric: boolean = false,
     isMeta: boolean = false
 ) => {
-    const parsed = Number(key);
-
+    // Check if the key is a number
+    const isKeyNumeric = isNumeric(key);
     // By default we only allow numbers to be pressed = DONE
-    if (parsed) return false;
+    if (isKeyNumeric) return false;
 
     // Crtl + V
     if (isMeta && key === "v") return false;
@@ -17,7 +20,7 @@ export const shouldPreventDefault = (
     if (key === "Backspace") return false;
 
     // We only allow alphabets to be pressed when the isAplhaNumeric flag is true = DONE
-    if (isAlphaNumeric && isNaN(parsed)) {
+    if (isAlphaNumeric && !isKeyNumeric) {
         return false;
     }
 

diff --git a/package/lib/utils/utils.test.ts b/package/lib/utils/utils.test.ts
@@ -5,6 +5,9 @@ describe("test shouldPreventDefault", () => {
         let key = "1";
         expect(shouldPreventDefault(key)).toBeFalsy();
 
+        key = "0";
+        expect(shouldPreventDefault(key)).toBeFalsy();
+
         key = "v";
         expect(shouldPreventDefault(key, false, true)).toBeFalsy();