@khanacademy/wonder-blocks-form 2.2.1

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

@@ -0,0 +1,84 @@
+//@flow
+import * as React from "react";
+import {mount} from "enzyme";
+
+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>,
+        );
+    });
+
+    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);
+
+        // a starts off checked
+        expect(a.prop("checked")).toEqual(true);
+        expect(b.prop("checked")).toEqual(true);
+        expect(c.prop("checked")).toEqual(false);
+    });
+
+    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);
+
+        // now only b is checked
+        expect(a.prop("checked")).toEqual(false);
+        expect(b.prop("checked")).toEqual(true);
+        expect(c.prop("checked")).toEqual(false);
+    });
+
+    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);
+
+        expect(a.prop("error")).toEqual(true);
+        expect(b.prop("error")).toEqual(true);
+        expect(c.prop("error")).toEqual(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", () => {
+        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");
+    });
+});

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

@@ -0,0 +1,182 @@
+// @flow
+import * as React from "react";
+import {mount} from "enzyme";
+import {StyleSheet} from "aphrodite";
+
+import FieldHeading from "../field-heading.js";
+import TextField from "../text-field.js";
+
+describe("FieldHeading", () => {
+    it("fieldheading renders the label text", () => {
+        // Arrange
+        const label = "Label";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label={label}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toIncludeText(label);
+    });
+
+    it("fieldheading renders the description text", () => {
+        // Arrange
+        const description = "Description";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                description={description}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toIncludeText(description);
+    });
+
+    it("fieldheading renders the error text", () => {
+        // Arrange
+        const error = "Error";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                error={error}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toIncludeText(error);
+    });
+
+    it("fieldheading adds testId to label", () => {
+        // Arrange
+        const testId = "testid";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const label = wrapper.find(`[data-test-id="${testId}-label"]`);
+        expect(label).toExist();
+    });
+
+    it("fieldheading adds testId to description", () => {
+        // Arrange
+        const testId = "testid";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                description="Description"
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const description = wrapper.find(
+            `[data-test-id="${testId}-description"]`,
+        );
+        expect(description).toExist();
+    });
+
+    it("fieldheading adds testId to error", () => {
+        // Arrange
+        const testId = "testid";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                error="Error"
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const error = wrapper.find(`[data-test-id="${testId}-error"]`);
+        expect(error).toExist();
+    });
+
+    it("fieldheading adds the correctly formatted id to label's htmlFor", () => {
+        // Arrange
+        const id = "exampleid";
+        const testId = "testid";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                id={id}
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const label = wrapper.find(`[data-test-id="${testId}-label"]`);
+        expect(label).toContainMatchingElement(`[htmlFor="${id}-field"]`);
+    });
+
+    it("fieldheading adds the correctly formatted id to error's id", () => {
+        // Arrange
+        const id = "exampleid";
+        const testId = "testid";
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                error="Error"
+                id={id}
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const error = wrapper.find(`[data-test-id="${testId}-error"]`);
+        expect(error).toContainMatchingElement(`[id="${id}-error"]`);
+    });
+
+    it("stype prop applies to the fieldheading container", () => {
+        // Arrange
+        const styles = StyleSheet.create({
+            style1: {
+                flexGrow: 1,
+                background: "blue",
+            },
+        });
+
+        // Act
+        const wrapper = mount(
+            <FieldHeading
+                field={<TextField id="tf-1" value="" onChange={() => {}} />}
+                label="Label"
+                error="Error"
+                style={styles.style1}
+            />,
+        );
+
+        // Assert
+        const container = wrapper.find("View").at(0);
+        expect(container).toHaveStyle(styles.style1);
+    });
+});

package/src/components/__tests__/labeled-text-field.test.js

@@ -0,0 +1,442 @@
+//@flow
+import * as React from "react";
+import {mount} from "enzyme";
+
+import {StyleSheet} from "aphrodite";
+import LabeledTextField from "../labeled-text-field.js";
+
+const wait = (delay: number = 0) =>
+    new Promise((resolve, reject) => {
+        // eslint-disable-next-line no-restricted-syntax
+        return setTimeout(resolve, delay);
+    });
+
+describe("LabeledTextField", () => {
+    it("labeledtextfield becomes focused", () => {
+        // Arrange
+        const wrapper = mount(
+            <LabeledTextField label="Label" value="" onChange={() => {}} />,
+        );
+        const field = wrapper.find("TextFieldInternal");
+
+        // Act
+        field.simulate("focus");
+
+        // Assert
+        expect(wrapper.find("LabeledTextFieldInternal")).toHaveState(
+            "focused",
+            true,
+        );
+    });
+
+    it("labeledtextfield becomes blurred", async () => {
+        // Arrange
+        const wrapper = mount(
+            <LabeledTextField label="Label" value="" onChange={() => {}} />,
+        );
+        const field = wrapper.find("TextFieldInternal");
+
+        // Act
+        field.simulate("focus");
+        await wait(0);
+        field.simulate("blur");
+
+        // Assert
+        expect(wrapper.find("LabeledTextFieldInternal")).toHaveState(
+            "focused",
+            false,
+        );
+    });
+
+    it("id prop is passed to input", () => {
+        // Arrange
+        const id = "exampleid";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                id={id}
+                label="Label"
+                value=""
+                onChange={() => {}}
+                disabled={true}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[id="${id}-field"]`);
+    });
+
+    it("auto-generated id is passed to input when id prop is not set", () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField label="Label" value="" onChange={() => {}} />,
+        );
+
+        // Assert
+        // Since the generated id is unique, we cannot know what it will be.
+        // We only test if the id attribute starts with "uid-" and ends with "-field".
+        const input = wrapper.find("input");
+        expect(input.props()["id"]).toMatch(/uid-.*-field/);
+    });
+
+    it("type prop is passed to input", () => {
+        // Arrange
+        const type = "email";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                type={type}
+                label="Label"
+                value=""
+                onChange={() => {}}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(`[type="${type}"]`);
+    });
+
+    it("label prop is rendered", () => {
+        // Arrange
+        const label = "Label";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField label={label} value="" onChange={() => {}} />,
+        );
+
+        // Assert
+        expect(wrapper).toIncludeText(label);
+    });
+
+    it("description prop is rendered", () => {
+        // Arrange
+        const description = "Description";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                description={description}
+                value=""
+                onChange={() => {}}
+            />,
+        );
+
+        // Assert
+        expect(wrapper).toIncludeText(description);
+    });
+
+    it("value prop is set on mount", () => {
+        // Arrange
+        const value = "Value";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value={value}
+                onChange={() => {}}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toHaveValue(value);
+    });
+
+    it("value prop change from parent reflects on input value", async () => {
+        // Arrange
+        const handleChange = jest.fn((newValue: string) => {});
+
+        const wrapper = mount(
+            <LabeledTextField label="Label" value="" onChange={handleChange} />,
+        );
+
+        // Act
+        const newValue = "new value";
+        wrapper.setProps({value: newValue});
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toHaveValue(newValue);
+    });
+
+    it("disabled prop disables the input", () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                disabled={true}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toBeDisabled();
+    });
+
+    it("validate prop is called when input changes", () => {
+        // Arrange
+        const validate = jest.fn((value: string): ?string => {});
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                validate={validate}
+            />,
+        );
+
+        // Act
+        const newValue = "New Value";
+        const input = wrapper.find("input");
+        input.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(validate).toHaveBeenCalledWith(newValue);
+    });
+
+    it("onValidate prop is called on new validated input", () => {
+        // Arrange
+        const handleValidate = jest.fn((errorMessage: ?string) => {});
+        const errorMessage = "Password must be at least 8 characters long";
+
+        const validate = (value: string): ?string => {
+            if (value.length < 8) {
+                return errorMessage;
+            }
+        };
+
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value="LongerThan8Chars"
+                onChange={() => {}}
+                validate={validate}
+                onValidate={handleValidate}
+            />,
+        );
+
+        // Act
+        const input = wrapper.find("input");
+        input.simulate("change", {target: {value: "Short"}});
+
+        // Assert
+        expect(handleValidate).toHaveBeenCalledWith(errorMessage);
+    });
+
+    it("onChange prop is called on input change", () => {
+        // Arrange
+        const handleChange = jest.fn((newValue: string) => {});
+
+        const wrapper = mount(
+            <LabeledTextField label="Label" value="" onChange={handleChange} />,
+        );
+
+        // Act
+        const newValue = "new value";
+        const input = wrapper.find("input");
+        input.simulate("change", {target: {value: newValue}});
+
+        // Assert
+        expect(handleChange).toHaveBeenCalledWith(newValue);
+    });
+
+    it("onKeyDown prop is called on keyboard keypress", () => {
+        // Arrange
+        const handleKeyDown = jest.fn(
+            (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+                return event.key;
+            },
+        );
+
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                onKeyDown={handleKeyDown}
+            />,
+        );
+
+        // Act
+        const key = "Enter";
+        const input = wrapper.find("input");
+        input.simulate("keyDown", {key: key});
+
+        // Assert
+        expect(handleKeyDown).toHaveReturnedWith(key);
+    });
+
+    it("onFocus prop is called when field is focused", () => {
+        // Arrange
+        const handleFocus = jest.fn(() => {});
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                onFocus={handleFocus}
+            />,
+        );
+
+        // Act
+        const field = wrapper.find("TextFieldInternal");
+        field.simulate("focus");
+
+        // Assert
+        expect(handleFocus).toHaveBeenCalled();
+    });
+
+    it("onBlur prop is called when field is blurred", async () => {
+        // Arrange
+        const handleBlur = jest.fn(() => {});
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                onBlur={handleBlur}
+            />,
+        );
+
+        // Act
+        const field = wrapper.find("TextFieldInternal");
+        field.simulate("focus");
+        await wait(0);
+        field.simulate("blur");
+
+        // Assert
+        expect(handleBlur).toHaveBeenCalled();
+    });
+
+    it("placeholder prop is passed to input", async () => {
+        // Arrange
+        const placeholder = "Placeholder";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                placeholder={placeholder}
+            />,
+        );
+
+        // Assert
+        const input = wrapper.find("input");
+        expect(input).toContainMatchingElement(
+            `[placeholder="${placeholder}"]`,
+        );
+    });
+
+    it("light prop is passed to textfield", async () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                light={true}
+            />,
+        );
+
+        // Assert
+        const textField = wrapper.find("TextFieldInternal");
+        expect(textField).toHaveProp("light", true);
+    });
+
+    it("style prop is passed to fieldheading", async () => {
+        // Arrange
+        const styles = StyleSheet.create({
+            style1: {
+                minWidth: 250,
+                background: "blue",
+            },
+        });
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                style={styles.style1}
+            />,
+        );
+
+        // Assert
+        const fieldHeading = wrapper.find("FieldHeading");
+        expect(fieldHeading).toHaveStyle(styles.style1);
+    });
+
+    it("testId prop is passed to textfield", async () => {
+        // Arrange
+        const testId = "example-testid";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                testId={testId}
+            />,
+        );
+
+        // Assert
+        const textField = wrapper.find(`[data-test-id="${testId}-field"]`);
+        expect(textField).toExist();
+    });
+
+    it("readOnly prop is passed to textfield", async () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                readOnly={true}
+            />,
+        );
+
+        // Assert
+        const textField = wrapper.find("TextFieldInternal");
+        expect(textField).toHaveProp("readOnly", true);
+    });
+
+    it("autoComplete prop is passed to textfield", async () => {
+        // Arrange
+        const autoComplete = "name";
+
+        // Act
+        const wrapper = mount(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                autoComplete={autoComplete}
+            />,
+        );
+
+        // Assert
+        const textField = wrapper.find("TextFieldInternal");
+        expect(textField).toHaveProp("autoComplete", autoComplete);
+    });
+});