Test branch

.github/workflows/test.yml

@@ -0,0 +1,11 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v2
+    - name: Install modules
+      run: yarn
+    - name: Run tests
+      run: yarn test

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+    preset: "ts-jest",
+    testEnvironment: "jsdom",
+};

package.json

@@ -28,22 +28,30 @@
     "build"
   ],
   "scripts": {
-    "build": "rollup -c"
+    "build": "rollup -c",
+    "test": "jest"
   },
   "sideEffects": false,
   "author": "Keyur Paralkar",
   "license": "MIT",
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^13.3.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "rollup": "^2.75.6",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
-    "typescript": "^4.6.4"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

package/lib/hook/usePasscode.test.tsx

@@ -0,0 +1,72 @@
+import "@testing-library/jest-dom";
+import { render, renderHook, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import usePasscode from "./usePasscode";
+
+const TestComponent = (props: { isAlphaNumeric: boolean }) => {
+    const { array, getEventHandlers, refs } = usePasscode({
+        count: 4,
+        isAlphaNumeric: props.isAlphaNumeric,
+    });
+
+    return (
+        <>
+            {array.map((value: string | number, index: number) => (
+                <input
+                    ref={(el) => el && (refs.current[index] = el)}
+                    type="text"
+                    inputMode="numeric"
+                    autoComplete="one-time-code"
+                    maxLength={1}
+                    pattern="\d{1}"
+                    value={String(value)}
+                    key={`index-${index}`}
+                    data-testid={`index-${index}`}
+                    {...getEventHandlers(index)}
+                />
+            ))}
+        </>
+    );
+};
+
+describe("test basic workflow", () => {
+    it("1. test whether passing no. of inputs creates an array of equal number ", () => {
+        const { result } = renderHook(() => usePasscode({ count: 4 }));
+        expect(result.current.array).toHaveLength(4);
+    });
+
+    it("2. test if the focus changes to next element when 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");
+        const secondtInput: HTMLInputElement = screen.getByTestId("index-1");
+        await waitFor(() => {
+            expect(secondtInput).toHaveFocus();
+        });
+    });
+
+    it("3. 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 secondtInput: HTMLInputElement = screen.getByTestId("index-1");
+        await waitFor(() => {
+            expect(secondtInput).toHaveFocus();
+        });
+
+        //Backspace and observe focus shift
+        userEvent.keyboard("{Backspace}");
+        await waitFor(() => {
+            expect(firstInput).toHaveFocus();
+        });
+    });
+});