Adding tests for boolean control (#19)

* Adding tests for boolean control

* Update tests

* Try testing differently

* Try testing differently

* Try testing differently

* Try testing differently

* remove additional parens

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();
+});

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 (
     <AntDCheckbox
       checked={checked}
-      onChange={(e: CheckboxChangeEvent) => handleChange(path, e.target.checked)}
+      onChange={(e: CheckboxChangeEvent) =>
+        handleChange(path, e.target.checked)
+      }
       className={className}
       id={id}
       disabled={!enabled}
     >
       {label ?? defaultLabel}
     </AntDCheckbox>
-  )
+  );
 }

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