@khanacademy/wonder-blocks-form 2.4.8 → 3.1.0

package/src/components/__docs__/radio-group.stories.js

@@ -166,6 +166,41 @@ MultipleChoiceStyling.parameters = {
     },
 };
 
+export const FiltersOutFalsyChildren: StoryComponentType = () => {
+    return (
+        <RadioGroup
+            groupName="pokemon"
+            selectedValue="bulbasaur"
+            onChange={() => {}}
+            label="Pokemon"
+            description="Your first Pokemon."
+        >
+            <Choice label="Bulbasaur" value="bulbasaur" />
+            <Choice
+                label="Charmander"
+                value="charmander"
+                description="Oops, we ran out of Charmanders"
+                disabled
+            />
+            <Choice label="Squirtle" value="squirtle" />
+            {false && <Choice label="Pikachu" value="pikachu" />}
+        </RadioGroup>
+    );
+};
+
+FiltersOutFalsyChildren.parameters = {
+    docs: {
+        storyDescription: `This example shows that children can be falsy values and
+        that those falsy values are filtered out when rendering children.  In this
+        case, one of the children is \`{false && <Choice .../>}\` which results in
+        that choice being filtered out.`,
+    },
+    chromatic: {
+        // The unit tests already verify that false-y children aren't rendered.
+        disableSnapshot: true,
+    },
+};
+
 const styles = StyleSheet.create({
     choice: {
         margin: 0,

package/src/components/__docs__/radio.stories.js

@@ -3,15 +3,16 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View} from "@khanacademy/wonder-blocks-core";
-import {Radio} from "@khanacademy/wonder-blocks-form";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StoryComponentType} from "@storybook/react";
 
 import ComponentInfo from "../../../../../.storybook/components/component-info.js";
 import {name, version} from "../../../package.json";
 
+import Radio from "../radio.js";
+
 export default {
-    title: "Form / Radio",
+    title: "Form / Radio (internal)",
     component: Radio,
     parameters: {
         componentSubtitle: ((

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

@@ -1,85 +1,162 @@
 //@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");
+
+            // Assert
+            expect(checkboxes[0]).toHaveAttribute("aria-invalid", "true");
+            expect(checkboxes[1]).toHaveAttribute("aria-invalid", "true");
+            expect(checkboxes[2]).toHaveAttribute("aria-invalid", "true");
+        });
 
-    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);
+        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();
+        });
+
+        it("should filter out false-y children when rendering", () => {
+            // Arrange, Act
+            render(
+                <CheckboxGroup
+                    label="label"
+                    description="description"
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValues={[]}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    {false && (
+                        <Choice label="b" value="b" aria-labelledby="test-b" />
+                    )}
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                    {undefined}
+                    {null}
+                </CheckboxGroup>,
+            );
+
+            // Assert
+            const checkboxes = screen.getAllByRole("checkbox");
+
+            expect(checkboxes).toHaveLength(2);
+        });
     });
 });

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,182 @@
 //@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", () => {
+            // Arrange
+            const handleChange = jest.fn();
+            render(<TestComponent onChange={handleChange} />);
+
+            const radios = screen.getAllByRole("radio");
 
-    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);
+            // 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
+            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(screen.getByText("strong")).toBeInTheDocument();
+        });
+
+        it("should render with a React.Node description", () => {
+            // Arrange, Act
+            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(screen.getByText("strong")).toBeInTheDocument();
+        });
+
+        it("should filter out false-y children when rendering", () => {
+            // Arrange, Act
+            render(
+                <RadioGroup
+                    label="label"
+                    description="description"
+                    groupName="test"
+                    onChange={() => {}}
+                    selectedValue={"a"}
+                >
+                    <Choice label="a" value="a" aria-labelledby="test-a" />
+                    {false && (
+                        <Choice label="b" value="b" aria-labelledby="test-b" />
+                    )}
+                    <Choice label="c" value="c" aria-labelledby="test-c" />
+                    {undefined}
+                    {null}
+                </RadioGroup>,
+            );
+
+            // Assert
+            const radios = screen.getAllByRole("radio");
+
+            expect(radios).toHaveLength(2);
+        });
     });
 });

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";
@@ -20,7 +16,7 @@ type CheckboxGroupProps = {|
     /**
      * Children should be Choice components.
      */
-    children: Array<React.Element<Choice>>,
+    children: Array<?(React.Element<Choice> | false)>,
 
     /**
      * Group name for this checkbox or radio group. Should be unique for all
@@ -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
@@ -132,23 +128,21 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
             testId,
         } = this.props;
 
+        const allChildren = React.Children.toArray(children).filter(Boolean);
+
         return (
             <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}>
@@ -159,7 +153,7 @@ export default class CheckboxGroup extends React.Component<CheckboxGroupProps> {
                         <Strut size={Spacing.small_12} />
                     )}
 
-                    {React.Children.map(children, (child, index) => {
+                    {allChildren.map((child, index) => {
                         const {style, value} = child.props;
                         const checked = selectedValues.includes(value);
                         return (