test(button-set): add unit tests

tests/ButtonSet.test.svelte

@@ -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>

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>

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");
+  });
+});