Add message block tests

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

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

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

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

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

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

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

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

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

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

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