Merge pull request #32 from REST-API-Client/test/moreTestCode

[2022/07/18] - 컴포넌트 유닛 테스트 추가 + 순수 함수 테스트 추가

Author: unwls

.babelrc

@@ -1,3 +1,13 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ]
 }

jest.config.js

@@ -1,7 +1,14 @@
 module.exports = {
   collectCoverage: true,
-  collectCoverageFrom: ["webview/**/*.{js}"],
+  collectCoverageFrom: ["webview/**/*.{js,jsx}"],
   coverageDirectory: "coverage",
+  moduleNameMapper: {
+    "^.+.(svg|png|jpg)$": "jest-transform-stub",
+  },
   testEnvironment: "jsdom",
   setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
+  transform: {
+    "^.+\\.[jt]sx?$": "babel-jest",
+    "^.+\\.svg$": "jest-transform-stub",
+  },
 };

package-lock.json

@@ -102,6 +102,8 @@
     "glob": "^8.0.3",
     "jest": "^28.1.3",
     "jest-environment-jsdom": "^28.1.3",
+    "jest-svg-transformer": "^1.0.0",
+    "jest-transform-stub": "^2.0.0",
     "mocha": "^10.0.0",
     "path-browserify": "^1.0.1",
     "style-loader": "^3.3.1",

package.json

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import EmptyFavoritesCollectionMessage from "../features/Sidebar/Message/EmptyFavoritesCollectionMessage";
+
+describe("EmptyFavoritesCollectionMessage component test", () => {
+  it("should display message from children component", () => {
+    const { getByText } = render(<EmptyFavoritesCollectionMessage />);
+
+    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__/EmptyFavoritesCollectionMessage.test.js

@@ -0,0 +1,17 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import EmptyHistoryCollectionMessage from "../features/Sidebar/Message/EmptyHistoryCollectionMessage";
+
+describe("EmptyHistoryCollectionMessage component test", () => {
+  it("should display correct message when history collection is empty", () => {
+    const { getByText } = render(<EmptyHistoryCollectionMessage />);
+
+    expect(
+      getByText(/Your history collection seems to be empty./i),
+    ).toBeInTheDocument();
+    expect(
+      getByText(/Start making requests to view your history collection./i),
+    ).toBeInTheDocument();
+  });
+});

webview/__test__/EmptyHistoryCollectionMessage.test.js

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import EmptySearchResultMessage from "../features/Sidebar/Message/EmptySearchResultMessage";
+
+describe("EmptyHistoryCollectionMessage component test", () => {
+  it("should render search input value to empty search result message", () => {
+    const { getByText } = render(<EmptySearchResultMessage value="google" />);
+
+    expect(getByText(/google/i)).toBeInTheDocument();
+  });
+});

webview/__test__/EmptySearchResultMessage.test.js

@@ -10,6 +10,7 @@ describe("RequestAuthSelectMenu component test", () => {
 
     expect(getByRole("option", { name: "No Auth" }).selected).toBe(true);
   });
+
   it("should display the correct number of options", () => {
     const { getAllByRole } = render(<RequestAuthSelectMenu />);
 

webview/__test__/RequestAuthSelectMenu.test.js

@@ -10,6 +10,7 @@ describe("RequestBodyRawOptions component test", () => {
 
     expect(getByRole("option", { name: "Text" }).selected).toBe(true);
   });
+
   it("should display the correct number of options", () => {
     const { getAllByRole } = render(<RequestBodyRawOptions />);
 

webview/__test__/RequestBodyRawOptions.test.js

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RequestButton from "../features/Request/Button/RequestButton";
+
+describe("RequestNoAuth component test", () => {
+  it("should display correct message when auth option is not selected", () => {
+    const { getByText } = render(<RequestButton />);
+
+    expect(getByText(/Send/i)).toBeInTheDocument();
+  });
+});

webview/__test__/RequestButton.test.js

@@ -0,0 +1,26 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseBodyMenu from "../features/Response/Body/ResponseBodyMenu";
+
+describe("ResponseBodyMenu component test", () => {
+  it("should render correct default response body option", () => {
+    const { getByText } = render(<ResponseBodyMenu />);
+
+    expect(getByText(/pretty/i)).toBeInTheDocument();
+    expect(getByText(/raw/i)).toBeInTheDocument();
+    expect(getByText(/preview/i)).toBeInTheDocument();
+  });
+
+  it("should render correct default response body pretty option", () => {
+    const { getByRole } = render(<ResponseBodyMenu />);
+
+    expect(getByRole("option", { name: "JSON" }).selected).toBe(true);
+  });
+
+  it("should display the correct number of options", () => {
+    const { getAllByRole } = render(<ResponseBodyMenu />);
+
+    expect(getAllByRole("option").length).toBe(3);
+  });
+});

webview/__test__/ResponseBodyMenu.test.js

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import ResponseBodyMenuOption from "../features/Response/Body/ResponseBodyMenuOption";
+
+describe("ResponseBodyMenu component test", () => {
+  it("should render correct default response body option", () => {
+    const { getByText } = render(<ResponseBodyMenuOption />);
+
+    expect(getByText(/json/i)).toBeInTheDocument();
+    expect(getByText(/html/i)).toBeInTheDocument();
+    expect(getByText(/text/i)).toBeInTheDocument();
+  });
+
+  it("should render correct default response body pretty option", () => {
+    const { getByRole } = render(<ResponseBodyMenuOption />);
+
+    expect(getByRole("option", { name: "JSON" }).selected).toBe(true);
+  });
+
+  it("should display the correct number of options", () => {
+    const { getAllByRole } = render(<ResponseBodyMenuOption />);
+
+    expect(getAllByRole("option").length).toBe(3);
+  });
+
+  it("should allow user to select body menu option", async () => {
+    const { getByRole } = render(<ResponseBodyMenuOption />);
+
+    await userEvent.selectOptions(
+      getByRole("combobox"),
+
+      getByRole("option", { name: "HTML" }),
+    );
+
+    expect(getByRole("option", { name: "HTML" }).selected).toBe(true);
+    expect(getByRole("option", { name: "JSON" }).selected).toBe(false);
+
+    await userEvent.selectOptions(
+      getByRole("combobox"),
+
+      getByRole("option", { name: "Text" }),
+    );
+
+    expect(getByRole("option", { name: "Text" }).selected).toBe(true);
+  });
+});

webview/__test__/ResponseBodyMenuOption.test.js

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponsePreview from "../features/Response/Preview/ResponsePreview";
+
+describe("ResponseEResponsePreviewmptyMenu component test", () => {
+  it("should display iframe with correct title", () => {
+    const { getByTitle } = render(<ResponsePreview />);
+
+    expect(getByTitle("Response Data Preview")).toBeInTheDocument();
+  });
+});

webview/__test__/ResponseDataPreview.test.js

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseEmptyMenu from "../features/Response/Empty/ResponseEmptyMenu";
+
+describe("ResponseEmptyMenu component test", () => {
+  it("should display correct message when response empty menu", () => {
+    const { getByText } = render(<ResponseEmptyMenu />);
+
+    expect(
+      getByText(/Enter request URL and click send to get a response/i),
+    ).toBeInTheDocument();
+  });
+
+  it("should display svg when response is not sent yet", () => {
+    const { getByAltText } = render(<ResponseEmptyMenu />);
+
+    expect(getByAltText(/Connection SVG/i)).toBeTruthy();
+  });
+});

webview/__test__/ResponseEmptyMenu.test.js

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseErrorMenu from "../features/Response/Error/ResponseErrorMenu";
+
+describe("ResponseErrorMenu component test", () => {
+  it("should display correct message when error response is received", () => {
+    const { getByText } = render(
+      <ResponseErrorMenu type="error" message="unable to find restapiclient" />,
+    );
+
+    expect(getByText(/unable to find restapiclient/i)).toBeInTheDocument();
+  });
+
+  it("should display correct message when image with correct alt", () => {
+    const { getByAltText } = render(<ResponseErrorMenu />);
+
+    expect(getByAltText("error")).toBeTruthy();
+  });
+});

webview/__test__/ResponseErrorMenu.test.js

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseMenu from "../features/Response/Menu/ResponseMenu";
+
+describe("ResponseMenu component test", () => {
+  it("should render response menu with three options", () => {
+    const { getAllByRole } = render(<ResponseMenu />);
+
+    expect(getAllByRole("option").length).toEqual(3);
+  });
+
+  it("should render response menu option correctly", () => {
+    const { getByText } = render(<ResponseMenu />);
+
+    expect(getByText(/Body/i)).toBeInTheDocument();
+    expect(getByText(/Headers/i)).toBeInTheDocument();
+  });
+});

webview/__test__/ResponseMenu.test.js

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import ResponseMetaData from "../features/Response/MetaData/ResponseMetaData";
+
+const mockData = {
+  responseSize: 2600,
+  requestTime: 398,
+  statusCode: 200,
+  statusText: "OK",
+};
+
+const errorMockData = {
+  responseSize: 12410,
+  requestTime: 398,
+  statusCode: 404,
+  statusText: "Not Found",
+};
+
+describe("ResponseMetaData component test", () => {
+  it("should render meta data menu properly", () => {
+    const { getByText } = render(<ResponseMetaData {...mockData} />);
+
+    expect(getByText(/size:/i)).toBeInTheDocument();
+    expect(getByText(/time:/i)).toBeInTheDocument();
+    expect(getByText(/status:/i)).toBeInTheDocument();
+  });
+
+  it("should render meta data menu with correct data", () => {
+    const { getByText } = render(<ResponseMetaData {...mockData} />);
+
+    expect(getByText(/200 OK/i)).toBeInTheDocument();
+    expect(getByText(/398ms/i)).toBeInTheDocument();
+    expect(getByText(/0.26 KB/i)).toBeInTheDocument();
+    expect(getByText(/200 OK/i)).toHaveStyle("color:rgb(66 245 66)");
+  });
+
+  it("should render meta data menu with 404 response properly", () => {
+    const { getByText } = render(<ResponseMetaData {...errorMockData} />);
+
+    expect(getByText(/404 Not Found/i)).toBeInTheDocument();
+    expect(getByText(/398/i)).toBeInTheDocument();
+    expect(getByText(/1.24 KB/i)).toBeInTheDocument();
+    expect(getByText(/404 Not Found/i)).toHaveStyle("color:rgb(255 100 100)");
+  });
+});