test(data-table): add more unit tests

Author: metonym

tests/DataTable/DataTable.test.ts

@@ -2,6 +2,9 @@ import { render, screen } from "@testing-library/svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import DataTable from "./DataTable.test.svelte";
+import DataTableCustomSlots from "./DataTableCustomSlots.test.svelte";
+import DataTableCustomDescription from "./DataTableCustomDescription.test.svelte";
+import DataTableCustomBoth from "./DataTableCustomBoth.test.svelte";
 
 describe("DataTable", () => {
   beforeEach(() => {
@@ -857,4 +860,39 @@ describe("DataTable", () => {
 
     expect(component).toBeTruthy();
   });
+
+  // Regression test for https://github.com/carbon-design-system/carbon-components-svelte/issues/1594
+  it("renders custom title element with props", () => {
+    render(DataTableCustomSlots);
+
+    const customTitle = screen.getByRole("heading", { level: 2 });
+    expect(customTitle).toBeInTheDocument();
+    expect(customTitle).toHaveTextContent("Custom Title");
+    expect(customTitle).toHaveClass("bx--data-table-header__title");
+  });
+
+  it("renders custom description element with props", () => {
+    const { container } = render(DataTableCustomDescription);
+
+    const customDescription = container.querySelector(
+      "div.bx--data-table-header__description",
+    );
+    expect(customDescription).toBeInTheDocument();
+    expect(customDescription).toHaveTextContent("Custom Description");
+    expect(customDescription).toHaveClass("bx--data-table-header__description");
+  });
+
+  it("renders both custom title and description elements", () => {
+    const { container } = render(DataTableCustomBoth);
+
+    const customTitle = screen.getByRole("heading", { level: 2 });
+    expect(customTitle).toBeInTheDocument();
+    expect(customTitle).toHaveClass("bx--data-table-header__title");
+
+    const customDescription = container.querySelector(
+      "div.bx--data-table-header__description",
+    );
+    expect(customDescription).toBeInTheDocument();
+    expect(customDescription).toHaveClass("bx--data-table-header__description");
+  });
 });

tests/DataTable/DataTableCustomBoth.test.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+  ] as const;
+
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+    },
+  ];
+</script>
+
+<DataTable {headers} {rows}>
+  <h2 slot="title" let:props {...props}>Custom Title</h2>
+  <div slot="description" let:props {...props}>Custom Description</div>
+</DataTable>

tests/DataTable/DataTableCustomDescription.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+  ] as const;
+
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+    },
+  ];
+</script>
+
+<DataTable {headers} {rows}>
+  <div slot="description" let:props {...props}>Custom Description</div>
+</DataTable>

tests/DataTable/DataTableCustomSlots.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { DataTable } from "carbon-components-svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+  ] as const;
+
+  const rows = [
+    {
+      id: "a",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+    },
+  ];
+</script>
+
+<DataTable {headers} {rows}>
+  <h2 slot="title" let:props {...props}>Custom Title</h2>
+</DataTable>