mirror of
https://bitbucket.org/Mattrixwv/mattrixwvreactcomponents.git
synced 2025-12-06 13:43:59 -05:00
Add message block tests
This commit is contained in:
1
.gitignore
vendored
1
.gitignore
vendored
@@ -7,6 +7,7 @@ dist
|
||||
*.local
|
||||
.tanstack
|
||||
*.tgz
|
||||
test/coverage
|
||||
|
||||
# Editor directories and files
|
||||
.vscode
|
||||
|
||||
@@ -4,7 +4,7 @@ import InfoMessageBlock from "./message/InfoMessageBlock";
|
||||
import LightMessageBlock from "./message/LightMessageBlock";
|
||||
import MessageBlock from "./message/MessageBlock";
|
||||
import MoltenMessageBlock from "./message/MoltenMessageBlock";
|
||||
import PrimaryMessageBlock from "./message/PrimaryMessagteBlock";
|
||||
import PrimaryMessageBlock from "./message/PrimaryMessageBlock";
|
||||
import SecondaryMessageBlock from "./message/SecondaryMessageBlock";
|
||||
import SuccessMessageBlock from "./message/SuccessMessageBlock";
|
||||
import TertiaryMessageBlock from "./message/TertiaryMessageBlock";
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function DangerMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-danger-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function DarkMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-dark-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function InfoMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-info-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function LightMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-light-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -13,24 +13,26 @@ export default function MessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<div
|
||||
data-testid="mattrixwv-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
"px-4 py-2",
|
||||
{
|
||||
"border-0": outline === "none",
|
||||
"border-1": outline === "sm",
|
||||
"border": outline === "sm",
|
||||
"border-2": outline === "md",
|
||||
"border-3": outline === "lg"
|
||||
},
|
||||
{
|
||||
"rounded-none": rounded === "none",
|
||||
"rounded-xs": rounded === "xs",
|
||||
"rounded": rounded === "md",
|
||||
"rounded-sm": rounded === "sm",
|
||||
"rounded-md": rounded === "md",
|
||||
"rounded-lg": rounded === "lg",
|
||||
"rounded-xl": rounded === "xl"
|
||||
}
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function MoltenMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-molten-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function PrimaryMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-primary-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
@@ -12,6 +12,7 @@ export default function SecondaryMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-secondary-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function SuccessMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-success-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function TertiaryMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-tertiary-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
@@ -12,6 +12,7 @@ export default function WarningMessageBlock(props: MessageBlockProps){
|
||||
|
||||
return (
|
||||
<MessageBlock
|
||||
data-testid="mattrixwv-warning-message-block"
|
||||
{...messageProps}
|
||||
className={clsx(
|
||||
className,
|
||||
|
||||
175
package-lock.json
generated
175
package-lock.json
generated
@@ -21,6 +21,7 @@
|
||||
"@types/react": "^19.2.4",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"@vitest/coverage-v8": "^4.0.10",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
@@ -610,6 +611,16 @@
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@bcoe/v8-coverage": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-1.0.2.tgz",
|
||||
"integrity": "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@csstools/color-helpers": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz",
|
||||
@@ -3678,6 +3689,38 @@
|
||||
"vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/coverage-v8": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.10.tgz",
|
||||
"integrity": "sha512-g+brmtoKa/sAeIohNJnnWhnHtU6GuqqVOSQ4SxDIPcgZWZyhJs5RmF5LpqXs8Kq64lANP+vnbn5JLzhLj/G56g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@bcoe/v8-coverage": "^1.0.2",
|
||||
"@vitest/utils": "4.0.10",
|
||||
"ast-v8-to-istanbul": "^0.3.8",
|
||||
"debug": "^4.4.3",
|
||||
"istanbul-lib-coverage": "^3.2.2",
|
||||
"istanbul-lib-report": "^3.0.1",
|
||||
"istanbul-lib-source-maps": "^5.0.6",
|
||||
"istanbul-reports": "^3.2.0",
|
||||
"magicast": "^0.5.1",
|
||||
"std-env": "^3.10.0",
|
||||
"tinyrainbow": "^3.0.3"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/vitest"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@vitest/browser": "4.0.10",
|
||||
"vitest": "4.0.10"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@vitest/browser": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@vitest/expect": {
|
||||
"version": "4.0.10",
|
||||
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.10.tgz",
|
||||
@@ -4247,6 +4290,36 @@
|
||||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/ast-v8-to-istanbul": {
|
||||
"version": "0.3.8",
|
||||
"resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.8.tgz",
|
||||
"integrity": "sha512-szgSZqUxI5T8mLKvS7WTjF9is+MVbOeLADU73IseOcrqhxr/VAvy6wfoVE39KnKzA7JRhjF5eUagNlHwvZPlKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/trace-mapping": "^0.3.31",
|
||||
"estree-walker": "^3.0.3",
|
||||
"js-tokens": "^9.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/ast-v8-to-istanbul/node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.31",
|
||||
"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
|
||||
"integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@jridgewell/resolve-uri": "^3.1.0",
|
||||
"@jridgewell/sourcemap-codec": "^1.4.14"
|
||||
}
|
||||
},
|
||||
"node_modules/ast-v8-to-istanbul/node_modules/js-tokens": {
|
||||
"version": "9.0.1",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
|
||||
"integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/astring": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
|
||||
@@ -5942,6 +6015,13 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/html-escaper": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
|
||||
"integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/http-proxy-agent": {
|
||||
"version": "7.0.2",
|
||||
"resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
|
||||
@@ -6490,6 +6570,60 @@
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/istanbul-lib-coverage": {
|
||||
"version": "3.2.2",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
|
||||
"integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-lib-report": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz",
|
||||
"integrity": "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"istanbul-lib-coverage": "^3.0.0",
|
||||
"make-dir": "^4.0.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-lib-source-maps": {
|
||||
"version": "5.0.6",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
|
||||
"integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"@jridgewell/trace-mapping": "^0.3.23",
|
||||
"debug": "^4.1.1",
|
||||
"istanbul-lib-coverage": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/istanbul-reports": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
|
||||
"integrity": "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"dependencies": {
|
||||
"html-escaper": "^2.0.0",
|
||||
"istanbul-lib-report": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/iterator.prototype": {
|
||||
"version": "1.1.5",
|
||||
"resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
|
||||
@@ -7056,6 +7190,47 @@
|
||||
"@jridgewell/sourcemap-codec": "^1.5.5"
|
||||
}
|
||||
},
|
||||
"node_modules/magicast": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz",
|
||||
"integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/parser": "^7.28.5",
|
||||
"@babel/types": "^7.28.5",
|
||||
"source-map-js": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
|
||||
"integrity": "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"semver": "^7.5.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/make-dir/node_modules/semver": {
|
||||
"version": "7.7.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
|
||||
"integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
"semver": "bin/semver.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
},
|
||||
"node_modules/math-intrinsics": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
|
||||
|
||||
@@ -39,6 +39,7 @@
|
||||
"@types/react": "^19.2.4",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^5.1.1",
|
||||
"@vitest/coverage-v8": "^4.0.10",
|
||||
"eslint": "^9.39.1",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
|
||||
153
test/component/message/DangerMessageBlock.test.tsx
Normal file
153
test/component/message/DangerMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import DangerMessageBlock from "$/component/message/DangerMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a danger message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<DangerMessageBlock>{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-danger-message-block-class";
|
||||
|
||||
render(<DangerMessageBlock className={customClassName}>{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Danger Message Block Aria Label";
|
||||
|
||||
render(<DangerMessageBlock aria-label={ariaLabel}>{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<DangerMessageBlock outline="none">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<DangerMessageBlock outline="sm">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<DangerMessageBlock outline="md">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<DangerMessageBlock outline="lg">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<DangerMessageBlock rounded="none">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<DangerMessageBlock rounded="xs">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<DangerMessageBlock rounded="sm">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<DangerMessageBlock rounded="md">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<DangerMessageBlock rounded="lg">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<DangerMessageBlock rounded="xl">{messageText}</DangerMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-danger-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/DarkMessageBlock.test.tsx
Normal file
153
test/component/message/DarkMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import DarkMessageBlock from "$/component/message/DarkMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a dark message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<DarkMessageBlock>{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
expect(messageBlock).toHaveClass("px-4", "py-2");
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
expect(messageBlock).toHaveClass("bg-black", "text-white");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-dark-message-block-class";
|
||||
|
||||
render(<DarkMessageBlock className={customClassName}>{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Dark Message Block Aria Label";
|
||||
|
||||
render(<DarkMessageBlock aria-label={ariaLabel}>{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<DarkMessageBlock outline="none">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<DarkMessageBlock outline="sm">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<DarkMessageBlock outline="md">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<DarkMessageBlock outline="lg">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<DarkMessageBlock rounded="none">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<DarkMessageBlock rounded="xs">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<DarkMessageBlock rounded="sm">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<DarkMessageBlock rounded="md">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<DarkMessageBlock rounded="lg">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<DarkMessageBlock rounded="xl">{messageText}</DarkMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-dark-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/InfoMessageBlock.test.tsx
Normal file
153
test/component/message/InfoMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import InfoMessageBlock from "$/component/message/InfoMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is an info message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<InfoMessageBlock>{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-info-message-block-class";
|
||||
|
||||
render(<InfoMessageBlock className={customClassName}>{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Info Message Block Aria Label";
|
||||
|
||||
render(<InfoMessageBlock aria-label={ariaLabel}>{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<InfoMessageBlock outline="none">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<InfoMessageBlock outline="sm">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<InfoMessageBlock outline="md">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<InfoMessageBlock outline="lg">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<InfoMessageBlock rounded="none">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<InfoMessageBlock rounded="xs">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<InfoMessageBlock rounded="sm">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<InfoMessageBlock rounded="md">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<InfoMessageBlock rounded="lg">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<InfoMessageBlock rounded="xl">{messageText}</InfoMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-info-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/LightMessageBlock.test.tsx
Normal file
153
test/component/message/LightMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import LightMessageBlock from "$/component/message/LightMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a light message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<LightMessageBlock>{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
expect(messageBlock).toHaveClass("px-4", "py-2");
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
expect(messageBlock).toHaveClass("bg-white", "text-black");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-light-message-block-class";
|
||||
|
||||
render(<LightMessageBlock className={customClassName}>{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Light Message Block Aria Label";
|
||||
|
||||
render(<LightMessageBlock aria-label={ariaLabel}>{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<LightMessageBlock outline="none">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<LightMessageBlock outline="sm">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<LightMessageBlock outline="md">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<LightMessageBlock outline="lg">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<LightMessageBlock rounded="none">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<LightMessageBlock rounded="xs">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<LightMessageBlock rounded="sm">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<LightMessageBlock rounded="md">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<LightMessageBlock rounded="lg">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<LightMessageBlock rounded="xl">{messageText}</LightMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-light-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
150
test/component/message/MessageBlock.test.tsx
Normal file
150
test/component/message/MessageBlock.test.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
import MessageBlock from "$/component/message/MessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a message block component used for displaying messages to users.";
|
||||
|
||||
|
||||
describe("Message Block", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<MessageBlock>{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
expect(messageBlock).toHaveClass("px-4", "py-2");
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-message-block-class";
|
||||
|
||||
render(<MessageBlock className={customClassName}>{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Message Block Aria Label";
|
||||
|
||||
render(<MessageBlock aria-label={ariaLabel}>{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<MessageBlock outline="none">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<MessageBlock outline="sm">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<MessageBlock outline="md">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<MessageBlock outline="lg">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<MessageBlock rounded="none">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<MessageBlock rounded="xs">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<MessageBlock rounded="sm">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<MessageBlock rounded="md">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<MessageBlock rounded="lg">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<MessageBlock rounded="xl">{messageText}</MessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
});
|
||||
153
test/component/message/MoltenMessageBlock.test.tsx
Normal file
153
test/component/message/MoltenMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import MoltenMessageBlock from "$/component/message/MoltenMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a molten message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<MoltenMessageBlock>{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-molten-message-block-class";
|
||||
|
||||
render(<MoltenMessageBlock className={customClassName}>{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Molten Message Block Aria Label";
|
||||
|
||||
render(<MoltenMessageBlock aria-label={ariaLabel}>{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<MoltenMessageBlock outline="none">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<MoltenMessageBlock outline="sm">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<MoltenMessageBlock outline="md">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<MoltenMessageBlock outline="lg">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="none">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="xs">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="sm">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="md">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="lg">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<MoltenMessageBlock rounded="xl">{messageText}</MoltenMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-molten-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/PrimaryMessageBlock.test.tsx
Normal file
153
test/component/message/PrimaryMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import PrimaryMessageBlock from "$/component/message/PrimaryMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a primary message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<PrimaryMessageBlock>{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-primary-message-block-class";
|
||||
|
||||
render(<PrimaryMessageBlock className={customClassName}>{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Primary Message Block Aria Label";
|
||||
|
||||
render(<PrimaryMessageBlock aria-label={ariaLabel}>{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<PrimaryMessageBlock outline="none">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<PrimaryMessageBlock outline="sm">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<PrimaryMessageBlock outline="md">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<PrimaryMessageBlock outline="lg">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="none">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="xs">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="sm">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="md">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="lg">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<PrimaryMessageBlock rounded="xl">{messageText}</PrimaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-primary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/SecondaryMessageBlock.test.tsx
Normal file
153
test/component/message/SecondaryMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import SecondaryMessageBlock from "$/component/message/SecondaryMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a secondary message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<SecondaryMessageBlock>{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-secondary-message-block-class";
|
||||
|
||||
render(<SecondaryMessageBlock className={customClassName}>{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Secondary Message Block Aria Label";
|
||||
|
||||
render(<SecondaryMessageBlock aria-label={ariaLabel}>{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<SecondaryMessageBlock outline="none">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<SecondaryMessageBlock outline="sm">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<SecondaryMessageBlock outline="md">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<SecondaryMessageBlock outline="lg">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="none">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="xs">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="sm">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="md">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="lg">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<SecondaryMessageBlock rounded="xl">{messageText}</SecondaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-secondary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/SuccessMessageBlock.test.tsx
Normal file
153
test/component/message/SuccessMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import SuccessMessageBlock from "$/component/message/SuccessMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a success message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<SuccessMessageBlock>{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-success-message-block-class";
|
||||
|
||||
render(<SuccessMessageBlock className={customClassName}>{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Success Message Block Aria Label";
|
||||
|
||||
render(<SuccessMessageBlock aria-label={ariaLabel}>{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<SuccessMessageBlock outline="none">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<SuccessMessageBlock outline="sm">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<SuccessMessageBlock outline="md">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<SuccessMessageBlock outline="lg">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="none">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="xs">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="sm">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="md">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="lg">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<SuccessMessageBlock rounded="xl">{messageText}</SuccessMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-success-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/TertiaryMessageBlock.test.tsx
Normal file
153
test/component/message/TertiaryMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import TertiaryMessageBlock from "$/component/message/TertiaryMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a tertiary message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<TertiaryMessageBlock>{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-tertiary-message-block-class";
|
||||
|
||||
render(<TertiaryMessageBlock className={customClassName}>{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Tertiary Message Block Aria Label";
|
||||
|
||||
render(<TertiaryMessageBlock aria-label={ariaLabel}>{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<TertiaryMessageBlock outline="none">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<TertiaryMessageBlock outline="sm">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<TertiaryMessageBlock outline="md">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<TertiaryMessageBlock outline="lg">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="none">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="xs">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="sm">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="md">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="lg">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<TertiaryMessageBlock rounded="xl">{messageText}</TertiaryMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-tertiary-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
153
test/component/message/WarningMessageBlock.test.tsx
Normal file
153
test/component/message/WarningMessageBlock.test.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
import WarningMessageBlock from "$/component/message/WarningMessageBlock";
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
const messageText = "This is a warning message block component used for displaying important messages to users.";
|
||||
|
||||
|
||||
describe("Renders with defaults", () => {
|
||||
it("Renders with default properties", () => {
|
||||
render(<WarningMessageBlock>{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the default classes
|
||||
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");
|
||||
});
|
||||
it("Renders with custom className", () => {
|
||||
const customClassName = "custom-warning-message-block-class";
|
||||
|
||||
render(<WarningMessageBlock className={customClassName}>{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the custom class
|
||||
expect(messageBlock).toHaveClass(customClassName);
|
||||
});
|
||||
it("Renders with aria-label", () => {
|
||||
const ariaLabel = "Warning Message Block Aria Label";
|
||||
|
||||
render(<WarningMessageBlock aria-label={ariaLabel}>{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the aria-label attribute
|
||||
expect(messageBlock).toHaveAttribute("aria-label", ariaLabel);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Outline Variants", () => {
|
||||
it("Renders with no outline", () => {
|
||||
render(<WarningMessageBlock outline="none">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no outline class
|
||||
expect(messageBlock).toHaveClass("border-0");
|
||||
});
|
||||
it("Renders with small outline", () => {
|
||||
render(<WarningMessageBlock outline="sm">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small outline class
|
||||
expect(messageBlock).toHaveClass("border");
|
||||
});
|
||||
it("Renders with medium outline", () => {
|
||||
render(<WarningMessageBlock outline="md">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium outline class
|
||||
expect(messageBlock).toHaveClass("border-2");
|
||||
});
|
||||
it("Renders with large outline", () => {
|
||||
render(<WarningMessageBlock outline="lg">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large outline class
|
||||
expect(messageBlock).toHaveClass("border-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Rounded Variants", () => {
|
||||
it("Renders with no rounding", () => {
|
||||
render(<WarningMessageBlock rounded="none">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the no rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-none");
|
||||
});
|
||||
it("Renders with extra small rounding", () => {
|
||||
render(<WarningMessageBlock rounded="xs">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xs");
|
||||
});
|
||||
it("Renders with small rounding", () => {
|
||||
render(<WarningMessageBlock rounded="sm">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the small rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-sm");
|
||||
});
|
||||
it("Renders with medium rounding", () => {
|
||||
render(<WarningMessageBlock rounded="md">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the medium rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-md");
|
||||
});
|
||||
it("Renders with large rounding", () => {
|
||||
render(<WarningMessageBlock rounded="lg">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-lg");
|
||||
});
|
||||
it("Renders with extra large rounding", () => {
|
||||
render(<WarningMessageBlock rounded="xl">{messageText}</WarningMessageBlock>);
|
||||
|
||||
//Make sure the message div is present
|
||||
const messageBlock = screen.getByTestId("mattrixwv-warning-message-block");
|
||||
expect(messageBlock).toBeInTheDocument();
|
||||
expect(messageBlock).toHaveTextContent(messageText);
|
||||
//Check for the extra large rounding class
|
||||
expect(messageBlock).toHaveClass("rounded-xl");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user