test: 🧪 add initial test cases for Accordion component

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

@@ -1,10 +1,93 @@
-
 import "@testing-library/jest-dom/extend-expect"
 import { render } from "@testing-library/react"
 import React from "react"
 
-import { Accordion } from "./Accordion"
+import { IconChevronDown } from "@tabler/icons-react"
+import { Accordion } from "."
 
 describe("Accordion component", () => {
-  test("renders properly", () => {})
+  it("should render the accordion container with the correct styles and classes", () => {
+    // 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 { getByTestId } = render(
+      <Accordion
+        data={data}
+        collapseIcon={collapseIcon}
+        color={color}
+        size={size}
+        multiActive={multiActive}
+      />
+    )
+
+    // Assert
+    const container = getByTestId("accordion-container")
+    expect(container).toBeInTheDocument()
+    expect(container).toHaveClass("mx-auto", "flex", "flex-col", "gap-2")
+    expect(container).toHaveClass("w-[600px]")
+  })
+
+  it("should render each item in the data array with the correct styles and classes", () => {
+    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
+
+    const { getAllByTestId } = render(
+      <Accordion
+        data={data}
+        collapseIcon={collapseIcon}
+        color={color}
+        size={size}
+        multiActive={multiActive}
+      />
+    )
+
+    const itemHeaders = getAllByTestId("accordion-item-header")
+    expect(itemHeaders).toHaveLength(2)
+    expect(itemHeaders[0]).toHaveClass(
+      "p-3",
+      "flex",
+      "items-center",
+      "justify-between"
+    )
+    expect(itemHeaders[1]).toHaveClass(
+      "p-3",
+      "flex",
+      "items-center",
+      "justify-between"
+    )
+  })
+
+  it("should handle an empty data array", () => {
+    const data: any[] = []
+    const collapseIcon = <IconChevronDown />
+    const color = "warm"
+    const size = "md"
+    const multiActive = false
+
+    const { queryByTestId } = render(
+      <Accordion
+        data={data}
+        collapseIcon={collapseIcon}
+        color={color}
+        size={size}
+        multiActive={multiActive}
+      />
+    )
+
+    expect(queryByTestId("accordion-item-header")).not.toBeInTheDocument()
+  })
 })

src/components/molecules/Accordion/Accordion.tsx

@@ -25,7 +25,7 @@ const Accordion = ({
   }
 
   return (
-    <div className={styles.container}>
+    <div className={styles.container} data-testId="accordion-container">
       {data.map((item: AccordionDataShape, index: number) => {
         const itemKey = String(index)
         const showItem = activePanel.includes(itemKey)
@@ -51,6 +51,7 @@ const Accordion = ({
               onClick={() => {
                 if (!item.disabled) togglePanel(itemKey)
               }}
+              data-testId="accordion-item-header"
             >
               <span className={styles.haderLabel}>{item.label}</span>
               {collapseIcon ? (

src/components/molecules/Accordion/index.ts

@@ -1,2 +1,2 @@
-export { default } from "./Accordion"
+export { default as Accordion } from "./Accordion"
 export { AccordionDataShape } from "./utils/types"