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());
   });
 });

website/src/pages.test/about.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import AboutPage from "src/pages/about";
+
+describe("About page", () => {
+  it("should render correctly", () => {
+    render(<AboutPage />);
+
+    expect(screen.getByRole("heading", {level: 1})).toHaveTextContent("What is OpenAssistant?");
+  });
+});

website/src/test-utils/createMockRouter.ts

@@ -0,0 +1,31 @@
+import { NextRouter } from "next/router";
+
+export function createMockRouter(router: Partial<NextRouter>): NextRouter {
+  const mockRouter: NextRouter = {
+    route: "/",
+    pathname: "/",
+    query: {},
+    asPath: "/",
+    basePath: "",
+    defaultLocale: "en",
+    domainLocales: [],
+    isLocaleDomain: false,
+    push: jest.fn(),
+    replace: jest.fn(),
+    reload: jest.fn(),
+    back: jest.fn(),
+    forward: jest.fn(),
+    prefetch: jest.fn(),
+    beforePopState: jest.fn(),
+    isFallback: false,
+    isReady: true,
+    isPreview: false,
+    events: {
+      on: jest.fn(),
+      off: jest.fn(),
+      emit: jest.fn(),
+    },
+    ...router
+  };
+  return mockRouter;
+}