add tests

jest.config.js

@@ -0,0 +1,15 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
+  dir: "./",
+});
+
+// Add any custom config to be passed to Jest
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  testEnvironment: "jest-environment-jsdom",
+};
+
+// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
+module.exports = createJestConfig(customJestConfig);

jest.setup.js

@@ -0,0 +1,6 @@
+// Optional: configure or set up a testing framework before each test.
+// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
+
+// Used for __tests__/testing-library.js
+// Learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom/extend-expect";

package.json

@@ -7,7 +7,8 @@
     "dev": "WATCHPACK_POLLING=false next dev",
     "postinstall": "prisma generate",
     "lint": "next lint",
-    "start": "next start"
+    "start": "next start",
+    "test": "jest --watch"
   },
   "dependencies": {
     "@heroicons/react": "^2.0.16",
@@ -41,17 +42,23 @@
     "zustand": "^4.3.6"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/bcryptjs": "^2.4.2",
     "@types/eslint": "^8.21.1",
     "@types/node": "^18.14.0",
     "@types/prettier": "^2.7.2",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
+    "@types/testing-library__jest-dom": "^5.14.5",
     "@typescript-eslint/eslint-plugin": "^5.53.0",
     "@typescript-eslint/parser": "^5.53.0",
     "autoprefixer": "^10.4.7",
     "eslint": "^8.34.0",
     "eslint-config-next": "^13.2.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "postcss": "^8.4.14",
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.1",

src/__tests__/components/inputField.test.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+import React from "react";
+import { render, fireEvent, screen } from "@testing-library/react";
+import InputField from "~/components/elements/inputField";
+
+describe("InputField", () => {
+  // ...existing code...
+
+  test("renderInputs: renders form with input elements and buttons", () => {
+    const fields = [
+      {
+        name: "testField",
+        initialValue: "Initial value",
+        type: "text",
+        placeholder: "Test placeholder",
+      },
+    ];
+
+    const submitHandler = jest.fn();
+
+    const { container } = render(
+      <InputField
+        label="Test Label"
+        fields={fields}
+        submitHandler={submitHandler}
+      />
+    );
+
+    // Click the edit icon to render the inputs
+    fireEvent.click(screen.getByTestId("edit-icon"));
+
+    // Check if the form is rendered
+    const formElement = container.querySelector("form");
+    expect(formElement).toBeInTheDocument();
+
+    // Check if the input elements are rendered
+    const inputElement = screen.getByPlaceholderText("Test placeholder");
+    expect(inputElement).toBeInTheDocument();
+
+    // Check if the submit button is rendered
+    const submitButton = screen.getByRole("button", { name: /submit/i });
+    expect(submitButton).toBeInTheDocument();
+
+    // Check if the cancel button is rendered
+    const cancelButton = screen.getByRole("button", { name: /cancel/i });
+    expect(cancelButton).toBeInTheDocument();
+  });
+});

src/__tests__/components/modal.test.tsx

@@ -0,0 +1,44 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import Modal from "~/components/elements/modal";
+import { useModalStore } from "~/utils/store";
+
+jest.mock("../../utils/store", () => ({
+  useModalStore: jest.fn(),
+}));
+
+describe("Modal", () => {
+  const closeModal = jest.fn();
+  const toggleModal = jest.fn();
+  const yesAction = jest.fn();
+
+  beforeEach(() => {
+    (useModalStore as unknown as jest.Mock).mockImplementation(() => ({
+      isOpen: true,
+      description: "Test description",
+      title: "Test title",
+      yesAction,
+      toggleModal,
+      closeModal,
+    }));
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test("renders modal with title and description", () => {
+    render(<Modal />);
+    expect(screen.getByText("Test title")).toBeInTheDocument();
+    expect(screen.getByText("Test description")).toBeInTheDocument();
+  });
+
+  test("handles yes and cancel actions", () => {
+    render(<Modal />);
+    fireEvent.click(screen.getByText("Yes"));
+    expect(yesAction).toHaveBeenCalledTimes(1);
+    expect(toggleModal).toHaveBeenCalledTimes(1);
+
+    fireEvent.click(screen.getByText("Cancle"));
+    expect(closeModal).toHaveBeenCalledTimes(1);
+  });
+});

src/components/elements/inputField.tsx

@@ -1,7 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 import { useState } from "react";
 import Input from "~/components/elements/input";
 import EditIcon from "~/icons/edit";
@@ -37,7 +33,7 @@ const InputField = ({
   isLoading,
 }: FormProps) => {
   const [showInputs, setShowInputs] = useState(false);
-  const [formValues, setFormValues] = useState(
+  const [formValues, setFormValues] = useState<Record<string, string>>(
     fields.reduce((acc, field) => {
       acc[field.name] = field.initialValue || "";
       return acc;
@@ -102,7 +98,7 @@ const InputField = ({
     <>
       <dt className="flex items-center gap-2 text-sm font-medium">
         {label}
-        <EditIcon onClick={handleEditClick} />
+        <EditIcon data-testid="edit-icon" onClick={handleEditClick} />
       </dt>
       {showInputs ? (
         isLoading ? (

src/components/elements/modal.tsx

@@ -3,12 +3,6 @@ import { useRef } from "react";
 import { useOnClickOutside } from "usehooks-ts";
 import { useModalStore } from "~/utils/store";
 
-// interface Imodal {
-//   children: React.ReactNode;
-//   disableClickOutside?: boolean;
-//   onClose(): void;
-// }
-
 const Modal = () => {
   const ref = useRef(null);
   const {

tsconfig.json

@@ -27,7 +27,8 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.cjs",
-    "**/*.mjs"
+    "**/*.mjs",
+    "jest.config.js"
   ],
   "exclude": ["node_modules"]
 }