feat: Add jest jsongenerator (#403)

* Added jest tests for JsonGenerator

* Added jest tests and update Item.jsx for JsonGenerator

Author: BrianHuynhCS

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",

src/app/customizer/JsonGenerator/components/Item.jsx

@@ -45,6 +45,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

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();
+  });
+});

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();
+  });
+});

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");
+  });
+});