Update themed component tests
This commit is contained in:
@@ -21,8 +21,8 @@ describe("SecondaryButton Component", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
expect(button).toHaveClass("cursor-pointer");
|
||||
//Colors
|
||||
expect(button).toHaveClass("bg-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("bg-secondary", "active:bg-secondary-dark");
|
||||
expect(button).toHaveClass("border-secondary", "active:border-secondary-dark");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
|
||||
@@ -177,8 +177,8 @@ describe("SecondaryButton Component Disabled", () => {
|
||||
expect(button).toHaveClass("border");
|
||||
//Disabled state
|
||||
expect(button).not.toHaveClass("cursor-pointer");
|
||||
expect(button).toHaveClass("bg-neutral-300/80");
|
||||
expect(button).toHaveClass("border-neutral-300/80");
|
||||
expect(button).toHaveClass("bg-secondary-light/80");
|
||||
expect(button).toHaveClass("border-secondary-light/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with custom className when disabled", () => {
|
||||
@@ -218,8 +218,8 @@ describe("SecondaryButton Component Variants", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-500", "hover:bg-neutral-600", "active:bg-neutral-700");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("bg-secondary", "active:bg-secondary-dark");
|
||||
expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant", () => {
|
||||
@@ -228,26 +228,26 @@ describe("SecondaryButton Component Variants", () => {
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-600", "active:border-neutral-700");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
|
||||
expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
|
||||
expect(button).toHaveClass("text-secondary", "active:text-secondary-dark");
|
||||
});
|
||||
it("Renders with outline-ghost variant", () => {
|
||||
render(<SecondaryButton variant="outline-ghost">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("border", "border-neutral-500", "hover:border-neutral-500", "active:border-neutral-600");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-secondary", "active:bg-secondary-dark");
|
||||
expect(button).toHaveClass("border", "border-secondary", "active:border-secondary-dark");
|
||||
expect(button).toHaveClass("text-secondary", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with ghost variant", () => {
|
||||
render(<SecondaryButton variant="ghost">{buttonText}</SecondaryButton>);
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-neutral-500", "active:bg-neutral-600");
|
||||
expect(button).toHaveClass("bg-transparent", "hover:bg-secondary", "active:bg-secondary-dark");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-black", "active:text-black");
|
||||
expect(button).toHaveClass("text-secondary", "hover:text-white", "active:text-white");
|
||||
});
|
||||
it("Renders with icon variant", () => {
|
||||
render(<SecondaryButton variant="icon">{buttonText}</SecondaryButton>);
|
||||
@@ -256,7 +256,7 @@ describe("SecondaryButton Component Variants", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-500", "hover:text-neutral-600", "active:text-neutral-700");
|
||||
expect(button).toHaveClass("text-secondary", "active:text-secondary-dark");
|
||||
});
|
||||
});
|
||||
|
||||
@@ -266,8 +266,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
|
||||
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-neutral-300/80");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("bg-secondary-light/80");
|
||||
expect(button).toHaveClass("border", "border-secondary-light/80");
|
||||
expect(button).toHaveClass("text-white");
|
||||
});
|
||||
it("Renders with outline variant when disabled", () => {
|
||||
@@ -276,8 +276,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
expect(button).toHaveClass("border", "border-secondary-light/80");
|
||||
expect(button).toHaveClass("text-secondary-light/80");
|
||||
});
|
||||
it("Renders with outline-ghost variant when disabled", () => {
|
||||
render(<SecondaryButton variant="outline-ghost" disabled>{buttonText}</SecondaryButton>);
|
||||
@@ -285,8 +285,8 @@ describe("SecondaryButton Component Variants Disabled", () => {
|
||||
const button = screen.getByTestId("mattrixwv-secondary-button");
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border", "border-neutral-300/80");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
expect(button).toHaveClass("border", "border-secondary-light/80");
|
||||
expect(button).toHaveClass("text-secondary-light/80");
|
||||
});
|
||||
it("Renders with ghost variant when disabled", () => {
|
||||
render(<SecondaryButton variant="ghost" disabled>{buttonText}</SecondaryButton>);
|
||||
@@ -295,7 +295,7 @@ describe("SecondaryButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
expect(button).toHaveClass("text-secondary-light/80");
|
||||
});
|
||||
it("Renders with icon variant when disabled", () => {
|
||||
render(<SecondaryButton variant="icon" disabled>{buttonText}</SecondaryButton>);
|
||||
@@ -304,6 +304,6 @@ describe("SecondaryButton Component Variants Disabled", () => {
|
||||
expect(button).toBeInTheDocument();
|
||||
expect(button).toHaveClass("bg-transparent");
|
||||
expect(button).toHaveClass("border-none");
|
||||
expect(button).toHaveClass("text-neutral-300/80");
|
||||
expect(button).toHaveClass("text-secondary-light/80");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user