Merge pull request #609 from ericv105/main

85: Unit-testing nextjs & react code

website/src/components/Container.cy.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-
-import { Container } from "./Container";
-
-describe("<Container />", () => {
-  it("renders", () => {
-    // see: https://on.cypress.io/mounting-react
-    const className = "my-class";
-    const text = "test_container";
-    cy.mount(<Container className={className}>{text}</Container>);
-    cy.get(`div.${className}`).should("have.class", className).should("be.visible").should("contain", text);
-  });
-});

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

@@ -0,0 +1,34 @@
+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",
+    link: "/fake/path",
+  };
+
+  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 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());
+  });
+});