tested TaskOption component and about page

website/src/components/TaskSelection/TaskOption.test.tsx

@@ -1,23 +1,34 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { RouterContext } from "next/dist/shared/lib/router-context";
 import React from "react";
+import { createMockRouter } from "src/test-utils/createMockRouter";
 
 import { OptionProps, TaskOption } from "./TaskOption";
 
 describe("TaskOption component", () => {
   const testProps: OptionProps = {
+    title: "Task Title",
     alt: "Task Title",
     img: "/imgPath",
-    title: "Task Title",
-    link: "/create/summarize_story",
+    link: "/fake/path",
   };
 
-  beforeEach(() => {
+  it("should render", () => {
     render(<TaskOption {...testProps} />);
+    expect(screen.getByRole("heading")).toHaveTextContent("Task Title");
+    expect(screen.getByRole("img")).toHaveAttribute("alt", "Task Title");
+    expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
   });
 
-  it("should render Task Option component", () => {
-    expect(screen.getByRole("heading")).toHaveTextContent(testProps.title);
-    expect(screen.getByRole("link")).toHaveAttribute("href", testProps.link);
-    expect(screen.queryByText("hi")).toBeNull();
+  it("should navigate properly on click", () => {
+    const router = createMockRouter({ pathname: "/fake/path" });
+    render(
+      <RouterContext.Provider value={router}>
+        <TaskOption {...testProps} />
+      </RouterContext.Provider>
+    );
+    expect(screen.getByRole("link")).toHaveAttribute("href", "/fake/path");
+    fireEvent.click(screen.getByRole("link"));
+    expect(router.push).toHaveBeenCalledWith("/fake/path", expect.anything(), expect.anything());
   });
 });