diff --git a/src/antd/Checkbox.test.tsx b/src/antd/Checkbox.test.tsx new file mode 100644 index 0000000..a2a16e9 --- /dev/null +++ b/src/antd/Checkbox.test.tsx @@ -0,0 +1,16 @@ +import { test, expect} from "vitest"; +import { screen } from "@testing-library/react"; +import { render } from "../common/test-render"; + +test("renders Checkbox component with default label", async () => { + render({ + schema: { + type: "object", + properties: { name: { type: "boolean", title: "Name" } }, + }, + data: { name: true }, + }); + + const checkbox = await screen.findByLabelText("Name"); + expect(checkbox).toBeChecked(); +}); diff --git a/src/antd/Checkbox.tsx b/src/antd/Checkbox.tsx index 6fda935..eb1d5d3 100644 --- a/src/antd/Checkbox.tsx +++ b/src/antd/Checkbox.tsx @@ -1,26 +1,38 @@ -import { CellProps, WithClassname, Helpers } from "@jsonforms/core" -import { Checkbox as AntDCheckbox } from "antd" -import { CheckboxChangeEvent } from "antd/es/checkbox" +import { CellProps, WithClassname, Helpers } from "@jsonforms/core"; +import { Checkbox as AntDCheckbox } from "antd"; +import { CheckboxChangeEvent } from "antd/es/checkbox"; interface CheckboxProps extends CellProps, WithClassname { - label?: string + label?: string; } -export function Checkbox({ data, className, id, enabled, uischema, schema, path, handleChange, label } : CheckboxProps) { - const checked = !!data // convert undefined to false +export function Checkbox({ + data, + className, + id, + enabled, + uischema, + schema, + path, + handleChange, + label, +}: CheckboxProps) { + const checked = !!data; // convert undefined to false const labelDescription = Helpers.createLabelDescriptionFrom(uischema, schema); - const defaultLabel = labelDescription.show ? labelDescription.text : ''; + const defaultLabel = labelDescription.show ? labelDescription.text : ""; return ( handleChange(path, e.target.checked)} + onChange={(e: CheckboxChangeEvent) => + handleChange(path, e.target.checked) + } className={className} id={id} disabled={!enabled} > {label ?? defaultLabel} - ) + ); } diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx new file mode 100644 index 0000000..81bf54d --- /dev/null +++ b/src/controls/BooleanControl.test.tsx @@ -0,0 +1,57 @@ +import { test, expect, vi } from "vitest"; +import { screen } from "@testing-library/react"; +import { userEvent } from "@testing-library/user-event"; +import { render } from "../common/test-render"; + +test("renders the Checkbox component", async () => { + render({ + schema: { + type: "object", + properties: { adult: { type: "boolean", title: "Adult" } }, + }, + }); + + const checkbox = await screen.findByLabelText("Adult"); + expect(checkbox).toBeInTheDocument(); + expect(checkbox).not.toBeChecked(); + expect(checkbox).toBeEnabled(); + // check that there is an checkbox + expect(checkbox.tagName).toBe("INPUT"); + expect(checkbox.getAttribute("type")).toBe("checkbox"); +}); + +test("handles onChange event correctly", async () => { + const updateData = vi.fn(); + render({ + schema: { + type: "object", + properties: { name: { type: "boolean", title: "Name" } }, + }, + data: { name: false }, + onChange: (result) => { + console.log(result); + updateData(result); + }, + }); + + const checkbox = await screen.findByLabelText("Name"); + expect(checkbox).not.toBeChecked(); + + await userEvent.click(checkbox); + expect(checkbox).toBeChecked(); + // FYI the calls to updateData lag behind the actual checkbox state. Not sure why. + // It could be the difference between json-forms handleChange(path, value) and the onChange event. + expect(updateData).toHaveBeenLastCalledWith({ + data: { name: false }, + errors: [], + }); + + await userEvent.click(checkbox); + expect(checkbox).not.toBeChecked(); + expect(updateData).toHaveBeenLastCalledWith({ + data: { name: true }, + errors: [], + }); + + expect(updateData).toBeCalledTimes(2); +});