components: Improve test coverage

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<PopupProps> & {
+export type Props = Partial<PopupProps> & {
   children: ReactNode;
   isOpen?: boolean;
   setIsOpen?: (o: boolean) => void;

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.Outlined>Button Name</Button.Outlined>);
+
+    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(
       <Button.Group className="class-name">

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<PopupProps>) => (
+const SimplePopup = ({ ...props }: Partial<Props>) => (
   <ButtonWithPopup triggerText="trigger" {...props}>
     <span> popup Content </span>
   </ButtonWithPopup>
@@ -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(<SimplePopup />);
     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(<SimplePopup isOpen={false} setIsOpen={setIsOpen} />);
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(true));
+  });
+
+  test("should use open props to close", async () => {
+    const setIsOpen = jest.fn();
+    render(<SimplePopup isOpen setIsOpen={setIsOpen} />);
+    fireEvent.click(screen.getByText("trigger"));
+    await waitFor(() => expect(setIsOpen).toHaveBeenCalledWith(false));
+  });
+
   test("no Arrow for modal", () => {
     render(<SimplePopup modal />);
     fireEvent.click(screen.getByText("trigger"));

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();
     });

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(
       <FormInput
         label="Name"
         className="class-name"
         placeholder="Placeholder text"
+        onChangeString={onChangeString}
+      />,
+    );
+
+    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(
+      <FormInput
+        label="Name"
+        className="class-name"
         value="[email protected]"
         type="email"
+        description="description"
       />,
     );
 
-    const input = screen.getByPlaceholderText("Placeholder text");
+    const input = screen.getByRole("textbox");
     expect(input).toBeVisible();
     expect(input).toHaveAttribute("type", "email");
     expect(input).toHaveValue("[email protected]");
+    expect(input).toHaveAttribute("placeholder", "");
+
+    expect(screen.getByText("description")).toBeVisible();
   });
 });

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) {

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(
+      <Textarea
+        rows={4}
+        label="Name"
+        className="class-name"
+        placeholder="Placeholder text"
+        onChangeString={onChangeString}
+      />,
+    );
+
+    const input = screen.getByPlaceholderText("Placeholder text");
+    expect(input).toBeVisible();
+
+    await user.type(input, "new name");
+    expect(onChangeString).toHaveBeenCalledWith("new name");
+    expect(input).toHaveValue("new name");
+  });
+
   it("renders textarea with value", () => {
     render(
       <Textarea
         rows={4}
         label="Name"
         className="class-name"
-        placeholder="Placeholder text"
         value="This is my text"
         onChange={jest.fn()}
+        description="description"
       />,
     );
 
-    const input = screen.getByPlaceholderText("Placeholder text");
+    const input = screen.getByRole("textbox");
     expect(input).toBeVisible();
     expect(input).toHaveValue("This is my text");
+    expect(input).toHaveAttribute("placeholder", "");
+    expect(screen.getByText("description")).toBeVisible();
   });
 });