BaseLibraries/MattrixwvReactComponents
1
0
Fork 0
Code Issues 3 Packages Projects Releases Wiki Activity

Update themed component tests

Browse Source
This commit is contained in:
Matthew Ellison
2026-02-10 22:14:48 -05:00
parent 2e54b81d8f
commit 5abceb7bc7
21 changed files with 239 additions and 240 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/component/button/LightButton.tsx
View File

@@ -31,7 +31,7 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
//Outline
{
"border-light active:border-light-dark": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (!disabled),
"border-neutral-400/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
"border-light-light/80": (variant === "standard" || variant === "outline" || variant === "outline-ghost") && (disabled)
},
//Text
{

44
test/component/button/DangerButton.test.tsx
View File

@@ -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");
});
});

44
test/component/button/DarkButton.test.tsx
View File

@@ -21,8 +21,8 @@ describe("DarkButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-black", "hover:bg-neutral-700", "active:bg-neutral-600");
expect(button).toHaveClass("border-black", "hover:border-neutral-700", "active:border-neutral-600");
expect(button).toHaveClass("bg-dark", "active:bg-dark-mid");
expect(button).toHaveClass("border-dark", "active:border-dark-mid");
expect(button).toHaveClass("text-white");
});
@@ -178,8 +178,8 @@ describe("DarkButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-neutral-700/80");
expect(button).toHaveClass("border-neutral-700/80");
expect(button).toHaveClass("bg-dark-mid/80");
expect(button).toHaveClass("border-dark-mid/80");
expect(button).toHaveClass("text-white");
});
it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("DarkButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-black", "hover:bg-neutral-700", "active:bg-neutral-600");
expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
expect(button).toHaveClass("bg-dark", "active:bg-dark-mid");
expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("DarkButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-black", "hover:border-neutral-700", "active:border-neutral-600");
expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
expect(button).toHaveClass("text-dark", "active:text-dark-mid");
});
it("Renders with outline-ghost variant", () => {
render(<DarkButton variant="outline-ghost">{buttonText}</DarkButton>);
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
expect(button).toHaveClass("border", "border-black", "hover:border-black", "active:border-neutral-700");
expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
expect(button).toHaveClass("bg-transparent", "hover:bg-dark", "active:bg-dark-mid");
expect(button).toHaveClass("border", "border-dark", "active:border-dark-mid");
expect(button).toHaveClass("text-dark", "hover:text-white", "active:text-white");
});
it("Renders with ghost variant", () => {
render(<DarkButton variant="ghost">{buttonText}</DarkButton>);
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-black", "active:bg-neutral-700");
expect(button).toHaveClass("bg-transparent", "hover:bg-dark", "active:bg-dark-mid");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-black", "hover:text-white", "active:text-white");
expect(button).toHaveClass("text-dark", "hover:text-white", "active:text-white");
});
it("Renders with icon variant", () => {
render(<DarkButton variant="icon">{buttonText}</DarkButton>);
@@ -258,7 +258,7 @@ describe("DarkButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-black", "hover:text-neutral-700", "active:text-neutral-600");
expect(button).toHaveClass("text-dark", "active:text-dark-mid");
});
});
@@ -268,8 +268,8 @@ describe("DarkButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-neutral-700/80");
expect(button).toHaveClass("border", "border-neutral-700/80");
expect(button).toHaveClass("bg-dark-mid/80");
expect(button).toHaveClass("border", "border-dark-mid/80");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("DarkButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-neutral-700/80");
expect(button).toHaveClass("text-neutral-700/80");
expect(button).toHaveClass("border", "border-dark-mid/80");
expect(button).toHaveClass("text-dark-mid/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<DarkButton variant="outline-ghost" disabled>{buttonText}</DarkButton>);
@@ -287,8 +287,8 @@ describe("DarkButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-dark-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-neutral-700/80");
expect(button).toHaveClass("text-neutral-700/80");
expect(button).toHaveClass("border", "border-dark-mid/80");
expect(button).toHaveClass("text-dark-mid/80");
});
it("Renders with ghost variant when disabled", () => {
render(<DarkButton variant="ghost" disabled>{buttonText}</DarkButton>);
@@ -297,7 +297,7 @@ describe("DarkButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-neutral-700/80");
expect(button).toHaveClass("text-dark-mid/80");
});
it("Renders with icon variant when disabled", () => {
render(<DarkButton variant="icon" disabled>{buttonText}</DarkButton>);
@@ -306,6 +306,6 @@ describe("DarkButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-neutral-700/80");
expect(button).toHaveClass("text-dark-mid/80");
});
});

44
test/component/button/InfoButton.test.tsx
View File

@@ -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");
});
});

44
test/component/button/LightButton.test.tsx
View File

@@ -21,8 +21,8 @@ describe("LightButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-white", "hover:bg-neutral-300", "active:bg-neutral-400");
expect(button).toHaveClass("border-white", "hover:border-neutral-300", "active:border-neutral-400");
expect(button).toHaveClass("bg-light", "active:bg-light-dark");
expect(button).toHaveClass("border-light", "active:border-light-dark");
expect(button).toHaveClass("text-black");
});
@@ -178,8 +178,8 @@ describe("LightButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-neutral-400/80");
expect(button).toHaveClass("border-neutral-400/80");
expect(button).toHaveClass("bg-light-light/80");
expect(button).toHaveClass("border-light-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("LightButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-white", "hover:bg-neutral-300", "active:bg-neutral-400");
expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
expect(button).toHaveClass("bg-light", "active:bg-light-dark");
expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("LightButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-white", "hover:border-neutral-300", "active:border-neutral-400");
expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
expect(button).toHaveClass("text-light", "active:text-light-dark");
});
it("Renders with outline-ghost variant", () => {
render(<LightButton variant="outline-ghost">{buttonText}</LightButton>);
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
expect(button).toHaveClass("border", "border-white", "hover:border-white", "active:border-neutral-300");
expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
expect(button).toHaveClass("bg-transparent", "hover:bg-light", "active:bg-light-dark");
expect(button).toHaveClass("border", "border-light", "active:border-light-dark");
expect(button).toHaveClass("text-light", "hover:text-black", "active:text-black");
});
it("Renders with ghost variant", () => {
render(<LightButton variant="ghost">{buttonText}</LightButton>);
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-white", "active:bg-neutral-300");
expect(button).toHaveClass("bg-transparent", "hover:bg-light", "active:bg-light-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-white", "hover:text-black", "active:text-black");
expect(button).toHaveClass("text-light", "hover:text-black", "active:text-black");
});
it("Renders with icon variant", () => {
render(<LightButton variant="icon">{buttonText}</LightButton>);
@@ -258,7 +258,7 @@ describe("LightButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-white", "hover:text-neutral-300", "active:text-neutral-400");
expect(button).toHaveClass("text-light", "active:text-light-dark");
});
});
@@ -268,8 +268,8 @@ describe("LightButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-neutral-400/80");
expect(button).toHaveClass("border", "border-neutral-400/80");
expect(button).toHaveClass("bg-light-light/80");
expect(button).toHaveClass("border", "border-light-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("LightButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-neutral-400/80");
expect(button).toHaveClass("text-neutral-400/80");
expect(button).toHaveClass("border", "border-light-light/80");
expect(button).toHaveClass("text-light-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<LightButton variant="outline-ghost" disabled>{buttonText}</LightButton>);
@@ -287,8 +287,8 @@ describe("LightButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-light-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-neutral-400/80");
expect(button).toHaveClass("text-neutral-400/80");
expect(button).toHaveClass("border", "border-light-light/80");
expect(button).toHaveClass("text-light-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<LightButton variant="ghost" disabled>{buttonText}</LightButton>);
@@ -297,7 +297,7 @@ describe("LightButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-neutral-400/80");
expect(button).toHaveClass("text-light-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<LightButton variant="icon" disabled>{buttonText}</LightButton>);
@@ -306,6 +306,6 @@ describe("LightButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-neutral-400/80");
expect(button).toHaveClass("text-light-light/80");
});
});

52
test/component/button/MoltenButton.test.tsx
View File

@@ -21,9 +21,9 @@ describe("MoltenButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
expect(button).toHaveClass("border-orange-600", "hover:border-orange-700", "active:border-orange-800");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-molten", "active:bg-molten-dark");
expect(button).toHaveClass("border-molten", "active:border-molten-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className", () => {
@@ -178,9 +178,9 @@ describe("MoltenButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-orange-400/80");
expect(button).toHaveClass("border-orange-400/80");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-molten-light/80");
expect(button).toHaveClass("border-molten-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className when disabled", () => {
const customClass = "custom-molten-button-class";
@@ -220,9 +220,9 @@ describe("MoltenButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-orange-600", "hover:bg-orange-700", "active:bg-orange-800");
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-molten", "active:bg-molten-dark");
expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant", () => {
render(<MoltenButton variant="outline">{buttonText}</MoltenButton>);
@@ -230,26 +230,26 @@ describe("MoltenButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-700", "active:border-orange-800");
expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
expect(button).toHaveClass("text-molten", "active:text-molten-dark");
});
it("Renders with outline-ghost variant", () => {
render(<MoltenButton variant="outline-ghost">{buttonText}</MoltenButton>);
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
expect(button).toHaveClass("border", "border-orange-600", "hover:border-orange-600", "active:border-orange-700");
expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("bg-transparent", "hover:bg-molten", "active:bg-molten-dark");
expect(button).toHaveClass("border", "border-molten", "active:border-molten-dark");
expect(button).toHaveClass("text-molten", "hover:text-black", "active:text-black");
});
it("Renders with ghost variant", () => {
render(<MoltenButton variant="ghost">{buttonText}</MoltenButton>);
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-orange-600", "active:bg-orange-700");
expect(button).toHaveClass("bg-transparent", "hover:bg-molten", "active:bg-molten-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-orange-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("text-molten", "hover:text-black", "active:text-black");
});
it("Renders with icon variant", () => {
render(<MoltenButton variant="icon">{buttonText}</MoltenButton>);
@@ -258,7 +258,7 @@ describe("MoltenButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-orange-600", "hover:text-orange-700", "active:text-orange-800");
expect(button).toHaveClass("text-molten", "active:text-molten-dark");
});
});
@@ -268,9 +268,9 @@ describe("MoltenButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-orange-400/80");
expect(button).toHaveClass("border", "border-orange-400/80");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-molten-light/80");
expect(button).toHaveClass("border", "border-molten-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant when disabled", () => {
render(<MoltenButton variant="outline" disabled>{buttonText}</MoltenButton>);
@@ -278,8 +278,8 @@ describe("MoltenButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-orange-400/80");
expect(button).toHaveClass("text-orange-400/80");
expect(button).toHaveClass("border", "border-molten-light/80");
expect(button).toHaveClass("text-molten-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<MoltenButton variant="outline-ghost" disabled>{buttonText}</MoltenButton>);
@@ -287,8 +287,8 @@ describe("MoltenButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-molten-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-orange-400/80");
expect(button).toHaveClass("text-orange-400/80");
expect(button).toHaveClass("border", "border-molten-light/80");
expect(button).toHaveClass("text-molten-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<MoltenButton variant="ghost" disabled>{buttonText}</MoltenButton>);
@@ -297,7 +297,7 @@ describe("MoltenButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-orange-400/80");
expect(button).toHaveClass("text-molten-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<MoltenButton variant="icon" disabled>{buttonText}</MoltenButton>);
@@ -306,6 +306,6 @@ describe("MoltenButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-orange-400/80");
expect(button).toHaveClass("text-molten-light/80");
});
});

44
test/component/button/PrimaryButton.test.tsx
View File

@@ -21,8 +21,8 @@ describe("PrimaryButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
expect(button).toHaveClass("border-blue-600", "hover:border-blue-700", "active:border-blue-800");
expect(button).toHaveClass("bg-primary", "active:bg-primary-dark");
expect(button).toHaveClass("border-primary", "active:border-primary-dark");
expect(button).toHaveClass("text-white");
});
@@ -178,8 +178,8 @@ describe("PrimaryButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-blue-400/80");
expect(button).toHaveClass("border-blue-400/80");
expect(button).toHaveClass("bg-primary-light/80");
expect(button).toHaveClass("border-primary-light/80");
expect(button).toHaveClass("text-white");
});
it("Renders with custom className when disabled", () => {
@@ -220,8 +220,8 @@ describe("PrimaryButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-blue-600", "hover:bg-blue-700", "active:bg-blue-800");
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
expect(button).toHaveClass("bg-primary", "active:bg-primary-dark");
expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant", () => {
@@ -230,26 +230,26 @@ describe("PrimaryButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-700", "active:border-blue-800");
expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
expect(button).toHaveClass("text-primary", "active:text-primary-dark");
});
it("Renders with outline-ghost variant", () => {
render(<PrimaryButton variant="outline-ghost">{buttonText}</PrimaryButton>);
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
expect(button).toHaveClass("border", "border-blue-600", "hover:border-blue-600", "active:border-blue-700");
expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("bg-transparent", "hover:bg-primary", "active:bg-primary-dark");
expect(button).toHaveClass("border", "border-primary", "active:border-primary-dark");
expect(button).toHaveClass("text-primary", "hover:text-white", "active:text-white");
});
it("Renders with ghost variant", () => {
render(<PrimaryButton variant="ghost">{buttonText}</PrimaryButton>);
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-blue-600", "active:bg-blue-700");
expect(button).toHaveClass("bg-transparent", "hover:bg-primary", "active:bg-primary-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-blue-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("text-primary", "hover:text-white", "active:text-white");
});
it("Renders with icon variant", () => {
render(<PrimaryButton variant="icon">{buttonText}</PrimaryButton>);
@@ -258,7 +258,7 @@ describe("PrimaryButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-blue-600", "hover:text-blue-700", "active:text-blue-800");
expect(button).toHaveClass("text-primary", "active:text-primary-dark");
});
});
@@ -268,8 +268,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-blue-400/80");
expect(button).toHaveClass("border", "border-blue-400/80");
expect(button).toHaveClass("bg-primary-light/80");
expect(button).toHaveClass("border", "border-primary-light/80");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant when disabled", () => {
@@ -278,8 +278,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-blue-400/80");
expect(button).toHaveClass("text-blue-400/80");
expect(button).toHaveClass("border", "border-primary-light/80");
expect(button).toHaveClass("text-primary-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<PrimaryButton variant="outline-ghost" disabled>{buttonText}</PrimaryButton>);
@@ -287,8 +287,8 @@ describe("PrimaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-primary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-blue-400/80");
expect(button).toHaveClass("text-blue-400/80");
expect(button).toHaveClass("border", "border-primary-light/80");
expect(button).toHaveClass("text-primary-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<PrimaryButton variant="ghost" disabled>{buttonText}</PrimaryButton>);
@@ -297,7 +297,7 @@ describe("PrimaryButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-blue-400/80");
expect(button).toHaveClass("text-primary-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<PrimaryButton variant="icon" disabled>{buttonText}</PrimaryButton>);
@@ -306,6 +306,6 @@ describe("PrimaryButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-blue-400/80");
expect(button).toHaveClass("text-primary-light/80");
});
});

44
test/component/button/SecondaryButton.test.tsx
View File

@@ -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");
});
});

52
test/component/button/SuccessButton.test.tsx
View File

@@ -21,9 +21,9 @@ describe("SuccessButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-green-600", "hover:bg-green-700", "active:bg-green-800");
expect(button).toHaveClass("border-green-600", "hover:border-green-700", "active:border-green-800");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-success", "active:bg-success-dark");
expect(button).toHaveClass("border-success", "active:border-success-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className", () => {
@@ -177,9 +177,9 @@ describe("SuccessButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-green-400/80");
expect(button).toHaveClass("border-green-400/80");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-success-light/80");
expect(button).toHaveClass("border-success-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with custom className when disabled", () => {
const customClass = "custom-success-button-class";
@@ -218,9 +218,9 @@ describe("SuccessButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-green-600", "hover:bg-green-700", "active:bg-green-800");
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-success", "active:bg-success-dark");
expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant", () => {
render(<SuccessButton variant="outline">{buttonText}</SuccessButton>);
@@ -228,26 +228,26 @@ describe("SuccessButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-700", "active:border-green-800");
expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
expect(button).toHaveClass("text-success", "active:text-success-dark");
});
it("Renders with outline-ghost variant", () => {
render(<SuccessButton variant="outline-ghost">{buttonText}</SuccessButton>);
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
expect(button).toHaveClass("border", "border-green-600", "hover:border-green-600", "active:border-green-700");
expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("bg-transparent", "hover:bg-success", "active:bg-success-dark");
expect(button).toHaveClass("border", "border-success", "active:border-success-dark");
expect(button).toHaveClass("text-success", "hover:text-black", "active:text-black");
});
it("Renders with ghost variant", () => {
render(<SuccessButton variant="ghost">{buttonText}</SuccessButton>);
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-green-600", "active:bg-green-700");
expect(button).toHaveClass("bg-transparent", "hover:bg-success", "active:bg-success-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-green-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("text-success", "hover:text-black", "active:text-black");
});
it("Renders with icon variant", () => {
render(<SuccessButton variant="icon">{buttonText}</SuccessButton>);
@@ -256,7 +256,7 @@ describe("SuccessButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-green-600", "hover:text-green-700", "active:text-green-800");
expect(button).toHaveClass("text-success", "active:text-success-dark");
});
});
@@ -266,9 +266,9 @@ describe("SuccessButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-green-400/80");
expect(button).toHaveClass("border", "border-green-400/80");
expect(button).toHaveClass("text-white");
expect(button).toHaveClass("bg-success-light/80");
expect(button).toHaveClass("border", "border-success-light/80");
expect(button).toHaveClass("text-black");
});
it("Renders with outline variant when disabled", () => {
render(<SuccessButton variant="outline" disabled>{buttonText}</SuccessButton>);
@@ -276,8 +276,8 @@ describe("SuccessButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-green-400/80");
expect(button).toHaveClass("text-green-400/80");
expect(button).toHaveClass("border", "border-success-light/80");
expect(button).toHaveClass("text-success-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<SuccessButton variant="outline-ghost" disabled>{buttonText}</SuccessButton>);
@@ -285,8 +285,8 @@ describe("SuccessButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-success-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-green-400/80");
expect(button).toHaveClass("text-green-400/80");
expect(button).toHaveClass("border", "border-success-light/80");
expect(button).toHaveClass("text-success-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<SuccessButton variant="ghost" disabled>{buttonText}</SuccessButton>);
@@ -295,7 +295,7 @@ describe("SuccessButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-green-400/80");
expect(button).toHaveClass("text-success-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<SuccessButton variant="icon" disabled>{buttonText}</SuccessButton>);
@@ -304,6 +304,6 @@ describe("SuccessButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-green-400/80");
expect(button).toHaveClass("text-success-light/80");
});
});

44
test/component/button/TertiaryButton.test.tsx
View File

@@ -21,8 +21,8 @@ describe("TertiaryButton Component", () => {
expect(button).toHaveClass("border");
expect(button).toHaveClass("cursor-pointer");
//Colors
expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
expect(button).toHaveClass("border-purple-600", "hover:border-purple-700", "active:border-purple-800");
expect(button).toHaveClass("bg-tertiary", "active:bg-tertiary-dark");
expect(button).toHaveClass("border-tertiary", "active:border-tertiary-dark");
expect(button).toHaveClass("text-white");
});
@@ -177,8 +177,8 @@ describe("TertiaryButton Component Disabled", () => {
expect(button).toHaveClass("border");
//Disabled state
expect(button).not.toHaveClass("cursor-pointer");
expect(button).toHaveClass("bg-purple-400/80");
expect(button).toHaveClass("border-purple-400/80");
expect(button).toHaveClass("bg-tertiary-light/80");
expect(button).toHaveClass("border-tertiary-light/80");
expect(button).toHaveClass("text-white");
});
it("Renders with custom className when disabled", () => {
@@ -218,8 +218,8 @@ describe("TertiaryButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-purple-600", "hover:bg-purple-700", "active:bg-purple-800");
expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
expect(button).toHaveClass("bg-tertiary", "active:bg-tertiary-dark");
expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant", () => {
@@ -228,26 +228,26 @@ describe("TertiaryButton Component Variants", () => {
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-700", "active:border-purple-800");
expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
expect(button).toHaveClass("text-tertiary", "active:text-tertiary-dark");
});
it("Renders with outline-ghost variant", () => {
render(<TertiaryButton variant="outline-ghost">{buttonText}</TertiaryButton>);
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
expect(button).toHaveClass("border", "border-purple-600", "hover:border-purple-600", "active:border-purple-700");
expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("bg-transparent", "hover:bg-tertiary", "active:bg-tertiary-dark");
expect(button).toHaveClass("border", "border-tertiary", "active:border-tertiary-dark");
expect(button).toHaveClass("text-tertiary", "hover:text-white", "active:text-white");
});
it("Renders with ghost variant", () => {
render(<TertiaryButton variant="ghost">{buttonText}</TertiaryButton>);
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent", "hover:bg-purple-600", "active:bg-purple-700");
expect(button).toHaveClass("bg-transparent", "hover:bg-tertiary", "active:bg-tertiary-dark");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-purple-600", "hover:text-white", "active:text-white");
expect(button).toHaveClass("text-tertiary", "hover:text-white", "active:text-white");
});
it("Renders with icon variant", () => {
render(<TertiaryButton variant="icon">{buttonText}</TertiaryButton>);
@@ -256,7 +256,7 @@ describe("TertiaryButton Component Variants", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-purple-600", "hover:text-purple-700", "active:text-purple-800");
expect(button).toHaveClass("text-tertiary", "active:text-tertiary-dark");
});
});
@@ -266,8 +266,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-purple-400/80");
expect(button).toHaveClass("border", "border-purple-400/80");
expect(button).toHaveClass("bg-tertiary-light/80");
expect(button).toHaveClass("border", "border-tertiary-light/80");
expect(button).toHaveClass("text-white");
});
it("Renders with outline variant when disabled", () => {
@@ -276,8 +276,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-purple-400/80");
expect(button).toHaveClass("text-purple-400/80");
expect(button).toHaveClass("border", "border-tertiary-light/80");
expect(button).toHaveClass("text-tertiary-light/80");
});
it("Renders with outline-ghost variant when disabled", () => {
render(<TertiaryButton variant="outline-ghost" disabled>{buttonText}</TertiaryButton>);
@@ -285,8 +285,8 @@ describe("TertiaryButton Component Variants Disabled", () => {
const button = screen.getByTestId("mattrixwv-tertiary-button");
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border", "border-purple-400/80");
expect(button).toHaveClass("text-purple-400/80");
expect(button).toHaveClass("border", "border-tertiary-light/80");
expect(button).toHaveClass("text-tertiary-light/80");
});
it("Renders with ghost variant when disabled", () => {
render(<TertiaryButton variant="ghost" disabled>{buttonText}</TertiaryButton>);
@@ -295,7 +295,7 @@ describe("TertiaryButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-purple-400/80");
expect(button).toHaveClass("text-tertiary-light/80");
});
it("Renders with icon variant when disabled", () => {
render(<TertiaryButton variant="icon" disabled>{buttonText}</TertiaryButton>);
@@ -304,6 +304,6 @@ describe("TertiaryButton Component Variants Disabled", () => {
expect(button).toBeInTheDocument();
expect(button).toHaveClass("bg-transparent");
expect(button).toHaveClass("border-none");
expect(button).toHaveClass("text-purple-400/80");
expect(button).toHaveClass("text-tertiary-light/80");
});
});

44
test/component/button/WarningButton.test.tsx
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");
});
});

2
test/component/message/DangerMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-red-200", "text-red-600");
expect(messageBlock).toHaveClass("bg-danger-xlight", "text-danger-dark");
});
it("Renders with custom className", () => {
const customClassName = "custom-danger-message-block-class";

2
test/component/message/DarkMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-black", "text-white");
expect(messageBlock).toHaveClass("bg-dark", "text-dark-xlight");
});
it("Renders with custom className", () => {
const customClassName = "custom-dark-message-block-class";

2
test/component/message/InfoMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-cyan-100", "text-blue-600");
expect(messageBlock).toHaveClass("bg-info-xlight", "text-info-xdark");
});
it("Renders with custom className", () => {
const customClassName = "custom-info-message-block-class";

2
test/component/message/MoltenMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-orange-100", "text-orange-600");
expect(messageBlock).toHaveClass("bg-molten-xlight", "text-molten-mid");
});
it("Renders with custom className", () => {
const customClassName = "custom-molten-message-block-class";

2
test/component/message/PrimaryMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-blue-200", "text-blue-600");
expect(messageBlock).toHaveClass("bg-primary-xlight", "text-primary-dark");
});
it("Renders with custom className", () => {
const customClassName = "custom-primary-message-block-class";

2
test/component/message/SecondaryMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-neutral-200", "text-neutral-600");
expect(messageBlock).toHaveClass("bg-secondary-xlight", "text-secondary-mid");
});
it("Renders with custom className", () => {
const customClassName = "custom-secondary-message-block-class";

2
test/component/message/SuccessMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-green-100", "text-green-600");
expect(messageBlock).toHaveClass("bg-success-xlight", "text-success-mid");
});
it("Renders with custom className", () => {
const customClassName = "custom-success-message-block-class";

2
test/component/message/TertiaryMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-purple-200", "text-purple-600");
expect(messageBlock).toHaveClass("bg-tertiary-xlight", "text-tertiary-mid");
});
it("Renders with custom className", () => {
const customClassName = "custom-tertiary-message-block-class";

2
test/component/message/WarningMessageBlock.test.tsx
View File

@@ -18,7 +18,7 @@ describe("Renders with defaults", () => {
expect(messageBlock).toHaveClass("px-4", "py-2");
expect(messageBlock).toHaveClass("border");
expect(messageBlock).toHaveClass("rounded-lg");
expect(messageBlock).toHaveClass("bg-yellow-100", "text-yellow-600");
expect(messageBlock).toHaveClass("bg-warning-xlight", "text-warning-dark");
});
it("Renders with custom className", () => {
const customClassName = "custom-warning-message-block-class";

3
vite.config.ts
View File

@@ -61,8 +61,7 @@ export default defineConfig({
publicDir: false,
test: {
globals: true,
root: "test",
environment: "jsdom",
setupFiles: [ "jest.config.ts" ]
setupFiles: [ "test/jest.config.ts" ]
}
});