cal.pub0.org/packages/ui/components/form/checkbox/Checkbox.test.tsx

62 lines
2.0 KiB
TypeScript

/* eslint-disable playwright/missing-playwright-await */
import { render, fireEvent } from "@testing-library/react";
import React from "react";
import { vi } from "vitest";
import { CheckboxField } from "./Checkbox";
const basicProps = { label: "Test Label", description: "Test Description" };
describe("Tests for CheckboxField component", () => {
test("Should render the label and the description correctly", () => {
const { getByText } = render(<CheckboxField {...basicProps} />);
const labelElement = getByText("Test Label");
expect(labelElement).toBeInTheDocument();
const descriptionElement = getByText("Test Description");
expect(descriptionElement).toBeInTheDocument();
});
test("Should render the description correctly when the prop descriptionAsLabel is true", () => {
const { getByText } = render(<CheckboxField {...basicProps} descriptionAsLabel />);
const descriptionElement = getByText("Test Label");
expect(descriptionElement).toBeInTheDocument();
});
test("Should trigger onChange event correctly", () => {
const handleChange = vi.fn();
const { getByRole } = render(<CheckboxField {...basicProps} onChange={handleChange} />);
const checkboxInput = getByRole("checkbox");
fireEvent.click(checkboxInput);
expect(handleChange).toHaveBeenCalled();
});
test("Should disable the checkbox when disabled prop is true", () => {
const { getByRole } = render(<CheckboxField {...basicProps} disabled />);
const checkboxInput = getByRole("checkbox");
expect(checkboxInput).toBeDisabled();
});
test("Should change the checked state when clicked", () => {
const { getByRole } = render(<CheckboxField {...basicProps} disabled />);
const checkboxInput = getByRole("checkbox");
expect(checkboxInput).not.toBeChecked();
expect(checkboxInput).toBeTruthy();
fireEvent.click(checkboxInput);
expect(checkboxInput).toBeChecked();
expect(checkboxInput).toBeTruthy();
fireEvent.click(checkboxInput);
expect(checkboxInput).not.toBeChecked();
});
});