diff --git a/src/components/stories/__mocks__/Stories.jsx b/src/components/stories/__mocks__/Stories.jsx
new file mode 100644
index 00000000..ed1b192b
--- /dev/null
+++ b/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 (
+
+
+
User Story
+
+
+
+
+
+ Create Your Story
+
+
+
+
+ Title
+ setTitle(e.target.value)}
+ required
+ />
+
+
+
+ Description
+ setDesc(e.target.value)}
+ rows={5}
+ required
+ />
+
+
+
+ Country
+ setCountry(val)}
+ required
+ />
+
+
+
+ Region
+ setRegion(val)}
+ required
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {err && (
+
+ {err}
+
+ )}
+
+
+ );
+}
+export default Stories;
diff --git a/src/components/stories/__tests__/stories.test.js b/src/components/stories/__tests__/stories.test.js
new file mode 100644
index 00000000..9a6a1952
--- /dev/null
+++ b/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(, div);
+ ReactDOM.unmountComponentAtNode(div);
+ });
+
+ it("should show form modal when Create your story btn is clicked", () => {
+ render();
+ const modalForm = screen.getByRole(/modalForm/i);
+ expect(modalForm).toBeInTheDocument();
+ });
+});
+
+describe("modal form", () => {
+ it("should render text fields correctly", () => {
+ render();
+ 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();
+ 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();
+ 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();
+ expect(screen.getByRole(/closeBtn/i)).toBeTruthy();
+ fireEvent.click(screen.getByRole(/closeBtn/i));
+ });
+
+ it("before closing the modal form, all fields should be clear", () => {
+ render();
+ 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();
+ 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();
+ 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");
+ });
+});