Update themed component tests
This commit is contained in:
@@ -21,8 +21,8 @@ describe("DangerButton Component", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
expect(button).toHaveClass("cursor-pointer");
|
||||
//Colors
|
||||
expect(button).toHaveClass("bg-red-600", "hover:bg-red-700", "active:bg-red-800");
|
||||
expect(button).toHaveClass("border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("bg-danger", "active:bg-danger-dark");
|
||||
expect(button).toHaveClass("border-danger", "active:border-danger-dark");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
@@ -173,8 +173,8 @@ describe("DangerButton Component Disabled", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
//Disabled state
|
||||
expect(button).not.toHaveClass("cursor-pointer");
|
||||
expect(button).toHaveClass("bg-red-400/80");
|
||||
expect(button).toHaveClass("border-red-400/80");
|
||||
expect(button).toHaveClass("bg-danger-light/80");
|
||||
expect(button).toHaveClass("border-danger-light/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
@@ -215,8 +215,8 @@ describe("DangerButton Component Variants", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-red-600", "hover:bg-red-700", "active:bg-red-800");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("bg-danger", "active:bg-danger-dark");
|
||||
expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
@@ -225,26 +225,26 @@ describe("DangerButton Component Variants", () => {
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-700", "active:border-red-800");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
|
||||
expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
|
||||
expect(button).toHaveClass("text-danger", "active:text-danger-dark");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<DangerButton variant="outline-ghost">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
|
||||
expect(button).toHaveClass("border", "border-red-600", "hover:border-red-600", "active:border-red-700");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-danger", "active:bg-danger-dark");
|
||||
expect(button).toHaveClass("border", "border-danger", "active:border-danger-dark");
|
||||
expect(button).toHaveClass("text-danger", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<DangerButton variant="ghost">{buttonText}</DangerButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-red-600", "active:bg-red-700");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-danger", "active:bg-danger-dark");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-white", "active:text-white");
|
||||
expect(button).toHaveClass("text-danger", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<DangerButton variant="icon">{buttonText}</DangerButton>);
|
||||
@@ -253,7 +253,7 @@ describe("DangerButton Component Variants", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-600", "hover:text-red-700", "active:text-red-800");
|
||||
expect(button).toHaveClass("text-danger", "active:text-danger-dark");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -263,8 +263,8 @@ describe("DangerButton Component Variants Disabled", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-red-400/80");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("bg-danger-light/80");
|
||||
expect(button).toHaveClass("border", "border-danger-light/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
@@ -273,8 +273,8 @@ describe("DangerButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
expect(button).toHaveClass("border", "border-danger-light/80");
|
||||
expect(button).toHaveClass("text-danger-light/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<DangerButton variant="outline-ghost" disabled>{buttonText}</DangerButton>);
|
||||
@@ -282,8 +282,8 @@ describe("DangerButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-danger-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-red-400/80");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
expect(button).toHaveClass("border", "border-danger-light/80");
|
||||
expect(button).toHaveClass("text-danger-light/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<DangerButton variant="ghost" disabled>{buttonText}</DangerButton>);
|
||||
@@ -292,7 +292,7 @@ describe("DangerButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
expect(button).toHaveClass("text-danger-light/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<DangerButton variant="icon" disabled>{buttonText}</DangerButton>);
|
||||
@@ -301,6 +301,6 @@ describe("DangerButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-red-400/80");
|
||||
expect(button).toHaveClass("text-danger-light/80");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user