Update themed component tests

This commit is contained in:
2026-02-10 22:14:48 -05:00
parent 2e54b81d8f
commit 5abceb7bc7
21 changed files with 239 additions and 240 deletions

View File

@@ -21,8 +21,8 @@ describe("WarningButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
expect(button).toHaveClass("border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
expect(button).toHaveClass("bg-warning", "active:bg-warning-dark");
expect(button).toHaveClass("border-warning", "active:border-warning-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className", () => {
@@ -173,8 +173,8 @@ describe("WarningButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-yellow-300/80");
expect(button).toHaveClass("border-yellow-300/80");
expect(button).toHaveClass("bg-warning-light/80");
expect(button).toHaveClass("border-warning-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className when disabled", () => {
@@ -215,8 +215,8 @@ describe("WarningButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-yellow-500", "hover:bg-yellow-600", "active:bg-yellow-700");
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
expect(button).toHaveClass("bg-warning", "active:bg-warning-dark");
expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant", () => {
@@ -225,26 +225,26 @@ describe("WarningButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-600", "active:border-yellow-700");
expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
expect(button).toHaveClass("text-warning", "active:text-warning-dark");
});
it("Renders with outline-ghost variant", () => {
render(<WarningButton variant="outline-ghost">{buttonText}</WarningButton>);
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
expect(button).toHaveClass("border", "border-yellow-500", "hover:border-yellow-500", "active:border-yellow-600");
expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
expect(button).toHaveClass("bg-transparent", "hover:bg-warning", "active:bg-warning-dark");
expect(button).toHaveClass("border", "border-warning", "active:border-warning-dark");
expect(button).toHaveClass("text-warning", "hover:text-black", "active:text-black");
});
it("Renders with ghost variant", () => {
render(<WarningButton variant="ghost">{buttonText}</WarningButton>);
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-yellow-500", "active:bg-yellow-600");
expect(button).toHaveClass("bg-transparent", "hover:bg-warning", "active:bg-warning-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-yellow-500", "hover:text-black", "active:text-black");
expect(button).toHaveClass("text-warning", "hover:text-black", "active:text-black");
});
it("Renders with icon variant", () => {
render(<WarningButton variant="icon">{buttonText}</WarningButton>);
@@ -253,7 +253,7 @@ describe("WarningButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-yellow-500", "hover:text-yellow-600", "active:text-yellow-700");
expect(button).toHaveClass("text-warning", "active:text-warning-dark");
});
});
@@ -263,8 +263,8 @@ describe("WarningButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-yellow-300/80");
expect(button).toHaveClass("border", "border-yellow-300/80");
expect(button).toHaveClass("bg-warning-light/80");
expect(button).toHaveClass("border", "border-warning-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant when disabled", () => {
@@ -273,8 +273,8 @@ describe("WarningButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-yellow-300/80");
expect(button).toHaveClass("text-yellow-300/80");
expect(button).toHaveClass("border", "border-warning-light/80");
expect(button).toHaveClass("text-warning-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<WarningButton variant="outline-ghost" disabled>{buttonText}</WarningButton>);
@@ -282,8 +282,8 @@ describe("WarningButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-warning-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-yellow-300/80");
expect(button).toHaveClass("text-yellow-300/80");
expect(button).toHaveClass("border", "border-warning-light/80");
expect(button).toHaveClass("text-warning-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<WarningButton variant="ghost" disabled>{buttonText}</WarningButton>);
@@ -292,7 +292,7 @@ describe("WarningButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-yellow-300/80");
expect(button).toHaveClass("text-warning-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<WarningButton variant="icon" disabled>{buttonText}</WarningButton>);
@@ -301,6 +301,6 @@ describe("WarningButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-yellow-300/80");
expect(button).toHaveClass("text-warning-light/80");
});
});