Merge pull request #34 from REST-API-Client/test/moreUnitTest

[2022/07/18] - 컴포넌트 Unit Test 추가

Author: unwls

webview/__test__/MainPage.test.js

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import SidebarPage from "../pages/SidebarPage";
+
+describe("SidebarPage component test", () => {
+  it("should display default menu with correct message", () => {
+    const { getByText } = render(<SidebarPage />);
+
+    expect(getByText("History")).toBeInTheDocument();
+    expect(getByText("Favorites")).toBeInTheDocument();
+    expect(
+      getByText("Your history collection seems to be empty."),
+    ).toBeInTheDocument();
+    expect(
+      getByText("Start making requests to view your history collection."),
+    ).toBeInTheDocument();
+  });
+});

webview/__test__/RequestAuthBearerToken.test.js

@@ -0,0 +1,29 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RequestAuthBearerToken from "../features/Request/Authorization/RequestAuthBearerToken";
+import useStore from "../store/useStore";
+
+jest.mock("../store/useStore", () => jest.fn());
+
+describe("RequestAuthBearerToken component test", () => {
+  it("should display the correct input placeholder text", () => {
+    useStore.mockImplementationOnce(() => ({
+      authData: { username: "", password: "", token: "" },
+    }));
+
+    const { getByPlaceholderText } = render(<RequestAuthBearerToken />);
+
+    expect(getByPlaceholderText(/Token/i)).toBeInTheDocument();
+  });
+
+  it("should display the data from requestDataSlice", () => {
+    useStore.mockImplementationOnce(() => ({
+      authDataToken: "secret token value!!",
+    }));
+
+    const { getByPlaceholderText } = render(<RequestAuthBearerToken />);
+
+    expect(getByPlaceholderText("token").value).toBe("secret token value!!");
+  });
+});

webview/__test__/ResponsePanel.test.js

@@ -0,0 +1,44 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponsePanel from "../features/Response/Panel/ResponsePanel";
+import useStore from "../store/useStore";
+
+jest.mock("../store/useStore", () => jest.fn());
+
+describe("ResponsePanel component test", () => {
+  it("should display default message when response panel menu is shown", () => {
+    useStore.mockImplementationOnce(() => ({
+      responseData: "",
+      requestInProcess: "",
+    }));
+
+    const { getByText } = render(<ResponsePanel />);
+
+    expect(
+      getByText(/Enter request URL and click send to get a response/i),
+    ).toBeInTheDocument();
+  });
+
+  it("should display loading message when request is in progress", () => {
+    useStore.mockImplementationOnce(() => ({
+      responseData: "",
+      requestInProcess: "Loading",
+    }));
+
+    const { getByText } = render(<ResponsePanel />);
+
+    expect(getByText(/Sending Request.../i)).toBeInTheDocument();
+  });
+
+  it("should display error message when request is in progress", () => {
+    useStore.mockImplementationOnce(() => ({
+      responseData: "",
+      requestInProcess: "Error",
+    }));
+
+    const { getByText } = render(<ResponsePanel />);
+
+    expect(getByText(/Could not send request/i)).toBeInTheDocument();
+  });
+});

webview/__test__/SidebarCollection.test.js

@@ -0,0 +1,101 @@
+import { fireEvent, render } from "@testing-library/react";
+import React from "react";
+
+import SidebarCollection from "../features/Sidebar/Collection/SidebarCollection";
+
+const mockData = [
+  {
+    url: "http://netflix.com",
+    method: "GET",
+    headers: {
+      "Cache-Control": "no-cache",
+      Accept: "*/*",
+      "Accept-Encoding": "gzip,deflate",
+      Connection: "keep-alive",
+    },
+    requestedTime: 1658086010977,
+    favoritedTime: 1658086023824,
+    isUserFavorite: false,
+    id: "76deed12-b222-45a5-a3ac-18a785fcef7c",
+  },
+];
+
+describe("SidebarCollection component test", () => {
+  it("should display correct sidebar empty message when props are passed", () => {
+    const { getByText } = render(<SidebarCollection sidebarOption="History" />);
+
+    expect(
+      getByText(/Your history collection seems to be empty./i),
+    ).toBeInTheDocument();
+    expect(
+      getByText(/Start making requests to view your history collection./i),
+    ).toBeInTheDocument();
+  });
+
+  it("should display correct sidebar empty message when props are passed again", () => {
+    const { getByText } = render(
+      <SidebarCollection sidebarOption="Favorites" />,
+    );
+
+    expect(
+      getByText(/Your favorites collection seems to be empty./i),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        /Press the heart icon from your history collection to add it to your favorites collection./i,
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("should display input placeholder text correctly when there is data to be displayed", () => {
+    const { getByPlaceholderText } = render(
+      <SidebarCollection userCollection={mockData} />,
+    );
+
+    expect(getByPlaceholderText(/Search collection.../i)).toBeInTheDocument();
+  });
+
+  it("should change value when user inputs value", () => {
+    const testInputValue = "facebook?!";
+    const { getByPlaceholderText } = render(
+      <SidebarCollection userCollection={mockData} />,
+    );
+
+    fireEvent.change(getByPlaceholderText(/Search collection.../i), {
+      target: { value: testInputValue },
+    });
+
+    expect(getByPlaceholderText(/Search collection.../i).value).toBe(
+      testInputValue,
+    );
+  });
+
+  it("should display correct url when passed userCollection as props", () => {
+    const { getByText } = render(
+      <SidebarCollection userCollection={mockData} />,
+    );
+
+    expect(getByText("http://netflix.com")).toBeInTheDocument();
+    expect(getByText(/GET/i)).toBeInTheDocument();
+    expect(getByText(/Added 19 hours ago/i)).toBeInTheDocument();
+  });
+
+  it("should delete collection when delete button is clicked", async () => {
+    const mockHandleDeleteButton = () => {
+      mockData.splice(0, mockData.length);
+    };
+
+    const { findByRole } = render(
+      <SidebarCollection
+        userCollection={mockData}
+        handleDeleteButton={mockHandleDeleteButton}
+      />,
+    );
+
+    const icon = await findByRole("iconWrapper");
+
+    fireEvent.click(icon.firstChild);
+
+    expect(mockData.length).toBe(0);
+  });
+});

webview/__test__/SidebarMenuOption.test.js

@@ -0,0 +1,43 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import SidebarMenuOption from "../features/Sidebar/Menu/SidebarMenuOption";
+import useStore from "../store/useStore";
+
+jest.mock("../store/useStore", () => jest.fn());
+
+describe("SidebarMenuOption component test", () => {
+  it("should render empty history collection message", () => {
+    useStore.mockImplementationOnce(() => ({
+      sidebarOption: "History",
+      userRequestHistory: [],
+    }));
+
+    const { getByText } = render(<SidebarMenuOption />);
+
+    expect(
+      getByText(/Your history collection seems to be empty./i),
+    ).toBeInTheDocument();
+    expect(
+      getByText(/Start making requests to view your history collection./i),
+    ).toBeInTheDocument();
+  });
+
+  it("should render empty favorites collection message", () => {
+    useStore.mockImplementationOnce(() => ({
+      sidebarOption: "Favorites",
+      userRequestHistory: [],
+    }));
+
+    const { getByText } = render(<SidebarMenuOption />);
+
+    expect(
+      getByText(/Your favorites collection seems to be empty./i),
+    ).toBeInTheDocument();
+    expect(
+      getByText(
+        /Press the heart icon from your history collection to add it to your favorites collection./i,
+      ),
+    ).toBeInTheDocument();
+  });
+});

webview/__test__/calculateCollectionTime.test.js

@@ -7,9 +7,9 @@ describe("calculateCollectionTime utility function tests", () => {
     const thirdMockTime = calculateCollectionTime(1657998982525);
     const fourthMockTime = calculateCollectionTime(1658086010977);
 
-    expect(firstMockTime).toBe("39 days ago");
+    expect(firstMockTime).toBe("40 days ago");
     expect(secondMockTime).toBe("Just now");
     expect(thirdMockTime).toBe("1 day ago");
-    expect(fourthMockTime).toBe("2 hours ago");
+    expect(fourthMockTime).toBe("19 hours ago");
   });
 });

webview/features/Sidebar/Collection/SidebarCollection.js

@@ -77,7 +77,7 @@ const SidebarCollection = ({
                               <p>Added {favoriteListedTime}</p>
                             )}
                           </div>
-                          <div>
+                          <div role="iconWrapper">
                             {sidebarOption === SIDEBAR.HISTORY ? (
                               isUserFavorite ? (
                                 <AiFillHeart