test: 🧪 add test for accordion toggle

src/components/molecules/Accordion/Accordion.test.tsx

@@ -1,9 +1,9 @@
 import "@testing-library/jest-dom/extend-expect"
-import { render } from "@testing-library/react"
+import { fireEvent, render } from "@testing-library/react"
 import React from "react"
 
 import { IconChevronDown } from "@tabler/icons-react"
-import { Accordion } from "."
+import { Accordion, AccordionDataShape } from "."
 
 describe("Accordion component", () => {
   it("should render the accordion container with the correct styles and classes", () => {
@@ -90,4 +90,79 @@ describe("Accordion component", () => {
 
     expect(queryByTestId("accordion-item-header")).not.toBeInTheDocument()
   })
+
+  it("should toggle the accordion item content only if it's not disabled", () => {
+    // Arrange
+    const data: AccordionDataShape[] = [
+      { label: "Item 1", children: "Content 1" },
+      { label: "Item 2", children: "Content 2", disabled: true },
+    ]
+    const collapseIcon = <IconChevronDown />
+    const color = "warm"
+    const size = "md"
+    const multiActive = false
+
+    // Act
+    const { getAllByTestId, getByText, queryByText } = render(
+      <Accordion
+        data={data}
+        collapseIcon={collapseIcon}
+        color={color}
+        size={size}
+        multiActive={multiActive}
+      />
+    )
+
+    // Assert
+    const itemHeaders = getAllByTestId("accordion-item-header")
+    fireEvent.click(itemHeaders[0])
+    expect(getByText("Content 1")).toBeInTheDocument()
+
+    fireEvent.click(itemHeaders[1])
+    expect(queryByText("Content 2")).not.toBeInTheDocument()
+  })
+
+  // Toggles the accordion item content when clicking on the header.
+  it("should toggle accordion item content when clicking on the header", () => {
+    // Arrange
+    const data = [
+      { label: "Item 1", children: "Content 1" },
+      { label: "Item 2", children: "Content 2" },
+    ]
+    const collapseIcon = <IconChevronDown />
+    const color = "warm"
+    const size = "md"
+    const multiActive = false
+
+    // Act
+    const { getAllByTestId } = render(
+      <Accordion
+        data={data}
+        collapseIcon={collapseIcon}
+        color={color}
+        size={size}
+        multiActive={multiActive}
+      />
+    )
+
+    // Assert
+    const itemHeaders = getAllByTestId("accordion-item-header")
+    const contentContainers = getAllByTestId("accordion-item-content")
+
+    expect(itemHeaders).toHaveLength(2)
+    expect(contentContainers).toHaveLength(2)
+
+    // Click first item, Assert the first item visible
+    fireEvent.click(itemHeaders[0])
+    expect(contentContainers[0]).toBeVisible()
+
+    // Click second item, Assert the first item is hidden
+    fireEvent.click(itemHeaders[1])
+    expect(contentContainers[0]).toHaveClass("max-h-0")
+
+    // Click first item header again, assert first item visible & second item hidden
+    fireEvent.click(itemHeaders[0])
+    expect(contentContainers[1]).toHaveClass("max-h-0")
+    expect(contentContainers[0]).not.toHaveClass("max-h-0")
+  })
 })

src/components/molecules/Accordion/Accordion.tsx

@@ -51,7 +51,7 @@ const Accordion = ({
               onClick={() => {
                 if (!item.disabled) togglePanel(itemKey)
               }}
-              data-testId="accordion-item-header"
+              data-testid="accordion-item-header"
             >
               <span className={styles.haderLabel}>{item.label}</span>
               {collapseIcon ? (
@@ -68,6 +68,7 @@ const Accordion = ({
                   activeClass.contentContainer,
                   styles.contentContainer,
                 ])}
+                data-testid="accordion-item-content"
               >
                 {item.children}
               </div>