Update themed component tests
This commit is contained in:
@@ -21,8 +21,8 @@ describe("InfoButton Component", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
expect(button).toHaveClass("cursor-pointer");
|
||||
//Colors
|
||||
expect(button).toHaveClass("bg-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
|
||||
expect(button).toHaveClass("border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("bg-info", "active:bg-info-dark");
|
||||
expect(button).toHaveClass("border-info", "active:border-info-dark");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
|
||||
@@ -178,8 +178,8 @@ describe("InfoButton Component Disabled", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
//Disabled state
|
||||
expect(button).not.toHaveClass("cursor-pointer");
|
||||
expect(button).toHaveClass("bg-sky-300/80");
|
||||
expect(button).toHaveClass("border-sky-300/80");
|
||||
expect(button).toHaveClass("bg-info-light/80");
|
||||
expect(button).toHaveClass("border-info-light/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
@@ -220,8 +220,8 @@ describe("InfoButton Component Variants", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-cyan-500", "hover:bg-cyan-600", "active:bg-cyan-700");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("bg-info", "active:bg-info-dark");
|
||||
expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
@@ -230,26 +230,26 @@ describe("InfoButton Component Variants", () => {
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-600", "active:border-cyan-700");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
|
||||
expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
|
||||
expect(button).toHaveClass("text-info", "active:text-info-dark");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<InfoButton variant="outline-ghost">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
|
||||
expect(button).toHaveClass("border", "border-cyan-500", "hover:border-cyan-500", "active:border-cyan-600");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-info", "active:bg-info-dark");
|
||||
expect(button).toHaveClass("border", "border-info", "active:border-info-dark");
|
||||
expect(button).toHaveClass("text-info", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<InfoButton variant="ghost">{buttonText}</InfoButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-cyan-500", "active:bg-cyan-600");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-info", "active:bg-info-dark");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-black", "active:text-black");
|
||||
expect(button).toHaveClass("text-info", "hover:text-black", "active:text-black");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<InfoButton variant="icon">{buttonText}</InfoButton>);
|
||||
@@ -258,7 +258,7 @@ describe("InfoButton Component Variants", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-cyan-500", "hover:text-cyan-600", "active:text-cyan-700");
|
||||
expect(button).toHaveClass("text-info", "active:text-info-dark");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -268,8 +268,8 @@ describe("InfoButton Component Variants Disabled", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-sky-300/80");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("bg-info-light/80");
|
||||
expect(button).toHaveClass("border", "border-info-light/80");
|
||||
expect(button).toHaveClass("text-black");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
@@ -278,8 +278,8 @@ describe("InfoButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
expect(button).toHaveClass("border", "border-info-light/80");
|
||||
expect(button).toHaveClass("text-info-light/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<InfoButton variant="outline-ghost" disabled>{buttonText}</InfoButton>);
|
||||
@@ -287,8 +287,8 @@ describe("InfoButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-info-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-sky-300/80");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
expect(button).toHaveClass("border", "border-info-light/80");
|
||||
expect(button).toHaveClass("text-info-light/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<InfoButton variant="ghost" disabled>{buttonText}</InfoButton>);
|
||||
@@ -297,7 +297,7 @@ describe("InfoButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
expect(button).toHaveClass("text-info-light/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<InfoButton variant="icon" disabled>{buttonText}</InfoButton>);
|
||||
@@ -306,6 +306,6 @@ describe("InfoButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-sky-300/80");
|
||||
expect(button).toHaveClass("text-info-light/80");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user