You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
105 lines
3.1 KiB
105 lines
3.1 KiB
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { QuickstartBackButton } from "@/components/quickstart/QuickstartBackButton";
|
|
|
|
describe("QuickstartBackButton", () => {
|
|
const mockOnClick = vi.fn();
|
|
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
afterEach(() => {
|
|
vi.restoreAllMocks();
|
|
});
|
|
|
|
describe("Basic Rendering", () => {
|
|
it("should render the back button with text", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
expect(screen.getByText("Back")).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render as a button element", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
expect(button).toBeInTheDocument();
|
|
});
|
|
|
|
it("should render back arrow icon (svg element)", () => {
|
|
const { container } = render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
const svg = container.querySelector("svg");
|
|
expect(svg).toBeInTheDocument();
|
|
});
|
|
});
|
|
|
|
describe("Click Behavior", () => {
|
|
it("should call onClick when clicked", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
fireEvent.click(screen.getByText("Back"));
|
|
|
|
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
|
|
it("should call onClick when button is clicked via role", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
fireEvent.click(screen.getByRole("button"));
|
|
|
|
expect(mockOnClick).toHaveBeenCalledTimes(1);
|
|
});
|
|
});
|
|
|
|
describe("Disabled State", () => {
|
|
it("should not be disabled by default", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
expect(button).not.toBeDisabled();
|
|
});
|
|
|
|
it("should be disabled when disabled prop is true", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} disabled={true} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
expect(button).toBeDisabled();
|
|
});
|
|
|
|
it("should have disabled styling when disabled", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} disabled={true} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
expect(button).toHaveClass("opacity-50");
|
|
expect(button).toHaveClass("cursor-not-allowed");
|
|
});
|
|
|
|
it("should not call onClick when disabled and clicked", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} disabled={true} />);
|
|
|
|
fireEvent.click(screen.getByRole("button"));
|
|
|
|
expect(mockOnClick).not.toHaveBeenCalled();
|
|
});
|
|
});
|
|
|
|
describe("Accessibility", () => {
|
|
it("should be focusable when not disabled", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
button.focus();
|
|
|
|
expect(document.activeElement).toBe(button);
|
|
});
|
|
|
|
it("should not be focusable when disabled", () => {
|
|
render(<QuickstartBackButton onClick={mockOnClick} disabled={true} />);
|
|
|
|
const button = screen.getByRole("button");
|
|
expect(button).toHaveAttribute("disabled");
|
|
});
|
|
});
|
|
});
|
|
|