diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index f90331dcc9..6134a8793b 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -6,7 +6,7 @@ import { GoPrimitiveDot } from "react-icons/go";
import classNames from "@calcom/lib/classNames";
import type { SVGComponent } from "@calcom/types/SVGComponent";
-const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
+export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
variants: {
variant: {
default: "bg-attention text-attention",
@@ -68,8 +68,8 @@ export const Badge = function Badge(props: BadgeProps) {
const Children = () => (
<>
- {withDot ? : null}
- {StartIcon ? : null}
+ {withDot ? : null}
+ {StartIcon ? : null}
{children}
>
);
diff --git a/packages/ui/components/badge/badge.test.tsx b/packages/ui/components/badge/badge.test.tsx
new file mode 100644
index 0000000000..df08606d5f
--- /dev/null
+++ b/packages/ui/components/badge/badge.test.tsx
@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/* eslint-disable playwright/missing-playwright-await */
+import { render, screen, fireEvent } from "@testing-library/react";
+import { vi } from "vitest";
+
+import { Badge, badgeStyles } from "./Badge";
+
+describe("Tests for Badge component", () => {
+ const variants = [
+ "default",
+ "warning",
+ "orange",
+ "success",
+ "green",
+ "gray",
+ "blue",
+ "red",
+ "error",
+ "grayWithoutHover",
+ ];
+
+ const sizes = ["sm", "md", "lg"];
+ const children = "Test Badge";
+
+ test.each(variants)("Should apply variant class", (variant) => {
+ render({children});
+ const badgeClass = screen.getByText(children).className;
+ const badgeComponentClass = badgeStyles({ variant: variant as any });
+ expect(badgeClass).toEqual(badgeComponentClass);
+ });
+
+ test.each(sizes)("Should apply size class", (size) => {
+ render({children});
+ const badgeClass = screen.getByText(children).className;
+ const badgeComponentClass = badgeStyles({ size: size as any });
+ expect(badgeClass).toEqual(badgeComponentClass);
+ });
+
+ test("Should render without errors", () => {
+ render({children});
+ expect(screen.getByText(children)).toBeInTheDocument();
+ });
+
+ test("Should render WithDot if the prop is true and shouldn't render if is false", () => {
+ const { rerender } = render({children});
+ expect(screen.getByTestId("go-primitive-dot")).toBeInTheDocument();
+
+ rerender({children});
+ expect(screen.queryByTestId("go-primitive-dot")).not.toBeInTheDocument();
+ });
+
+ test("Should render with a startIcon when startIcon prop is provided shouldn't render if is false", () => {
+ const startIcon = () => ;
+ const { rerender } = render({children});
+ expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+
+ rerender({children});
+ expect(screen.queryByTestId("start-icon")).not.toBeInTheDocument();
+ });
+
+ test("Should render as a button when onClick prop is provided and shouldn't if is not", () => {
+ const handleClick = vi.fn();
+ const { rerender } = render({children});
+ const badge = screen.getByText(children);
+ expect(badge.tagName).toBe("BUTTON");
+ fireEvent.click(badge);
+ expect(handleClick).toHaveBeenCalledTimes(1);
+
+ rerender({children});
+ const updateBadge = screen.getByText(children);
+ expect(updateBadge.tagName).not.toBe("BUTTON");
+ });
+
+ test("Should render as a div when onClick prop is not provided", () => {
+ render({children});
+ const badge = screen.getByText(children);
+ expect(badge.tagName).toBe("DIV");
+ });
+
+ test("Should render children when provided", () => {
+ const { getByText } = render(
+
+ Child element 1
+ Child element 2
+
+ );
+
+ expect(getByText("Child element 1")).toBeInTheDocument();
+ expect(getByText("Child element 2")).toBeInTheDocument();
+ });
+});