chore: Add tests for HAR Viewer page

__tests__/pages/utilities/har-file-viewer.test.tsx

@@ -0,0 +1,101 @@
+import { render, screen, within } from "@testing-library/react";
+import { userEvent } from "@testing-library/user-event";
+import HARFileViewer from "../../../pages/utilities/har-file-viewer";
+
+// Mock HAR file data
+const mockHarData = {
+  log: {
+    entries: [
+      {
+        request: {
+          url: "https://example.com/api/test",
+          method: "GET",
+          headers: [
+            { name: "User-Agent", value: "Mozilla/50" },
+            { name: "Accept", value: "application/json" },
+          ],
+        },
+        response: {
+          status: 200,
+          content: {
+            size: 124,
+            mimeType: "application/json",
+            text: '{"message": "success"}',
+          },
+          headers: [{ name: "Content-Type", value: "application/json" }],
+        },
+        time: 150,
+        startedDateTime: "2023-01-01T00:00:00",
+      },
+      {
+        request: {
+          url: "https://example.com/css/style.css",
+          method: "GET",
+          headers: [{ name: "User-Agent", value: "Mozilla/50" }],
+        },
+        response: {
+          status: 404,
+          content: {
+            size: 248,
+            mimeType: "text/css",
+            text: "body { color: red; }",
+          },
+          headers: [{ name: "Content-Type", value: "text/css" }],
+        },
+        time: 75,
+        startedDateTime: "2023-01-01T00:00:01.000Z",
+      },
+    ],
+  },
+};
+
+describe("HARFileViewer", () => {
+  test("should render the component and display the drop zone text", () => {
+    render(<HARFileViewer />);
+
+    expect(screen.getByText("Drop your .har file here")).toBeInTheDocument();
+  });
+
+  test("should list all requests after uploading a har file", async () => {
+    const user = userEvent.setup();
+    render(<HARFileViewer />);
+
+    // Create a mock file
+    const file = new File([JSON.stringify(mockHarData)], "test.har", {
+      type: "application/json",
+    });
+
+    // Find the file input and upload the file
+    const fileInput = screen.getByTestId("input");
+    await user.upload(fileInput, file);
+
+    // Wait for the requests to be displayed
+    await screen.findByText("https://example.com/api/test");
+    await screen.findByText("https://example.com/css/style.css");
+  });
+
+  test("should list the status code for every request", async () => {
+    const user = userEvent.setup();
+    render(<HARFileViewer />);
+
+    // Create a mock file
+    const file = new File([JSON.stringify(mockHarData)], "test.har", {
+      type: "application/json",
+    });
+
+    // Find the file input and upload the file
+    const fileInput = screen.getByTestId("input");
+    await user.upload(fileInput, file);
+
+    // Get all rows
+    const rows = await screen.findAllByTestId("table-row");
+
+    // For the 1st row, get status code column and verify if its 200
+    const row1 = within(rows[0]).getByTestId("column-status-code");
+    expect(row1).toHaveTextContent("200");
+
+    // For the 2nd row, get status code column and verify if its 404
+    const row2 = within(rows[1]).getByTestId("column-status-code");
+    expect(row2).toHaveTextContent("404");
+  });
+});

jest.setup.ts

@@ -1 +1,13 @@
 import "@testing-library/jest-dom";
+
+// There's no official way to mock next/navigation.
+// We just make it no-op for all tests.
+jest.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: jest.fn(),
+    replace: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+    refresh: jest.fn(),
+  }),
+}));

package.json

@@ -37,6 +37,7 @@
   "devDependencies": {
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.12",
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20",

pages/utilities/har-file-viewer.tsx

@@ -105,6 +105,7 @@ export default function HARFileViewer() {
           >
             <input
               type="file"
+              data-testid="input"
               accept=".har"
               onChange={(event) => handleFileUpload(event.target.files?.[0])}
               className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
@@ -287,6 +288,7 @@ const HarTable = ({ entries, activeFilter }: HarTableComponentProps) => {
           {filteredAndSortedEntries.map((entry, index) => (
             <Fragment key={index}>
               <tr
+                data-testid="table-row"
                 className={cn(
                   tableRowStyles,
                   index % 2 === 0 && tableRowOddStyles,
@@ -304,7 +306,10 @@ const HarTable = ({ entries, activeFilter }: HarTableComponentProps) => {
                 >
                   {entry.request.url}
                 </td>
-                <td className={cn(tableCellStyles, "cursor-pointer")}>
+                <td
+                  data-testid="column-status-code"
+                  className={cn(tableCellStyles, "cursor-pointer")}
+                >
                   {entry.response.status}
                 </td>
                 <td className={cn(tableCellStyles, "cursor-pointer")}>