feature: adding more unit tests

__mocks__/marked/marked.js

@@ -0,0 +1,3 @@
+import marked from "marked";
+jest.genMockFromModule(marked);
+module.exports = marked;

src/components/FileUpload.tsx

@@ -104,7 +104,7 @@ export const FileUpload: React.FC<IFileUpload> = ({
             </div>
           );
         })}
-        <div className={classes.box} {...getRootProps({ isDragActive: true })}>
+        <div className={classes.box} {...getRootProps()}>
           <input {...getInputProps()} />
           <p>{stateText}</p>
         </div>

src/components/Text.tsx

@@ -66,12 +66,13 @@ export const Text: React.FC<IText> = ({
           {title}
         </Typography>
         <Box mb={3} maxWidth={600}>
-          {label && <InputLabel>{label}</InputLabel>}
+          {label && <InputLabel htmlFor={name}>{label}</InputLabel>}
           <Input
             placeholder={placeholder}
             fullWidth={fullWidth}
             multiline={multiline}
             name={name}
+            id={name}
             type={type}
             onChange={e => {
               if (maxWords) {
@@ -91,7 +92,12 @@ export const Text: React.FC<IText> = ({
               pt={1}
               textAlign="right"
             >
-              <span>{diff >= 0 ? `${diff}` : 0} words Remaining</span>
+              <span>
+                {" "}
+                {diff >= 0
+                  ? `${diff} words Remaining`
+                  : `0 words Remaining`}{" "}
+              </span>
             </Box>
           )}
           {unit && (

src/components/__tests__/HVCenterContainer.tsx

@@ -0,0 +1,18 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import HVCenterContainer from "../HVCenterContainer";
+
+afterEach(cleanup);
+
+describe("HVCenterContainer Component", () => {
+  it("should render snapshot", () => {
+    const children = "This should be rendered inside";
+    const { asFragment } = render(
+      <HVCenterContainer verticalCenter={true} light={true}>
+        {children}
+      </HVCenterContainer>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/InlineSelect.tsx

@@ -0,0 +1,13 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import SelectQuestion from "../InlineSelect";
+
+afterEach(cleanup);
+
+describe("Select Question Component", () => {
+  it("should render snapshot", () => {
+    const { asFragment } = render(<SelectQuestion />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/Loading.tsx

@@ -0,0 +1,17 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Loading from "../Loading";
+
+afterEach(cleanup);
+
+describe("Loading Component", () => {
+  it("should have loading text in document", async () => {
+    const { findByText } = render(<Loading />);
+    expect(await findByText("Loading...")).toBeInTheDocument();
+  });
+  it("should render snapshot", () => {
+    const { asFragment } = render(<Loading />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/MoreInfo.tsx

@@ -0,0 +1,18 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import marked from "marked";
+import * as React from "react";
+
+import MoreInfo from "../MoreInfo";
+
+afterEach(cleanup);
+jest.mock("marked");
+
+describe("MoreInfo Component", () => {
+  it("should render snapshot", () => {
+    // console.log(jest.mock("marked"));
+    // const { findByText } = render(
+    //   <MoreInfo open={true} handleClose content="##content title" />
+    // );
+    // expect(findByText("content title")).toBeInTheDocument();
+  });
+});

src/components/__tests__/Question.tsx

@@ -0,0 +1,14 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Question from "../Question";
+
+afterEach(cleanup);
+
+describe("Question Component", () => {
+  it("render snapshot", () => {
+    const children = "This is a question";
+    const { asFragment } = render(<Question>{children}</Question>);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/QuestionImage.tsx

@@ -0,0 +1,17 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import StatementImage from "../QuestionImage";
+
+afterEach(cleanup);
+
+describe("Statement Image Component", () => {
+  it("should render snapshot when image is available", () => {
+    const { asFragment } = render(<StatementImage src={"example.png"} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should render snapshot when image is not available", () => {
+    const { asFragment } = render(<StatementImage />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/Response.tsx

@@ -0,0 +1,20 @@
+import { cleanup, fireEvent, render, wait } from "@testing-library/react";
+import * as React from "react";
+
+import Response from "../Response";
+
+afterEach(cleanup);
+
+describe("Response Component", () => {
+  it("should render snapshot when image is available", () => {
+    const response = { id: "1", text: "example text", img: "img.png" };
+    const { asFragment } = render(<Response response={response} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should render snapshot when image is not available", () => {
+    const response = { id: "2", text: "example text" };
+
+    const { asFragment } = render(<Response response={response} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__tests__/ResponseButton.tsx

@@ -0,0 +1,60 @@
+import { cleanup, fireEvent, render, waitFor } from "@testing-library/react";
+import * as React from "react";
+
+import ResponseButton from "../ResponseButton";
+
+afterEach(cleanup);
+
+describe("Response Button Component", () => {
+  let handleClick;
+  let response;
+  let responseKey;
+  beforeEach(() => {
+    handleClick = jest.fn();
+    responseKey = "A";
+    response = {
+      id: "1",
+      text: "inner text"
+    };
+  });
+  it("should render snapshot when selected is true", () => {
+    const { asFragment } = render(
+      <ResponseButton
+        key={response.id}
+        handleClick={handleClick}
+        selected={true}
+        responseKey={responseKey}
+      >
+        {response.text}
+      </ResponseButton>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should render snapshot when selected is false", () => {
+    const { asFragment } = render(
+      <ResponseButton
+        key={response.id}
+        handleClick={handleClick}
+        selected={false}
+        responseKey={responseKey}
+      >
+        {response.text}
+      </ResponseButton>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should trigger handleClick when clicked", () => {
+    const { getByText } = render(
+      <ResponseButton
+        key={response.id}
+        handleClick={handleClick}
+        selected={false}
+        responseKey={responseKey}
+      >
+        {response.text}
+      </ResponseButton>
+    );
+    fireEvent.click(getByText("inner text"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});

src/components/__tests__/ResponseImageButton.tsx

@@ -0,0 +1,60 @@
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import * as React from "react";
+
+import ResponseImageButton from "../ResponseImageButton";
+
+afterEach(cleanup);
+
+describe("Response Button Component", () => {
+  let handleClick: jest.Mock<any, any>;
+  let children;
+  let responseKey;
+  let image;
+
+  beforeEach(() => {
+    responseKey = "A";
+    handleClick = jest.fn();
+    image = "img.png";
+    children = "Inner text";
+  });
+  it("should render snapshot when selected is true", () => {
+    const { asFragment } = render(
+      <ResponseImageButton
+        image={image}
+        responseKey={responseKey}
+        handleClick={handleClick}
+        selected={true}
+      >
+        {children}
+      </ResponseImageButton>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should render snapshot when selected is false", () => {
+    const { asFragment } = render(
+      <ResponseImageButton
+        image={image}
+        responseKey={responseKey}
+        handleClick={handleClick}
+        selected={false}
+      >
+        {children}
+      </ResponseImageButton>
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it("should trigger handleClick when clicked", async () => {
+    const { getByText } = render(
+      <ResponseImageButton
+        image={image}
+        responseKey={responseKey}
+        handleClick={handleClick}
+        selected={false}
+      >
+        {children}
+      </ResponseImageButton>
+    );
+    fireEvent.click(getByText("Inner text"));
+    expect(handleClick).toHaveBeenCalled();
+  });
+});