@khanacademy/perseus 2.1.0 → 4.0.0

package/src/widgets/__tests__/renderQuestion.jsx

@@ -1,66 +0,0 @@
-// @flow
-import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
-// eslint-disable-next-line import/no-extraneous-dependencies
-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

@@ -1,144 +0,0 @@
-// @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

@@ -1,55 +0,0 @@
-// @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

@@ -1,343 +0,0 @@
-/* eslint-disable react/sort-comp */
-// @flow
-import {linterContextDefault} from "@khanacademy/perseus-linter";
-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 {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>
-                        <td className={css(styles.emptyHeaderCell)} />
-                        {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
-/* c8 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",
-    },
-
-    emptyHeaderCell: {
-        backgroundColor: "inherit",
-        borderBottom: "2px solid #ccc",
-    },
-
-    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>);