test: add unit tests for custom slots

metonym · metonym · commit ecaa48da8bf6 · 2025-12-07T12:01:37.000-08:00
diff --git a/tests/ComboBox/ComboBox.slot.test.svelte b/tests/ComboBox/ComboBox.slot.test.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { ComboBox } from "carbon-components-svelte";
+  import type { ComboBoxItem } from "carbon-components-svelte/ComboBox/ComboBox.svelte";
+
+  const items: ComboBoxItem[] = [
+    { id: "0", text: "Option 1" },
+    { id: "1", text: "Option 2" },
+  ];
+</script>
+
+<ComboBox {items} labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</ComboBox>
diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts
@@ -3,6 +3,7 @@ import type ComboBoxComponent from "carbon-components-svelte/ComboBox/ComboBox.s
 import type { ComponentEvents, ComponentProps } from "svelte";
 import { tick } from "svelte";
 import { isSvelte5, user } from "../setup-tests";
+import ComboBoxSlot from "./ComboBox.slot.test.svelte";
 import ComboBox from "./ComboBox.test.svelte";
 import ComboBoxCustom from "./ComboBoxCustom.test.svelte";
 import ComboBoxGenerics from "./ComboBoxGenerics.test.svelte";
@@ -984,4 +985,11 @@ describe("ComboBox", () => {
       expectTypeOf<SelectedItem>().toHaveProperty("text");
     });
   });
+
+  it("supports custom label slot", () => {
+    render(ComboBoxSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/ContextMenu/ContextMenu.test.ts b/tests/ContextMenu/ContextMenu.test.ts
@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import ContextMenu from "./ContextMenu.test.svelte";
+import ContextMenuOptionSlot from "./ContextMenuOption.slot.test.svelte";
 
 describe("ContextMenu", () => {
   beforeEach(() => {
@@ -274,4 +275,11 @@ describe("ContextMenu", () => {
     // Submenu should be positioned at or near 0 (left edge of viewport).
     expect(submenuX).toBeGreaterThanOrEqual(0);
   });
+
+  it("supports custom label slot for ContextMenuOption", () => {
+    render(ContextMenuOptionSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/ContextMenu/ContextMenuOption.slot.test.svelte b/tests/ContextMenu/ContextMenuOption.slot.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ContextMenu, ContextMenuOption } from "carbon-components-svelte";
+</script>
+
+<ContextMenu open={true} x={0} y={0}>
+  <ContextMenuOption labelText="Default label">
+    <span slot="labelText">Custom label content</span>
+  </ContextMenuOption>
+</ContextMenu>
diff --git a/tests/DatePicker/DatePicker.test.ts b/tests/DatePicker/DatePicker.test.ts
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/svelte";
 import { tick } from "svelte";
 import { user } from "../setup-tests";
 import DatePicker from "./DatePicker.test.svelte";
+import DatePickerInputSlot from "./DatePickerInput.slot.test.svelte";
 import DatePickerRange from "./DatePickerRange.test.svelte";
 
 describe("DatePicker", () => {
@@ -192,4 +193,11 @@ describe("DatePicker", () => {
     expect(inputStart).toHaveValue("");
     expect(inputEnd).toHaveValue("");
   });
+
+  it("supports custom label slot for DatePickerInput", () => {
+    render(DatePickerInputSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/DatePicker/DatePickerInput.slot.test.svelte b/tests/DatePicker/DatePickerInput.slot.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
+</script>
+
+<DatePicker datePickerType="simple">
+  <DatePickerInput labelText="Default label">
+    <span slot="labelText">Custom label content</span>
+  </DatePickerInput>
+</DatePicker>
diff --git a/tests/FileUploader/FileUploader.test.ts b/tests/FileUploader/FileUploader.test.ts
@@ -1,6 +1,8 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import FileUploader from "./FileUploader.test.svelte";
+import FileUploaderButtonSlot from "./FileUploaderButton.slot.test.svelte";
+import FileUploaderDropContainerSlot from "./FileUploaderDropContainer.slot.test.svelte";
 
 describe("FileUploader", () => {
   beforeEach(() => {
@@ -180,4 +182,18 @@ describe("FileUploader", () => {
     expect(event.detail[0].name).toBe("file1.txt");
     expect(event.detail[1].name).toBe("file2.txt");
   });
+
+  it("supports custom label slot for FileUploaderButton", () => {
+    render(FileUploaderButtonSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
+
+  it("supports custom label slot for FileUploaderDropContainer", () => {
+    render(FileUploaderDropContainerSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/FileUploader/FileUploaderButton.slot.test.svelte b/tests/FileUploader/FileUploaderButton.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { FileUploaderButton } from "carbon-components-svelte";
+</script>
+
+<FileUploaderButton labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</FileUploaderButton>
diff --git a/tests/FileUploader/FileUploaderDropContainer.slot.test.svelte b/tests/FileUploader/FileUploaderDropContainer.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { FileUploaderDropContainer } from "carbon-components-svelte";
+</script>
+
+<FileUploaderDropContainer labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</FileUploaderDropContainer>
diff --git a/tests/MultiSelect/MultiSelect.slot.test.svelte b/tests/MultiSelect/MultiSelect.slot.test.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { MultiSelect } from "carbon-components-svelte";
+  import type { MultiSelectItem } from "carbon-components-svelte/MultiSelect/MultiSelect.svelte";
+
+  const items: MultiSelectItem[] = [
+    { id: "0", text: "Option 1" },
+    { id: "1", text: "Option 2" },
+  ];
+</script>
+
+<MultiSelect {items} labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</MultiSelect>
diff --git a/tests/MultiSelect/MultiSelect.test.ts b/tests/MultiSelect/MultiSelect.test.ts
@@ -3,6 +3,7 @@ import type MultiSelectComponent from "carbon-components-svelte/MultiSelect/Mult
 import type { MultiSelectItem } from "carbon-components-svelte/MultiSelect/MultiSelect.svelte";
 import type { ComponentEvents, ComponentProps } from "svelte";
 import { user } from "../setup-tests";
+import MultiSelectLabelSlot from "./MultiSelect.slot.test.svelte";
 import MultiSelect from "./MultiSelect.test.svelte";
 import MultiSelectGenerics from "./MultiSelectGenerics.test.svelte";
 import MultiSelectSlot from "./MultiSelectSlot.test.svelte";
@@ -942,4 +943,11 @@ describe("MultiSelect", () => {
       >().toEqualTypeOf<MultiSelectItem>();
     });
   });
+
+  it("supports custom label slot", () => {
+    render(MultiSelectLabelSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/PasswordInput/PasswordInput.slot.test.svelte b/tests/PasswordInput/PasswordInput.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { PasswordInput } from "carbon-components-svelte";
+</script>
+
+<PasswordInput labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</PasswordInput>
diff --git a/tests/PasswordInput/PasswordInput.test.ts b/tests/PasswordInput/PasswordInput.test.ts
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
+import PasswordInputSlot from "./PasswordInput.slot.test.svelte";
 import PasswordInput from "./PasswordInput.test.svelte";
 
 describe("PasswordInput", () => {
@@ -193,4 +194,11 @@ describe("PasswordInput", () => {
       expect(consoleLog).toHaveBeenCalledWith("blur");
     });
   });
+
+  it("supports custom label slot", () => {
+    render(PasswordInputSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/ProgressBar/ProgressBar.slot.test.svelte b/tests/ProgressBar/ProgressBar.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ProgressBar } from "carbon-components-svelte";
+</script>
+
+<ProgressBar labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</ProgressBar>
diff --git a/tests/ProgressBar/ProgressBar.test.ts b/tests/ProgressBar/ProgressBar.test.ts
@@ -1,4 +1,5 @@
 import { render, screen, within } from "@testing-library/svelte";
+import ProgressBarSlot from "./ProgressBar.slot.test.svelte";
 import ProgressBar from "./ProgressBar.test.svelte";
 
 describe("ProgressBar", () => {
@@ -82,4 +83,11 @@ describe("ProgressBar", () => {
     );
     expect(underZero).toHaveAttribute("aria-valuenow", "0");
   });
+
+  it("supports custom label slot", () => {
+    render(ProgressBarSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/Search/Search.slot.test.svelte b/tests/Search/Search.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Search } from "carbon-components-svelte";
+</script>
+
+<Search labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</Search>
diff --git a/tests/Search/Search.test.ts b/tests/Search/Search.test.ts
@@ -1,5 +1,6 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
+import SearchSlot from "./Search.slot.test.svelte";
 import Search from "./Search.test.svelte";
 import SearchExpandable from "./SearchExpandable.test.svelte";
 import SearchSkeleton from "./SearchSkeleton.test.svelte";
@@ -79,4 +80,11 @@ describe("Search", () => {
     // Small (sm) skeleton
     expect(skeletons[2]).toHaveClass("bx--search--sm");
   });
+
+  it("supports custom label slot", () => {
+    render(SearchSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/Select/Select.slot.test.svelte b/tests/Select/Select.slot.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { Select, SelectItem } from "carbon-components-svelte";
+</script>
+
+<Select labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+  <SelectItem value="option1" text="Option 1" />
+  <SelectItem value="option2" text="Option 2" />
+</Select>
diff --git a/tests/Select/Select.test.ts b/tests/Select/Select.test.ts
@@ -3,6 +3,7 @@ import { user } from "../setup-tests";
 import SelectFalsy from "./Select.falsy.test.svelte";
 import SelectGroup from "./Select.group.test.svelte";
 import SelectSkeleton from "./Select.skeleton.test.svelte";
+import SelectSlot from "./Select.slot.test.svelte";
 import Select from "./Select.test.svelte";
 
 describe("Select", () => {
@@ -309,4 +310,11 @@ describe("Select Generics", () => {
     type SelectedPropType = UnionValue | undefined;
     expectTypeOf<SelectedPropType>().toEqualTypeOf<UnionValue | undefined>();
   });
+
+  it("supports custom label slot", () => {
+    render(SelectSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/TimePicker/TimePicker.test.ts b/tests/TimePicker/TimePicker.test.ts
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import TimePicker from "./TimePicker.test.svelte";
 import TimePickerCustom from "./TimePickerCustom.test.svelte";
+import TimePickerSelectSlot from "./TimePickerSelect.slot.test.svelte";
 
 describe("TimePicker", () => {
   it("should render with default props", () => {
@@ -180,4 +181,11 @@ describe("TimePicker", () => {
     expect(selects[0]).toHaveValue("pm");
     expect(selects[1]).toHaveValue("pdt");
   });
+
+  it("supports custom label slot for TimePickerSelect", () => {
+    render(TimePickerSelectSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/TimePicker/TimePickerSelect.slot.test.svelte b/tests/TimePicker/TimePickerSelect.slot.test.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { SelectItem, TimePickerSelect } from "carbon-components-svelte";
+</script>
+
+<TimePickerSelect labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+  <SelectItem value="option1" text="Option 1" />
+  <SelectItem value="option2" text="Option 2" />
+</TimePickerSelect>
diff --git a/tests/Toggle/Toggle.test.ts b/tests/Toggle/Toggle.test.ts
@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/svelte";
 import { user } from "../setup-tests";
 import Toggle from "./Toggle.test.svelte";
+import ToggleSkeletonSlot from "./ToggleSkeleton.slot.test.svelte";
 
 describe("Toggle", () => {
   const getToggle = (label: string) =>
@@ -277,4 +278,11 @@ describe("Toggle", () => {
     assert(component.ref);
     expect(component.ref.type).toBe("checkbox");
   });
+
+  it("supports custom label slot for ToggleSkeleton", () => {
+    render(ToggleSkeletonSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
diff --git a/tests/Toggle/ToggleSkeleton.slot.test.svelte b/tests/Toggle/ToggleSkeleton.slot.test.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ToggleSkeleton } from "carbon-components-svelte";
+</script>
+
+<ToggleSkeleton labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</ToggleSkeleton>
diff --git a/tests/TreeView/TreeView.slot.test.svelte b/tests/TreeView/TreeView.slot.test.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { TreeView } from "carbon-components-svelte";
+  import type { ComponentProps } from "svelte";
+
+  const nodes: ComponentProps<TreeView>["nodes"] = [
+    { id: 0, text: "Node 1" },
+    { id: 1, text: "Node 2" },
+  ];
+</script>
+
+<TreeView {nodes} labelText="Default label">
+  <span slot="labelText">Custom label content</span>
+</TreeView>
diff --git a/tests/TreeView/TreeView.test.ts b/tests/TreeView/TreeView.test.ts
@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/svelte";
 import type { ComponentType as SvelteComponentType } from "svelte";
 import { user } from "../setup-tests";
 import TreeViewHierarchy from "./TreeView.hierarchy.test.svelte";
+import TreeViewSlot from "./TreeView.slot.test.svelte";
 import TreeView from "./TreeView.test.svelte";
 
 const testCases = [
@@ -290,4 +291,11 @@ describe("TreeView Generics", () => {
       SvelteComponentType | undefined
     >();
   });
+
+  it("supports custom label slot", () => {
+    render(TreeViewSlot);
+
+    const customLabel = screen.getByText("Custom label content");
+    expect(customLabel).toBeInTheDocument();
+  });
 });
