From a3ed1fbe350299a4b400110f56a3164df45f4c96 Mon Sep 17 00:00:00 2001
From: My name <dwivediankit2006@gmail.com>
Date: Wed, 8 Apr 2026 14:59:11 +0530
Subject: [PATCH] Add Jest tests for HTML-to-JSX and update README test
 instructions

---
 README.md                                    |  12 ++
 __tests__/convert/html-jsx/htmlToJsx.test.js |  25 ++++
 __tests__/convert/html-jsx/page.test.jsx     |  83 +++++++++++++
 __tests__/resume-builder/Preview.test.jsx    |  48 ++++++++
 __tests__/resume-builder/ResumeForm.test.jsx |  80 ++++++++++++
 src/app/convert/html-jsx/page.jsx            |  10 +-
 src/app/resume-builder/ResumeForm.jsx        | 123 ++++++++++---------
 src/app/resume-builder/defaultResumeData.js  |  20 +++
 src/app/resume-builder/page.jsx              |  29 ++---
 9 files changed, 345 insertions(+), 85 deletions(-)
 create mode 100644 __tests__/convert/html-jsx/htmlToJsx.test.js
 create mode 100644 __tests__/convert/html-jsx/page.test.jsx
 create mode 100644 __tests__/resume-builder/Preview.test.jsx
 create mode 100644 __tests__/resume-builder/ResumeForm.test.jsx
 create mode 100644 src/app/resume-builder/defaultResumeData.js

diff --git a/README.md b/README.md
index 6a468dd0..e8d8b4d5 100644
--- a/README.md
+++ b/README.md
@@ -48,10 +48,22 @@ Here're some of the project's best features:
    ```
 
 3. **Run Development Server**:
+
    ```bash
    npm run dev
    ```
 
+4. **Run Tests**:
+
+   ```bash
+   npm test
+   ```
+
+5. **Run Coverage Report**:
+   ```bash
+   npm run test:coverage
+   ```
+
 <h2>💻 Built with</h2>
 
 Technologies used in the project:
diff --git a/__tests__/convert/html-jsx/htmlToJsx.test.js b/__tests__/convert/html-jsx/htmlToJsx.test.js
new file mode 100644
index 00000000..ae99d8d5
--- /dev/null
+++ b/__tests__/convert/html-jsx/htmlToJsx.test.js
@@ -0,0 +1,25 @@
+import { htmlToJsx } from "html-to-jsx-transform";
+
+describe("htmlToJsx transformer", () => {
+  it("converts HTML attributes and nested content to JSX", () => {
+    const html =
+      '<section class="card"><h1>Title</h1><p id="summary">Summary</p></section>';
+    const expected =
+      '<section className="card"><h1>Title</h1><p id="summary">Summary</p></section>';
+
+    expect(htmlToJsx(html)).toBe(expected);
+  });
+
+  it("handles boolean attributes and self-closing tags", () => {
+    expect(htmlToJsx('<input type="checkbox" checked>')).toBe(
+      '<input type="checkbox" checked={true} />',
+    );
+  });
+
+  it("preserves attribute values with mixed quotes and whitespace", () => {
+    const html = '<button disabled class="btn primary">Click</button>';
+    expect(htmlToJsx(html)).toBe(
+      '<button disabled={true} className="btn primary">Click</button>',
+    );
+  });
+});
diff --git a/__tests__/convert/html-jsx/page.test.jsx b/__tests__/convert/html-jsx/page.test.jsx
new file mode 100644
index 00000000..4d7a9751
--- /dev/null
+++ b/__tests__/convert/html-jsx/page.test.jsx
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import HTML_JSX from "@/app/convert/html-jsx/page";
+
+jest.mock("@monaco-editor/react", () => ({
+  Editor: ({ language, value, onChange }) => (
+    <textarea
+      data-testid={language === "html" ? "html-editor" : "jsx-editor"}
+      aria-label={language === "html" ? "HTML editor" : "JSX editor"}
+      value={value}
+      onChange={(event) => onChange?.(event.target.value)}
+    />
+  ),
+}));
+
+jest.mock("@/components/navbar", () => ({
+  NavBar: ({ title, isDarkMode, toggleTheme }) => (
+    <div data-testid="mock-navbar">
+      <h1>{title}</h1>
+      <button aria-label="Toggle dark mode" onClick={toggleTheme}>
+        Toggle Theme
+      </button>
+      <span>{isDarkMode ? "dark" : "light"}</span>
+    </div>
+  ),
+}));
+
+describe("HTML to JSX page", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("renders the HTML and JSX panels", () => {
+    render(<HTML_JSX />);
+
+    expect(screen.getByText("HTML")).toBeInTheDocument();
+    expect(screen.getByText("JSX")).toBeInTheDocument();
+    expect(screen.getByLabelText("HTML editor")).toBeInTheDocument();
+    expect(screen.getByLabelText("JSX editor")).toBeInTheDocument();
+  });
+
+  it("converts HTML input into JSX output", async () => {
+    render(<HTML_JSX />);
+
+    const htmlEditor = screen.getByLabelText("HTML editor");
+    const jsxEditor = screen.getByLabelText("JSX editor");
+
+    fireEvent.change(htmlEditor, {
+      target: { value: '<div class="foo">Hello</div>' },
+    });
+
+    await waitFor(() => {
+      expect(jsxEditor).toHaveValue(
+        'function component() { return (<div className="foo">Hello</div>) }',
+      );
+    });
+  });
+
+  it("loads the saved theme from localStorage on mount", async () => {
+    window.localStorage.setItem("theme", JSON.stringify(true));
+
+    render(<HTML_JSX />);
+
+    await waitFor(() => {
+      expect(screen.getByText("dark")).toBeInTheDocument();
+      expect(screen.getByRole("main")).toHaveClass("bg-gray-900");
+    });
+  });
+
+  it("toggles dark mode and saves the preference", async () => {
+    render(<HTML_JSX />);
+
+    const toggleButton = screen.getByRole("button", {
+      name: /toggle dark mode/i,
+    });
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      expect(screen.getByText("dark")).toBeInTheDocument();
+      expect(window.localStorage.getItem("theme")).toBe("true");
+    });
+  });
+});
diff --git a/__tests__/resume-builder/Preview.test.jsx b/__tests__/resume-builder/Preview.test.jsx
new file mode 100644
index 00000000..2bf306d1
--- /dev/null
+++ b/__tests__/resume-builder/Preview.test.jsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Preview from "@/app/resume-builder/Preview";
+import { defaultResumeData } from "@/app/resume-builder/defaultResumeData";
+
+describe("Preview", () => {
+  test("renders updated resume preview content from provided data", () => {
+    const sampleData = {
+      ...defaultResumeData,
+      name: "Jane Doe",
+      email: "jane@example.com",
+      phone: "1234567890",
+      workExperience: [
+        {
+          title: "Software Engineer",
+          company: "Acme",
+          description: "Built apps.",
+        },
+      ],
+      education: [
+        {
+          degree: "B.Sc.",
+          institution: "University",
+          description: "Computer Science",
+        },
+      ],
+      links: {
+        linkedIn: "https://linkedin.com/janedoe",
+        website: "https://janedoe.dev",
+        github: "https://github.com/janedoe",
+      },
+    };
+
+    render(<Preview isDarkMode={false} data={sampleData} />);
+
+    expect(screen.getByText("Jane Doe")).toBeInTheDocument();
+    expect(screen.getAllByText("Software Engineer")[0]).toBeInTheDocument();
+    expect(screen.getByText("Acme")).toBeInTheDocument();
+    expect(screen.getByText("B.Sc.")).toBeInTheDocument();
+    expect(screen.getByText("University")).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.includes("linkedin.com/janedoe")),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByText((content) => content.includes("https://janedoe.dev")),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/__tests__/resume-builder/ResumeForm.test.jsx b/__tests__/resume-builder/ResumeForm.test.jsx
new file mode 100644
index 00000000..7450fc29
--- /dev/null
+++ b/__tests__/resume-builder/ResumeForm.test.jsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ResumeForm from "@/app/resume-builder/ResumeForm";
+import { defaultResumeData } from "@/app/resume-builder/defaultResumeData";
+
+describe("ResumeForm", () => {
+  const onFormChange = jest.fn();
+
+  beforeEach(() => {
+    onFormChange.mockClear();
+  });
+
+  test("renders core fields and updates parent state on text input change", () => {
+    render(
+      <ResumeForm
+        isDarkMode={false}
+        onFormChange={onFormChange}
+        initialData={defaultResumeData}
+      />,
+    );
+
+    const nameInput = screen.getByPlaceholderText("John Doe");
+    fireEvent.change(nameInput, { target: { value: "Jane Doe" } });
+
+    expect(nameInput).toHaveValue("Jane Doe");
+    expect(onFormChange).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "Jane Doe" }),
+    );
+  });
+
+  test("updates links nested state and notifies parent", () => {
+    render(
+      <ResumeForm
+        isDarkMode={false}
+        onFormChange={onFormChange}
+        initialData={defaultResumeData}
+      />,
+    );
+
+    const linkedinInput = screen.getByPlaceholderText(
+      "https://www.linkedin.com/in/johndev/",
+    );
+    fireEvent.change(linkedinInput, {
+      target: { value: "https://linkedin.com/jane-doe" },
+    });
+
+    expect(linkedinInput).toHaveValue("https://linkedin.com/jane-doe");
+    expect(onFormChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        links: expect.objectContaining({
+          linkedIn: "https://linkedin.com/jane-doe",
+        }),
+      }),
+    );
+  });
+
+  test("adds a new work experience row and triggers parent update", () => {
+    render(
+      <ResumeForm
+        isDarkMode={false}
+        onFormChange={onFormChange}
+        initialData={defaultResumeData}
+      />,
+    );
+
+    const addButton = screen.getByRole("button", {
+      name: /Add Work Experience/i,
+    });
+    fireEvent.click(addButton);
+
+    expect(onFormChange).toHaveBeenCalledWith(
+      expect.objectContaining({
+        workExperience: expect.arrayContaining([
+          expect.objectContaining({ title: "", company: "", description: "" }),
+        ]),
+      }),
+    );
+    expect(onFormChange.mock.calls[0][0].workExperience).toHaveLength(2);
+  });
+});
diff --git a/src/app/convert/html-jsx/page.jsx b/src/app/convert/html-jsx/page.jsx
index 945e51ff..1acef236 100644
--- a/src/app/convert/html-jsx/page.jsx
+++ b/src/app/convert/html-jsx/page.jsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useEffect } from "react";
+import { useState, useMemo, useEffect, useRef } from "react";
 import { NavBar } from "@/components/navbar";
 import CodeEditor from "./components/editor";
 import { htmlToJsx } from "html-to-jsx-transform";
@@ -8,7 +8,7 @@ import { htmlToJsx } from "html-to-jsx-transform";
 export default function HTML_JSX() {
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [value, setValue] = useState("");
-  const [cache, setCache] = useState({});
+  const cacheRef = useRef({});
 
   // Handle editor change
   const handleChange = (val) => {
@@ -24,13 +24,13 @@ export default function HTML_JSX() {
 
   // Generate JSX from HTML with caching
   const generateJSX = () => {
-    if (cache[value]) {
-      return cache[value];
+    if (cacheRef.current[value]) {
+      return cacheRef.current[value];
     }
 
     const jsx = htmlToJsx(value);
     const jsxCode = `function component() { return (${jsx}) }`;
-    setCache((prevCache) => ({ ...prevCache, [value]: jsxCode }));
+    cacheRef.current[value] = jsxCode;
     return jsxCode;
   };
 
diff --git a/src/app/resume-builder/ResumeForm.jsx b/src/app/resume-builder/ResumeForm.jsx
index 239f0ac5..baf4528d 100644
--- a/src/app/resume-builder/ResumeForm.jsx
+++ b/src/app/resume-builder/ResumeForm.jsx
@@ -1,101 +1,108 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { AddBox } from "@mui/icons-material";
+import { defaultResumeData } from "./defaultResumeData";
 
-const ResumeForm = ({ onFormChange, isDarkMode }) => {
-  const [formData, setFormData] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    address: "",
-    image: "",
-    imageShape: "circle",
-    workExperience: [{ title: "", company: "", description: "" }],
-    projects: [{ title: "", liveUrl: "", description: "" }],
-    education: [{ degree: "", institution: "", description: "" }],
-    skills: [
-      { category: "Frontend", skills: [""] },
-      { category: "Backend", skills: [""] },
-      { category: "Languages", skills: [""] },
-      { category: "Tools", skills: [""] },
-    ],
-    links: { linkedIn: "", website: "", github: "" },
-    achievements: [{ title: "", description: "" }],
-    template: "template1",
-  });
+const ResumeForm = ({ onFormChange, isDarkMode, initialData }) => {
+  const [formData, setFormData] = useState(initialData ?? defaultResumeData);
+
+  useEffect(() => {
+    if (initialData) {
+      setFormData(initialData);
+    }
+  }, [initialData]);
+
+  const updateFormData = (updater) => {
+    setFormData((prevData) => {
+      const nextData =
+        typeof updater === "function"
+          ? updater(prevData)
+          : { ...prevData, ...updater };
+      onFormChange?.(nextData);
+      return nextData;
+    });
+  };
 
   const handleChange = (e) => {
     const { name, value } = e.target;
-
-    setFormData({ ...formData, [name]: value });
-    onFormChange({ ...formData, [name]: value });
+    updateFormData((prevData) => ({ ...prevData, [name]: value }));
   };
 
   const handleArrayChange = (e, index, field, arrayName) => {
-    const newArray = [...formData[arrayName]];
-    newArray[index][field] = e.target.value;
-    setFormData({ ...formData, [arrayName]: newArray });
-    onFormChange({ ...formData, [arrayName]: newArray });
+    const { value } = e.target;
+    updateFormData((prevData) => ({
+      ...prevData,
+      [arrayName]: prevData[arrayName].map((item, itemIndex) =>
+        itemIndex === index ? { ...item, [field]: value } : item,
+      ),
+    }));
   };
 
   const handleSkillsChange = (e, categoryIndex, skillIndex) => {
     const { value } = e.target;
-    const updatedSkills = [...formData.skills];
-    updatedSkills[categoryIndex].skills[skillIndex] = value;
-    setFormData((prevData) => ({
+    updateFormData((prevData) => ({
       ...prevData,
-      skills: updatedSkills,
+      skills: prevData.skills.map((skillCategory, idx) =>
+        idx === categoryIndex
+          ? {
+              ...skillCategory,
+              skills: skillCategory.skills.map((skill, skillIdx) =>
+                skillIdx === skillIndex ? value : skill,
+              ),
+            }
+          : skillCategory,
+      ),
     }));
-    onFormChange({ ...formData, skills: updatedSkills });
   };
 
   const handleLinksChange = (e) => {
     const { name, value } = e.target;
-    setFormData({ ...formData, links: { ...formData.links, [name]: value } });
-    onFormChange({ ...formData, links: { ...formData.links, [name]: value } });
+    updateFormData((prevData) => ({
+      ...prevData,
+      links: { ...prevData.links, [name]: value },
+    }));
   };
 
   const handlePhotoChange = (e) => {
-    const file = e.target.files[0];
+    const file = e.target.files?.[0];
+    if (!file) return;
+
     const reader = new FileReader();
     reader.onloadend = () => {
-      setFormData({ ...formData, image: reader.result });
-      onFormChange({ ...formData, image: reader.result });
+      updateFormData((prevData) => ({ ...prevData, image: reader.result }));
     };
-    if (file) {
-      reader.readAsDataURL(file);
-    }
+    reader.readAsDataURL(file);
   };
 
   const addWorkExperience = () => {
-    setFormData({
-      ...formData,
+    updateFormData((prevData) => ({
+      ...prevData,
       workExperience: [
-        ...formData.workExperience,
+        ...prevData.workExperience,
         { title: "", company: "", description: "" },
       ],
-    });
+    }));
   };
 
   const addProjects = () => {
-    setFormData({
-      ...formData,
+    updateFormData((prevData) => ({
+      ...prevData,
       projects: [
-        ...formData.projects,
+        ...prevData.projects,
         { title: "", liveUrl: "", description: "" },
       ],
-    });
+    }));
   };
 
   const addEducation = () => {
-    setFormData({
-      ...formData,
+    updateFormData((prevData) => ({
+      ...prevData,
       education: [
-        ...formData.education,
+        ...prevData.education,
         { degree: "", institution: "", description: "" },
       ],
-    });
+    }));
   };
 
   // const addSkill = () => {
@@ -112,10 +119,10 @@ const ResumeForm = ({ onFormChange, isDarkMode }) => {
   // };
 
   const addAchievement = () => {
-    setFormData({
-      ...formData,
-      achievements: [...formData.achievements, { title: "", description: "" }],
-    });
+    updateFormData((prevData) => ({
+      ...prevData,
+      achievements: [...prevData.achievements, { title: "", description: "" }],
+    }));
   };
 
   return (
diff --git a/src/app/resume-builder/defaultResumeData.js b/src/app/resume-builder/defaultResumeData.js
new file mode 100644
index 00000000..75b869ec
--- /dev/null
+++ b/src/app/resume-builder/defaultResumeData.js
@@ -0,0 +1,20 @@
+export const defaultResumeData = {
+  name: "",
+  email: "",
+  phone: "",
+  address: "",
+  image: "",
+  imageShape: "circle",
+  workExperience: [{ title: "", company: "", description: "" }],
+  projects: [{ title: "", liveUrl: "", description: "" }],
+  education: [{ degree: "", institution: "", description: "" }],
+  skills: [
+    { category: "Frontend", skills: [""] },
+    { category: "Backend", skills: [""] },
+    { category: "Languages", skills: [""] },
+    { category: "Tools", skills: [""] },
+  ],
+  links: { linkedIn: "", website: "", github: "" },
+  achievements: [{ title: "", description: "" }],
+  template: "template1",
+};
diff --git a/src/app/resume-builder/page.jsx b/src/app/resume-builder/page.jsx
index ac8f44bc..13500abd 100644
--- a/src/app/resume-builder/page.jsx
+++ b/src/app/resume-builder/page.jsx
@@ -5,33 +5,14 @@ import dynamic from "next/dynamic";
 import Preview from "./Preview";
 import { NavBar } from "../../components/navbar";
 import ResumeForm from "./ResumeForm";
+import { defaultResumeData } from "./defaultResumeData";
 
 const ResumePDFDownloadLink = dynamic(() => import("./ResumePDF"), {
   ssr: false,
 });
 
 const Home = () => {
-  const [resumeData, setResumeData] = useState({
-    name: "",
-    email: "",
-    phone: "",
-    address: "",
-    image: "",
-    imageShape: "circle",
-    workExperience: [{ title: "", company: "", description: "" }],
-    projects: [{ title: "", liveUrl: "", description: "" }],
-    education: [{ degree: "", institution: "", description: "" }],
-    skills: [
-      { category: "frontend", skills: [""] },
-      { category: "backend", skills: [""] },
-      { category: "languages", skills: [""] },
-      { category: "other", skills: [""] },
-    ],
-    links: { linkedin: "", website: "", github: "" },
-    achievements: [{ title: "", description: "" }],
-
-    template: "template1",
-  });
+  const [resumeData, setResumeData] = useState(defaultResumeData);
 
   const [isDarkMode, setIsDarkMode] = useState(false);
 
@@ -62,7 +43,11 @@ const Home = () => {
           Resume Builder
         </h1>
         <div className="w-full mt-8 ">
-          <ResumeForm isDarkMode={isDarkMode} onFormChange={handleFormChange} />
+          <ResumeForm
+            isDarkMode={isDarkMode}
+            onFormChange={handleFormChange}
+            initialData={resumeData}
+          />
           {resumeData && <Preview isDarkMode={isDarkMode} data={resumeData} />}
           {resumeData && <ResumePDFDownloadLink data={resumeData} />}
         </div>