Frontend tests (#48)

* adding tests for the frontend

* updating TokenForm test to have tests for validating credentials JSON

* updating github actions for frontend to run tests

* renaming tests

* removing unecessary check in token validation

* fixing client workflow

* fixing name of step

* adding comments to test suite as well areas where component uses data-testid

* fixing lint and format

* removing unecessary comments

Author: melyxlin

.github/workflows/client.yaml

@@ -41,3 +41,16 @@ jobs:
         run: |
           npm install
           npm run build
+  
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - name: npm run test
+        working-directory: ./client
+        run: |
+          npm install
+          npm test

client/package-lock.json

@@ -20,6 +20,7 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^3.4.1",
+    "waait": "^1.0.5",
     "yup": "^0.29.1"
   },
   "scripts": {

client/package.json

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import App from "../App";
+
+describe("Main Component", () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = render(<App />);
+  });
+
+  it("renders the page", () => {
+    expect(wrapper).toBeDefined();
+  });
+});

client/src/App.test.js

@@ -0,0 +1,150 @@
+import React from "react";
+import {
+  fireEvent,
+  wait,
+  render,
+  waitForElement,
+} from "@testing-library/react";
+import { RequestModule } from "../components";
+import { act } from "react-dom/test-utils";
+
+describe("Request Module Component", () => {
+  it("renders the page", () => {
+    const wrapper = render(<RequestModule />);
+    expect(wrapper).toBeDefined();
+  });
+
+  it("displays errors when form is submitted without a token, url, and HTTP method.", async () => {
+    const { getByText, container } = render(<RequestModule />);
+    // Finding button to submit request form.
+    const button = await waitForElement(() => container.querySelector("Form"));
+
+    // Submitting the form.
+    await wait(() => {
+      fireEvent.submit(button);
+    });
+
+    expect(getByText("Token required.")).not.toBeNull();
+    expect(getByText("HTTP method required.")).not.toBeNull();
+    expect(getByText("URL required.")).not.toBeNull();
+  });
+
+  it("displays optional dialog box when option button is clicked", async () => {
+    const { getByText, getByTestId } = render(<RequestModule />);
+    // Finding the button that shows the request options.
+    const button = await waitForElement(() => getByText("Options"));
+
+    // Clicking the options button.
+    await wait(() => {
+      fireEvent.click(button);
+    });
+
+    expect(getByTestId("option-menu")).not.toBeNull();
+  });
+
+  it("displays optional header box when 'Add Header' is clicked in the options menu", async () => {
+    const { getByText, getByTestId } = render(<RequestModule />);
+    // Finding the button that shows the request options
+    const button = await waitForElement(() => getByText("Options"));
+
+    // Clicking the options button.
+    await wait(() => {
+      fireEvent.click(button);
+    });
+
+    // Finding button to add the request headers.
+    const headerButton = await waitForElement(() => getByText("Add Header"));
+    // Clicking the button to add the request headers.
+    await wait(() => {
+      fireEvent.click(headerButton);
+    });
+
+    expect(getByTestId("header-box")).not.toBeNull();
+  });
+
+  it("displays optional body box when 'Add Body' is clicked in the options menu", async () => {
+    const { getByText, getByTestId } = render(<RequestModule />);
+    // Finding the button that shows the request options.
+    const button = await waitForElement(() => getByText("Options"));
+
+    // Clicking the options button.
+    await wait(() => {
+      fireEvent.click(button);
+    });
+
+    // Finding the button to add the request body.
+    const headerButton = await waitForElement(() => getByText("Add Body"));
+    // Clicking the button to add the request body.
+    await wait(() => {
+      fireEvent.click(headerButton);
+    });
+
+    expect(getByTestId("body-box")).not.toBeNull();
+  });
+
+  it("displays optional content box when clicked when 'Add Content' is clicked in the options menu", async () => {
+    const { getByText, getByTestId } = render(<RequestModule />);
+    // Finding the button that shows the request options.
+    const button = await waitForElement(() => getByText("Options"));
+    await wait(() => {
+      fireEvent.click(button);
+    });
+
+    // Finding the button that adds content type.
+    const headerButton = await waitForElement(() =>
+      getByText("Add Content Type")
+    );
+    // Clicking the button that adds the content type.
+    await wait(() => {
+      fireEvent.click(headerButton);
+    });
+
+    expect(getByTestId("content-box")).not.toBeNull();
+  });
+
+  it("it submits form when URL, HTTP Method, and Token has been submitted", async () => {
+    const { getByText, container, getByTestId } = render(<RequestModule />);
+    // Finding button to submit request form.
+    const button = await waitForElement(() => container.querySelector("Form"));
+    // Finding the input for the token.
+    const tokenInput = await waitForElement(() => getByTestId("token-field"));
+    // Finding the input for the URL.
+    const urlInput = await waitForElement(() => getByTestId("url-field"));
+    // Finding the input for the HTTP method.
+    const httpInput = await waitForElement(() => getByTestId("http-field"));
+
+    // Entering the token.
+    await wait(() => {
+      fireEvent.change(tokenInput, {
+        target: {
+          value: "ya.testtoken",
+        },
+      });
+    });
+
+    // Entering the URL.
+    await wait(() => {
+      fireEvent.change(urlInput, {
+        target: {
+          value: "testurl",
+        },
+      });
+    });
+
+    // Entering the HTTP Method.
+    await wait(() => {
+      fireEvent.change(httpInput, {
+        target: {
+          value: "GET",
+        },
+      });
+    });
+
+    // Submitting the form.
+    await act(async () => {
+      fireEvent.submit(button);
+    });
+
+    expect(getByText("Submitting")).not.toBeNull();
+  });
+});