85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
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");
|
|
});
|
|
});
|