diff --git a/.gitignore b/.gitignore index e08a0ef..87525be 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ dist *.local .tanstack *.tgz +test/coverage # Editor directories and files .vscode diff --git a/lib/component/message.ts b/lib/component/message.ts index d404785..c2d0e76 100644 --- a/lib/component/message.ts +++ b/lib/component/message.ts @@ -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"; diff --git a/lib/component/message/DangerMessageBlock.tsx b/lib/component/message/DangerMessageBlock.tsx index d6619b1..505c711 100644 --- a/lib/component/message/DangerMessageBlock.tsx +++ b/lib/component/message/DangerMessageBlock.tsx @@ -12,6 +12,7 @@ export default function DangerMessageBlock(props: MessageBlockProps){ return ( ); -} \ No newline at end of file +} diff --git a/lib/component/message/MoltenMessageBlock.tsx b/lib/component/message/MoltenMessageBlock.tsx index 5bbb1cc..42c5cb7 100644 --- a/lib/component/message/MoltenMessageBlock.tsx +++ b/lib/component/message/MoltenMessageBlock.tsx @@ -12,6 +12,7 @@ export default function MoltenMessageBlock(props: MessageBlockProps){ return ( =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", diff --git a/package.json b/package.json index f722d41..d881135 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/test/component/message/DangerMessageBlock.test.tsx b/test/component/message/DangerMessageBlock.test.tsx new file mode 100644 index 0000000..a05cc63 --- /dev/null +++ b/test/component/message/DangerMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/DarkMessageBlock.test.tsx b/test/component/message/DarkMessageBlock.test.tsx new file mode 100644 index 0000000..94f2f63 --- /dev/null +++ b/test/component/message/DarkMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/InfoMessageBlock.test.tsx b/test/component/message/InfoMessageBlock.test.tsx new file mode 100644 index 0000000..3bdc3d4 --- /dev/null +++ b/test/component/message/InfoMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/LightMessageBlock.test.tsx b/test/component/message/LightMessageBlock.test.tsx new file mode 100644 index 0000000..49de323 --- /dev/null +++ b/test/component/message/LightMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/MessageBlock.test.tsx b/test/component/message/MessageBlock.test.tsx new file mode 100644 index 0000000..3d51a63 --- /dev/null +++ b/test/component/message/MessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); + }); +}); diff --git a/test/component/message/MoltenMessageBlock.test.tsx b/test/component/message/MoltenMessageBlock.test.tsx new file mode 100644 index 0000000..fc9982e --- /dev/null +++ b/test/component/message/MoltenMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/PrimaryMessageBlock.test.tsx b/test/component/message/PrimaryMessageBlock.test.tsx new file mode 100644 index 0000000..f95ce9e --- /dev/null +++ b/test/component/message/PrimaryMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/SecondaryMessageBlock.test.tsx b/test/component/message/SecondaryMessageBlock.test.tsx new file mode 100644 index 0000000..399ccb5 --- /dev/null +++ b/test/component/message/SecondaryMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/SuccessMessageBlock.test.tsx b/test/component/message/SuccessMessageBlock.test.tsx new file mode 100644 index 0000000..ba7d95d --- /dev/null +++ b/test/component/message/SuccessMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/TertiaryMessageBlock.test.tsx b/test/component/message/TertiaryMessageBlock.test.tsx new file mode 100644 index 0000000..ca8cce6 --- /dev/null +++ b/test/component/message/TertiaryMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +}); diff --git a/test/component/message/WarningMessageBlock.test.tsx b/test/component/message/WarningMessageBlock.test.tsx new file mode 100644 index 0000000..4a28aa5 --- /dev/null +++ b/test/component/message/WarningMessageBlock.test.tsx @@ -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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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({messageText}); + + //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"); + }); +});