@khanacademy/perseus 0.0.1 → 0.1.0

package/src/widgets/__tests__/renderQuestion.jsx

@@ -0,0 +1,65 @@
+// @flow
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import {render} from "@testing-library/react";
+import * as React from "react";
+
+import * as Perseus from "../../index.js";
+import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing.js";
+
+import type {PerseusRenderer} from "../../perseus-types.js";
+import type {APIOptions} from "../../types.js";
+
+type RenderResult = $Call<typeof render, any, any>;
+
+export const renderQuestion = (
+    question: PerseusRenderer,
+    apiOptions: APIOptions = Object.freeze({}),
+    extraProps?: React.ElementConfig<typeof Perseus.Renderer>,
+): ({|
+    container: HTMLElement,
+    renderer: Perseus.Renderer,
+    rerender: (
+        question: PerseusRenderer,
+        extraProps?: React.ElementConfig<typeof Perseus.Renderer>,
+    ) => void,
+    unmount: RenderResult["unmount"],
+|}) => {
+    registerAllWidgetsForTesting();
+    let renderer: Perseus.Renderer | null = null;
+    const {container, rerender, unmount} = render(
+        <RenderStateRoot>
+            <Perseus.Renderer
+                ref={(node) => (renderer = node)}
+                content={question.content}
+                images={question.images}
+                widgets={question.widgets}
+                problemNum={0}
+                apiOptions={apiOptions}
+                {...extraProps}
+            />
+        </RenderStateRoot>,
+    );
+    if (!renderer) {
+        throw new Error(`Failed to render!`);
+    }
+    const renderAgain = (question, extraProps) => {
+        rerender(
+            <RenderStateRoot>
+                <Perseus.Renderer
+                    ref={(node) => (renderer = node)}
+                    content={question.content}
+                    images={question.images}
+                    widgets={question.widgets}
+                    problemNum={0}
+                    apiOptions={apiOptions}
+                    {...extraProps}
+                />
+            </RenderStateRoot>,
+        );
+        if (!renderer) {
+            throw new Error(`Failed to rerender!`);
+        }
+    };
+
+    return {container, renderer, rerender: renderAgain, unmount};
+};

package/src/widgets/__tests__/unit_test.jsx

@@ -0,0 +1,144 @@
+// @flow
+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("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.");
+    });
+});
+
+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);
+    });
+
+    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);
+    });
+
+    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.");
+    });
+
+    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.",
+        );
+    });
+});

package/src/widgets/__tests__/video_test.jsx

@@ -0,0 +1,55 @@
+// @flow
+
+import "@testing-library/jest-dom";
+
+import {testDependencies} from "../../../../../testing/test-dependencies.js";
+import * as Dependencies from "../../dependencies.js";
+import {question1} from "../__testdata__/video_testdata.js";
+
+import {renderQuestion} from "./renderQuestion.jsx";
+
+import type {APIOptions} from "../../types.js";
+
+describe("video widget", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            useVideo: (id, kind) => {
+                return {
+                    status: "success",
+                    data: {
+                        video: null,
+                    },
+                };
+            },
+        });
+    });
+
+    it("should snapshot", () => {
+        // Arrange
+        const apiOptions: APIOptions = {
+            isMobile: false,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot on mobile", () => {
+        // Arrange
+        jest.useRealTimers();
+
+        const apiOptions: APIOptions = {
+            isMobile: true,
+        };
+
+        // Act
+        const {container} = renderQuestion(question1, apiOptions);
+
+        // Assert
+        expect(container).toMatchSnapshot("first mobile render");
+    });
+});

package/src/widgets/categorizer.jsx

@@ -0,0 +1,338 @@
+/* eslint-disable react/sort-comp */
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import {StyleSheet, css} from "aphrodite";
+import classNames from "classnames";
+import * as React from "react";
+import _ from "underscore";
+
+import InlineIcon from "../components/inline-icon.jsx";
+import {linterContextDefault} from "../gorgon/proptypes.js";
+import {iconCircle, iconCircleThin} from "../icon-paths.js";
+import * as Changeable from "../mixins/changeable.jsx";
+import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated.jsx";
+import {ClassNames as ApiClassNames} from "../perseus-api.jsx";
+import Renderer from "../renderer.jsx";
+import mediaQueries from "../styles/media-queries.js";
+import sharedStyles from "../styles/shared.js";
+import Util from "../util.js";
+
+import type {PerseusCategorizerWidgetOptions} from "../perseus-types.js";
+import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
+
+type UserInput = $FlowFixMe;
+
+export type Rubric = PerseusCategorizerWidgetOptions;
+
+type Props = {|
+    ...WidgetProps<RenderProps, Rubric>,
+    values: $ReadOnlyArray<string>,
+|};
+
+type DefaultProps = {|
+    items: Props["items"],
+    categories: Props["categories"],
+    values: Props["values"],
+    linterContext: Props["linterContext"],
+|};
+
+type State = {|
+    uniqueId: string,
+|};
+
+export class Categorizer extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        items: [],
+        categories: [],
+        values: [],
+        linterContext: linterContextDefault,
+    };
+
+    state: State = {
+        uniqueId: _.uniqueId("perseus_radio_"),
+    };
+
+    change: (...args: $ReadOnlyArray<mixed>) => $FlowFixMe = (...args) => {
+        // $FlowFixMe[incompatible-call]
+        return Changeable.change.apply(this, args);
+    };
+
+    getUserInput: () => UserInput = () => {
+        return Categorizer.getUserInputFromProps(this.props);
+    };
+
+    render(): React.Node {
+        const self = this;
+
+        // In this context, isMobile is used to differentiate mobile from
+        // desktop.
+        const isMobile = this.props.apiOptions.isMobile;
+        let indexedItems = this.props.items.map((item, n) => [item, n]);
+        if (this.props.randomizeItems) {
+            // $FlowFixMe[incompatible-call]
+            indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
+        }
+
+        const table = (
+            <table className={"categorizer-table " + css(styles.mobileTable)}>
+                <thead>
+                    <tr>
+                        <th>&nbsp;</th>
+                        {this.props.categories.map((category, i) => {
+                            // Array index is the correct key here, as that's
+                            // how category grading actually works -- no way
+                            // to add or remove categories or items in the
+                            // middle. (If we later add that, this should be
+                            // fixed.)
+                            return (
+                                <th className={css(styles.header)} key={i}>
+                                    <Renderer
+                                        content={category}
+                                        linterContext={this.props.linterContext}
+                                    />
+                                </th>
+                            );
+                        })}
+                    </tr>
+                </thead>
+                <tbody>
+                    {indexedItems.map((indexedItem) => {
+                        const item = indexedItem[0];
+                        const itemNum = indexedItem[1];
+                        const uniqueId = self.state.uniqueId + "_" + itemNum;
+                        return (
+                            <tr key={itemNum}>
+                                <td>
+                                    <Renderer
+                                        content={item}
+                                        linterContext={this.props.linterContext}
+                                    />
+                                </td>
+                                {self.props.categories.map(
+                                    (catName, catNum) => {
+                                        const selected =
+                                            self.props.values[itemNum] ===
+                                            catNum;
+                                        return (
+                                            <td
+                                                className={
+                                                    "category " +
+                                                    css(styles.cell)
+                                                }
+                                                key={catNum}
+                                            >
+                                                {/* a pseudo-label: toggle the
+                                value of the checkbox when this div or the
+                                checkbox is clicked */}
+                                                <div
+                                                    className={
+                                                        ApiClassNames.INTERACTIVE
+                                                    }
+                                                    role="button"
+                                                    aria-label={catName}
+                                                    // eslint-disable-next-line react/jsx-no-bind
+                                                    onClick={this.onChange.bind(
+                                                        this,
+                                                        itemNum,
+                                                        catNum,
+                                                    )}
+                                                >
+                                                    {isMobile && (
+                                                        <input
+                                                            type="radio"
+                                                            name={uniqueId}
+                                                            className={css(
+                                                                sharedStyles.responsiveInput,
+                                                                sharedStyles.responsiveRadioInput,
+                                                            )}
+                                                            checked={selected}
+                                                            // eslint-disable-next-line react/jsx-no-bind
+                                                            onChange={this.onChange.bind(
+                                                                this,
+                                                                itemNum,
+                                                                catNum,
+                                                            )}
+                                                            onClick={(e) =>
+                                                                e.stopPropagation()
+                                                            }
+                                                        />
+                                                    )}
+                                                    {!isMobile && (
+                                                        <span
+                                                            className={css(
+                                                                styles.radioSpan,
+                                                                selected &&
+                                                                    styles.checkedRadioSpan,
+                                                                this.props
+                                                                    .static &&
+                                                                    selected &&
+                                                                    styles.staticCheckedRadioSpan,
+                                                            )}
+                                                        >
+                                                            {selected ? (
+                                                                <InlineIcon
+                                                                    {...iconCircle}
+                                                                />
+                                                            ) : (
+                                                                <InlineIcon
+                                                                    {...iconCircleThin}
+                                                                />
+                                                            )}
+                                                        </span>
+                                                    )}
+                                                </div>
+                                            </td>
+                                        );
+                                    },
+                                )}
+                            </tr>
+                        );
+                        /* eslint-enable max-len */
+                    })}
+                </tbody>
+            </table>
+        );
+
+        // TODO(benkomalo): kill CSS-based styling and move everything to
+        // aphrodite.
+        const extraClassNames = classNames({
+            "categorizer-container": true,
+            "static-mode": this.props.static,
+        });
+        const inlineStyles = this.props.apiOptions.isMobile
+            ? [styles.fullBleedContainer]
+            : [];
+
+        return (
+            <div className={extraClassNames + " " + css(...inlineStyles)}>
+                {table}
+            </div>
+        );
+    }
+
+    onChange: (number, number) => void = (itemNum, catNum) => {
+        const values = [...this.props.values];
+        values[itemNum] = catNum;
+        this.change("values", values);
+        this.props.trackInteraction();
+    };
+
+    simpleValidate: (Rubric) => PerseusScore = (rubric) => {
+        return Categorizer.validate(this.getUserInput(), rubric);
+    };
+
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        let completed = true;
+        let allCorrect = true;
+        _.each(rubric.values, function (value, i) {
+            if (userInput.values[i] == null) {
+                completed = false;
+            }
+            if (userInput.values[i] !== value) {
+                allCorrect = false;
+            }
+        });
+        if (!completed) {
+            return {
+                type: "invalid",
+                message: i18n._(
+                    "Make sure you select something for every row.",
+                ),
+            };
+        }
+        return {
+            type: "points",
+            earned: allCorrect ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    static getUserInputFromProps(props: Props): UserInput {
+        return WidgetJsonifyDeprecated.getUserInputFromProps(props);
+    }
+}
+
+// TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
+const pageMargin = 16;
+
+// Stylesheets aren't directly testable
+/* istanbul ignore next */
+const styles = StyleSheet.create({
+    mobileTable: {
+        [mediaQueries.smOrSmaller]: {
+            minWidth: "auto",
+        },
+    },
+
+    fullBleedContainer: {
+        [mediaQueries.mdOrSmaller]: {
+            marginLeft: -pageMargin,
+            marginRight: -pageMargin,
+            overflowX: "auto",
+        },
+    },
+
+    header: {
+        textAlign: "center",
+        verticalAlign: "bottom",
+    },
+
+    cell: {
+        textAlign: "center",
+        padding: 0,
+        color: "#ccc",
+        verticalAlign: "middle",
+    },
+
+    radioSpan: {
+        fontSize: 30,
+        paddingRight: 3,
+
+        ":hover": {
+            color: "#999",
+        },
+    },
+
+    checkedRadioSpan: {
+        color: "#333",
+    },
+
+    // .static-mode is applied by the Categorizer when the rendered
+    // widget is static; in this case we gray out the choices to show
+    // the user that the widget can't be interacted with.
+    staticCheckedRadioSpan: {
+        color: "#888",
+    },
+});
+
+type RenderProps = {|
+    items: PerseusCategorizerWidgetOptions["items"],
+    categories: PerseusCategorizerWidgetOptions["categories"],
+    randomizeItems: PerseusCategorizerWidgetOptions["randomizeItems"],
+    // Depends on whether the widget is in static mode
+    values?: PerseusCategorizerWidgetOptions["values"],
+|};
+
+export default ({
+    name: "categorizer",
+    displayName: "Categorizer",
+    widget: Categorizer,
+    transform: (
+        widgetOptions: PerseusCategorizerWidgetOptions,
+    ): RenderProps => {
+        return _.pick(widgetOptions, "items", "categories", "randomizeItems");
+    },
+    staticTransform: (
+        editorProps: PerseusCategorizerWidgetOptions,
+    ): RenderProps => {
+        return _.pick(
+            editorProps,
+            "items",
+            "categories",
+            "values",
+            "randomizeItems",
+        );
+    },
+    isLintable: true,
+}: WidgetExports<typeof Categorizer>);