added code for the rendering (issue #3)

backend/vendor/bin/.phpunit.result.cache

@@ -1 +1 @@
-{"version":1,"defects":{"StackTest::testPost_NewSong":8,"StackTest::testRegister":8,"StackTest::testLogin":8,"StackTest::testCreateSong":8,"StackTest::testUpdateSong":8,"StackTest::testDeleteSong":8,"StackTest::testFailLogin":8,"StackTest::testGetRatings":8},"times":{"StackTest::testPushAndPop":0.005,"StackTest::testPost_NewSong":0.203,"StackTest::testRegister":0.096,"StackTest::testLogin":0.069,"StackTest::testCreateSong":0.008,"StackTest::testGetRatings":0.003,"StackTest::testUpdateSong":0.006,"StackTest::testDeleteSong":0.005,"StackTest::testFailLogin":0.068}}
+{"version":1,"defects":{"StackTest::testPost_NewSong":8,"StackTest::testRegister":8,"StackTest::testLogin":8,"StackTest::testCreateSong":8,"StackTest::testUpdateSong":8,"StackTest::testDeleteSong":8,"StackTest::testFailLogin":7,"StackTest::testGetRatings":8},"times":{"StackTest::testPushAndPop":0.005,"StackTest::testPost_NewSong":0.203,"StackTest::testRegister":0.064,"StackTest::testLogin":0.013,"StackTest::testCreateSong":0.008,"StackTest::testGetRatings":0.007,"StackTest::testUpdateSong":0.007,"StackTest::testDeleteSong":0.014,"StackTest::testFailLogin":0.016}}

src/render.test.js

@@ -11,12 +11,14 @@ import Createsong from "./Createsong";
 import { BrowserRouter } from "react-router-dom";
 // The jest-dom lets you analyze the rendered simulation.
 import "@testing-library/jest-dom";
+import fetchMock from "jest-fetch-mock";
+import { act } from "react-dom/test-utils";
 
 // Rendering test for the register page
 test("Register Login", () => {
   render(
     <BrowserRouter>
-      <Register />
+      <Login />
     </BrowserRouter>
   );
 
@@ -45,3 +47,141 @@ test("Register Rendering", () => {
   expect(passwordInput).toBeInTheDocument();
   expect(confirmPasswordInput).toBeInTheDocument();
 });
+
+// Createsong
+describe("Createsong Render Test", () => {
+  test("Createsong Rendering", async () => {
+    render(
+      <BrowserRouter>
+        <Createsong />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByText("Create Review")).toBeInTheDocument();
+    expect(
+      screen.getByText("Here you can create your review.")
+    ).toBeInTheDocument();
+    expect(screen.getByText("Artist:")).toBeInTheDocument();
+    expect(screen.getByText("Song:")).toBeInTheDocument();
+    expect(screen.getByText("Rating:")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Submit/i })).toBeInTheDocument();
+
+    expect(screen.getByPlaceholderText("artist")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("song_name")).toBeInTheDocument();
+  });
+});
+
+// Viewsong
+describe("Viewsong Render Test", () => {
+  fetchMock.enableMocks();
+
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        success: true,
+        song_info: ["artist1", "song1", 3],
+      })
+    );
+  });
+
+  test("Viewsong Rendering", async () => {
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <Viewsong />
+        </BrowserRouter>
+      );
+    });
+
+    // Check if the correct data is displayed
+    expect(screen.getByText("artist1")).toBeInTheDocument();
+    expect(screen.getByText("song1")).toBeInTheDocument();
+    expect(screen.getByText("3")).toBeInTheDocument();
+  });
+});
+
+// Update Song
+describe("Update Song Render Test", () => {
+  fetchMock.enableMocks();
+
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockResponseOnce(
+      JSON.stringify({
+        success: true,
+        song_info: ["artist2", "song2", 4],
+      })
+    );
+  });
+
+  test("Updatesong Rendering", async () => {
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <Updatesong />
+        </BrowserRouter>
+      );
+    });
+
+    // Check if the correct data is displayed
+    expect(screen.getByDisplayValue("artist2")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("song2")).toBeInTheDocument();
+    expect(screen.getByDisplayValue("4")).toBeInTheDocument();
+  });
+});
+
+// Delete Song
+describe("Delete Song Render Test", () => {
+  test("Deletesong Rendering", async () => {
+    render(
+      <BrowserRouter>
+        <Deletesong />
+      </BrowserRouter>
+    );
+
+    expect(screen.getByRole("button", { name: /Delete/i })).toBeInTheDocument();
+  });
+});
+
+// Songdisplay
+describe("Songdisplay Render Test", () => {
+  fetchMock.enableMocks();
+
+  beforeEach(() => {
+    fetch.resetMocks();
+    fetch.mockResponseOnce(
+      JSON.stringify([
+        {
+          id: 1,
+          username: "user1",
+          artist: "artist1",
+          song: "song1",
+          rating: 3,
+        },
+        {
+          id: 2,
+          username: "user2",
+          artist: "artist2",
+          song: "song2",
+          rating: 4,
+        },
+      ])
+    );
+  });
+
+  test("Songdisplay Rendering", async () => {
+    await act(async () => {
+      render(
+        <BrowserRouter>
+          <Songdisplay />
+        </BrowserRouter>
+      );
+    });
+
+    expect(screen.getByText("artist1")).toBeInTheDocument();
+    expect(screen.getByText("artist2")).toBeInTheDocument();
+    expect(screen.getByText("song1")).toBeInTheDocument();
+    expect(screen.getByText("song2")).toBeInTheDocument();
+  });
+});