test(apps/web): Add unit tests for InputsTable and InputRow components

apps/web/test/components/inputRow.test.tsx

@@ -0,0 +1,59 @@
+import { describe, it } from "vitest";
+import type { FC } from "react";
+import { render, screen } from "@testing-library/react";
+import InputRow, { InputRowProps } from "../../src/components/inputRow";
+import { withMantineTheme } from "../utils/WithMantineTheme";
+import { Table } from "@mantine/core";
+import prettyMilliseconds from "pretty-ms";
+
+const TableComponent: FC<InputRowProps> = (props) => (
+    <Table>
+        <Table.Tbody>
+            <InputRow {...props} />
+        </Table.Tbody>
+    </Table>
+);
+
+const Component = withMantineTheme(TableComponent);
+
+const defaultProps: InputRowProps = {
+    input: {
+        id: "0xdb84080e7d2b4654a7e384de851a6cf7281643de-1",
+        application: {
+            id: "0xdb84080e7d2b4654a7e384de851a6cf7281643de",
+        },
+        index: 1,
+        payload: "0x68656c6c6f2032",
+        msgSender: "0x8a12cf75000cd2e73ab16469826838d5f137f444",
+        timestamp: 1700593992,
+        transactionHash:
+            "0x4ad73b8f46dc16bc27d75b3f8f584e8785a8cb6fdf97a6c2a5a5dcfbda3e75c0",
+        erc20Deposit: null,
+    },
+    timeType: "age",
+};
+
+describe("InputRow component", () => {
+    it("should display correct age", () => {
+        render(<Component {...defaultProps} />);
+
+        const age = `${prettyMilliseconds(
+            Date.now() - defaultProps.input.timestamp * 1000,
+            {
+                unitCount: 2,
+                secondsDecimalDigits: 0,
+                verbose: true,
+            },
+        )} ago`;
+        expect(screen.getByText(age)).toBeInTheDocument();
+    });
+
+    it("should display correct timestamp in UTC format", () => {
+        render(<Component input={defaultProps.input} timeType="timestamp" />);
+
+        const timestamp = new Date(
+            defaultProps.input.timestamp * 1000,
+        ).toISOString();
+        expect(screen.getByText(timestamp)).toBeInTheDocument();
+    });
+});

apps/web/test/components/inputsTable.test.tsx

@@ -0,0 +1,42 @@
+import { describe, it } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import InputsTable, {
+    InputsTableProps,
+} from "../../src/components/inputsTable";
+import { withMantineTheme } from "../utils/WithMantineTheme";
+
+const Component = withMantineTheme(InputsTable);
+
+const defaultProps: InputsTableProps = {
+    inputs: [
+        {
+            id: "0xdb84080e7d2b4654a7e384de851a6cf7281643de-1",
+            application: {
+                id: "0xdb84080e7d2b4654a7e384de851a6cf7281643de",
+            },
+            index: 1,
+            payload: "0x68656c6c6f2032",
+            msgSender: "0x8a12cf75000cd2e73ab16469826838d5f137f444",
+            timestamp: 1700593992,
+            transactionHash:
+                "0x4ad73b8f46dc16bc27d75b3f8f584e8785a8cb6fdf97a6c2a5a5dcfbda3e75c0",
+            erc20Deposit: null,
+        },
+    ],
+};
+
+describe("InputsTable component", () => {
+    it("should display time column with age label", () => {
+        render(<Component {...defaultProps} />);
+        expect(screen.getByText("Age")).toBeInTheDocument();
+    });
+
+    it("should display time column with timestamp label", () => {
+        render(<Component {...defaultProps} />);
+
+        const timeTypeButton = screen.getByText("Age");
+        fireEvent.click(timeTypeButton);
+
+        expect(screen.getByText("Timestamp (UTC)")).toBeInTheDocument();
+    });
+});