@khanacademy/perseus 2.0.1 → 3.0.0

package/src/widgets/__tests__/unit_test.jsx

@@ -1,144 +1,169 @@
 // @flow
+import "@testing-library/jest-dom";
+import {render} from "@testing-library/react";
+import React from "react";
+
 import Unit, {countSigfigs, sigfigPrint} from "../unit.jsx";
 
 const {widget} = Unit;
 const UnitWidget = widget;
 
-describe("countSigfigs", () => {
-    it("gets a few simple cases right", () => {
-        expect(countSigfigs("5")).toEqual(1);
-        expect(countSigfigs("500")).toEqual(1);
-        expect(countSigfigs("5.00")).toEqual(3);
-        expect(countSigfigs("5.01")).toEqual(3);
-        expect(countSigfigs("05.01")).toEqual(3);
-    });
-});
+describe("Unit Widget", () => {
+    it("renders", () => {
+        // Arrange
+        const props = {
+            onBlur: () => {},
+            onFocus: () => {},
+            onChange: () => {},
+        };
 
-describe("displaySigFigs", () => {
-    it("gets a few simple cases right", () => {
-        expect(sigfigPrint(150, 3)).toEqual("150.");
-        expect(sigfigPrint(0.0005, 2)).toEqual("5.0 x 10^-4");
-        expect(sigfigPrint(15000, 2)).toEqual("1.5 x 10^4");
-        expect(sigfigPrint(50, 2)).toEqual("50.");
+        // Act
+        const {container} = render(<Unit.widget {...props} />);
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
     });
-});
 
-describe("Unit Widget Grading", () => {
-    it("accepts correct answers", () => {
-        let maybeValid = UnitWidget.validate("5 tbsp", {
-            value: "5 tbsp",
-            accepting: "all",
-            sigfigs: 1,
+    describe("countSigfigs", () => {
+        it("gets a few simple cases right", () => {
+            expect(countSigfigs("5")).toEqual(1);
+            expect(countSigfigs("500")).toEqual(1);
+            expect(countSigfigs("5.00")).toEqual(3);
+            expect(countSigfigs("5.01")).toEqual(3);
+            expect(countSigfigs("05.01")).toEqual(3);
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
-
-        maybeValid = UnitWidget.validate("0.0739 L", {
-            value: "5.00 tbsp",
-            accepting: "all",
-            sigfigs: 3,
-        });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
-
-        maybeValid = UnitWidget.validate("5.00 tbsp", {
-            value: "0.0739 L",
-            accepting: "all",
-            sigfigs: 3,
-        });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
-
-        maybeValid = UnitWidget.validate("1124 lb", {
-            value: "5000 N",
-            accepting: "all",
-            sigfigs: 4,
-        });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
-
-        maybeValid = UnitWidget.validate("1124 lb", {
-            value: "5000 N",
-            accepting: "some",
-            acceptingUnits: ["lb"],
-            sigfigs: 4,
-        });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
     });
 
-    it("handles loss of precision gracefully", () => {
-        const maybeValid = UnitWidget.validate("1.12 lb", {
-            value: "5 N",
-            accepting: "some",
-            acceptingUnits: ["lb"],
-            sigfigs: 3,
+    describe("displaySigFigs", () => {
+        it("gets a few simple cases right", () => {
+            expect(sigfigPrint(150, 3)).toEqual("150.");
+            expect(sigfigPrint(0.0005, 2)).toEqual("5.0 x 10^-4");
+            expect(sigfigPrint(15000, 2)).toEqual("1.5 x 10^4");
+            expect(sigfigPrint(50, 2)).toEqual("50.");
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(1);
     });
 
-    it("flags incorrect units", () => {
-        const maybeValid = UnitWidget.validate("5 tbsp", {
-            value: "5 m",
-            accepting: "all",
-            sigfigs: 1,
+    describe("Unit Widget Grading", () => {
+        it("accepts correct answers", () => {
+            let maybeValid = UnitWidget.validate("5 tbsp", {
+                value: "5 tbsp",
+                accepting: "all",
+                sigfigs: 1,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
+
+            maybeValid = UnitWidget.validate("0.0739 L", {
+                value: "5.00 tbsp",
+                accepting: "all",
+                sigfigs: 3,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
+
+            maybeValid = UnitWidget.validate("5.00 tbsp", {
+                value: "0.0739 L",
+                accepting: "all",
+                sigfigs: 3,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
+
+            maybeValid = UnitWidget.validate("1124 lb", {
+                value: "5000 N",
+                accepting: "all",
+                sigfigs: 4,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
+
+            maybeValid = UnitWidget.validate("1124 lb", {
+                value: "5000 N",
+                accepting: "some",
+                acceptingUnits: ["lb"],
+                sigfigs: 4,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(0);
-        expect(maybeValid.message).toEqual("Check your units.");
-    });
 
-    it("flags incorrect sigfigs", () => {
-        let maybeValid = UnitWidget.validate("5.0 tbsp", {
-            value: "5 tbsp",
-            accepting: "all",
-            sigfigs: 1,
+        it("handles loss of precision gracefully", () => {
+            const maybeValid = UnitWidget.validate("1.12 lb", {
+                value: "5 N",
+                accepting: "some",
+                acceptingUnits: ["lb"],
+                sigfigs: 3,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(1);
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(0);
-        expect(maybeValid.message).toEqual("Check your significant figures.");
-
-        maybeValid = UnitWidget.validate("5 tbsp", {
-            value: "5.0 tbsp",
-            accepting: "all",
-            sigfigs: 2,
+
+        it("flags incorrect units", () => {
+            const maybeValid = UnitWidget.validate("5 tbsp", {
+                value: "5 m",
+                accepting: "all",
+                sigfigs: 1,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(0);
+            expect(maybeValid.message).toEqual("Check your units.");
+        });
+
+        it("flags incorrect sigfigs", () => {
+            let maybeValid = UnitWidget.validate("5.0 tbsp", {
+                value: "5 tbsp",
+                accepting: "all",
+                sigfigs: 1,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(0);
+            expect(maybeValid.message).toEqual(
+                "Check your significant figures.",
+            );
+
+            maybeValid = UnitWidget.validate("5 tbsp", {
+                value: "5.0 tbsp",
+                accepting: "all",
+                sigfigs: 2,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(0);
+            expect(maybeValid.message).toEqual(
+                "Check your significant figures.",
+            );
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(0);
-        expect(maybeValid.message).toEqual("Check your significant figures.");
-    });
 
-    it("flags numerically incorrect answers", () => {
-        const maybeValid = UnitWidget.validate("8.1 tbsp", {
-            value: "5.0 tbsp",
-            accepting: "all",
-            sigfigs: 2,
+        it("flags numerically incorrect answers", () => {
+            const maybeValid = UnitWidget.validate("8.1 tbsp", {
+                value: "5.0 tbsp",
+                accepting: "all",
+                sigfigs: 2,
+            });
+            if (maybeValid.type === "invalid") {
+                throw new Error("invalid unit");
+            }
+            expect(maybeValid.earned).toEqual(0);
+            expect(maybeValid.message).toEqual(
+                "That answer is numerically incorrect.",
+            );
         });
-        if (maybeValid.type === "invalid") {
-            throw new Error("invalid unit");
-        }
-        expect(maybeValid.earned).toEqual(0);
-        expect(maybeValid.message).toEqual(
-            "That answer is numerically incorrect.",
-        );
     });
 });

package/src/widgets/expression.jsx

@@ -9,7 +9,6 @@ import * as React from "react";
 import _ from "underscore";
 
 import InlineIcon from "../components/inline-icon.jsx";
-import InputWithExamples from "../components/input-with-examples.jsx";
 import MathInput from "../components/math-input.jsx";
 import Tooltip from "../components/tooltip.jsx";
 import {iconExclamationSign} from "../icon-paths.js";
@@ -398,10 +397,8 @@ export class Expression extends React.Component<Props, ExpressionState> {
 
     // HACK(joel)
     insert: (text: string) => void = (text: string) => {
-        if (!this.props.apiOptions.staticRender) {
-            // eslint-disable-next-line react/no-string-refs
-            this.refs.input.insert(text);
-        }
+        // eslint-disable-next-line react/no-string-refs
+        this.refs.input.insert(text);
     };
 
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<any>> = () => {
@@ -458,26 +455,6 @@ export class Expression extends React.Component<Props, ExpressionState> {
                 />
             );
         }
-        if (this.props.apiOptions.staticRender) {
-            // To make things slightly easier, we just use an InputWithExamples
-            // component to handle the static rendering, which is the same
-            // component used by InputNumber and NumericInput
-            return (
-                <InputWithExamples
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="input"
-                    value={this.props.value}
-                    type="tex"
-                    examples={[]}
-                    shouldShowExamples={false}
-                    onChange={this.changeAndTrack}
-                    onFocus={this._handleFocus}
-                    onBlur={this._handleBlur}
-                    id={this.props.widgetId}
-                    linterContext={this.props.linterContext}
-                />
-            );
-        }
         // TODO(alex): Style this tooltip to be more consistent with other
         // tooltips on the site; align to left middle (once possible)
         const errorTooltip = (

package/src/widgets/input-number.jsx

@@ -136,10 +136,7 @@ class InputNumber extends React.Component<Props> {
     };
 
     shouldShowExamples: () => boolean = () => {
-        return (
-            this.props.answerType !== "number" &&
-            !this.props.apiOptions.staticRender
-        );
+        return this.props.answerType !== "number";
     };
 
     render(): React.Node {
@@ -188,7 +185,7 @@ class InputNumber extends React.Component<Props> {
                 value={this.props.currentValue}
                 onChange={this.handleChange}
                 style={inputStyles}
-                type={this._getInputType()}
+                type="text"
                 examples={this.examples()}
                 shouldShowExamples={this.shouldShowExamples()}
                 onFocus={this._handleFocus}
@@ -204,13 +201,6 @@ class InputNumber extends React.Component<Props> {
         this.props.onChange({currentValue: newValue}, cb);
     };
 
-    _getInputType: () => "tex" | "text" = () => {
-        if (this.props.apiOptions.staticRender) {
-            return "tex";
-        }
-        return "text";
-    };
-
     _handleFocus: () => void = () => {
         this.props.onFocus([]);
         // HACK(kevinb): We want to dismiss the feedback popover that webapp

package/src/widgets/matrix.jsx

@@ -9,7 +9,6 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import MathOutput from "../components/math-output.jsx";
 import NumberInput from "../components/number-input.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import TextInput from "../components/text-input.jsx";
@@ -26,19 +25,12 @@ import type {WidgetExports, WidgetProps} from "../types.js";
 const {assert} = InteractiveUtil;
 const {stringArrayOfSize} = Util;
 
-// We store three sets of dimensions for the brackets, for our three types of
-// inputs, which vary in formatting: (1) the "static" inputs rendered for the
-// mobile apps (that are being deprecated), (2) the normal inputs rendered on
-// desktop, and (3) the keypad-based inputs newly rendered for the mobile apps
-// and mobile web. The first two sets of dimensions come from `matrix.less`;
+// We store two sets of dimensions for the brackets, for our two types of
+// inputs, which vary in formatting: (1) the normal inputs rendered on
+// desktop and (2) the keypad-based inputs newly rendered for the mobile apps
+// and mobile web. These sets of dimensions come from `matrix.less`;
 // the keypad-based input's dimensions are provided to the component itself,
 // below.
-const STATIC_INPUT_DIMENSIONS = {
-    INPUT_MARGIN: 4,
-    INPUT_HEIGHT: 38,
-    INPUT_WIDTH: 82,
-};
-
 const NORMAL_DIMENSIONS = {
     INPUT_MARGIN: 3,
     INPUT_HEIGHT: 30,
@@ -162,8 +154,6 @@ class Matrix extends React.Component<Props, State> {
         let dimensions;
         if (this.props.apiOptions.customKeypad) {
             dimensions = KEYPAD_INPUT_DIMENSIONS;
-        } else if (this.props.apiOptions.staticRender) {
-            dimensions = STATIC_INPUT_DIMENSIONS;
         } else {
             dimensions = NORMAL_DIMENSIONS;
         }
@@ -314,12 +304,6 @@ class Matrix extends React.Component<Props, State> {
                                                 }
                                             />
                                         );
-                                    } else if (
-                                        this.props.apiOptions.staticRender
-                                    ) {
-                                        MatrixInput = (
-                                            <MathOutput {...inputProps} />
-                                        );
                                     } else if (this.props.numericInput) {
                                         MatrixInput = (
                                             <NumberInput {...inputProps} />

package/src/widgets/number-line.jsx

@@ -6,7 +6,6 @@ import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import Graphie from "../components/graphie.jsx";
-import MathOutput from "../components/math-output.jsx";
 import NumberInput from "../components/number-input.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import InteractiveUtil from "../interactive2/interactive-util.js";
@@ -656,8 +655,6 @@ class NumberLine extends React.Component<Props, State> {
             let Input;
             if (this.props.apiOptions.customKeypad) {
                 Input = SimpleKeypadInput;
-            } else if (this.props.apiOptions.staticRender) {
-                Input = MathOutput;
             } else {
                 Input = NumberInput;
             }

package/src/widgets/numeric-input.jsx

@@ -348,13 +348,6 @@ export class NumericInput extends React.Component<Props, State> {
         this.props.trackInteraction();
     };
 
-    _getInputType: () => "tex" | "text" = () => {
-        if (this.props.apiOptions.staticRender) {
-            return "tex";
-        }
-        return "text";
-    };
-
     _handleFocus: () => void = () => {
         this.props.onFocus([]);
         // HACK(kevinb): We want to dismiss the feedback popover that webapp
@@ -418,7 +411,7 @@ export class NumericInput extends React.Component<Props, State> {
                     value={this.props.currentValue}
                     onChange={this.handleChange}
                     labelText={labelText}
-                    type={this._getInputType()}
+                    type="text"
                     examples={this.examples()}
                     shouldShowExamples={this.shouldShowExamples()}
                     onFocus={this._handleFocus}

package/src/widgets/radio/choice.jsx

@@ -180,11 +180,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             });
                         }}
                         onChange={() => {}}
-                        disabled={
-                            disabled ||
-                            apiOptions.staticRender ||
-                            apiOptions.readOnly
-                        }
+                        disabled={disabled || apiOptions.readOnly}
                         tabIndex={-1}
                         className={ClassNames.RADIO.OPTION_CONTENT}
                     />
@@ -201,11 +197,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                             crossedOut: false,
                         });
                     }}
-                    disabled={
-                        disabled ||
-                        apiOptions.staticRender ||
-                        apiOptions.readOnly
-                    }
+                    disabled={disabled || apiOptions.readOnly}
                     style={{flex: 1, color: Color.offBlack, userSelect: "text"}}
                     ref={(forwardedRef: any)}
                     aria-hidden="true"
@@ -311,7 +303,6 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
                                 aria-label={`Open menu for Choice ${getChoiceLetter(
                                     pos,
                                 )}`}
-                                disabled={apiOptions.staticRender}
                                 style={{
                                     alignSelf: "center",
                                     padding: "5px",

package/src/widgets/simulator.jsx

@@ -448,8 +448,6 @@ class Simulator extends React.Component<$FlowFixMe, $FlowFixMe> {
 
         const highlight = "0px 0px 0px 2px rgba(255, 165, 0, 1)";
         const highlightStyle = _.extend({}, inputStyle, {
-            WebkitBoxShadow: highlight,
-            MozBoxShadow: highlight,
             boxShadow: highlight,
             transition: "all 0.15s",
         });
@@ -460,13 +458,9 @@ class Simulator extends React.Component<$FlowFixMe, $FlowFixMe> {
             ? highlightStyle
             : unhighlightStyle;
 
-        const InputComponent = this.props.apiOptions.staticRender
-            ? MathOutput
-            : NumberInput;
-
         const proportionInput = (
             <div>
-                <InputComponent
+                <NumberInput
                     // eslint-disable-next-line react/no-string-refs
                     ref="userProportion"
                     style={style}
@@ -489,7 +483,7 @@ class Simulator extends React.Component<$FlowFixMe, $FlowFixMe> {
 
         const sampleSizeInput = (
             <div>
-                <InputComponent
+                <NumberInput
                     // eslint-disable-next-line react/no-string-refs
                     ref="sampleSize"
                     style={style}

package/src/widgets/table.jsx

@@ -10,7 +10,6 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
-import MathOutput from "../components/math-output.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import InteractiveUtil from "../interactive2/interactive-util.js";
 import {ApiOptions} from "../perseus-api.jsx";
@@ -102,9 +101,6 @@ class Table extends React.Component<$FlowFixMe> {
             // input in table.less. Those values should be kept in-sync.
             inputStyle = {width: 80};
             extraInputProps.keypadElement = this.props.keypadElement;
-        } else if (this.props.apiOptions.staticRender) {
-            InputComponent = MathOutput;
-            inputStyle = {};
         } else {
             InputComponent = "input";
             inputStyle = {};
@@ -241,8 +237,6 @@ class Table extends React.Component<$FlowFixMe> {
         const inputComponent = this.refs[inputID];
         if (this.props.apiOptions.customKeypad) {
             inputComponent.focus();
-        } else if (this.props.apiOptions.staticRender) {
-            inputComponent.focus();
         } else {
             // $FlowFixMe[prop-missing]
             // $FlowFixMe[incompatible-use]
@@ -256,8 +250,6 @@ class Table extends React.Component<$FlowFixMe> {
         const inputComponent = this.refs[inputID];
         if (this.props.apiOptions.customKeypad) {
             inputComponent.blur();
-        } else if (this.props.apiOptions.staticRender) {
-            inputComponent.blur();
         } else {
             // $FlowFixMe[prop-missing]
             // $FlowFixMe[incompatible-use]

package/src/widgets/transformer.jsx

@@ -30,7 +30,6 @@ import _ from "underscore";
 
 import Graph from "../components/graph.jsx";
 import InlineIcon from "../components/inline-icon.jsx";
-import MathOutput from "../components/math-output.jsx";
 import NumberInput from "../components/number-input.jsx";
 import SimpleKeypadInput from "../components/simple-keypad-input.jsx";
 import {getDependencies} from "../dependencies.js";
@@ -260,9 +259,6 @@ const inputComponentForApiOptions = (apiOptions) => {
     if (apiOptions.customKeypad) {
         return SimpleKeypadInput;
     }
-    if (apiOptions.staticRender) {
-        return MathOutput;
-    }
     return NumberInput;
 };