From b9de4591be8f867e738e174e81e354aad534f2cf Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 12 Apr 2025 13:17:32 -0700
Subject: [PATCH] test(button-set): add unit tests

---
 tests/ButtonSet.test.svelte           | 14 --------------
 tests/ButtonSet/ButtonSet.test.svelte | 10 ++++++++++
 tests/ButtonSet/ButtonSet.test.ts     | 26 ++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 14 deletions(-)
 delete mode 100644 tests/ButtonSet.test.svelte
 create mode 100644 tests/ButtonSet/ButtonSet.test.svelte
 create mode 100644 tests/ButtonSet/ButtonSet.test.ts

diff --git a/tests/ButtonSet.test.svelte b/tests/ButtonSet.test.svelte
deleted file mode 100644
index f6b8bf89..00000000
--- a/tests/ButtonSet.test.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script lang="ts">
-  import { Button, ButtonSet } from "carbon-components-svelte";
-  import Login from "carbon-icons-svelte/lib/Login.svelte";
-</script>
-
-<ButtonSet>
-  <Button kind="secondary">Cancel</Button>
-  <Button>Submit</Button>
-</ButtonSet>
-
-<ButtonSet stacked>
-  <Button icon={Login}>Log in</Button>
-  <Button kind="ghost">Sign up</Button>
-</ButtonSet>
diff --git a/tests/ButtonSet/ButtonSet.test.svelte b/tests/ButtonSet/ButtonSet.test.svelte
new file mode 100644
index 00000000..102ccd53
--- /dev/null
+++ b/tests/ButtonSet/ButtonSet.test.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { ButtonSet, Button } from "carbon-components-svelte";
+
+  export let stacked = false;
+</script>
+
+<ButtonSet data-testid="button-set" {stacked}>
+  <Button kind="secondary">Cancel</Button>
+  <Button>Submit</Button>
+</ButtonSet>
diff --git a/tests/ButtonSet/ButtonSet.test.ts b/tests/ButtonSet/ButtonSet.test.ts
new file mode 100644
index 00000000..706a8c84
--- /dev/null
+++ b/tests/ButtonSet/ButtonSet.test.ts
@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/svelte";
+import ButtonSet from "./ButtonSet.test.svelte";
+
+describe("ButtonSet", () => {
+  it("renders buttons juxtaposed by default", () => {
+    render(ButtonSet);
+
+    const buttonSet = screen.getByTestId("button-set");
+    expect(buttonSet).toBeInTheDocument();
+    expect(buttonSet).toHaveClass("bx--btn-set");
+  });
+
+  it("renders buttons vertically when stacked prop is true", () => {
+    render(ButtonSet, { stacked: true });
+
+    const buttonSet = screen.getByTestId("button-set");
+    expect(buttonSet).toBeInTheDocument();
+    expect(buttonSet).toHaveClass("bx--btn-set");
+    expect(buttonSet).toHaveClass("bx--btn-set--stacked");
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]).toHaveTextContent("Cancel");
+    expect(buttons[1]).toHaveTextContent("Submit");
+  });
+});