From daab34821bb20b8c585762453902212cf9b23fe4 Mon Sep 17 00:00:00 2001
From: Brian Huynh <brianhuynh31@gmail.com>
Date: Fri, 11 Oct 2024 01:14:28 -0700
Subject: [PATCH 1/2] Added jest tests for JsonGenerator

---
 jest.config.js                                       | 4 ++++
 src/app/customizer/JsonGenerator/components/Item.jsx | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/jest.config.js b/jest.config.js
index 81a68eef..43bde27b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -11,6 +11,10 @@ const config = {
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
   testEnvironment: "jest-environment-jsdom",
 
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1", // Maps '@/' to the 'src' folder
+  },
+
   // coverage init settings
   // collectCoverage: true,
   // coverageDirectory: "coverage",
diff --git a/src/app/customizer/JsonGenerator/components/Item.jsx b/src/app/customizer/JsonGenerator/components/Item.jsx
index 8911d12f..93c10fe1 100644
--- a/src/app/customizer/JsonGenerator/components/Item.jsx
+++ b/src/app/customizer/JsonGenerator/components/Item.jsx
@@ -28,6 +28,7 @@ const Item = ({ field, handleChange, removeField, controls, categoryData }) => {
         />
         <select
           name="fieldType"
+          aria-label="Field Type"
           value={field.fieldType}
           onChange={(e) => handleChange(field.id, e)}
           className="p-2 mr-3 text-zinc-300 bg-black border border-gray-700 rounded-md focus:outline-none focus:border-gray-500 focus:bg-gray-800 scrollbar"
@@ -45,6 +46,7 @@ const Item = ({ field, handleChange, removeField, controls, categoryData }) => {
         </select>
         <button
           onClick={() => removeField(field.id)}
+          aria-label="Remove Field"
           className="text-gray-500 hover:text-red-400"
         >
           <CiCircleRemove

From 33576cceb513be503d544380c1463e639af73c91 Mon Sep 17 00:00:00 2001
From: Brian Huynh <brianhuynh31@gmail.com>
Date: Fri, 11 Oct 2024 01:39:14 -0700
Subject: [PATCH 2/2] Added jest tests and update Item.jsx for JsonGenerator

---
 .../JsonGenerator/components/Item.jsx         |  1 -
 .../JsonGenerator/tests/CardForm.test.js      | 83 +++++++++++++++++++
 .../JsonGenerator/tests/Heroish.test.js       | 22 +++++
 .../JsonGenerator/tests/JsonGenerator.test.js | 35 ++++++++
 4 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 src/app/customizer/JsonGenerator/tests/CardForm.test.js
 create mode 100644 src/app/customizer/JsonGenerator/tests/Heroish.test.js
 create mode 100644 src/app/customizer/JsonGenerator/tests/JsonGenerator.test.js

diff --git a/src/app/customizer/JsonGenerator/components/Item.jsx b/src/app/customizer/JsonGenerator/components/Item.jsx
index 93c10fe1..02cdac77 100644
--- a/src/app/customizer/JsonGenerator/components/Item.jsx
+++ b/src/app/customizer/JsonGenerator/components/Item.jsx
@@ -28,7 +28,6 @@ const Item = ({ field, handleChange, removeField, controls, categoryData }) => {
         />
         <select
           name="fieldType"
-          aria-label="Field Type"
           value={field.fieldType}
           onChange={(e) => handleChange(field.id, e)}
           className="p-2 mr-3 text-zinc-300 bg-black border border-gray-700 rounded-md focus:outline-none focus:border-gray-500 focus:bg-gray-800 scrollbar"
diff --git a/src/app/customizer/JsonGenerator/tests/CardForm.test.js b/src/app/customizer/JsonGenerator/tests/CardForm.test.js
new file mode 100644
index 00000000..a19d7c7b
--- /dev/null
+++ b/src/app/customizer/JsonGenerator/tests/CardForm.test.js
@@ -0,0 +1,83 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import CardForm from "../components/CardForm";
+import { saveAs } from "file-saver";
+
+// Mock external dependencies
+jest.mock("file-saver", () => ({
+  saveAs: jest.fn(),
+}));
+
+// Test suite for CardForm Component
+describe("CardForm Component", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  // Renders FieldsSection correctly
+  test("renders the FieldsSection component", () => {
+    render(<CardForm isDarkMode={false} />);
+    expect(screen.getByText("Field Name")).toBeInTheDocument();
+    expect(screen.getByText("Field Type")).toBeInTheDocument();
+  });
+
+  // Renders initial fields correctly
+  test("renders the initial fields from Init.jsx", () => {
+    render(<CardForm isDarkMode={false} />);
+    const allTextInputs = screen.getAllByRole("textbox");
+    const fieldNameInputs = allTextInputs.filter(
+      (input) => input.getAttribute("name") === "fieldName",
+    );
+    expect(fieldNameInputs.length).toBe(3);
+    const initialFieldNames = fieldNameInputs.map((input) => input.value);
+    expect(initialFieldNames).toEqual(["id", "first_name", "last_name"]);
+  });
+
+  // Adds a new field when button clicked
+  test('adds a new field when "ADD ANOTHER FIELD" button is clicked', () => {
+    render(<CardForm isDarkMode={false} />);
+    const addButton = screen.getByRole("button", {
+      name: /add another field/i,
+    });
+    fireEvent.click(addButton);
+    const fieldInputs = screen.getAllByRole("textbox");
+    expect(fieldInputs.length).toBeGreaterThan(1);
+  });
+
+  // Removes a field when remove button clicked
+  test("removes a field when the remove button is clicked", () => {
+    render(<CardForm isDarkMode={false} />);
+    const removeButtons = screen.getAllByRole("button", {
+      name: /remove field/i,
+    });
+    const initialFieldCount = removeButtons.length;
+    fireEvent.click(removeButtons[0]);
+    const updatedRemoveButtons = screen.queryAllByRole("button", {
+      name: /remove field/i,
+    });
+    expect(updatedRemoveButtons.length).toBe(initialFieldCount - 1);
+  });
+
+  // Generates JSON and downloads file
+  test('generates JSON data and downloads file when "Export" button is clicked', async () => {
+    render(<CardForm isDarkMode={false} />);
+    const generateButton = screen.getByRole("button", { name: /export/i });
+    fireEvent.click(generateButton);
+    await waitFor(() => {
+      expect(saveAs).toHaveBeenCalledTimes(1);
+    });
+    const filename = saveAs.mock.calls[0][1];
+    expect(filename).toBe("WebDevTools.json");
+  });
+
+  // Shows preview when "Preview" button clicked
+  test('shows preview when "Preview" button is clicked', async () => {
+    render(<CardForm isDarkMode={false} />);
+    const fieldTypeSelects = screen.getAllByRole("combobox");
+    fieldTypeSelects.forEach((select) => {
+      fireEvent.change(select, { target: { value: "int" } });
+    });
+    const modalHeading = await screen.findByText(/preview/i);
+    expect(modalHeading).toBeInTheDocument();
+  });
+});
diff --git a/src/app/customizer/JsonGenerator/tests/Heroish.test.js b/src/app/customizer/JsonGenerator/tests/Heroish.test.js
new file mode 100644
index 00000000..045fdf71
--- /dev/null
+++ b/src/app/customizer/JsonGenerator/tests/Heroish.test.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Heroish from "../components/Heroish";
+
+// Test suite for Heroish Component
+describe("Heroish Component", () => {
+  // Test that main heading renders
+  test("renders the main heading", () => {
+    render(<Heroish />);
+    const heading = screen.getByRole("heading", { name: "Json Generator" });
+    expect(heading).toBeInTheDocument();
+  });
+
+  // Test that description paragraph renders
+  test("renders the description paragraph", () => {
+    render(<Heroish />);
+    const descriptionText =
+      "Generate custom JSON data quickly and easily. Populate your applications with realistic-looking data for prototyping, testing, and more.";
+    const description = screen.getByText(descriptionText);
+    expect(description).toBeInTheDocument();
+  });
+});
diff --git a/src/app/customizer/JsonGenerator/tests/JsonGenerator.test.js b/src/app/customizer/JsonGenerator/tests/JsonGenerator.test.js
new file mode 100644
index 00000000..2054f0dd
--- /dev/null
+++ b/src/app/customizer/JsonGenerator/tests/JsonGenerator.test.js
@@ -0,0 +1,35 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import JsonGeneratorMain from "../page";
+
+// Test suite for JsonGeneratorMain Component
+describe("JsonGeneratorMain Component", () => {
+  // Test component renders and displays correct title
+  test("renders without crashing and displays correct title", () => {
+    render(<JsonGeneratorMain />);
+    const allTitleElements = screen.getAllByText("Json Generator");
+    expect(allTitleElements).toHaveLength(1);
+  });
+
+  // Test dark mode toggle functionality
+  test("passes isDarkMode prop correctly to child components", async () => {
+    render(<JsonGeneratorMain />);
+    const toggleButton = screen.getByRole("button", {
+      name: /toggle dark mode/i,
+    });
+    const mainElement = screen.getByRole("main");
+
+    // Initial state: light mode
+    expect(mainElement).toHaveClass("bg-white", "text-gray-800");
+
+    // Toggle dark mode
+    fireEvent.click(toggleButton);
+
+    await waitFor(() => {
+      const navBar = screen.getByRole("navigation");
+      expect(navBar).toHaveClass("bg-gray-800");
+    });
+
+    expect(mainElement).toHaveClass("bg-gray-900", "text-gray-400");
+  });
+});