test(accordion): add more tests (#2182)

tests/Accordion/Accordion.test.svelte

@@ -1,27 +1,14 @@
 <script lang="ts">
   import { Accordion, AccordionItem } from "carbon-components-svelte";
+
+  export let align: "start" | "end" = "end";
+  export let size: "sm" | "xl" | undefined = undefined;
 </script>
 
-<Accordion>
+<Accordion {align} {size}>
-  <AccordionItem title="Natural Language Classifier">
+  <AccordionItem title="Natural Language Classifier">1</AccordionItem>
-    <p>
+  <AccordionItem title="Natural Language Understanding" disabled
-      Natural Language Classifier uses advanced natural language processing and
+    >2</AccordionItem
-      machine learning techniques to create custom classification models. Users
+  >
-      train their data and the service predicts the appropriate category for the
+  <AccordionItem title="Language Translator">3</AccordionItem>
-      inputted text.
-    </p>
-  </AccordionItem>
-  <AccordionItem title="Natural Language Understanding" disabled>
-    <p>
-      Analyze text to extract meta-data from content such as concepts, entities,
-      emotion, relations, sentiment and more.
-    </p>
-  </AccordionItem>
-  <AccordionItem title="Language Translator">
-    <p>
-      Translate text, documents, and websites from one language to another.
-      Create industry or region-specific translations via the service's
-      customization capability.
-    </p>
-  </AccordionItem>
 </Accordion>

tests/Accordion/Accordion.test.ts

@@ -45,6 +45,10 @@ describe("Accordion", () => {
     // Check disabled state.
     itemIsDisabled(/Natural Language Understanding/);
 
+    // Verify children content is visible initially (expanded state)
+    expect(screen.getByText("1")).toBeVisible();
+    expect(screen.getByText("2")).toBeVisible();
+    expect(screen.getByText("3")).toBeVisible();
     // Test interaction with accordion items.
     const firstItem = screen.getByText("Natural Language Classifier");
     const lastItem = screen.getByText("Language Translator");
@@ -52,11 +56,14 @@ describe("Accordion", () => {
     // Click first item and verify content.
     await user.click(firstItem);
     itemIsExpanded(/Natural Language Classifier/);
+    expect(screen.getByText("1")).toBeVisible();
 
     // Click last item and verify both contents are visible (testing multiple open items).
     await user.click(lastItem);
     itemIsExpanded(/Natural Language Classifier/);
     itemIsExpanded(/Language Translator/);
+    expect(screen.getByText("1")).toBeVisible();
+    expect(screen.getByText("3")).toBeVisible();
   });
 
   it("programmatically expands and collapses all items", async () => {
@@ -67,6 +74,18 @@ describe("Accordion", () => {
     itemIsCollapsed(/Natural Language Understanding/);
     itemIsCollapsed(/Language Translator/);
 
+    expect(
+      screen.queryByText(
+        "Natural Language Classifier uses advanced natural language processing",
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Analyze text to extract meta-data"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Translate text, documents, and websites"),
+    ).not.toBeInTheDocument();
+
     // Click expand button
     const expandButton = screen.getByRole("button", { name: /Expand all/i });
     await user.click(expandButton);
@@ -76,6 +95,13 @@ describe("Accordion", () => {
     itemIsExpanded(/Natural Language Understanding/);
     itemIsExpanded(/Language Translator/);
 
+    // Verify all children content is visible when expanded
+    expect(screen.getByText(/Natural Language Classifier uses/)).toBeVisible();
+    expect(screen.getByText(/Analyze text to extract meta-data/)).toBeVisible();
+    expect(
+      screen.getByText(/Translate text, documents, and websites/),
+    ).toBeVisible();
+
     expect(
       screen.getByRole("button", { name: /Collapse all/i }),
     ).toBeInTheDocument();
@@ -87,6 +113,19 @@ describe("Accordion", () => {
     itemIsCollapsed(/Natural Language Classifier/);
     itemIsCollapsed(/Natural Language Understanding/);
     itemIsCollapsed(/Language Translator/);
+
+    // Verify children content is hidden again when collapsed
+    expect(
+      screen.queryByText(
+        "Natural Language Classifier uses advanced natural language processing",
+      ),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Analyze text to extract meta-data"),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByText("Translate text, documents, and websites"),
+    ).not.toBeInTheDocument();
   });
 
   it("is all disabled", async () => {
@@ -125,4 +164,64 @@ describe("Accordion", () => {
       expect.not.stringContaining("bx--accordion__item--active"),
     );
   });
+
+  it("applies left-aligned chevron styling", () => {
+    render(Accordion, { props: { align: "start" } });
+
+    const accordion = screen.getByRole("list");
+    expect(accordion).toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--start"),
+    );
+    expect(accordion).not.toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--end"),
+    );
+  });
+
+  it("applies right-aligned chevron styling", () => {
+    render(Accordion, { props: { align: "end" } });
+
+    const accordion = screen.getByRole("list");
+    expect(accordion).toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--end"),
+    );
+    expect(accordion).not.toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--start"),
+    );
+  });
+
+  it("defaults to right-aligned chevron when no align prop is specified", () => {
+    render(Accordion);
+
+    const accordion = screen.getByRole("list");
+    expect(accordion).toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--end"),
+    );
+    expect(accordion).not.toHaveAttribute(
+      "class",
+      expect.stringContaining("bx--accordion--start"),
+    );
+  });
+
+  test.each([
+    ["sm", "bx--accordion--sm"],
+    ["xl", "bx--accordion--xl"],
+  ] as const)("should support %s size", (size, expectedClass) => {
+    render(Accordion, { props: { size } });
+
+    const accordion = screen.getByRole("list");
+    expect(accordion).toHaveClass(expectedClass);
+  });
+
+  it("should not apply size classes when size is undefined", () => {
+    render(Accordion, { props: { size: undefined } });
+
+    const accordion = screen.getByRole("list");
+    expect(accordion).not.toHaveClass("bx--accordion--sm");
+    expect(accordion).not.toHaveClass("bx--accordion--xl");
+  });
 });