Merge pull request #31 from REST-API-Client/test/componentTestCode

[2022/07/17] - 컴포넌트 테스트 코드 추가

Author: unwls

webview/__test__/CopyIcon.test.js

@@ -0,0 +1,46 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import CopyIcon from "../components/CopyIcon";
+
+const originalClipboard = { ...global.navigator.clipboard };
+
+const handleCopyIconClick = (value) => {
+  navigator.clipboard.writeText(value);
+};
+
+beforeEach(() => {
+  let clipboardData = "";
+
+  const mockClipboard = {
+    writeText: jest.fn((data) => {
+      clipboardData = data;
+    }),
+    readText: jest.fn(() => {
+      return clipboardData;
+    }),
+  };
+  global.navigator.clipboard = mockClipboard;
+});
+
+afterEach(() => {
+  jest.resetAllMocks();
+  global.navigator.clipboard = originalClipboard;
+});
+
+describe("CopyIcon component test", () => {
+  it("should copy code to clipboard when icon is clicked", async () => {
+    const stringValue = "Very important REST API Client code 🧐";
+
+    const { getByRole } = render(
+      <CopyIcon handleClick={handleCopyIconClick} value={stringValue} />,
+    );
+
+    await userEvent.click(getByRole("button"));
+
+    expect(navigator.clipboard.readText()).toBe(stringValue);
+    expect(navigator.clipboard.writeText).toBeCalledTimes(1);
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(stringValue);
+  });
+});

webview/__test__/DetailOption.test.js

@@ -13,6 +13,7 @@ describe("DetailOption component test", () => {
 
     expect(getByText(/Detail Options child component/i)).toBeInTheDocument();
   });
+
   it("should render children element correctly", () => {
     const { getAllByRole } = render(
       <DetailOption>

webview/__test__/Information.test.js

@@ -0,0 +1,26 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import Information from "../components/Information";
+
+describe("Information component test", () => {
+  it("should display correct color for request method GET", () => {
+    const { getByText } = render(
+      <Information textColor="green">
+        <h4>GET</h4>
+      </Information>,
+    );
+
+    expect(getByText(/GET/i)).toHaveStyle(`color: green;`);
+  });
+
+  it("should display correct color for request method DELETE", () => {
+    const { getByText } = render(
+      <Information textColor="red">
+        <h4>DELETE</h4>
+      </Information>,
+    );
+
+    expect(getByText(/DELETE/i)).toHaveStyle(`color: red;`);
+  });
+});

webview/__test__/Loader.test.js

@@ -0,0 +1,12 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import Loader from "../components/Loader";
+
+describe("Loader component test", () => {
+  it("should display loading message correctly", () => {
+    const { getByText } = render(<Loader />);
+
+    expect(getByText(/Sending request.../i)).toBeInTheDocument();
+  });
+});

webview/__test__/MenuOption.test.js

@@ -0,0 +1,21 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import MenuOption from "../components/MenuOption";
+
+describe("MenuOption component test", () => {
+  it("should render children element correctly", () => {
+    const { getAllByRole } = render(
+      <MenuOption currentOption="Korea" menuOption="Korea">
+        <ul>
+          <li>Korea</li>
+          <li>USA</li>
+          <li>Japan</li>
+          <li>Switzerland</li>
+        </ul>
+      </MenuOption>,
+    );
+
+    expect(getAllByRole("listitem").length).toEqual(4);
+  });
+});

webview/__test__/RequestAuthSelectMenu.test.js

@@ -0,0 +1,83 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import RequestAuthSelectMenu from "../features/Request/Authorization/RequestAuthSelectMenu";
+
+describe("RequestAuthSelectMenu component test", () => {
+  it("should select option should display correct default option", () => {
+    const { getByRole } = render(<RequestAuthSelectMenu />);
+
+    expect(getByRole("option", { name: "No Auth" }).selected).toBe(true);
+  });
+  it("should display the correct number of options", () => {
+    const { getAllByRole } = render(<RequestAuthSelectMenu />);
+
+    expect(getAllByRole("option").length).toBe(3);
+  });
+
+  it("should allow user to select request method", async () => {
+    const { getByRole } = render(<RequestAuthSelectMenu />);
+
+    await waitFor(() =>
+      userEvent.selectOptions(
+        getByRole("combobox"),
+
+        getByRole("option", { name: "Basic Auth" }),
+      ),
+    );
+
+    expect(getByRole("option", { name: "Basic Auth" }).selected).toBe(true);
+    expect(getByRole("option", { name: "No Auth" }).selected).toBe(false);
+  });
+
+  it("should display basic auth input placeholder text correctly", () => {
+    const { getByRole, getByPlaceholderText } = render(
+      <RequestAuthSelectMenu />,
+    );
+
+    userEvent.selectOptions(
+      getByRole("combobox"),
+
+      getByRole("option", { name: "Basic Auth" }),
+    );
+
+    expect(getByPlaceholderText(/Username/i)).toBeInTheDocument();
+    expect(getByPlaceholderText(/Password/i)).toBeInTheDocument();
+  });
+
+  it("should change basic auth username input value when user types", () => {
+    const usernameValue = "somethingAwesomeID";
+    const { getByRole } = render(<RequestAuthSelectMenu />);
+
+    userEvent.selectOptions(
+      getByRole("combobox"),
+
+      getByRole("option", { name: "Basic Auth" }),
+    );
+
+    fireEvent.change(getByRole("option", { name: "Basic Auth" }), {
+      target: { value: usernameValue },
+    });
+
+    expect(getByRole("option", { name: "Basic Auth" }).value).toBe(
+      usernameValue,
+    );
+  });
+
+  it("should change basic auth password input value when user types", async () => {
+    const passwordValue = "someSecretPassword!@#";
+
+    const { getByRole } = render(<RequestAuthSelectMenu />);
+
+    userEvent.selectOptions(
+      getByRole("combobox"),
+
+      getByRole("option", { name: "Basic Auth" }),
+    );
+
+    await waitFor(() => userEvent.type(getByRole("textbox"), passwordValue));
+
+    expect(getByRole("textbox")).toHaveValue(passwordValue);
+  });
+});

webview/__test__/RequestBodyFormatButton.test.js

@@ -0,0 +1,22 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RequestBodyFormatButton from "../features/Request/Button/RequestBodyFormatButton";
+
+describe("RequestBodyFormatButton component test", () => {
+  it("should render request body format button text correctly", () => {
+    const { getByText } = render(<RequestBodyFormatButton />);
+
+    expect(getByText(/Beautify Editor/i)).toBeInTheDocument();
+  });
+
+  it("should render primary button with correct style", () => {
+    const { getByText } = render(<RequestBodyFormatButton />);
+
+    expect(getByText("Beautify Editor")).toHaveStyle(
+      `background-color: ButtonFace`,
+    );
+    expect(getByText("Beautify Editor")).toHaveStyle(`width: 12rem`);
+    expect(getByText("Beautify Editor")).toHaveStyle(`margin-left: 2.7rem`);
+  });
+});

webview/__test__/RequestBodyMenu.test.js

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import RequestBodyMenu from "../features/Request/Body/RequestBodySelectMenu";
+
+describe("RequestBodyMenu component test", () => {
+  it("should render correct amount of request body option", () => {
+    const { getAllByRole } = render(<RequestBodyMenu />);
+
+    expect(getAllByRole("radio").length).toEqual(4);
+  });
+
+  it("should render correct radio button when first rendered", async () => {
+    const { getByLabelText } = render(<RequestBodyMenu />);
+
+    expect(getByLabelText("None")).toBeChecked();
+  });
+
+  it("should render correct request menu when radio button is clicked", async () => {
+    const { getByLabelText } = render(<RequestBodyMenu />);
+
+    await userEvent.click(getByLabelText("Form Data"));
+
+    expect(getByLabelText("Form Data")).toBeChecked();
+  });
+});

webview/__test__/RequestBodyRawOptions.test.js

@@ -0,0 +1,33 @@
+import { render, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import React from "react";
+
+import RequestBodyRawOptions from "../features/Request/Body/RequestBodyRawOptions";
+
+describe("RequestBodyRawOptions component test", () => {
+  it("should select option should display correct default option", () => {
+    const { getByRole } = render(<RequestBodyRawOptions />);
+
+    expect(getByRole("option", { name: "Text" }).selected).toBe(true);
+  });
+  it("should display the correct number of options", () => {
+    const { getAllByRole } = render(<RequestBodyRawOptions />);
+
+    expect(getAllByRole("option").length).toBe(4);
+  });
+
+  it("should allow user to select request body raw options", async () => {
+    const { getByRole } = render(<RequestBodyRawOptions />);
+
+    await waitFor(() =>
+      userEvent.selectOptions(
+        getByRole("combobox"),
+
+        getByRole("option", { name: "JavaScript" }),
+      ),
+    );
+
+    expect(getByRole("option", { name: "JavaScript" }).selected).toBe(true);
+    expect(getByRole("option", { name: "Text" }).selected).toBe(false);
+  });
+});

webview/__test__/RequestMethod.test.js

@@ -5,7 +5,7 @@ import React from "react";
 import RequestMethod from "../features/Request/Method/RequestMethod";
 
 describe("RequestMethod component test", () => {
-  it("should select option should display correct default option", () => {
+  it("should display correct default select option", () => {
     const { getByRole } = render(<RequestMethod />);
 
     expect(getByRole("option", { name: "GET" }).selected).toBe(true);
@@ -29,5 +29,6 @@ describe("RequestMethod component test", () => {
     );
 
     expect(getByRole("option", { name: "POST" }).selected).toBe(true);
+    expect(getByRole("option", { name: "GET" }).selected).toBe(false);
   });
 });

webview/__test__/RequestNoAuth.test.js

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RequestNoAuth from "../features/Request/Authorization/RequestNoAuth";
+
+describe("RequestNoAuth component test", () => {
+  it("should display correct message when auth option is not selected", () => {
+    const { getByText } = render(<RequestNoAuth />);
+
+    expect(
+      getByText(/This request does not use any authorization./i),
+    ).toBeInTheDocument();
+
+    expect(
+      getByText(
+        /If you want to use authorization, select your authorization type from above./i,
+      ),
+    ).toBeInTheDocument();
+  });
+});

webview/__test__/RequestNoBody.test.js

@@ -0,0 +1,20 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import RequestNoBody from "../features/Request/Body/RequestNoBody";
+
+describe("RequestNoBody component test", () => {
+  it("should display correct message when body option is not selected", () => {
+    const { getByText } = render(<RequestNoBody />);
+
+    expect(
+      getByText(/This request does not have a body./i),
+    ).toBeInTheDocument();
+
+    expect(
+      getByText(
+        /If you want body in your request, select your body option from above./i,
+      ),
+    ).toBeInTheDocument();
+  });
+});

webview/__test__/Wrapper.test.js

@@ -0,0 +1,19 @@
+import { render } from "@testing-library/react";
+import React from "react";
+
+import Wrapper from "../components/Wrapper";
+
+describe("Wrapper component test", () => {
+  it("should render children component text correctly", () => {
+    const { getByText } = render(
+      <Wrapper>
+        <div>
+          <h1>REST API Tester</h1>
+          <p>Welcome</p>
+        </div>
+      </Wrapper>,
+    );
+
+    expect(getByText(/REST API Tester/i)).toBeInTheDocument();
+  });
+});

webview/components/CopyIcon.js

@@ -3,19 +3,14 @@ import React from "react";
 import { FiCopy } from "react-icons/fi";
 import styled from "styled-components";
 
-import { COMMON } from "../constants";
-import vscode from "../vscode";
-
-const CopyIcon = ({ value }) => {
-  const handleCopyIconClick = () => {
-    vscode.postMessage({ command: COMMON.ALERT_COPY });
-
-    navigator.clipboard.writeText(value);
-  };
-
+const CopyIcon = ({ handleClick, value }) => {
   return (
     <CopyIconWrapper>
-      <FiCopy className="copyIcon" onClick={handleCopyIconClick} />
+      <FiCopy
+        className="copyIcon"
+        role="button"
+        onClick={() => handleClick(value)}
+      />
     </CopyIconWrapper>
   );
 };
@@ -38,6 +33,7 @@ const CopyIconWrapper = styled.div`
 
 CopyIcon.propTypes = {
   value: PropTypes.string,
+  handleClick: PropTypes.func,
 };
 
 export default CopyIcon;