Test units for modal form.

src/components/stories/__mocks__/Stories.jsx

@@ -0,0 +1,136 @@
+import { useState } from "react";
+import { Form, Button, Modal } from "react-bootstrap";
+import { FetchingButton } from "../../layout/Buttons/FetchingButton";
+import { CountryDropdown, RegionDropdown } from "react-country-region-selector";
+import "../Stories.css";
+function Stories(initShow, success = false) {
+  const [show, setShow] = useState(initShow);
+  const [country, setCountry] = useState("");
+  const [region, setRegion] = useState("");
+  const [title, setTitle] = useState("");
+  const [desc, setDesc] = useState("");
+  const [err, setErr] = useState("");
+  const handleClose = () => setShow(false);
+  const handleShow = () => setShow(true);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (success) {
+      clearInput();
+      handleClose();
+    } else {
+      setErr("Display err from supabase");
+    }
+  };
+
+  const clearInput = () => {
+    setTitle("");
+    setDesc("");
+    setCountry("");
+    setRegion("");
+    setErr("");
+  };
+
+  return (
+    <div className="stories">
+      <div className="main_title">
+        <h1>User Story</h1>
+        <Button className="story_btn" onClick={handleShow}>
+          Create your Story
+        </Button>
+      </div>
+
+      <Modal show={show} onHide={handleClose} role="modalForm">
+        <Modal.Header closeButton>
+          <Modal.Title>Create Your Story</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          <div className="formContainer">
+            <Form onSubmit={handleSubmit}>
+              <Form.Group controlId="form.title">
+                <Form.Label className="str-form-label">Title</Form.Label>
+                <Form.Control
+                  role="title"
+                  type="text"
+                  name="title"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  required
+                />
+              </Form.Group>
+
+              <Form.Group controlId="form.description">
+                <Form.Label className="str-form-label">Description</Form.Label>
+                <Form.Control
+                  role="desc"
+                  as="textarea"
+                  value={desc}
+                  name="desc"
+                  onChange={(e) => setDesc(e.target.value)}
+                  rows={5}
+                  required
+                />
+              </Form.Group>
+
+              <Form.Group controlId="form.country">
+                <Form.Label className="str-form-label">Country</Form.Label>
+                <CountryDropdown
+                  role="country"
+                  className="country"
+                  name="country"
+                  value={country}
+                  onChange={(val) => setCountry(val)}
+                  required
+                />
+              </Form.Group>
+
+              <Form.Group controlId="form.region">
+                <Form.Label className="str-form-label">Region</Form.Label>
+                <RegionDropdown
+                  role="region"
+                  className="region"
+                  name="region"
+                  blankOptionLabel="No Country Selected"
+                  country={country}
+                  value={region}
+                  onChange={(val) => setRegion(val)}
+                  required
+                />
+              </Form.Group>
+              <br />
+              <hr />
+              <div className="btnContainer">
+                <button
+                  className="mBtn clearBtn"
+                  onClick={clearInput}
+                  role="clearBtn"
+                >
+                  Clear
+                </button>
+                <button
+                  className="mBtn closeBtn"
+                  onClick={handleClose}
+                  role="closeBtn"
+                >
+                  Close
+                </button>
+                <FetchingButton
+                  role="saveBtn"
+                  action="Save"
+                  type="submit"
+                  className="mBtn saveBtn"
+                />
+              </div>
+            </Form>
+          </div>
+        </Modal.Body>
+        {err && (
+          <div className="alert alert-danger" role="alert">
+            {err}
+          </div>
+        )}
+      </Modal>
+    </div>
+  );
+}
+export default Stories;

src/components/stories/__tests__/stories.test.js

@@ -0,0 +1,96 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import ReactDOM from "react-dom";
+jest.mock("../Stories");
+import Stories from "../Stories";
+
+describe("stories", () => {
+  it("renders form without crashing", () => {
+    const div = document.createElement("div");
+    ReactDOM.render(<Stories initShow={true} />, div);
+    ReactDOM.unmountComponentAtNode(div);
+  });
+
+  it("should show form modal when Create your story btn is clicked", () => {
+    render(<Stories initShow={true} />);
+    const modalForm = screen.getByRole(/modalForm/i);
+    expect(modalForm).toBeInTheDocument();
+  });
+});
+
+describe("modal form", () => {
+  it("should render text fields correctly", () => {
+    render(<Stories initShow={true} />);
+    userEvent.type(screen.getByRole("title"), "My story");
+    expect(screen.getByRole("title")).toHaveValue("My story");
+    userEvent.type(screen.getByRole("desc"), "This is the body of desc");
+    expect(screen.getByRole("desc")).toHaveValue("This is the body of desc");
+  });
+
+  it("should render selected fields correctly", () => {
+    render(<Stories initShow={true} />);
+    userEvent.selectOptions(screen.getByRole("country"), ["Afghanistan"]);
+    expect(
+      screen.getByRole("option", { name: "Afghanistan" }).selected
+    ).toBeTruthy();
+    userEvent.selectOptions(screen.getByRole("region"), ["Badakhshan"]);
+    expect(
+      screen.getByRole("option", { name: "Badakhshan" }).selected
+    ).toBeTruthy();
+  });
+
+  it("clicks in clear button should clear all fields", () => {
+    render(<Stories initShow={true} />);
+    userEvent.type(screen.getByRole("title"), "My story");
+    userEvent.type(screen.getByRole("desc"), "This is the body of desc");
+    expect(screen.getByRole(/clearBtn/i)).toBeTruthy();
+    fireEvent.click(screen.getByRole(/clearBtn/i));
+    expect(screen.getByRole("title")).toHaveValue("");
+    expect(screen.getByRole("desc")).toHaveValue("");
+  });
+
+  it("clicks in close button should close the modal form", () => {
+    render(<Stories initShow={true} />);
+    expect(screen.getByRole(/closeBtn/i)).toBeTruthy();
+    fireEvent.click(screen.getByRole(/closeBtn/i));
+  });
+
+  it("before closing the modal form, all fields should be clear", () => {
+    render(<Stories initShow={true} />);
+    userEvent.type(screen.getByRole("title"), "My story");
+    userEvent.type(screen.getByRole("desc"), "This is the body of desc");
+    userEvent.selectOptions(screen.getByRole("country"), ["Afghanistan"]);
+    userEvent.selectOptions(screen.getByRole("region"), ["Badakhshan"]);
+    expect(screen.getByRole(/closeBtn/i)).toBeTruthy();
+    fireEvent.click(screen.getByRole(/closeBtn/i));
+    expect(screen.getByRole("title")).toHaveValue("");
+    expect(screen.getByRole("desc")).toHaveValue("");
+    expect(screen.getByRole("country")).toHaveValue("");
+    expect(screen.getByRole("region")).toHaveValue("");
+  });
+
+  it("insert data successfully should close modal form and clear all fields", () => {
+    render(<Stories initShow={true} success={true} />);
+    expect(document.getElementsByName("FetchingButton")).toBeTruthy();
+    document.getElementsByName("FetchingButton").click = true;
+    expect(screen.getByRole("title")).toHaveValue("");
+    expect(screen.getByRole("desc")).toHaveValue("");
+    expect(screen.getByRole("country")).toHaveValue("");
+    expect(screen.getByRole("region")).toHaveValue("");
+  });
+
+  it("insert data unsuccessfully should not close modal form and remain all fields' values", () => {
+    render(<Stories initShow={true} />);
+    userEvent.type(screen.getByRole("title"), "My story");
+    userEvent.type(screen.getByRole("desc"), "This is the body of desc");
+    userEvent.selectOptions(screen.getByRole("country"), ["Afghanistan"]);
+    userEvent.selectOptions(screen.getByRole("region"), ["Badakhshan"]);
+    expect(document.getElementsByName("FetchingButton")).toBeTruthy();
+    document.getElementsByName("FetchingButton").click = true;
+    expect(screen.getByRole("title")).toHaveValue("My story");
+    expect(screen.getByRole("desc")).toHaveValue("This is the body of desc");
+    expect(screen.getByRole("country")).toHaveValue("Afghanistan");
+    expect(screen.getByRole("region")).toHaveValue("Badakhshan");
+  });
+});