diff --git a/frontend/jest.config.cjs b/frontend/jest.config.cjs index 4711288..3317ce8 100644 --- a/frontend/jest.config.cjs +++ b/frontend/jest.config.cjs @@ -9,4 +9,5 @@ module.exports = { transform: { '^.+\\.jsx?$': 'babel-jest', }, + setupFilesAfterEnv: ['./jest.setup.cjs'], }; diff --git a/frontend/jest.setup.cjs b/frontend/jest.setup.cjs new file mode 100644 index 0000000..8e3c210 --- /dev/null +++ b/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(); +}); diff --git a/frontend/src/pages/Article.jsx b/frontend/src/pages/Article.jsx index 81e3449..915ee2d 100644 --- a/frontend/src/pages/Article.jsx +++ b/frontend/src/pages/Article.jsx @@ -44,10 +44,10 @@ function WikiArticle() { <>

{path}

- -
diff --git a/frontend/src/pages/Article.test.js b/frontend/src/pages/Article.test.js new file mode 100644 index 0000000..f2c50ee --- /dev/null +++ b/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( + +
+ + ); + const backButton = screen.getByTestId("back-button"); + expect(backButton).toBeInTheDocument(); +}); + +test("Edit Button Renders", () => { + render( + +
+ + ); + const editButton = screen.getByTestId("edit-button"); + expect(editButton).toBeInTheDocument(); +}); diff --git a/frontend/src/pages/Editor.jsx b/frontend/src/pages/Editor.jsx index f97016f..f1c1d54 100644 --- a/frontend/src/pages/Editor.jsx +++ b/frontend/src/pages/Editor.jsx @@ -67,8 +67,8 @@ function WikiEditor() {

Now Editing: {path}

{error &&

Error: {error.message}

} - - + +

Editor

{ - // 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( + + + + ); + const messageElement = screen.getByText(/Now Editing/i); + expect(messageElement).toBeInTheDocument(); }); -afterAll(() => { - console.error.mockRestore(); +test("Cancel Button Renders", () => { + render( + + + + ); + const cancelButton = screen.getByTestId("cancel-button"); + expect(cancelButton).toBeInTheDocument(); }); - -test("Text matches", () => { +test("Save Button Renders", () => { render( ); - const messageElement = screen.getByText(/Now Editing/i); - expect(messageElement).toBeInTheDocument(); + const saveButton = screen.getByTestId("save-button"); + expect(saveButton).toBeInTheDocument(); }); diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx index 6c5ddf0..7a259a5 100644 --- a/frontend/src/pages/HomePage.jsx +++ b/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(); diff --git a/frontend/src/pages/HomePage.test.js b/frontend/src/pages/HomePage.test.js index 11349a6..a416228 100644 --- a/frontend/src/pages/HomePage.test.js +++ b/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( @@ -13,3 +28,32 @@ test("Text matches", () => { const messageElement = screen.getByText(/Wiki Articles/i); expect(messageElement).toBeInTheDocument(); }); + +test("Shows 'Nothing to Display'", () => { + render( + + + + ); + const messageElement = screen.getByText(/Wiki Articles/i); + expect(messageElement).toBeInTheDocument(); +}); + + +test("Displays articles as buttons", async () => { + render( + + + + ); + + // 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(); +});