From fb5f65078b936f7126613ddc483374d8b37ab4a7 Mon Sep 17 00:00:00 2001
From: asharonbaltazar <58940073+asharonbaltazar@users.noreply.github.com>
Date: Mon, 9 Sep 2024 11:54:42 -0400
Subject: [PATCH] test: basic tests for `Chip` (#753)

Co-authored-by: Mike Dial <michael.dial.4@gmail.com>
---
 react-app/src/components/Chip/Chip.test.tsx | 42 +++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 react-app/src/components/Chip/Chip.test.tsx

diff --git a/react-app/src/components/Chip/Chip.test.tsx b/react-app/src/components/Chip/Chip.test.tsx
new file mode 100644
index 000000000..0e1a15532
--- /dev/null
+++ b/react-app/src/components/Chip/Chip.test.tsx
@@ -0,0 +1,42 @@
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, test, vi } from "vitest";
+import { Chip } from ".";
+
+describe("Chip", () => {
+  test("onChipClick is called", async () => {
+    const mockedOnChipClick = vi.fn();
+
+    const { container } = render(<Chip onChipClick={mockedOnChipClick} />);
+
+    const chipButton = container.getElementsByClassName(
+      "h-8 py-2 cursor-pointer",
+    )[0];
+
+    await userEvent.click(chipButton);
+
+    expect(mockedOnChipClick).toHaveBeenCalled();
+  });
+
+  test("onIconClick is called", async () => {
+    const mockedOnIconClick = vi.fn();
+
+    const { getByRole } = render(<Chip onIconClick={mockedOnIconClick} />);
+
+    const chipButton = getByRole("button");
+
+    await userEvent.click(chipButton);
+
+    expect(mockedOnIconClick).toHaveBeenCalled();
+  });
+
+  test("noIcon or destructive variants do not render an icon", () => {
+    const { queryByRole, rerender } = render(<Chip variant="destructive" />);
+
+    expect(queryByRole("button")).not.toBeInTheDocument();
+
+    rerender(<Chip variant="noIcon" />);
+
+    expect(queryByRole("button")).not.toBeInTheDocument();
+  });
+});