diff --git a/packages/components/src/ButtonWithPopup/index.tsx b/packages/components/src/ButtonWithPopup/index.tsx index 43ba786f..c17eee65 100644 --- a/packages/components/src/ButtonWithPopup/index.tsx +++ b/packages/components/src/ButtonWithPopup/index.tsx @@ -5,7 +5,7 @@ import React, { ReactNode } from "react"; import Popup, { PopupProps } from "../Popup"; import css from "./index.module.css"; -type Props = Partial & { +export type Props = Partial & { children: ReactNode; isOpen?: boolean; setIsOpen?: (o: boolean) => void; diff --git a/packages/components/src/__tests__/Button.test.tsx b/packages/components/src/__tests__/Button.test.tsx index b19b537c..f3538677 100644 --- a/packages/components/src/__tests__/Button.test.tsx +++ b/packages/components/src/__tests__/Button.test.tsx @@ -116,6 +116,15 @@ describe("test Button", () => { expect(button).toHaveClass(/underlined/); }); + it("renders an outlined button", () => { + render(Button Name); + + const button = screen.getByText("Button Name"); + expect(button).toHaveTextContent("Button Name"); + expect(button).toHaveAttribute("type", "button"); + expect(button).toHaveClass(/outlined/); + }); + it("renders a Button Group", () => { render( diff --git a/packages/components/src/__tests__/ButtonWithPopup.test.tsx b/packages/components/src/__tests__/ButtonWithPopup.test.tsx index 5f6001ac..18bba0ac 100644 --- a/packages/components/src/__tests__/ButtonWithPopup.test.tsx +++ b/packages/components/src/__tests__/ButtonWithPopup.test.tsx @@ -1,11 +1,10 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import React from "react"; -import ButtonWithPopup from "../ButtonWithPopup"; -import { PopupProps } from "../Popup"; +import ButtonWithPopup, { Props } from "../ButtonWithPopup"; // Taken from https://github.com/yjose/reactjs-popup/blob/master/__test__/index.test.tsx -const SimplePopup = ({ ...props }: Partial) => ( +const SimplePopup = ({ ...props }: Partial) => ( popup Content @@ -17,7 +16,7 @@ const popupContentShouldExist = () => { expect(screen.getByText(/popup Content/)).toBeInTheDocument(); }; -describe("Popup Component Render ", () => { +describe("test ButtonWithPopup ", () => { test("should render trigger correctly", () => { render(); expect(screen.getByText(/trigger/)).toBeInTheDocument(); @@ -29,6 +28,20 @@ describe("Popup Component Render ", () => { expect(screen.getByRole("tooltip")).toBeInTheDocument(); }); + test("should use open props to open", async () => { + const setIsOpen = jest.fn(); + render(); + fireEvent.click(screen.getByText("trigger")); + await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(true)); + }); + + test("should use open props to close", async () => { + const setIsOpen = jest.fn(); + render(); + fireEvent.click(screen.getByText("trigger")); + await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(false)); + }); + test("no Arrow for modal", () => { render(); fireEvent.click(screen.getByText("trigger")); diff --git a/packages/components/src/__tests__/Checkbox.test.tsx b/packages/components/src/__tests__/Checkbox.test.tsx index c0e2e131..50a8bb2c 100644 --- a/packages/components/src/__tests__/Checkbox.test.tsx +++ b/packages/components/src/__tests__/Checkbox.test.tsx @@ -7,7 +7,7 @@ describe("test Checkbox", () => { const mocks = [ { name: "one", label: "one-label" }, { name: "two", label: "two-label" }, - { name: "three", label: "three-label" }, + { name: "three", label: "three-label", description: "description" }, ]; mocks.forEach((mock, ind) => { @@ -23,6 +23,7 @@ describe("test Checkbox", () => { checked={checked} className="classname" label={mock.label} + description={mock.description} />, ); @@ -36,6 +37,10 @@ describe("test Checkbox", () => { expect(input).not.toBeChecked(); } + if (mock.description) { + expect(screen.getByText(mock.description)).toBeVisible(); + } + await user.click(screen.getByLabelText(mock.label)); expect(onChangeValue).toHaveBeenCalled(); }); diff --git a/packages/components/src/__tests__/FormInput.test.tsx b/packages/components/src/__tests__/FormInput.test.tsx index 1c81817d..200be40d 100644 --- a/packages/components/src/__tests__/FormInput.test.tsx +++ b/packages/components/src/__tests__/FormInput.test.tsx @@ -29,20 +29,43 @@ describe("test FormInput", () => { expect(input).toHaveValue("new name"); }); - it("renders form input with value", () => { - render( + it("renders form input with onChangeString", async () => { + const onChangeString = jest.fn(); + const { user } = setup( , + ); + + const input = screen.getByPlaceholderText("Placeholder text"); + expect(input).toBeVisible(); + expect(input).toHaveAttribute("type", "text"); + + await user.type(input, "new name"); + expect(onChangeString).toHaveBeenCalledWith("new name"); + expect(input).toHaveValue("new name"); + }); + + it("renders form input with value and description", () => { + render( + , ); - const input = screen.getByPlaceholderText("Placeholder text"); + const input = screen.getByRole("textbox"); expect(input).toBeVisible(); expect(input).toHaveAttribute("type", "email"); expect(input).toHaveValue("email@email.com"); + expect(input).toHaveAttribute("placeholder", ""); + + expect(screen.getByText("description")).toBeVisible(); }); }); diff --git a/packages/components/src/__tests__/Radio.test.tsx b/packages/components/src/__tests__/Radio.test.tsx index b76c7f9f..e7116253 100644 --- a/packages/components/src/__tests__/Radio.test.tsx +++ b/packages/components/src/__tests__/Radio.test.tsx @@ -7,7 +7,7 @@ describe("test Radio", () => { const mocks = [ { name: "one", label: "one-label" }, { name: "two", label: "two-label" }, - { name: "three", label: "three-label" }, + { name: "three", label: "three-label", description: "description" }, ]; mocks.forEach((mock, ind) => { @@ -23,10 +23,17 @@ describe("test Radio", () => { checked={checked} className="classname" disabled={disabled} + description={mock.description} />, ); + const content = screen.getByLabelText(mock.label); expect(content).toBeVisible(); + + if (mock.description) { + expect(screen.getByText(mock.description)).toBeVisible(); + } + if (!disabled) { const input = screen.getByRole("radio"); if (checked) { diff --git a/packages/components/src/__tests__/Textarea.test.tsx b/packages/components/src/__tests__/Textarea.test.tsx index 5e0ee46c..fcb82537 100644 --- a/packages/components/src/__tests__/Textarea.test.tsx +++ b/packages/components/src/__tests__/Textarea.test.tsx @@ -29,20 +29,42 @@ describe("test Textarea", () => { expect(input).toHaveValue("new name"); }); + it("renders textarea with onChangeString", async () => { + const onChangeString = jest.fn(); + const { user } = setup( +