Add pill component

test/component/pill/TertiaryPill.test.tsx

@@ -0,0 +1,84 @@
+import TertiaryPill from "$/component/pill/TertiaryPill";
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+
+const textContent = "Testing";
+
+
+describe("Renders", () => {
+	it("Renders with defaults", () => {
+		render(<TertiaryPill>{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});
+
+describe("Rounding", () => {
+	it("Renders with no rounding", () => {
+		render(<TertiaryPill rounding="none">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+	});
+	it("Renders with small rounding", () => {
+		render(<TertiaryPill rounding="sm">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-sm");
+	});
+	it("Renders with medium rounding", () => {
+		render(<TertiaryPill rounding="md">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded");
+	});
+	it("Renders with large rounding", () => {
+		render(<TertiaryPill rounding="lg">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-lg");
+	});
+	it("Renders with full rounding", () => {
+		render(<TertiaryPill rounding="full">{textContent}</TertiaryPill>);
+
+		//Make sure the pill div is present
+		const pillDiv = screen.getByTestId("mattrixwv-tertiary-pill");
+		expect(pillDiv).toBeInTheDocument();
+		expect(pillDiv).toHaveTextContent(textContent);
+		//Check for the default classes
+		expect(pillDiv).toHaveClass("px-2", "text-sm", "whitespace-nowrap");
+		expect(pillDiv).toHaveClass("bg-tertiary", "text-white");
+		expect(pillDiv).toHaveClass("rounded-full");
+	});
+});