Minor changes in files and formate

webapp/package.json

@@ -7,7 +7,10 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "coverage": "vitest run --coverage"
   },
   "dependencies": {
     "react": "^18.2.0",
@@ -18,15 +21,19 @@
     "terminal-in-react": "^4.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.66",
     "@types/react-dom": "^18.2.22",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.6.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "jsdom": "^20.0.0",
+    "jsdom": "^24.1.0",
     "vite": "^5.2.0",
-    "vite-plugin-terminal": "^1.2.0"
+    "vite-plugin-terminal": "^1.2.0",
+    "vitest": "^1.6.0"
   }
 }

webapp/src/App.test.jsx

@@ -0,0 +1,77 @@
+// App.test.jsx
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import App from "./App.jsx";
+
+// App.jsx
+
+test("renders Footer component", () => {
+  render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  );
+  expect(
+    screen.getByText(/Designed & Built with 💖 by Shubh Mehta/i)
+  ).toBeInTheDocument();
+});
+
+test("renders Threads component within Debug route", () => {
+  render(
+    <MemoryRouter initialEntries={["/debug/threads"]}>
+      <App />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Threads/i)).toBeInTheDocument();
+  const threadsComponent = screen.getByText(/Threads/i);
+  expect(threadsComponent).toBeInTheDocument();
+  expect(threadsComponent).toHaveClass("gdb-header-content active");
+});
+
+test("renders LocalVariable component within Debug route", () => {
+  render(
+    <MemoryRouter initialEntries={["/debug/localVariable"]}>
+      <App />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Local Variable/i)).toBeInTheDocument();
+  const localVariableComponent = screen.getByText(/Local Variable/i);
+  expect(localVariableComponent).toBeInTheDocument();
+  expect(localVariableComponent).toHaveClass("gdb-header-content active");
+});
+
+test("renders Context component within Debug route", () => {
+  render(
+    <MemoryRouter initialEntries={["/debug/context"]}>
+      <App />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Context/i)).toBeInTheDocument();
+  const contextComponent = screen.getByText(/Context/i);
+  expect(contextComponent).toBeInTheDocument();
+  expect(contextComponent).toHaveClass("gdb-header-content active");
+});
+
+test("renders MemoryMap component within Debug route", () => {
+  render(
+    <MemoryRouter initialEntries={["/debug/memoryMap"]}>
+      <App />
+    </MemoryRouter>
+  );
+  expect(screen.getByText(/Memory Map/i)).toBeInTheDocument();
+  const memoryMapComponent = screen.getByText(/Memory Map/i);
+  expect(memoryMapComponent).toBeInTheDocument();
+  expect(memoryMapComponent).toHaveClass("gdb-header-content active");
+});
+
+test("renders BreakPoints component within Debug route", () => {
+  render(
+    <MemoryRouter initialEntries={["/debug/breakPoints"]}>
+      <App />
+    </MemoryRouter>
+  );
+  const breakpointsComponent = screen.getByText(/Break Points/i);
+  expect(breakpointsComponent).toBeInTheDocument();
+  expect(breakpointsComponent).toHaveClass("gdb-header-content active");
+});

webapp/src/components/Breakpoint/__tests__/Breakpoint.test.jsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Breakpoint from "../Breakpoint.jsx";
+
+// Breakpoint
+test("renders Breakpoint component with basic structure", () => {
+  render(<Breakpoint />);
+
+  const addBreakpointElement = screen.getByText(/Add Breakpoint/i);
+  expect(addBreakpointElement).toBeInTheDocument();
+
+  const lineInputs = screen.getAllByRole("textbox");
+  expect(lineInputs).toHaveLength(2);
+});
+
+test("renders Breakpoint component and checks about text Line", async () => {
+  render(<Breakpoint />);
+  const lineLabel = screen.getByText(/Line/i);
+  expect(lineLabel).toBeInTheDocument();
+});
+
+test("typing in Line input updates the value correctly", () => {
+  render(<Breakpoint />);
+
+  const lineInput = screen.getAllByRole("textbox");
+  fireEvent.change(lineInput[0], { target: { value: "123" } });
+
+  expect(lineInput[0]).toHaveValue("123");
+});

webapp/src/components/DebugHeader/__tests__/DebugHeader.test.jsx

@@ -0,0 +1,26 @@
+// DebugHeader.test.jsx
+
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import DebugHeader from "../DebugHeader.jsx";
+
+describe("DebugHeader Component", () => {
+  test("renders DebugHeader component with icons and filename", async () => {
+    render(<DebugHeader />);
+
+    const filenameContent = screen.getByText(/filename/i);
+    expect(filenameContent).toBeInTheDocument();
+
+    const saveContent = screen.getByRole("button");
+    expect(saveContent).toBeInTheDocument();
+  });
+
+  test("clicking Save button triggers save action", () => {
+    render(<DebugHeader />);
+
+    const saveButton = screen.getByText(/Save/i);
+    expect(saveButton).toBeInTheDocument();
+
+    // fireEvent.click(saveButton);
+  });
+});

webapp/src/components/Footer/__tests__/Footer.test.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Footer from "../Footer.jsx";
+
+describe("Footer Component", () => {
+  test("renders Footer component with correct text content", () => {
+    render(<Footer />);
+
+    const footerText = screen.getByText(
+      /Designed & Built with 💖 by Shubh Mehta/i
+    );
+    expect(footerText).toBeInTheDocument();
+  });
+});

webapp/src/components/Functions/__tests__/Functions.test.jsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Functions from "../Functions.jsx"; // Adjust the import path as per your project structure
+
+test("renders Functions component with correct heading and function names", () => {
+  render(<Functions />);
+
+  // Assert the presence of the heading
+  const headingElement = screen.getByText(/Functions/i);
+  expect(headingElement).toBeInTheDocument();
+});

webapp/src/components/FunctionsBottom/__tests__/FunctionsBottom.test.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import FunctionsBottom from "../FunctionsBottom.jsx";
+
+test("renders FunctionsBottom component with search input", () => {
+  render(<FunctionsBottom />);
+
+  // Assert the presence of the heading
+  const headingElement = screen.getByText(/Search/i);
+  expect(headingElement).toBeInTheDocument();
+
+  const searchInput = screen.getByPlaceholderText("Search");
+  expect(searchInput).toBeInTheDocument();
+  expect(searchInput).toHaveAttribute("type", "text");
+
+  fireEvent.change(searchInput, { target: { value: "kernel" } });
+
+  expect(searchInput).toHaveValue("kernel");
+});

webapp/src/components/GdbComponents/__tests__/GdbComponents.test.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import GdbComponents from "../GdbComponents.jsx";
+
+describe("GdbComponents", () => {
+  test("renders all navigation links correctly", () => {
+    render(
+      <MemoryRouter>
+        <GdbComponents />
+      </MemoryRouter>
+    );
+
+    // Assert the presence of all navigation links
+    const threadsLink = screen.getByText(/Threads/i);
+    const localVariableLink = screen.getByText(/Local Variable/i);
+    const contextLink = screen.getByText(/Context/i);
+    const memoryMapLink = screen.getByText(/Memory Map/i);
+    const breakPointsLink = screen.getByText(/Break Points/i);
+
+    expect(threadsLink).toBeInTheDocument();
+    expect(localVariableLink).toBeInTheDocument();
+    expect(contextLink).toBeInTheDocument();
+    expect(memoryMapLink).toBeInTheDocument();
+    expect(breakPointsLink).toBeInTheDocument();
+  });
+
+  test("clicking on navigation links updates active state", () => {
+    render(
+      <MemoryRouter>
+        <GdbComponents />
+      </MemoryRouter>
+    );
+
+    // Click on a navigation link
+    fireEvent.click(screen.getByText(/Memory Map/i));
+
+    // Assert the active state is updated correctly
+    const memoryMapLink = screen.getByText(/Memory Map/i);
+    expect(memoryMapLink).toHaveClass("gdb-header-content active");
+
+    // Ensure other links are not active
+    const threadsLink = screen.getByText(/Threads/i);
+    const localVariableLink = screen.getByText(/Local Variable/i);
+    const contextLink = screen.getByText(/Context/i);
+    const breakPointsLink = screen.getByText(/Break Points/i);
+
+    expect(threadsLink).not.toHaveClass("gdb-header-content active");
+    expect(localVariableLink).not.toHaveClass("gdb-header-content active");
+    expect(contextLink).not.toHaveClass("gdb-header-content active");
+    expect(breakPointsLink).not.toHaveClass("gdb-header-content active");
+  });
+});

webapp/src/components/Header/__tests__/Header.test.jsx

@@ -0,0 +1,21 @@
+// Header.test.js
+import React from "react";
+import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Header from "../Header.jsx";
+
+test("renders Header component", () => {
+  const { getByAltText, getByText } = render(
+    <MemoryRouter>
+      <Header />
+    </MemoryRouter>
+  );
+
+  const imgElement = getByAltText("C2si");
+  expect(imgElement).toBeInTheDocument();
+  expect(imgElement).toHaveAttribute("src", "/src/assets/c2si.png"); // Ensure the path is correct
+
+  const loginLink = getByText("Login");
+  expect(loginLink).toBeInTheDocument();
+  expect(loginLink).toHaveAttribute("href", "/login");
+});

webapp/src/components/Stack/__tests__/Stack.test.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Stack from "../Stack.jsx";
+
+test("renders Stack component with stack items", () => {
+  render(<Stack />);
+
+  const stackContainer = screen.getByText(/Stack/i);
+  expect(stackContainer).toBeInTheDocument();
+});

webapp/src/components/StackBottom/__tests__/StackBottom.test.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import StackBottom from "../StackBottom.jsx";
+
+test("renders StackBottom component with headings", () => {
+  render(<StackBottom />);
+
+  const heading = screen.getByText(/Registors/i);
+  expect(heading).toBeInTheDocument();
+
+  const parts = ["func", "file", "addr", "args"];
+  parts.forEach((part) => {
+    const partElement = screen.getByText(part);
+    expect(partElement).toBeInTheDocument();
+  });
+});

webapp/src/setupTests.js

@@ -0,0 +1,12 @@
+// Import jest-dom to extend Jest with custom matchers for DOM node assertions
+import "@testing-library/jest-dom";
+
+// Optional: Configure or set up global settings if needed
+
+// For example, you might want to configure a mock server or add global variables.
+// If you're using MSW (Mock Service Worker) for API mocking, you can set it up here:
+
+// import { server } from './mocks/server';
+// beforeAll(() => server.listen());
+// afterEach(() => server.resetHandlers());
+// afterAll(() => server.close());

webapp/vite.config.js

@@ -8,11 +8,7 @@ export default defineConfig({
     globals: true,
     environment: "jsdom",
     setupFiles: "./src/setupTests.js",
-    include: ["src/**/*.{test,spec}.{js,ts}"], // Moved out of the nested test object
-  },
-  server: {
-    host: "0.0.0.0",
-    port: 5173,
+    include: ["src/**/*.{test,spec}.{jsx,ts}"], // Moved out of the nested test object
   },
   server: {
     host: "0.0.0.0",