From c8f0ce88c0891892e444916d34126b4dda590c71 Mon Sep 17 00:00:00 2001 From: Renuka Prasad Date: Sun, 25 Jun 2023 17:40:27 +0530 Subject: [PATCH 1/2] Challenge 1 commit --- .../1.Accordion/Accordion.test.tsx | 38 +++++++--- .../challengeOne/2.Dropdown/Dropdown.test.tsx | 39 +++++++--- .../challengeOne/3.Table/Table.test.tsx | 46 +++++++++--- .../challengeOne/4.Form/Form.test.tsx | 71 ++++++++++++++++--- .../challengeOne/5.Modal/Modal.test.tsx | 58 ++++++++++++--- src/pages/index.tsx | 28 ++++---- 6 files changed, 226 insertions(+), 54 deletions(-) diff --git a/src/challenges/challengeOne/1.Accordion/Accordion.test.tsx b/src/challenges/challengeOne/1.Accordion/Accordion.test.tsx index 1035a89..8635437 100644 --- a/src/challenges/challengeOne/1.Accordion/Accordion.test.tsx +++ b/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) =>{ + const defaultProps = { + title: "My title", + children:

Accordion content

+ } + + render() +} + +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(); + }); +}); diff --git a/src/challenges/challengeOne/2.Dropdown/Dropdown.test.tsx b/src/challenges/challengeOne/2.Dropdown/Dropdown.test.tsx index ebd27f5..69bc6ad 100644 --- a/src/challenges/challengeOne/2.Dropdown/Dropdown.test.tsx +++ b/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) => { + const defaultProps = { + options: ["Option 1", "Option 2", "Option 3"], + label: "Label", + id: "id", + }; + + render(); +}; + +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"); + }); +}); diff --git a/src/challenges/challengeOne/3.Table/Table.test.tsx b/src/challenges/challengeOne/3.Table/Table.test.tsx index 7bd1677..e4b750f 100644 --- a/src/challenges/challengeOne/3.Table/Table.test.tsx +++ b/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) => { + const defaultProps = { + columns: [ + { property: "name", label: "Name" }, + { property: "email", label: "Email" }, + ], + data: [ + { id: 1, name: "John Doe", email: "john.doe@mail.com" }, + { id: 2, name: "Jane Doe", email: "jane.down@mail.com" }, + ] + }; + + render(); +}; + +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: "john.doe@mail.com" })).toBeInTheDocument(); + expect(screen.getByRole("cell", { name: "jane.down@mail.com" })).toBeInTheDocument(); + }); +}); + diff --git a/src/challenges/challengeOne/4.Form/Form.test.tsx b/src/challenges/challengeOne/4.Form/Form.test.tsx index b8a69d7..9f643cf 100644 --- a/src/challenges/challengeOne/4.Form/Form.test.tsx +++ b/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) => { + 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(
); +}; + +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"}), "renu@gmail.com") + userEvent.click(screen.getByRole("button", {name: "Submit"})); + expect(handleFormSubmitMock).toHaveBeenCalledWith({name: "renu@gmail.com"}) + }); +}); + diff --git a/src/challenges/challengeOne/5.Modal/Modal.test.tsx b/src/challenges/challengeOne/5.Modal/Modal.test.tsx index be8012d..ba4cbc5 100644 --- a/src/challenges/challengeOne/5.Modal/Modal.test.tsx +++ b/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) => { + const defaultProps = { + isOpen: true, + onClose: handleCloseMock, + headerText: "Form Modal", + onConfirm: handleConfirmMock, + showActions: false, + children:

Hello world

+ }; + + render(); +}; + +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() + }); +}); + diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8321d68..237cc33 100644 --- a/src/pages/index.tsx +++ b/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() {

Testing Workshop

- {/* +

Accordion content

 @@ -76,8 +76,8 @@ export default function Home() { { id: 1, name: "John Doe", email: "john.doe@mail.com" }, { id: 2, name: "Jane Doe", email: "jane.down@mail.com" }, ]} - /> */} - {/* */} + /> +
From 4fea0d2f21af5d0386b1de56b7b2e7357c8acb75 Mon Sep 17 00:00:00 2001 From: Renuka Prasad Date: Sun, 25 Jun 2023 19:53:04 +0530 Subject: [PATCH 2/2] Integration tests added --- src/challenges/challengeOne/5.Modal/Modal.tsx | 2 +- .../IntegrationComponent.test.tsx | 62 ++++++++++++++++--- 2 files changed, 55 insertions(+), 9 deletions(-) diff --git a/src/challenges/challengeOne/5.Modal/Modal.tsx b/src/challenges/challengeOne/5.Modal/Modal.tsx index 647d923..a6672e1 100644 --- a/src/challenges/challengeOne/5.Modal/Modal.tsx +++ b/src/challenges/challengeOne/5.Modal/Modal.tsx @@ -22,7 +22,7 @@ export function Modal({

{headerText}

-