@khanacademy/wonder-blocks-form 2.4.8 → 3.0.0

package/src/components/__tests__/checkbox-group.test.js

@@ -1,85 +1,136 @@
 //@flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import CheckboxGroup from "../checkbox-group.js";
 import Choice from "../choice.js";
 
 describe("CheckboxGroup", () => {
-    let group;
-    const onChange = jest.fn();
-
-    beforeEach(() => {
-        group = mount(
-            <CheckboxGroup
-                label="Test"
-                description="test description"
-                groupName="test"
-                onChange={onChange}
-                selectedValues={["a", "b"]}
-            >
-                <Choice label="a" value="a" aria-labelledby="test-a" />
-                <Choice label="b" value="b" aria-labelledby="test-b" />
-                <Choice label="c" value="c" aria-labelledby="test-c" />
-            </CheckboxGroup>,
-        );
-    });
+    describe("behavior", () => {
+        const TestComponent = ({errorMessage}: {|errorMessage?: string|}) => {
+            const [selectedValues, setSelectedValue] = React.useState([
+                "a",
+                "b",
+            ]);
+            const handleChange = (selectedValues) => {
+                setSelectedValue(selectedValues);
+            };
+            return (
+                <CheckboxGroup
+                    label="Test"
+                    description="test description"
+                    groupName="test"
+                    onChange={handleChange}
+                    selectedValues={selectedValues}
+                    errorMessage={errorMessage}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    <Choice label="b" value="b" aria-labelledby="test-b" />
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                </CheckboxGroup>
+            );
+        };
 
-    it("has the correct items checked", () => {
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+        it("has the correct items checked", () => {
+            // Arrange, Act
+            render(<TestComponent />);
 
-        // a starts off checked
-        expect(a.prop("checked")).toEqual(true);
-        expect(b.prop("checked")).toEqual(true);
-        expect(c.prop("checked")).toEqual(false);
-    });
+            const checkboxes = screen.getAllByRole("checkbox");
 
-    it("changes selection when selectedValue changes", () => {
-        group.setProps({selectedValues: ["b"]});
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+            // Assert
+            // a starts off checked
+            expect(checkboxes[0]).toBeChecked();
+            expect(checkboxes[1]).toBeChecked();
+            expect(checkboxes[2]).not.toBeChecked();
+        });
 
-        // now only b is checked
-        expect(a.prop("checked")).toEqual(false);
-        expect(b.prop("checked")).toEqual(true);
-        expect(c.prop("checked")).toEqual(false);
-    });
+        it("clicking a selected choice deselects it", () => {
+            // Arrange
+            render(<TestComponent />);
 
-    it("displays error state for all Choice children", () => {
-        group.setProps({errorMessage: "there's an error"});
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+            const checkboxes = screen.getAllByRole("checkbox");
 
-        expect(a.prop("error")).toEqual(true);
-        expect(b.prop("error")).toEqual(true);
-        expect(c.prop("error")).toEqual(true);
-    });
+            // Act
+            userEvent.click(checkboxes[0]);
+
+            // Assert
+            expect(checkboxes[0]).not.toBeChecked();
+            expect(checkboxes[1]).toBeChecked();
+            expect(checkboxes[2]).not.toBeChecked();
+        });
+
+        it("should set aria-invalid on choices when there's an error message", () => {
+            // Arrange, Act
+            render(<TestComponent errorMessage="there's an error" />);
+
+            const checkboxes = screen.getAllByRole("checkbox");
 
-    it("calls onChange for each new selection", () => {
-        // a is clicked
-        const a = group.find(Choice).at(0);
-        const aTarget = a.find("ClickableBehavior");
-        aTarget.simulate("click");
-        expect(onChange).toHaveBeenCalledTimes(1);
-
-        // now b is clicked, onChange should also be called
-        const b = group.find(Choice).at(1);
-        const bTarget = b.find("ClickableBehavior");
-        bTarget.simulate("click");
-        expect(onChange).toHaveBeenCalledTimes(2);
+            // Assert
+            expect(checkboxes[0]).toHaveAttribute("aria-invalid", "true");
+            expect(checkboxes[1]).toHaveAttribute("aria-invalid", "true");
+            expect(checkboxes[2]).toHaveAttribute("aria-invalid", "true");
+        });
+
+        it("checks that aria attributes have been added correctly", () => {
+            // Arrange, Act
+            render(<TestComponent />);
+
+            const checkboxes = screen.getAllByRole("checkbox");
+
+            // Assert
+            expect(checkboxes[0]).toHaveAttribute("aria-labelledby", "test-a");
+            expect(checkboxes[1]).toHaveAttribute("aria-labelledby", "test-b");
+            expect(checkboxes[2]).toHaveAttribute("aria-labelledby", "test-c");
+        });
     });
 
-    it("checks that aria attributes have been added correctly", () => {
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
-        expect(a.find("input").prop("aria-labelledby")).toEqual("test-a");
-        expect(b.find("input").prop("aria-labelledby")).toEqual("test-b");
-        expect(c.find("input").prop("aria-labelledby")).toEqual("test-c");
+    describe("flexible props", () => {
+        it("should render with a React.Node label", () => {
+            // Arrange, Act
+            render(
+                <CheckboxGroup
+                    label={
+                        <span>
+                            label with <strong>strong</strong> text
+                        </span>
+                    }
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValues={[]}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    <Choice label="b" value="b" aria-labelledby="test-b" />
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                </CheckboxGroup>,
+            );
+
+            // Assert
+            expect(screen.getByText("strong")).toBeInTheDocument();
+        });
+
+        it("should render with a React.Node description", () => {
+            // Arrange, Act
+            render(
+                <CheckboxGroup
+                    label="label"
+                    description={
+                        <span>
+                            description with <strong>strong</strong> text
+                        </span>
+                    }
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValues={[]}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    <Choice label="b" value="b" aria-labelledby="test-b" />
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                </CheckboxGroup>,
+            );
+
+            // Assert
+            expect(screen.getByText("strong")).toBeInTheDocument();
+        });
     });
 });

package/src/components/__tests__/field-heading.test.js

@@ -4,6 +4,13 @@ import {mount} from "enzyme";
 import "jest-enzyme";
 import {StyleSheet} from "aphrodite";
 
+import {I18nInlineMarkup} from "@khanacademy/wonder-blocks-i18n";
+import {
+    Body,
+    LabelMedium,
+    LabelSmall,
+} from "@khanacademy/wonder-blocks-typography";
+
 import FieldHeading from "../field-heading.js";
 import TextField from "../text-field.js";
 
@@ -180,4 +187,37 @@ describe("FieldHeading", () => {
         const container = wrapper.find("View").at(0);
         expect(container).toHaveStyle(styles.style1);
     });
+
+    it("should render a LabelSmall when the 'label' prop is a I18nInlineMarkup", () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label={<I18nInlineMarkup>Hello, world!</I18nInlineMarkup>}
+            />,
+        );
+
+        // Assert
+        const label = wrapper.find(LabelMedium);
+        expect(label).toExist();
+    });
+
+    it("should render a LabelSmall when the 'description' prop is a I18nInlineMarkup", () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label={<Body>Hello, world</Body>}
+                description={<I18nInlineMarkup>description</I18nInlineMarkup>}
+            />,
+        );
+
+        // Assert
+        const label = wrapper.find(LabelSmall);
+        expect(label).toExist();
+    });
 });

package/src/components/__tests__/radio-group.test.js

@@ -1,85 +1,158 @@
 //@flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import RadioGroup from "../radio-group.js";
 import Choice from "../choice.js";
 
 describe("RadioGroup", () => {
-    let group;
-    const onChange = jest.fn();
-
-    beforeEach(() => {
-        group = mount(
+    const TestComponent = ({
+        errorMessage,
+        onChange,
+    }: {|
+        errorMessage?: string,
+        onChange?: () => mixed,
+    |}) => {
+        const [selectedValue, setSelectedValue] = React.useState("a");
+        const handleChange = (selectedValue) => {
+            setSelectedValue(selectedValue);
+            onChange?.();
+        };
+        return (
             <RadioGroup
                 label="Test"
                 description="test description"
                 groupName="test"
-                onChange={onChange}
-                selectedValue="a"
+                onChange={handleChange}
+                selectedValue={selectedValue}
+                errorMessage={errorMessage}
             >
                 <Choice label="a" value="a" aria-labelledby="test-a" />
                 <Choice label="b" value="b" aria-labelledby="test-b" />
                 <Choice label="c" value="c" aria-labelledby="test-c" />
-            </RadioGroup>,
+            </RadioGroup>
         );
-    });
+    };
 
-    it("selects only one item at a time", () => {
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+    describe("behavior", () => {
+        it("selects only one item at a time", () => {
+            // Arrange, Act
+            render(<TestComponent />);
 
-        // a starts off checked
-        expect(a.prop("checked")).toEqual(true);
-        expect(b.prop("checked")).toEqual(false);
-        expect(c.prop("checked")).toEqual(false);
-    });
+            const radios = screen.getAllByRole("radio");
 
-    it("changes selection when selectedValue changes", () => {
-        group.setProps({selectedValue: "b"});
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+            // Assert
+            // a starts off checked
+            expect(radios[0]).toBeChecked();
+            expect(radios[1]).not.toBeChecked();
+            expect(radios[2]).not.toBeChecked();
+        });
 
-        // now b is checked
-        expect(a.prop("checked")).toEqual(false);
-        expect(b.prop("checked")).toEqual(true);
-        expect(c.prop("checked")).toEqual(false);
-    });
+        it("changes selection when selectedValue changes", () => {
+            // Arrange
+            render(<TestComponent />);
 
-    it("displays error state for all Choice children", () => {
-        group.setProps({errorMessage: "there's an error"});
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
+            const radios = screen.getAllByRole("radio");
 
-        expect(a.prop("error")).toEqual(true);
-        expect(b.prop("error")).toEqual(true);
-        expect(c.prop("error")).toEqual(true);
-    });
+            // Act
+            userEvent.click(radios[1]);
+
+            // Assert
+            // a starts off checked
+            expect(radios[0]).not.toBeChecked();
+            expect(radios[1]).toBeChecked();
+            expect(radios[2]).not.toBeChecked();
+        });
+
+        it("should set aria-invalid on choices when there's an error message", () => {
+            // Arrange, Act
+            render(<TestComponent errorMessage="there's an error" />);
+
+            const radios = screen.getAllByRole("radio");
+
+            // Assert
+            expect(radios[0]).toHaveAttribute("aria-invalid", "true");
+            expect(radios[1]).toHaveAttribute("aria-invalid", "true");
+            expect(radios[2]).toHaveAttribute("aria-invalid", "true");
+        });
 
-    it("doesn't change when an already selected item is reselected", () => {
-        // a is already selected, onChange shouldn't be called
-        const a = group.find(Choice).at(0);
-        const aTarget = a.find("ClickableBehavior");
-        aTarget.simulate("click");
-        expect(onChange).toHaveBeenCalledTimes(0);
-
-        // now b is clicked, onChange should be called
-        const b = group.find(Choice).at(1);
-        const bTarget = b.find("ClickableBehavior");
-        bTarget.simulate("click");
-        expect(onChange).toHaveBeenCalledTimes(1);
+        it("doesn't change when an already selected item is reselected", () => {
+            // Arrange
+            const handleChange = jest.fn();
+            render(<TestComponent onChange={handleChange} />);
+
+            const radios = screen.getAllByRole("radio");
+
+            // Act
+            // a is already selected, onChange shouldn't be called
+            userEvent.click(radios[0]);
+
+            // Assert
+            expect(handleChange).toHaveBeenCalledTimes(0);
+        });
+
+        it("checks that aria attributes have been added correctly", () => {
+            // Arrange, Act
+            render(<TestComponent />);
+
+            const radios = screen.getAllByRole("radio");
+
+            // Assert
+            expect(radios[0]).toHaveAttribute("aria-labelledby", "test-a");
+            expect(radios[1]).toHaveAttribute("aria-labelledby", "test-b");
+            expect(radios[2]).toHaveAttribute("aria-labelledby", "test-c");
+        });
     });
 
-    it("checks that aria attributes have been added correctly", () => {
-        const a = group.find(Choice).at(0);
-        const b = group.find(Choice).at(1);
-        const c = group.find(Choice).at(2);
-        expect(a.find("input").prop("aria-labelledby")).toEqual("test-a");
-        expect(b.find("input").prop("aria-labelledby")).toEqual("test-b");
-        expect(c.find("input").prop("aria-labelledby")).toEqual("test-c");
+    describe("flexible props", () => {
+        it("should render with a React.Node label", () => {
+            // Arrange, Act
+            const action = () =>
+                render(
+                    <RadioGroup
+                        label={
+                            <span>
+                                label with <strong>strong</strong> text
+                            </span>
+                        }
+                        groupName="test"
+                        onChange={() => {}}
+                        selectedValue={"a"}
+                    >
+                        <Choice label="a" value="a" aria-labelledby="test-a" />
+                        <Choice label="b" value="b" aria-labelledby="test-b" />
+                        <Choice label="c" value="c" aria-labelledby="test-c" />
+                    </RadioGroup>,
+                );
+
+            // Assert
+            expect(action).not.toThrow();
+        });
+
+        it("should render with a React.Node description", () => {
+            // Arrange, Act
+            const action = () =>
+                render(
+                    <RadioGroup
+                        label="label"
+                        description={
+                            <span>
+                                description with <strong>strong</strong> text
+                            </span>
+                        }
+                        groupName="test"
+                        onChange={() => {}}
+                        selectedValue={"a"}
+                    >
+                        <Choice label="a" value="a" aria-labelledby="test-a" />
+                        <Choice label="b" value="b" aria-labelledby="test-b" />
+                        <Choice label="c" value="c" aria-labelledby="test-c" />
+                    </RadioGroup>,
+                );
+
+            // Assert
+            expect(action).not.toThrow();
+        });
     });
 });

package/src/components/checkbox-group.js

@@ -5,11 +5,7 @@ import * as React from "react";
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {
-    type Typography,
-    LabelMedium,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
 import styles from "./group-styles.js";
@@ -32,12 +28,12 @@ type CheckboxGroupProps = {|
      * Optional label for the group. This label is optional to allow for
      * greater flexibility in implementing checkbox and radio groups.
      */
-    label?: string | React.Element<Typography>,
+    label?: React.Node,
 
     /**
      * Optional description for the group.
      */
-    description?: string | React.Element<Typography>,
+    description?: React.Node,
 
     /**
      * Optional error message. If supplied, the group will be displayed in an
@@ -136,19 +132,15 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
             <StyledFieldset data-test-id={testId} style={styles.fieldset}>
                 {/* We have a View here because fieldset cannot be used with flexbox*/}
                 <View style={style}>
-                    {typeof label === "string" ? (
+                    {label && (
                         <StyledLegend style={styles.legend}>
                             <LabelMedium>{label}</LabelMedium>
                         </StyledLegend>
-                    ) : (
-                        label && label
                     )}
-                    {typeof description === "string" ? (
+                    {description && (
                         <LabelSmall style={styles.description}>
                             {description}
                         </LabelSmall>
-                    ) : (
-                        description && description
                     )}
                     {errorMessage && (
                         <LabelSmall style={styles.error}>

package/src/components/checkbox.js

@@ -33,12 +33,12 @@ type ChoiceComponentProps = {|
     /**
      * Optional label for the field.
      */
-    label?: string,
+    label?: React.Node,
 
     /**
      * Optional description for the field.
      */
-    description?: string,
+    description?: React.Node,
 
     /**
      * Unique identifier attached to the HTML input element. If used, need to

package/src/components/choice-internal.js

@@ -52,10 +52,10 @@ type Props = {|
     /**
      * Label for the field.
      */
-    label?: string,
+    label?: React.Node,
 
     /** Optional description for the field. */
-    description?: string,
+    description?: React.Node,
 
     /** Auto-populated by parent's groupName prop if in a group. */
     groupName?: string,
@@ -142,7 +142,9 @@ type DefaultProps = {|
         return (
             <UniqueIDProvider mockOnFirstRender={true} scope="choice">
                 {(ids) => {
-                    const descriptionId = description && ids.get("description");
+                    const descriptionId = description
+                        ? ids.get("description")
+                        : undefined;
 
                     return (
                         <View style={style} className={className}>

package/src/components/choice.js

@@ -10,10 +10,10 @@ type Props = {|
     ...AriaProps,
 
     /** User-defined. Label for the field. */
-    label: string,
+    label: React.Node,
 
     /** User-defined. Optional description for the field. */
-    description?: string,
+    description?: React.Node,
 
     /** User-defined. Should be distinct for each item in the group. */
     value: string,