From 0cee86b587acf0702d0bee0b926ad05137173f10 Mon Sep 17 00:00:00 2001 From: Fabrice Armisen Date: Sat, 25 Nov 2023 10:48:50 -0800 Subject: [PATCH 1/3] ... --- package/lib/hook/usePasscode.test.tsx | 54 ++++++++++++++++++++++++++- package/lib/hook/usePasscode.ts | 3 +- package/lib/utils/index.ts | 11 ++++-- package/lib/utils/utils.test.ts | 3 ++ 4 files changed, 64 insertions(+), 7 deletions(-) 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(); From 98e176255f57ce3cdcb4a435f6ad3c7c3540e375 Mon Sep 17 00:00:00 2001 From: Fabrice Armisen Date: Sat, 25 Nov 2023 10:51:58 -0800 Subject: [PATCH 2/3] using an utility function to test if a string contains a number instead of relying on the result of parseInt --- .vscode/settings.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..bfe4e4e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "extension-profiles.activeProfiles": [ + "javascript" + ] +} \ No newline at end of file From f7734ca6c59e6cc7bdab51ee7fd3854c6dd1e061 Mon Sep 17 00:00:00 2001 From: Fabrice Armisen Date: Sat, 25 Nov 2023 11:05:05 -0800 Subject: [PATCH 3/3] unecessary --- .vscode/settings.json | 5 ----- 1 file changed, 5 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index bfe4e4e..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "extension-profiles.activeProfiles": [ - "javascript" - ] -} \ No newline at end of file