Add tests for all UI pages

frontend/jest.config.cjs

@@ -9,4 +9,5 @@ module.exports = {
   transform: {
     '^.+\\.jsx?$': 'babel-jest',
   },
+  setupFilesAfterEnv: ['./jest.setup.cjs'],
 };

frontend/jest.setup.cjs

@@ -0,0 +1,13 @@
+// Jest isn't compatible with more recent versions of react-markdown, and so this warning arises about future incompatibility. Suppress it, for now.
+beforeAll(() => {
+  jest.spyOn(console, 'error').mockImplementation((msg) => {
+    if (msg.includes('Support for defaultProps will be removed from function components')) {
+      return;
+    }
+    console.error(msg);
+  });
+});
+
+afterAll(() => {
+  console.error.mockRestore();
+});

frontend/src/pages/Article.jsx

@@ -44,10 +44,10 @@ function WikiArticle() {
         <>
           <div>
             <h1>{path} </h1>
-            <button onClick={() => navigate(`/`)} >
+            <button data-testid="back-button" onClick={() => navigate(`/`)} >
               Back
             </button>
-            <button onClick={() => navigate(`/edit/${path}`)} >
+            <button data-testid="edit-button" onClick={() => navigate(`/edit/${path}`)} >
               Edit
             </button>
           </div>

frontend/src/pages/Article.test.js

@@ -0,0 +1,25 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import Article from "./Article.jsx";
+
+test("Back Button Renders", () => {
+    render(
+        <MemoryRouter>
+          <Article />
+        </MemoryRouter>
+    );
+    const backButton = screen.getByTestId("back-button");
+    expect(backButton).toBeInTheDocument();
+});
+
+test("Edit Button Renders", () => {
+    render(
+        <MemoryRouter>
+          <Article />
+        </MemoryRouter>
+    );
+    const editButton = screen.getByTestId("edit-button");
+    expect(editButton).toBeInTheDocument();
+});

frontend/src/pages/Editor.jsx

@@ -67,8 +67,8 @@ function WikiEditor() {
             <h1>Now Editing: {path}</h1>
           </div>
           {error && <p>Error: {error.message}</p>}
-          <button onClick={() => navigate(`/${path}`)}>Cancel</button>
-          <button onClick={() => saveChanges()}>Save</button>
+          <button data-testid="cancel-button" onClick={() => navigate(`/${path}`)}>Cancel</button>
+          <button data-testid="save-button" onClick={() => saveChanges()}>Save</button>
           <div>
             <h3>Editor</h3>
             <input

frontend/src/pages/Editor.test.js

@@ -4,27 +4,32 @@ import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import Editor from "./Editor.jsx";
 
-beforeAll(() => {
-    // Jest isn't compatible with more recent versions of react-markdown, and so this warning arises about future incompatibility. Suppress it, for now.
-  jest.spyOn(console, 'error').mockImplementation((msg) => {
-    if (msg.includes('Support for defaultProps will be removed from function components')) {
-      return;
-    }
-    console.error(msg);
-  });
+test("Headline Found", () => {
+    render(
+        <MemoryRouter>
+          <Editor />
+        </MemoryRouter>
+    );
+    const messageElement = screen.getByText(/Now Editing/i);
+    expect(messageElement).toBeInTheDocument();
 });
 
-afterAll(() => {
-  console.error.mockRestore();
+test("Cancel Button Renders", () => {
+    render(
+        <MemoryRouter>
+          <Editor />
+        </MemoryRouter>
+    );
+    const cancelButton = screen.getByTestId("cancel-button");
+    expect(cancelButton).toBeInTheDocument();
 });
 
-
-test("Text matches", () => {
+test("Save Button Renders", () => {
     render(
         <MemoryRouter>
           <Editor />
         </MemoryRouter>
     );
-    const messageElement = screen.getByText(/Now Editing/i);
-    expect(messageElement).toBeInTheDocument();
+    const saveButton = screen.getByTestId("save-button");
+    expect(saveButton).toBeInTheDocument();
 });

frontend/src/pages/HomePage.jsx

@@ -2,10 +2,8 @@ import React from "react";
 import { useState, useEffect } from 'react';
 import '../HomePage.css';
 import { useNavigate } from 'react-router-dom';
-
 import * as Constants from '../constants.js';
 
-
 function WikiFrontend() {
     const [articles, setArticles] = useState([]);
     const navigate = useNavigate();

frontend/src/pages/HomePage.test.js

@@ -1,10 +1,25 @@
 import "@testing-library/jest-dom";
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import HomePage from "./HomePage.jsx";
 
-test("Text matches", () => {
+beforeEach(() => {
+  // Mock the fetch function before each test
+  global.fetch = jest.fn(() =>
+    Promise.resolve({
+      ok: true,
+      json: () => Promise.resolve(["Article 1", "Article 2"]),
+    })
+  );
+});
+
+afterEach(() => {
+  // Cleanup the mock after each test
+  global.fetch.mockRestore();
+});
+
+test("Headline Displays", () => {
     render(
         <MemoryRouter>
           <HomePage />
@@ -13,3 +28,32 @@ test("Text matches", () => {
     const messageElement = screen.getByText(/Wiki Articles/i);
     expect(messageElement).toBeInTheDocument();
 });
+
+test("Shows 'Nothing to Display'", () => {
+    render(
+        <MemoryRouter>
+          <HomePage />
+        </MemoryRouter>
+    );
+    const messageElement = screen.getByText(/Wiki Articles/i);
+    expect(messageElement).toBeInTheDocument();
+});
+
+
+test("Displays articles as buttons", async () => {
+    render(
+        <MemoryRouter>
+          <HomePage />
+        </MemoryRouter>
+    );
+
+    // Wait for the articles to be fetched and rendered
+  await waitFor(() => {
+    const articleButton = screen.getByText(/Article 1/i);
+    expect(articleButton).toBeInTheDocument();
+  });
+
+    // Check if the second article button is also rendered
+    const articleButton2 = screen.getByText(/Article 2/i);
+    expect(articleButton2).toBeInTheDocument();
+});