New tests

src/components/PostButton.test.js

@@ -0,0 +1,26 @@
+import { render, fireEvent } from "@testing-library/react";
+import PostButton from "./PostButton";
+
+describe("PostButton", () => {
+  test("renders without errors", () => {
+    render(<PostButton />);
+  });
+
+  test("renders post button correctly", () => {
+    const { getByText } = render(<PostButton />);
+    const buttonText = getByText("What are MiddKids saying?");
+    expect(buttonText).toBeInTheDocument();
+  });
+
+  test("calls routePosts when the button is clicked", () => {
+    const routePostsMock = jest.fn();
+    const { getByRole } = render(<PostButton routePosts={routePostsMock} />);
+    const button = getByRole("button");
+    fireEvent.click(button);
+    expect(routePostsMock).toHaveBeenCalled();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+});

src/components/PostCreator.test.js

@@ -0,0 +1,59 @@
+import { render, fireEvent } from "@testing-library/react";
+import PostCreator from "./PostCreator";
+
+describe("PostCreator", () => {
+  test("renders without error", () => {
+    render(<PostCreator />);
+  });
+
+  test("updates state when input values change", () => {
+    const { getByLabelText } = render(<PostCreator />);
+    const subjectInput = getByLabelText("Subject");
+    const contentsInput = getByLabelText("Contents");
+    const userInput = getByLabelText("Username");
+
+    fireEvent.change(subjectInput, { target: { value: "Test Subject" } });
+    fireEvent.change(contentsInput, { target: { value: "Test Contents" } });
+    fireEvent.change(userInput, { target: { value: "Test User" } });
+
+    expect(subjectInput.value).toBe("Test Subject");
+    expect(contentsInput.value).toBe("Test Contents");
+    expect(userInput.value).toBe("Test User");
+  });
+
+  test("calls finished function with correct data when Post button is clicked", () => {
+    const finishedMock = jest.fn();
+    const { getByText, getByLabelText } = render(
+      <PostCreator finished={finishedMock} />
+    );
+    const subjectInput = getByLabelText("Subject");
+    const contentsInput = getByLabelText("Contents");
+    const userInput = getByLabelText("Username");
+    const postButton = getByText("Post");
+
+    fireEvent.change(subjectInput, { target: { value: "Test Subject" } });
+    fireEvent.change(contentsInput, { target: { value: "Test Contents" } });
+    fireEvent.change(userInput, { target: { value: "Test User" } });
+    fireEvent.click(postButton);
+
+    expect(finishedMock).toHaveBeenCalledWith({
+      subject: "Test Subject",
+      contents: "Test Contents",
+      user: "Test User",
+    });
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  test("calls finished function when Cancel button is clicked", () => {
+    const finishedMock = jest.fn();
+    const { getByText } = render(<PostCreator finished={finishedMock} />);
+    const cancelButton = getByText("Cancel");
+
+    fireEvent.click(cancelButton);
+
+    expect(finishedMock).toHaveBeenCalled();
+  });
+});

src/components/PostsView.js

@@ -11,7 +11,7 @@ const localizedFormat = require("dayjs/plugin/localizedFormat");
 
 dayjs.extend(localizedFormat);
 
-export default function PostsView({ posts }) {
+export default function PostsView({ posts = [] }) {
   const router = useRouter();
 
   const routeReply = (id) => {

src/components/PostsView.test.js

@@ -0,0 +1,51 @@
+import { render } from "@testing-library/react";
+import PostsView from "./PostsView";
+
+jest.mock("next/router", () => ({
+  useRouter: jest.fn(),
+}));
+
+describe("PostsView", () => {
+  test("renders without error", () => {
+    render(<PostsView />);
+  });
+
+  test("displays loading message when posts are not available", () => {
+    const { getByText } = render(<PostsView posts={null} />);
+    const loadingMessage = getByText("Loading...");
+    expect(loadingMessage).toBeInTheDocument();
+  });
+
+  test("displays posts correctly when available", () => {
+    const posts = [
+      {
+        id: 1,
+        subject: "Hello guys",
+        user: "John Doe",
+        created_at: "2023-05-18T10:30:00.000Z",
+        contents: "Hi how are you",
+      },
+      {
+        id: 2,
+        subject: "Anyone lunch",
+        user: "Jane Doe",
+        created_at: "2023-05-18T12:30:00.000Z",
+        contents: "Proctor lunch anyone",
+      },
+    ];
+
+    const { getByText } = render(<PostsView posts={posts} />);
+
+    posts.forEach((post) => {
+      const subject = getByText(post.subject);
+      const user = getByText(`${post.user} -`);
+      const createdAt = getByText(post.created_at);
+      const contents = getByText(post.contents);
+
+      expect(subject).toBeInTheDocument();
+      expect(user).toBeInTheDocument();
+      expect(createdAt).toBeInTheDocument();
+      expect(contents).toBeInTheDocument();
+    });
+  });
+});

src/pages/posts/index.js

@@ -19,7 +19,7 @@ import PostAdd from "@mui/icons-material/PostAdd";
 
 export default function PostPage({}) {
   const router = useRouter();
-  const [posts, setPosts] = useState();
+  const [posts, setPosts] = useState([]);
 
   function routeCreate() {
     router.push(`/posts/new`);