diff --git a/package/lib/hook/usePasscode.test.tsx b/package/lib/hook/usePasscode.test.tsx index 7bafe19..c9bee8c 100644 --- 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(); // 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(); + // 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(); + // 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 index 869982c..b897ee6 100644 --- 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 index 17c5698..9b12a2a 100644 --- 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 index acc589f..edf8563 100644 --- 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();