diff --git a/frontend/src/app/commonComponents/Checkboxes.test.ts b/frontend/src/app/commonComponents/Checkboxes.test.ts deleted file mode 100644 index a430690fde..0000000000 --- a/frontend/src/app/commonComponents/Checkboxes.test.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { generateCheckboxColumns } from "./Checkboxes"; - -describe("generateCheckboxColumns", () => { - it("creates array of arrays, subarrays of length n, when passed an array of items and n", () => { - const testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; - expect(generateCheckboxColumns(testArray, 3)).toEqual([ - [1, 2, 3], - [4, 5, 6], - [7, 8, 9], - ]); - }); -}); diff --git a/frontend/src/app/commonComponents/Checkboxes.test.tsx b/frontend/src/app/commonComponents/Checkboxes.test.tsx new file mode 100644 index 0000000000..41ba2970ed --- /dev/null +++ b/frontend/src/app/commonComponents/Checkboxes.test.tsx @@ -0,0 +1,45 @@ +import { render, screen } from "@testing-library/react"; + +import Checkboxes, { generateCheckboxColumns } from "./Checkboxes"; + +describe("Checkboxes", () => { + it("generateCheckboxColumns - creates array of arrays, subarrays of length n, when passed an array of items and n", () => { + const testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + expect(generateCheckboxColumns(testArray, 3)).toEqual([ + [1, 2, 3], + [4, 5, 6], + [7, 8, 9], + ]); + }); + + it("renders correctly", () => { + const boxes = [ + { + value: "Red", + label: "Red", + checked: true, + }, + { + value: "Blue", + label: "Blue", + checked: false, + }, + ]; + const { container } = render( + {}} + legend="Select a color" + numColumnsToDisplay={2} + /> + ); + expect(screen.getByLabelText("Red")).toBeDisabled(); + expect(screen.getByLabelText("Red")).toBeChecked(); + expect(screen.getByLabelText("Blue")).toBeDisabled(); + expect(screen.getByLabelText("Blue")).not.toBeChecked(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/frontend/src/app/commonComponents/Checkboxes.tsx b/frontend/src/app/commonComponents/Checkboxes.tsx index 26efa13722..264f7ef058 100644 --- a/frontend/src/app/commonComponents/Checkboxes.tsx +++ b/frontend/src/app/commonComponents/Checkboxes.tsx @@ -62,6 +62,7 @@ const Checkboxes = (props: Props) => { inputRef, hintText, numColumnsToDisplay = DEFAULT_COLUMN_DISPLAY_NUMBER, + disabled, } = props; const checkboxFragmentToRender = (boxes: Checkbox[]) => ( @@ -70,6 +71,7 @@ const Checkboxes = (props: Props) => { name={name} onChange={onChange} inputRef={inputRef} + disabled={disabled} /> ); diff --git a/frontend/src/app/commonComponents/__snapshots__/Checkboxes.test.tsx.snap b/frontend/src/app/commonComponents/__snapshots__/Checkboxes.test.tsx.snap new file mode 100644 index 0000000000..ae27477316 --- /dev/null +++ b/frontend/src/app/commonComponents/__snapshots__/Checkboxes.test.tsx.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkboxes renders correctly 1`] = ` +
+
+
+ + Select a color + + + * + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+`;