Add message block tests

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