From 7e02f1beab9781ceb97e6a15c0c181a9176da913 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Fri, 1 Mar 2024 14:40:48 -0800 Subject: [PATCH 1/7] Adding tests for boolean control --- src/antd/Checkbox.test.tsx | 42 ++++++++++++++++++++++++++++ src/antd/Checkbox.tsx | 2 +- src/controls/BooleanControl.test.tsx | 23 +++++++++++++++ 3 files changed, 66 insertions(+), 1 deletion(-) create mode 100644 src/antd/Checkbox.test.tsx create mode 100644 src/controls/BooleanControl.test.tsx diff --git a/src/antd/Checkbox.test.tsx b/src/antd/Checkbox.test.tsx new file mode 100644 index 0000000..c36801e --- /dev/null +++ b/src/antd/Checkbox.test.tsx @@ -0,0 +1,42 @@ +import { test, expect } from "vitest"; +import { screen } from "@testing-library/react"; +import { userEvent } from "@testing-library/user-event"; +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(); +}); + +test("handles onChange event correctly", async () => { + let formData = { name: false }; + + render({ + schema: { + type: "object", + properties: { name: { type: "boolean", title: "Name" } }, + }, + data: formData, + onChange: (result) => {console.log(result); formData = result.data}, + }); + + const checkbox = await screen.findByLabelText("Name"); + expect(checkbox).not.toBeChecked(); + + await userEvent.click(checkbox); + expect(checkbox).toBeChecked(); + console.log(formData); + expect(formData.name).toBe(true); + + await userEvent.click(checkbox); + expect(checkbox).not.toBeChecked(); + expect(formData.name).toBe(false); +}); \ No newline at end of file diff --git a/src/antd/Checkbox.tsx b/src/antd/Checkbox.tsx index 6fda935..87de437 100644 --- a/src/antd/Checkbox.tsx +++ b/src/antd/Checkbox.tsx @@ -15,7 +15,7 @@ export function Checkbox({ data, className, id, enabled, uischema, schema, path, return ( handleChange(path, e.target.checked)} + onChange={(e: CheckboxChangeEvent) => {handleChange(path, e.target.checked)}} className={className} id={id} disabled={!enabled} diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx new file mode 100644 index 0000000..d521659 --- /dev/null +++ b/src/controls/BooleanControl.test.tsx @@ -0,0 +1,23 @@ +import { test, expect} from "vitest"; +import { render } from "../common/test-render"; +import {screen} from "@testing-library/react"; + +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"); + +}); From 1a836ed1d5f1ac2b211208c9f90a00bdf16dd002 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Tue, 5 Mar 2024 20:12:47 -0800 Subject: [PATCH 2/7] Update tests --- src/antd/Checkbox.test.tsx | 28 +--------------------- src/controls/BooleanControl.test.tsx | 35 +++++++++++++++++++++++++--- 2 files changed, 33 insertions(+), 30 deletions(-) diff --git a/src/antd/Checkbox.test.tsx b/src/antd/Checkbox.test.tsx index c36801e..a2a16e9 100644 --- a/src/antd/Checkbox.test.tsx +++ b/src/antd/Checkbox.test.tsx @@ -1,6 +1,5 @@ -import { test, expect } from "vitest"; +import { test, expect} from "vitest"; import { screen } from "@testing-library/react"; -import { userEvent } from "@testing-library/user-event"; import { render } from "../common/test-render"; test("renders Checkbox component with default label", async () => { @@ -15,28 +14,3 @@ test("renders Checkbox component with default label", async () => { const checkbox = await screen.findByLabelText("Name"); expect(checkbox).toBeChecked(); }); - -test("handles onChange event correctly", async () => { - let formData = { name: false }; - - render({ - schema: { - type: "object", - properties: { name: { type: "boolean", title: "Name" } }, - }, - data: formData, - onChange: (result) => {console.log(result); formData = result.data}, - }); - - const checkbox = await screen.findByLabelText("Name"); - expect(checkbox).not.toBeChecked(); - - await userEvent.click(checkbox); - expect(checkbox).toBeChecked(); - console.log(formData); - expect(formData.name).toBe(true); - - await userEvent.click(checkbox); - expect(checkbox).not.toBeChecked(); - expect(formData.name).toBe(false); -}); \ No newline at end of file diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx index d521659..c767d0e 100644 --- a/src/controls/BooleanControl.test.tsx +++ b/src/controls/BooleanControl.test.tsx @@ -1,6 +1,7 @@ -import { test, expect} from "vitest"; +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"; -import {screen} from "@testing-library/react"; test("renders the Checkbox component", async () => { render( @@ -19,5 +20,33 @@ test("renders the Checkbox component", async () => { // 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(); + expect(updateData).not.toHaveBeenCalled(); + + 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); +}); \ No newline at end of file From 822e555806ca6188a84510f2b338856b055af0f3 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Mon, 11 Mar 2024 11:15:06 -0700 Subject: [PATCH 3/7] Try testing differently --- src/controls/BooleanControl.test.tsx | 60 ++++++++++++++++------------ 1 file changed, 34 insertions(+), 26 deletions(-) diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx index c767d0e..2d5422d 100644 --- a/src/controls/BooleanControl.test.tsx +++ b/src/controls/BooleanControl.test.tsx @@ -4,49 +4,57 @@ 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"} }, - }, - } - ); + 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"); + 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() + const updateData = vi.fn(); render({ schema: { type: "object", properties: { name: { type: "boolean", title: "Name" } }, }, - data: { name: false}, - onChange: (result) => {console.log(result); updateData(result)}, + data: { name: false }, + onChange: (result) => { + console.log(result); + updateData(result); + }, }); const checkbox = await screen.findByLabelText("Name"); expect(checkbox).not.toBeChecked(); - expect(updateData).not.toHaveBeenCalled(); + // Called with the default when initialized + expect(updateData).toHaveBeenLastCalledWith({ + data: { name: false }, + errors: [], + }); 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: []}); + expect(updateData).toHaveBeenLastCalledWith({ + data: { name: true }, + errors: [], + }); await userEvent.click(checkbox); expect(checkbox).not.toBeChecked(); - expect(updateData).toHaveBeenLastCalledWith({ data: {name: true }, errors: []}); + expect(updateData).toHaveBeenLastCalledWith({ + data: { name: false }, + errors: [], + }); - expect(updateData).toBeCalledTimes(2); -}); \ No newline at end of file + expect(updateData).toBeCalledTimes(3); +}); From 81b97bc88a6d9c413f8a835ae166aa319e530b71 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Mon, 11 Mar 2024 11:22:37 -0700 Subject: [PATCH 4/7] Try testing differently --- src/controls/BooleanControl.test.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx index 2d5422d..95ba519 100644 --- a/src/controls/BooleanControl.test.tsx +++ b/src/controls/BooleanControl.test.tsx @@ -37,10 +37,7 @@ test("handles onChange event correctly", async () => { const checkbox = await screen.findByLabelText("Name"); expect(checkbox).not.toBeChecked(); // Called with the default when initialized - expect(updateData).toHaveBeenLastCalledWith({ - data: { name: false }, - errors: [], - }); + expect(updateData).toHaveBeenLastCalledWith(undefined); await userEvent.click(checkbox); expect(checkbox).toBeChecked(); From a85f0c53eb536e24ebf33d5c992ef49e58b9e59e Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Mon, 11 Mar 2024 11:24:40 -0700 Subject: [PATCH 5/7] Try testing differently --- src/controls/BooleanControl.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx index 95ba519..170d884 100644 --- a/src/controls/BooleanControl.test.tsx +++ b/src/controls/BooleanControl.test.tsx @@ -36,8 +36,6 @@ test("handles onChange event correctly", async () => { const checkbox = await screen.findByLabelText("Name"); expect(checkbox).not.toBeChecked(); - // Called with the default when initialized - expect(updateData).toHaveBeenLastCalledWith(undefined); await userEvent.click(checkbox); expect(checkbox).toBeChecked(); From 5d55e4d8c3661b7f67d1ab75a68a928dec3123b1 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Mon, 11 Mar 2024 11:30:54 -0700 Subject: [PATCH 6/7] Try testing differently --- src/controls/BooleanControl.test.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/controls/BooleanControl.test.tsx b/src/controls/BooleanControl.test.tsx index 170d884..81bf54d 100644 --- a/src/controls/BooleanControl.test.tsx +++ b/src/controls/BooleanControl.test.tsx @@ -39,17 +39,19 @@ test("handles onChange event correctly", async () => { 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: true }, + data: { name: false }, errors: [], }); await userEvent.click(checkbox); expect(checkbox).not.toBeChecked(); expect(updateData).toHaveBeenLastCalledWith({ - data: { name: false }, + data: { name: true }, errors: [], }); - expect(updateData).toBeCalledTimes(3); + expect(updateData).toBeCalledTimes(2); }); From f0015c0d9214b134ea1f8b5c88b7488459becdd6 Mon Sep 17 00:00:00 2001 From: Thu Pham Date: Mon, 11 Mar 2024 11:45:43 -0700 Subject: [PATCH 7/7] remove additional parens --- src/antd/Checkbox.tsx | 30 +++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/src/antd/Checkbox.tsx b/src/antd/Checkbox.tsx index 87de437..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} - ) + ); }