added tests

babel.config.js

@@ -1,13 +1,3 @@
-// babel.config.js
 module.exports = {
-  presets: [
-    [
-      "@babel/preset-env",
-      {
-        targets: {
-          node: "current",
-        },
-      },
-    ],
-  ],
+  presets: ["@babel/preset-env", "@babel/preset-react"],
 };

package.json

@@ -6,6 +6,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.7.2",
     "dotenv": "^16.4.5",
+    "history": "^5.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.25.1",
@@ -41,19 +42,23 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-runtime": "^7.24.7",
     "@babel/preset-env": "^7.25.3",
+    "@babel/preset-react": "^7.24.7",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "babel-jest": "^29.7.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1"
   },
   "jest": {
     "transform": {
       "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
     },
     "transformIgnorePatterns": [
-      "/node_modules/",
+      "/node_modules/(?!(axios)/)",
       "\\.pnp\\.[^\\/]+$"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less)$": "identity-obj-proxy"
+    }
   }
 }
-

src/About.test.js

@@ -0,0 +1,54 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MemoryRouter, Router } from "react-router-dom";
+import { createMemoryHistory } from "history";
+import About from "./About";
+
+// Mock environment variable for the test
+const originalEnv = process.env;
+
+beforeAll(() => {
+  process.env = {
+    ...originalEnv,
+    REACT_APP_API_URL: "http://test-api-url.com",
+  };
+});
+
+afterAll(() => {
+  process.env = originalEnv;
+});
+
+test("renders About component correctly", () => {
+  render(
+    <MemoryRouter>
+      <About />
+    </MemoryRouter>
+  );
+
+  // Check if the header is rendered
+  expect(screen.getByText(/About MoodMelody/i)).toBeInTheDocument();
+
+  // Check if the button is rendered
+  const backButton = screen.getByRole("button", { name: /Back to Playlist/i });
+  expect(backButton).toBeInTheDocument();
+});
+
+test("navigates back to playlist on button click", () => {
+  const history = createMemoryHistory();
+  history.push = jest.fn();
+
+  render(
+    <Router location={history.location} navigator={history}>
+      <About />
+    </Router>
+  );
+
+  const backButton = screen.getByRole("button", { name: /Back to Playlist/i });
+  fireEvent.click(backButton);
+
+  expect(history.push).toHaveBeenCalledWith(
+    expect.objectContaining({ pathname: "/playlist", hash: "", search: "" }),
+    undefined,
+    {}
+  );
+});

src/Footer.test.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import Footer from "./Footer";
+
+test("renders Footer component correctly", () => {
+  render(<Footer />);
+
+  // Check if footer is rendered
+  const footerText = screen.getByText(
+    /© 2024 Mood Melody. All rights reserved./i
+  );
+  expect(footerText).toBeInTheDocument();
+});

src/Landing.test.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Landing from "./Landing";
+
+describe("Landing Component", () => {
+  test("renders Landing component correctly", () => {
+    render(<Landing />);
+
+    // Check if the content is rendered
+    expect(screen.getByText("About Mood Melody")).toBeInTheDocument();
+    expect(screen.getByText("Welcome to Mood Melody!")).toBeInTheDocument();
+    expect(
+      screen.getByText(/Authorize Your Spotify Account:/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText(/Describe Your Mood:/i)).toBeInTheDocument();
+    expect(screen.getByText(/Get Recommendations:/i)).toBeInTheDocument();
+    expect(screen.getByText(/Enjoy Your Playlist:/i)).toBeInTheDocument();
+    expect(screen.getByText(/Continuous Discovery:/i)).toBeInTheDocument();
+  });
+
+  test("redirects to the authorization endpoint on button click", () => {
+    // Mock window.location.assign
+    delete window.location;
+    window.location = { assign: jest.fn() };
+
+    render(<Landing />);
+
+    fireEvent.click(screen.getByText("Authorize with Spotify"));
+
+    // Update the test to match the actual URL being used
+    expect(window.location.assign).toHaveBeenCalledWith(
+      "http://127.0.0.1:5000/auth/login"
+    );
+  });
+});

src/Playlist.test.js

@@ -13,7 +13,11 @@ const renderWithRouter = (ui, { route = "/" } = {}) => {
 };
 
 describe("Playlist Component", () => {
-  // check if the component renders
+  afterEach(() => {
+    jest.clearAllMocks(); // Clear all mocks after each test to avoid interference
+  });
+
+  // Check if the component renders
   test("renders Playlist component without crashing", () => {
     renderWithRouter(<Playlist />);
     expect(
@@ -22,7 +26,7 @@ describe("Playlist Component", () => {
     expect(screen.getByText("Get Recommendations")).toBeInTheDocument();
   });
 
-  // verify input handling
+  // Verify input handling
   test("handles input change correctly", () => {
     renderWithRouter(<Playlist />);
     const input = screen.getByPlaceholderText(
@@ -32,12 +36,12 @@ describe("Playlist Component", () => {
     expect(input.value).toBe("Happy");
   });
 
-  // check API interaction and response handling
+  // Check API interaction and response handling
   test("fetches recommendations on button click and updates link", async () => {
     const mockResponse = {
       data: { spotify_link: "http://spotify.com/playlist/123" },
     };
-    axios.post.mockResolvedValue(mockResponse);
+    axios.post.mockResolvedValueOnce(mockResponse);
 
     renderWithRouter(<Playlist />);
     fireEvent.change(
@@ -48,9 +52,30 @@ describe("Playlist Component", () => {
     );
     fireEvent.click(screen.getByText("Get Recommendations"));
 
-    await waitFor(() => expect(axios.post).toHaveBeenCalled());
+    await waitFor(() => expect(axios.post).toHaveBeenCalledTimes(1));
     expect(
       screen.getByText("Open Full Playlist on Spotify")
+    ).toBeInTheDocument(); // Check if the Spotify link is rendered
+  });
+
+  // Simulate API failure and verify error handling
+  test("handles API failure gracefully", async () => {
+    axios.post.mockRejectedValueOnce(
+      new Error("Failed to fetch recommendations")
+    );
+
+    renderWithRouter(<Playlist />);
+    fireEvent.change(
+      screen.getByPlaceholderText(
+        "Enter the desired song qualities or mood..."
+      ),
+      { target: { value: "Happy" } }
+    );
+    fireEvent.click(screen.getByText("Get Recommendations"));
+
+    await waitFor(() => expect(axios.post).toHaveBeenCalledTimes(1));
+    expect(
+      screen.getByText(/Failed to fetch recommendations/i)
     ).toBeInTheDocument();
   });
 });