MattrixwvReactComponents/test/component/message/TertiaryMessageBlock.test.tsx

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