test: collapsible tests

packages/react/src/composite/Accordion/src/components/AccordionBody/accordionBody.spec.tsx

@@ -15,7 +15,7 @@ const makeSut = (props: AccordionBodyProps, selectedDefault = "0") => {
   );
 };
 
-describe("GIVEN <Acordion.Body />", () => {
+describe("GIVEN <Accordion.Body />", () => {
   describe("WHEN rendered", () => {
     it("THEN should render the submitted content", () => {
       makeSut({ children: "My content" });

packages/react/src/composite/Collapsible/src/collapsible.spec.tsx

@@ -1,17 +1,81 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 
 import { Collapsible } from "./Collapsible";
-import { CollapsibleProperties } from "./collapsible.types";
+import { CollapsibleBodyProps } from "./components/CollapsibleBody/collapsibleBody.types";
 
-const makeSut = (props: CollapsibleProperties) => {
-  render(<Collapsible {...props} data-testid="collapsible-element" />);
-};
+const clickMock = jest.fn();
 
-describe("GIVEN <Box />", () => {
+const makeSut = (props: CollapsibleBodyProps, open = false) =>
+  render(
+    <Collapsible open={open}>
+      <Collapsible.Item>
+        <button data-testid="click" type="button" onClick={clickMock}>
+          Click
+        </button>
+      </Collapsible.Item>
+      <Collapsible.Body {...props} data-testid="collapsible-body-element" />
+    </Collapsible>
+  );
+
+describe("GIVEN <Collapsible />", () => {
   describe("WHEN rendered", () => {
-    it("THEN should render the submitted content", async () => {
+    it("THEN should render content", () => {
+      makeSut({ children: "My content" });
+      expect(screen.queryByText("My content")).toBeDefined();
+    });
+
+    it("THEN should render content and click in button", async () => {
       makeSut({ children: "My content" });
+      expect(screen.queryByText("My content")).toBeNull();
+      await fireEvent.click(screen.getByTestId("click"));
+      expect(clickMock).toBeCalledTimes(1);
+    });
+
+    it("THEN should render content from body", () => {
+      makeSut({ children: "My content" }, true);
+      expect(screen.queryByText("My content")).not.toBeNull();
+    });
+
+    it("THEN should not render content from body when collapsible is open but body is visible when closed", () => {
+      makeSut({ children: "My content", visibleWhen: "closed" }, true);
+      expect(screen.queryByText("My content")).toBeNull();
+    });
+
+    it("THEN should not render content from body when collapsible is closed but body is visible when open", () => {
+      makeSut({ children: "My content", visibleWhen: "open" }, false);
+      expect(screen.queryByText("My content")).toBeNull();
+    });
+
+    it("THEN should open body with no animation", () => {
+      makeSut({ children: "My content", direction: "none" }, true);
+      expect(screen.queryByText("My content")).not.toBeNull();
+      expect(
+        screen
+          .queryByText("My content")
+          ?.classList.contains("nimbus-collapsible_body__63v3i0")
+      ).toBe(true);
+    });
+
+    it("THEN should open body with animation from top", () => {
+      makeSut({ children: "My content", direction: "top" }, true);
+      expect(screen.queryByText("My content")).not.toBeNull();
+      expect(
+        screen
+          .queryByText("My content")
+          ?.classList.contains(
+            "nimbus-collapsible_bodyReversalAnimation__63v3i4"
+          )
+      ).toBe(true);
+    });
+    it("THEN should open body with animation from bottom", () => {
+      makeSut({ children: "My content", direction: "bottom" }, true);
+      expect(screen.queryByText("My content")).not.toBeNull();
+      expect(
+        screen
+          .queryByText("My content")
+          ?.classList.contains("nimbus-collapsible_bodyAnimation__63v3i2")
+      ).toBe(true);
     });
   });
 });

packages/react/src/composite/Collapsible/src/components/CollapsibleBody/collapsibleBody.spec.tsx

@@ -5,11 +5,13 @@ import { Collapsible } from "../../Collapsible";
 import { CollapsibleBody } from "./CollapsibleBody";
 import { CollapsibleBodyProps } from "./collapsibleBody.types";
 
-const makeSut = (props: CollapsibleBodyProps) => {
+const clickMock = jest.fn();
+
+const makeSut = (props: CollapsibleBodyProps, open = false) => {
   render(
-    <Collapsible open>
+    <Collapsible open={open}>
       <Collapsible.Item>
-        <button data-testid="click" type="button">
+        <button data-testid="click" type="button" onClick={clickMock}>
           Click
         </button>
       </Collapsible.Item>
@@ -20,10 +22,21 @@ const makeSut = (props: CollapsibleBodyProps) => {
 
 describe("GIVEN <Collapsible.Body />", () => {
   describe("WHEN rendered", () => {
-    it("THEN should render the submitted content", async () => {
+    it("THEN should render content", async () => {
+      makeSut({ children: "My content" });
+      expect(screen.queryByText("My content")).toBeDefined();
+    });
+
+    it("THEN should render content and click in button", async () => {
       makeSut({ children: "My content" });
+      expect(screen.queryByText("My content")).toBeNull();
       await fireEvent.click(screen.getByTestId("click"));
-      expect(screen.getByText("My content")).toBeDefined();
+      expect(clickMock).toBeCalledTimes(1);
+    });
+
+    it("THEN should render content from body", async () => {
+      makeSut({ children: "My content" }, true);
+      expect(screen.queryByText("My content")).not.toBeNull();
     });
   });
 });

packages/react/src/composite/Collapsible/src/components/CollapsibleBody/collapsibleBody.types.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from "react";
 
 export interface CollapsibleBodyProperties {
   /**
-   * The content of the accordion body.
+   * The content of the collapsible body.
    * @TJS-type React.ReactNode
    */
   children: ReactNode;

packages/react/src/composite/Collapsible/src/components/CollapsibleItem/collapsibleItem.spec.tsx

@@ -8,7 +8,7 @@ const makeSut = (props: CollapsibleItemProps) => {
   render(<CollapsibleItem {...props} data-testid="element" />);
 };
 
-describe("GIVEN <Cccordion.item />", () => {
+describe("GIVEN <Collapsible.item />", () => {
   describe("WHEN rendered", () => {
     it("THEN should render the submitted content", () => {
       makeSut({ children: "My content" });

packages/react/src/composite/Collapsible/src/components/CollapsibleItem/collapsibleItem.types.ts

@@ -2,7 +2,7 @@ import { ReactNode } from "react";
 
 export interface CollapsibleItemProperties {
   /**
-   * The content of the accordion body.
+   * The content of the collapsible body.
    * @TJS-type React.ReactNode
    */
   children: ReactNode;