105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
/* eslint-disable formatjs/no-literal-string-in-jsx */
|
|
import { describe, expect, it, afterEach } from "vitest"
|
|
import { render, screen, cleanup } from "@testing-library/react"
|
|
|
|
import { ChipStatic } from "./ChipStatic"
|
|
|
|
afterEach(() => {
|
|
cleanup()
|
|
})
|
|
|
|
describe("ChipStatic", () => {
|
|
describe("rendering", () => {
|
|
it("renders as a span element", () => {
|
|
render(<ChipStatic>Static Chip</ChipStatic>)
|
|
const chip = screen.getByText("Static Chip")
|
|
expect(chip).toBeTruthy()
|
|
expect(chip.tagName).toBe("SPAN")
|
|
})
|
|
|
|
it("renders children content", () => {
|
|
render(<ChipStatic>Chip Content</ChipStatic>)
|
|
expect(screen.getByText("Chip Content")).toBeTruthy()
|
|
})
|
|
|
|
it("renders with multiple children", () => {
|
|
render(
|
|
<ChipStatic>
|
|
<span>Icon</span>
|
|
Label
|
|
</ChipStatic>
|
|
)
|
|
expect(screen.getByText("Icon")).toBeTruthy()
|
|
expect(screen.getByText("Label")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("color variants", () => {
|
|
it("renders Neutral color (default)", () => {
|
|
render(<ChipStatic color="Neutral">Neutral</ChipStatic>)
|
|
expect(screen.getByText("Neutral")).toBeTruthy()
|
|
})
|
|
|
|
it("renders Subtle color", () => {
|
|
render(<ChipStatic color="Subtle">Subtle</ChipStatic>)
|
|
expect(screen.getByText("Subtle")).toBeTruthy()
|
|
})
|
|
|
|
it("renders Disabled color", () => {
|
|
render(<ChipStatic color="Disabled">Disabled</ChipStatic>)
|
|
expect(screen.getByText("Disabled")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("sizes", () => {
|
|
it("renders xs size", () => {
|
|
render(<ChipStatic size="xs">Extra Small</ChipStatic>)
|
|
expect(screen.getByText("Extra Small")).toBeTruthy()
|
|
})
|
|
|
|
it("renders sm size (default)", () => {
|
|
render(<ChipStatic size="sm">Small</ChipStatic>)
|
|
expect(screen.getByText("Small")).toBeTruthy()
|
|
})
|
|
|
|
it("renders lg size", () => {
|
|
render(<ChipStatic size="lg">Large</ChipStatic>)
|
|
expect(screen.getByText("Large")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("typography", () => {
|
|
it("uses uppercase typography by default", () => {
|
|
render(<ChipStatic>Default Case</ChipStatic>)
|
|
expect(screen.getByText("Default Case")).toBeTruthy()
|
|
})
|
|
|
|
it("uses lowercase typography when lowerCase is true", () => {
|
|
render(<ChipStatic lowerCase>Lower Case</ChipStatic>)
|
|
expect(screen.getByText("Lower Case")).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe("props", () => {
|
|
it("applies custom className", () => {
|
|
render(<ChipStatic className="custom-class">Styled</ChipStatic>)
|
|
const chip = screen.getByText("Styled")
|
|
expect(chip.className).toContain("custom-class")
|
|
})
|
|
})
|
|
|
|
describe("edge cases", () => {
|
|
it("handles empty string children", () => {
|
|
const emptyString = ""
|
|
const { container } = render(<ChipStatic>{emptyString}</ChipStatic>)
|
|
const span = container.querySelector("span")
|
|
expect(span).toBeTruthy()
|
|
})
|
|
|
|
it("handles numeric children", () => {
|
|
render(<ChipStatic>{42}</ChipStatic>)
|
|
expect(screen.getByText("42")).toBeTruthy()
|
|
})
|
|
})
|
|
})
|