diff --git a/packages/ui/components/form/checkbox/Checkbox.test.tsx b/packages/ui/components/form/checkbox/Checkbox.test.tsx new file mode 100644 index 0000000000..28bc926568 --- /dev/null +++ b/packages/ui/components/form/checkbox/Checkbox.test.tsx @@ -0,0 +1,61 @@ +/* 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(); + + 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(); + + const descriptionElement = getByText("Test Label"); + expect(descriptionElement).toBeInTheDocument(); + }); + + test("Should trigger onChange event correctly", () => { + const handleChange = vi.fn(); + const { getByRole } = render(); + + const checkboxInput = getByRole("checkbox"); + + fireEvent.click(checkboxInput); + + expect(handleChange).toHaveBeenCalled(); + }); + test("Should disable the checkbox when disabled prop is true", () => { + const { getByRole } = render(); + + const checkboxInput = getByRole("checkbox"); + expect(checkboxInput).toBeDisabled(); + }); + + test("Should change the checked state when clicked", () => { + const { getByRole } = render(); + 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(); + }); +});