Renu - Workshop Feedback

src/challenges/challengeOne/1.Accordion/Accordion.test.tsx

@@ -1,8 +1,30 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { Accordion } from "./Accordion";
-
-// describe("Accordion", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Accordion, AccordionProps } from "./Accordion";
+
+const renderComponent = (additionalProps?: Partial<AccordionProps>) =>{ 
+  const defaultProps = {
+    title: "My title",
+    children: <h1>Accordion content</h1>
+  }
+
+  render(<Accordion  {...defaultProps} {...additionalProps}/>)
+}
+
+describe("Accordion", () => {
+  it("renders the button correctly", () => {
+    renderComponent();
+    expect(screen.getByRole("button", {name: "My title"})).toBeInTheDocument();
+  });
+
+  it("renders the children correctly", async () => {
+    renderComponent();
+    userEvent.click(screen.getByRole("button", {name: "My title"}))
+    expect(await screen.findByRole("heading", {name: "Accordion content"})).toBeInTheDocument();
+  });  
+
+  it("does not render the children unless the button in clicked", async () => {
+    renderComponent();
+    expect(screen.queryByRole("heading", {name: "Accordion content"})).not.toBeInTheDocument();
+  });
+});

src/challenges/challengeOne/2.Dropdown/Dropdown.test.tsx

@@ -1,8 +1,31 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { Dropdown } from "./Dropdown";
-
-// describe("Dropdown", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Dropdown, DropdownProps } from "./Dropdown";
+
+const renderComponent = (additionalProps?: Partial<DropdownProps>) => {
+  const defaultProps = {
+    options: ["Option 1", "Option 2", "Option 3"],
+    label: "Label",
+    id: "id",
+  };
+
+  render(<Dropdown {...defaultProps} {...additionalProps} />);
+};
+
+describe("Dropdown", () => {
+  it("renders the label correctly", () => {
+    renderComponent();
+    expect(screen.getByText("Label")).toBeInTheDocument();
+  });
+
+  it("selects the first option in the list by default", () => {
+    renderComponent();
+    expect(screen.getByRole("menu")).toHaveValue("Option 1");
+  });
+
+  it("selects the options correctly", () => {
+    renderComponent();
+    userEvent.click(screen.getByRole("menuitem", { name: "Option 2" }));
+    expect(screen.getByRole("menu")).toHaveValue("Option 2");
+  });
+});

src/challenges/challengeOne/3.Table/Table.test.tsx

@@ -1,8 +1,38 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { Table } from "./Table";
-
-// describe("Table", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen } from "@testing-library/react";
+import { Table, TableProps } from "./Table";
+
+const renderComponent = (additionalProps?: Partial<TableProps>) => {
+    const defaultProps = {
+        columns: [
+            { property: "name", label: "Name" },
+            { property: "email", label: "Email" },
+        ],
+        data: [
+            { id: 1, name: "John Doe", email: "[email protected]" },
+            { id: 2, name: "Jane Doe", email: "[email protected]" },
+        ]
+    };
+
+    render(<Table {...defaultProps} {...additionalProps} />);
+};
+
+describe("Table", () => {
+    it("renders the table headings correctly", () => {
+        renderComponent();
+        expect(screen.getByRole("columnheader", { name: "Name" })).toBeInTheDocument();
+        expect(screen.getByRole("columnheader", { name: "Email" })).toBeInTheDocument();
+    });
+
+    it("renders the names correctly", () => {
+        renderComponent();
+        expect(screen.getByRole("cell", { name: "John Doe" })).toBeInTheDocument();
+        expect(screen.getByRole("cell", { name: "Jane Doe" })).toBeInTheDocument();
+    });
+
+    it("renders the emails correctly", () => {
+        renderComponent();
+        expect(screen.getByRole("cell", { name: "[email protected]" })).toBeInTheDocument();
+        expect(screen.getByRole("cell", { name: "[email protected]" })).toBeInTheDocument();
+    });
+});
+

src/challenges/challengeOne/4.Form/Form.test.tsx

@@ -1,8 +1,63 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { Form } from "./Form";
-
-// describe("Form", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Form, FormProps } from "./Form";
+
+const handleFormSubmitMock = jest.fn();
+
+const renderComponent = (additionalProps?: Partial<FormProps>) => {
+    const defaultProps = {
+        fields:  [
+            {
+              label: "Name",
+              type: "text",
+              name: "name",
+              placeholder: "Enter your name",
+              value: "",
+              id: "name",
+            },
+            {
+              label: "Email",
+              type: "email",
+              name: "email",
+              placeholder: "Enter your email",
+              value: "",
+              id: "email",
+            },
+          ],
+        onSubmit: handleFormSubmitMock
+    };
+
+    render(<Form {...defaultProps} {...additionalProps} />);
+};
+
+describe("Form", () => {
+    it("renders the input label correctly", () => {
+        renderComponent();
+        expect(screen.getByText("Name")).toBeInTheDocument();
+    });
+
+    it("renders the placeholder correctly", () => {
+        renderComponent();
+        expect(screen.getByPlaceholderText("Enter your email")).toBeInTheDocument();
+    });
+
+    it("updates the input box correctly", async () => {
+        renderComponent();
+        userEvent.type(screen.getByRole("textbox", {name: "Name"}), "Renu")
+        expect(await screen.findByRole("textbox", {name: "Name"})).toHaveValue("Renu");
+    });
+
+    it("renders the submit button correctly", () => {
+        renderComponent();
+        expect(screen.getByRole("button", {name: "Submit"})).toBeInTheDocument();
+    });
+
+    it("calls the on submit function when the button is clicked", () => {
+        renderComponent();
+        userEvent.type(screen.getByRole("textbox", {name: "Name"}), "Renu")
+        userEvent.type(screen.getByRole("textbox", {name: "Name"}), "[email protected]")
+        userEvent.click(screen.getByRole("button", {name: "Submit"}));
+        expect(handleFormSubmitMock).toHaveBeenCalledWith({name: "[email protected]"})
+    });
+});
+

src/challenges/challengeOne/5.Modal/Modal.test.tsx

@@ -1,8 +1,50 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { Modal } from "./Modal";
-
-// describe("Modal", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Modal, ModalProps } from "./Modal";
+
+const handleCloseMock = jest.fn();
+const handleConfirmMock = jest.fn();
+
+const renderComponent = (additionalProps?: Partial<ModalProps>) => {
+    const defaultProps = {
+        isOpen: true,
+        onClose: handleCloseMock,
+        headerText: "Form Modal",
+        onConfirm: handleConfirmMock,
+        showActions: false,
+        children: <h1>Hello world</h1>
+    };
+
+    render(<Modal {...defaultProps} {...additionalProps} />);
+};
+
+describe("Modal", () => {
+    it("opens the modal correctly", () => {
+        renderComponent();
+        expect(screen.getByRole("heading", {name: "Form Modal"})).toBeInTheDocument();
+    });
+
+    it("hides the modal correctly", () => {
+        renderComponent({isOpen: false});
+        expect(screen.queryByRole("heading", {name: "Form Modal"})).not.toBeInTheDocument();
+    });
+
+    it("calls the on close function correctly", () => {
+        renderComponent();
+        userEvent.click(screen.getByRole("button"));
+        expect(handleCloseMock).toHaveBeenCalled()
+    });
+
+    it("renders the cancel button correctly", () => {
+        renderComponent({showActions: true});
+        userEvent.click(screen.getByRole("button", {name: "Cancel"}));
+        expect(handleCloseMock).toHaveBeenCalled()
+    });
+
+    it("renders the confirm button correctly", () => {
+        renderComponent({showActions: true});
+        userEvent.click(screen.getByRole("button", {name: "Confirm"}));
+        expect(handleConfirmMock).toHaveBeenCalled()
+    });    
+});
+

src/challenges/challengeOne/5.Modal/Modal.tsx

@@ -22,7 +22,7 @@ export function Modal({
       <div className="modal w-[300px] rounded-md bg-white p-6">
         <div className="flex items-center justify-between pb-6">
           <h2 className="text-lg font-semibold">{headerText}</h2>
-          <button onClick={onClose} type="button">
+          <button onClick={onClose} type="button" title="close-modal-button">
             <svg
               xmlns="http://www.w3.org/2000/svg"
               className="h-6 w-6"

src/challenges/challengeTwo/IntegrationComponent/IntegrationComponent.test.tsx

@@ -1,8 +1,54 @@
-// import React from "react";
-// import { render, screen } from "@testing-library/react";
-// import userEvent from "@testing-library/user-event";
-// import { IntegrationComponent } from "./IntegrationComponent";
-
-// describe("IntegrationComponent", () => {
-//   it("renders...", () => {});
-// });
+import { render, screen, waitForElementToBeRemoved } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import axios from "axios";
+import { IntegrationComponent } from "./IntegrationComponent";
+
+const WEATHER_DATA_MOCK = {
+    temperature: "30C",
+    weather: "Cloudy"
+};
+
+jest.mock("axios");
+
+const renderComponent = () => {
+    render(<IntegrationComponent />);
+};
+
+describe("Modal", () => {
+    beforeEach(() => {
+        const mockedAxios = axios as jest.Mocked<typeof axios>;
+        mockedAxios.get.mockResolvedValueOnce({data: WEATHER_DATA_MOCK});
+    });
+
+    it("render the 'Open Modal' button correctly", async () => {
+        renderComponent();
+        expect(await screen.findByRole("button", {name: "Open Form"})).toBeInTheDocument();
+    });
+
+    it("opens the modal correctly", async () => {
+        renderComponent();
+        userEvent.click(await screen.findByRole("button", {name: "Open Form"}))
+        expect(await screen.findByRole("heading", {name: "Form Modal"})).toBeInTheDocument();
+    });
+
+    it("closes the modal when the cancel icon is clicked", async () => {
+        renderComponent();
+        userEvent.click(await screen.findByRole("button", {name: "Open Form"}))
+        userEvent.click(await screen.findByTitle("close-modal-button"));
+        await waitForElementToBeRemoved(() =>  screen.queryByRole("heading", {name: "Form Modal"}))
+    });
+
+    it("displays the toast message when the form is submitted", async () => {
+        renderComponent();
+        userEvent.click(await screen.findByRole("button", {name: "Open Form"}))
+        userEvent.type(await screen.findByRole("textbox", {name: "Name"}), "Renu")
+        userEvent.type(await screen.findByRole("textbox", {name: "Email"}), "[email protected]")
+        userEvent.click(screen.getByRole("button", {name: "Submit"}));
+        expect(await screen.findByText("Hello Renu, your email [email protected] has been submitted!"))
+    });
+
+    it("displays the weather data correctly", async () => {
+        renderComponent();
+        expect(await screen.findByText("Temperature: 30C")).toBeInTheDocument();
+    });
+});

src/pages/index.tsx

@@ -1,19 +1,19 @@
-// import React, { useState } from "react";
+import React, { useState } from "react";
 import Head from "next/head";
 
-// import { Accordion } from "@/challenges/challengeOne/1.Accordion/Accordion";
-// import { Dropdown } from "@/challenges/challengeOne/2.Dropdown/Dropdown";
-// import { Table } from "@/challenges/challengeOne/3.Table/Table";
-// import { Form } from "@/challenges/challengeOne/4.Form/Form";
-// import { Modal } from "@/challenges/challengeOne/5.Modal/Modal";
-// import { IntegrationComponent } from "@/challenges/challengeTwo/IntegrationComponent/IntegrationComponent";
+import { Accordion } from "@/challenges/challengeOne/1.Accordion/Accordion";
+import { Dropdown } from "@/challenges/challengeOne/2.Dropdown/Dropdown";
+import { Table } from "@/challenges/challengeOne/3.Table/Table";
+import { Form } from "@/challenges/challengeOne/4.Form/Form";
+import { Modal } from "@/challenges/challengeOne/5.Modal/Modal";
+import { IntegrationComponent } from "@/challenges/challengeTwo/IntegrationComponent/IntegrationComponent";
 
 export default function Home() {
-  // const [isOpen, setIsOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(true);
 
-  // const handleModalClose = () => {
-  //   setIsOpen(false);
-  // };
+  const handleModalClose = () => {
+    setIsOpen(false);
+  };
 
   return (
     <>
@@ -26,7 +26,7 @@ export default function Home() {
       <main>
         <div className="mx-auto flex h-full w-full flex-col items-center gap-3 p-40">
           <h1 className="text-4xl font-bold">Testing Workshop</h1>
-          {/* <Accordion title="Accordion title">
+          <Accordion title="Accordion title">
             <p>Accordion content</p>
           </Accordion>
 
@@ -76,8 +76,8 @@ export default function Home() {
               { id: 1, name: "John Doe", email: "[email protected]" },
               { id: 2, name: "Jane Doe", email: "[email protected]" },
             ]}
-          /> */}
-          {/* <IntegrationComponent /> */}
+          />
+          <IntegrationComponent />
         </div>
       </main>
     </>