tests: migrate components tests (#63)

Signed-off-by: Carlos Feria <[email protected]>

Author: carlosthe19916

client/src/app/pages/RekorSearch/Template/Intoto001.test.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import atobMock from "../__mocks__/atobMock";
+import decodex509Mock from "../__mocks__/decodex509Mock";
+
+import { render, screen } from "@testing-library/react";
+import { IntotoViewer001 } from "./Intoto001";
+
+vi.mock("react-router-dom", () => ({ Link: ({ children }: any) => <a>{children}</a> }));
+
+vi.mock("../x509/decode", () => ({
+  decodex509: decodex509Mock,
+}));
+
+describe("IntotoViewer001", () => {
+  beforeAll(() => {
+    atobMock();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should render the payload hash and provide a link to the hash page", () => {
+    const intoto = {
+      content: {
+        payloadHash: {
+          algorithm: "sha256",
+          value: "abc123",
+        },
+      },
+      publicKey: "123",
+    };
+
+    // @ts-expect-error allowed
+    render(<IntotoViewer001 intoto={intoto} />);
+
+    const hashLink = screen.getByText("Hash");
+    expect(hashLink).toBeInTheDocument();
+
+    const hashValue = screen.getByText("sha256:abc123");
+    expect(hashValue).toBeInTheDocument();
+  });
+});

client/src/app/pages/RekorSearch/Template/Intoto002.test.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import atobMock from "../__mocks__/atobMock";
+import decodex509Mock from "../__mocks__/decodex509Mock";
+
+import { render, screen } from "@testing-library/react";
+import { IntotoViewer002 } from "./Intoto002";
+import type { IntotoV002Schema } from "rekor";
+
+vi.mock("react-router-dom", () => ({ Link: ({ children }: any) => <a>{children}</a> }));
+
+const pemCertificate = `-----BEGIN CERTIFICATE-----\n${Buffer.from("Mocked Public Key").toString(
+  "base64"
+)}\n-----END CERTIFICATE-----`;
+
+vi.mock("../Template/x509/decode", () => ({
+  decodex509: decodex509Mock,
+}));
+
+describe("IntotoViewer", () => {
+  beforeAll(() => {
+    atobMock();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  const mockIntoto: IntotoV002Schema = {
+    content: {
+      envelope: {
+        payloadType: "application/vnd.in-toto+json",
+        signatures: [
+          {
+            publicKey: pemCertificate,
+            sig: Buffer.from("signature content", "utf-8").toString("base64"),
+          },
+        ],
+      },
+      payloadHash: {
+        algorithm: "sha256",
+        value: "hashValue",
+      },
+    },
+  };
+
+  it("renders the component with payload hash, signature, and certificate", () => {
+    render(<IntotoViewer002 intoto={mockIntoto} />);
+
+    // verify the hash link is rendered correctly
+    expect(screen.getByText("Hash")).toBeInTheDocument();
+    expect(screen.getByText("sha256:hashValue")).toBeInTheDocument();
+
+    // verify the signature is rendered & decoded
+    expect(screen.getByText("signature content")).toBeInTheDocument();
+    expect(screen.getByText(/BEGIN CERTIFICATE/)).toBeInTheDocument();
+  });
+});

client/src/app/pages/RekorSearch/__mocks__/atobMock.ts

@@ -0,0 +1,16 @@
+/* eslint-disable no-useless-escape, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-return */
+
+const atobMock = () => {
+  window.atob = vi.fn().mockImplementation((str) => {
+    const base64Pattern = /^(?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=)?$/;
+
+    if (!base64Pattern.test(str)) {
+      // return if string is not base64 encoded
+      return str;
+    }
+
+    return Buffer.from(str, "base64").toString("utf-8");
+  });
+};
+
+export default atobMock;

client/src/app/pages/RekorSearch/__mocks__/decodex509Mock.ts

@@ -0,0 +1,6 @@
+const decodex509Mock = vi.fn().mockReturnValue({
+  publicKey: "-----BEGIN CERTIFICATE-----Mocked Certificate-----END CERTIFICATE-----",
+  subject: "Mocked Subject",
+});
+
+export default decodex509Mock;

client/src/app/pages/RekorSearch/__mocks__/fileMock.ts

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

client/src/app/pages/RekorSearch/__mocks__/prismMock.ts

@@ -0,0 +1 @@
+vi.mock("react-syntax-highlighter/dist/cjs/styles/prism", () => ({}));

client/src/app/pages/RekorSearch/__mocks__/styleMock.ts

@@ -0,0 +1 @@
+module.exports = {};

client/src/app/pages/RekorSearch/components/DSSE.test.tsx

@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import atobMock from "../__mocks__/atobMock";
+import decodex509Mock from "../__mocks__/decodex509Mock";
+
+vi.mock("react-router-dom", () => ({ Link: ({ children }: any) => <a>{children}</a> }));
+
+vi.mock("../Template/x509/decode", () => ({
+  decodex509: decodex509Mock,
+}));
+
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { DSSEViewer } from "./DSSEViewer";
+import type { DSSEV001Schema } from "rekor";
+
+describe("DSSEViewer Component", () => {
+  beforeAll(() => {
+    vi.clearAllMocks();
+    atobMock();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  const mockDSSE: DSSEV001Schema = {
+    payloadHash: {
+      algorithm: "sha256",
+      value: "exampleHashValue",
+    },
+    signatures: [
+      {
+        signature: "exampleSignature",
+        verifier: "-----BEGIN CERTIFICATE-----\nexamplePublicKey\n-----END CERTIFICATE-----",
+      },
+    ],
+  };
+
+  it("renders without crashing", () => {
+    render(<DSSEViewer dsse={mockDSSE} />);
+    expect(screen.getByText("Hash")).toBeInTheDocument();
+  });
+
+  it("displays the payload hash correctly", () => {
+    render(<DSSEViewer dsse={mockDSSE} />);
+    expect(screen.getByText(`${mockDSSE.payloadHash?.algorithm}:${mockDSSE.payloadHash?.value}`)).toBeInTheDocument();
+  });
+
+  it("displays the signature correctly", () => {
+    render(<DSSEViewer dsse={mockDSSE} />);
+    expect(screen.getByText(mockDSSE.signatures![0].signature)).toBeInTheDocument();
+  });
+
+  it("displays the public key certificate title and content correctly", () => {
+    render(<DSSEViewer dsse={mockDSSE} />);
+    expect(screen.getByText("Public Key Certificate")).toBeInTheDocument();
+  });
+});

client/src/app/pages/RekorSearch/components/Entry.test.tsx

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+vi.mock("react-router-dom", () => ({ Link: ({ children }: any) => <a>{children}</a> }));
+
+vi.mock("react-syntax-highlighter/dist/cjs/styles/prism", () => ({ atomDark: {} }));
+vi.mock("../utils/date", () => ({
+  toRelativeDateString: vi.fn().mockReturnValue("Some Date"),
+}));
+vi.mock("./HashedRekord", () => ({
+  HashedRekordViewer: () => <div>MockedHashedRekordViewer</div>,
+}));
+
+import atobMock from "../__mocks__/atobMock";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { Entry, EntryCard } from "./Entry";
+
+describe("Entry", () => {
+  beforeAll(() => {
+    atobMock();
+  });
+
+  afterAll(() => {
+    vi.restoreAllMocks();
+  });
+
+  const mockEntry = {
+    someUuid: {
+      body: Buffer.from(JSON.stringify({ kind: "hashedrekord", apiVersion: "v1", spec: {} })).toString("base64"),
+      attestation: { data: Buffer.from("{}").toString("base64") },
+      logID: "123",
+      logIndex: 123,
+      integratedTime: 1618886400,
+      publicKey: "mockedPublicKey",
+      signature: {
+        publicKey: {
+          content: window.btoa("-----BEGIN CERTIFICATE-----certContent-----END CERTIFICATE-----"), // base64 encode
+        },
+      },
+    },
+  };
+
+  it("renders and toggles the accordion content", () => {
+    render(<Entry entry={mockEntry} />);
+
+    expect(screen.getByText("apiVersion")).not.toBeVisible();
+
+    // check if UUID link is rendered
+    expect(screen.getByText("someUuid")).toBeInTheDocument();
+
+    // simulate clicking the accordion toggle
+    const toggleButton = screen.getByText("Raw Body");
+    fireEvent.click(toggleButton);
+
+    // now the accordion content should be visible
+    expect(screen.getByText("apiVersion")).toBeVisible();
+  });
+});
+
+describe("EntryCard", () => {
+  it("renders the title and content", () => {
+    render(<EntryCard title="Test Title" content="Test Content" />);
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByText("Test Content")).toBeInTheDocument();
+  });
+});

client/src/app/pages/RekorSearch/components/Explorer.test.tsx

@@ -0,0 +1,73 @@
+import { useLocation, useNavigate, type Path } from "react-router-dom";
+
+vi.mock("react-router-dom", () => ({
+  useNavigate: vi.fn(),
+  useLocation: vi.fn(),
+}));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+
+  (useLocation as Mock).mockImplementation(
+    (): Path => ({
+      pathname: "/",
+      search: "",
+      hash: "",
+    })
+  );
+});
+
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { Mock } from "vitest";
+import { RekorClientProvider } from "../../../api/context";
+import { Explorer } from "./Explorer";
+
+describe("Explorer", () => {
+  it("renders without issues", () => {
+    render(
+      <RekorClientProvider>
+        <Explorer />
+      </RekorClientProvider>
+    );
+
+    expect(screen.getByText("Search")).toBeInTheDocument();
+  });
+
+  it("should render search form and display search button", () => {
+    render(
+      <RekorClientProvider>
+        <Explorer />
+      </RekorClientProvider>
+    );
+
+    expect(screen.getByLabelText("Attribute")).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: "Email input field" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Search" })).toBeInTheDocument();
+  });
+
+  it("should handle invalid logIndex query parameter", () => {
+    const mockNavigate = vi.fn();
+
+    (useNavigate as Mock).mockImplementation(() => mockNavigate);
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it("displays loading indicator when fetching data", async () => {
+    render(
+      <RekorClientProvider>
+        <Explorer />
+      </RekorClientProvider>
+    );
+
+    const button = screen.getByText("Search");
+    fireEvent.click(button);
+
+    await waitFor(() => expect(screen.queryByRole("status")).toBeNull());
+
+    expect(
+      screen.findByLabelText("Showing").then((res) => {
+        expect(res).toBeInTheDocument();
+      })
+    );
+  });
+});