@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/dist/strings.js

@@ -5,5 +5,10 @@
   */
  
 module.exports = [
-    i18n._("foo() = %(foo)s", {}),
+    i18n._("\"True Proportion\" Label", {}),
+    i18n._("Number of trials", {}),
+    i18n._("Proportion or Percentage", {}),
+    i18n._("Why is this choice %(correctOrIncorrect)s?", {}),
+    i18n._("X-Axis Label", {}),
+    i18n._("Y-Axis Label", {}),
 ];

package/package.json

@@ -3,7 +3,7 @@
         "access": "public"
     },
     "name": "@khanacademy/perseus-editor",
-    "version": "0.0.1",
+    "version": "0.1.2",
     "description": "Perseus editors",
     "module": "dist/es/index.js",
     "main": "dist/index.js",
@@ -12,18 +12,30 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/perseus": "^0.0.1"
+        "@khanacademy/perseus": "^0.2.1"
     },
     "devDependencies": {
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "aphrodite": "^1.2.5",
+        "classnames": "^1.1.4",
+        "create-react-class": "^15.6.3",
+        "jquery": "^2.1.1",
         "perseus-build-settings": "^0.0.1",
+        "prop-types": "^15.6.1",
         "react": "16.14.0",
-        "react-dom": "16.14.0"
+        "react-dom": "16.14.0",
+        "underscore": "^1.4.4"
     },
     "peerDependencies": {
         "@khanacademy/wonder-blocks-i18n": "^1.2.3",
+        "aphrodite": "^1.2.5",
+        "classnames": "^1.1.4",
+        "create-react-class": "^15.6.3",
+        "jquery": "^2.1.1",
+        "prop-types": "^15.6.1",
         "react": "16.14.0",
-        "react-dom": "16.14.0"
+        "react-dom": "16.14.0",
+        "underscore": "^1.4.4"
     },
     "author": "",
     "license": "MIT"

package/src/README.md

@@ -0,0 +1,7 @@
+The Perseus editor, with all the widgets.
+
+TODO(benkraft): Figure out and document how this relates to the other perseus
+packages.
+
+Code-Owner: Learning Platform
+Crowdin-Category: content.chrome

package/src/__stories__/editor.stories.js

@@ -0,0 +1,33 @@
+// @flow
+import {ApiOptions, Dependencies} from "@khanacademy/perseus";
+import * as React from "react";
+
+import {question1} from "../__testdata__/input-number_testdata.js";
+import Editor from "../editor.jsx";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing.js";
+
+export default {
+    title: "Perseus/Editor",
+};
+
+export const Rational = (): React.Node => {
+    registerAllWidgetsAndEditorsForTesting();
+    Dependencies.getDependencies().shouldUseFutureKaTeX(false);
+
+    return (
+        <Editor
+            apiOptions={ApiOptions.defaults}
+            content={question1.content}
+            placeholder=""
+            widgets={question1.widgets}
+            images={question1.images}
+            disabled={false}
+            widgetEnabled={true}
+            immutableWidgets={false}
+            showWordCount={true}
+            warnNoPrompt={true}
+            warnNoWidgets={true}
+            onChange={(props) => {}}
+        />
+    );
+};

package/src/__stories__/section-control-button.stories.jsx

@@ -0,0 +1,27 @@
+// @flow
+import {icons} from "@khanacademy/perseus";
+import * as React from "react";
+
+import SectionControlButton from "../section-control-button.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus Editor/Widgets/Section Control Button",
+}: Story);
+
+export const ButtonForEditingSectionsOfContentWithInArticleEditor = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <SectionControlButton
+            icon={icons.iconTrash}
+            onClick={() => {}}
+            title="Remove image widget"
+        />
+    );
+};

package/src/__testdata__/input-number_testdata.js

@@ -0,0 +1,28 @@
+// @flow
+import type {PerseusRenderer, InputNumberWidget} from "@khanacademy/perseus";
+
+export const question1: PerseusRenderer = {
+    content:
+        "A sequence is defined recursively as follows:\n\n\n$\\qquad\\displaystyle{{a}_{n}}=-\\frac{1}{a_{n-1}-1} \n~~~~~~\\text{ with}\\qquad\\displaystyle{{a}_{0}}=\\frac{1}{2}\\,$\n\n\nFind the term $a_3$ in the sequence.\n\n[[\u2603 input-number 1]]",
+    images: {},
+    widgets: {
+        "input-number 1": ({
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "input-number",
+            options: {
+                maxError: 0.1,
+                inexact: false,
+                value: 0.5,
+                simplify: "required",
+                answerType: "number",
+                size: "normal",
+            },
+            alignment: "default",
+        }: InputNumberWidget),
+    },
+};

package/src/__tests__/editor_test.jsx

@@ -0,0 +1,123 @@
+// @flow
+import {ApiOptions, Dependencies, Widgets} from "@khanacademy/perseus";
+import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import * as React from "react";
+import "@testing-library/jest-dom"; // Imports custom mathers
+
+import {testDependencies} from "../../../../testing/test-dependencies.js";
+import {question1} from "../__testdata__/input-number_testdata.js";
+import Editor from "../editor.jsx";
+
+describe("Editor", () => {
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+    });
+
+    describe("input-number widget", () => {
+        beforeEach(async () => {
+            const [InputNumberWidget, InputNumberEditor] = await Promise.all([
+                import("@khanacademy/perseus").then((m) => m.InputNumber),
+                import("../widgets/input-number-editor.jsx").then(
+                    (m) => m.default,
+                ),
+            ]);
+            Widgets.registerWidgets([InputNumberWidget]);
+            Widgets.registerEditors([InputNumberEditor]);
+        });
+
+        test("clicking on the widget editor should open it", async () => {
+            // Arrange
+            testDependencies.shouldUseFutureKaTeX(false);
+            render(
+                <Editor
+                    apiOptions={ApiOptions.defaults}
+                    content={question1.content}
+                    placeholder=""
+                    widgets={question1.widgets}
+                    images={question1.images}
+                    disabled={false}
+                    widgetEnabled={true}
+                    immutableWidgets={false}
+                    showWordCount={true}
+                    warnNoPrompt={true}
+                    warnNoWidgets={true}
+                    onChange={(props) => {}}
+                />,
+            );
+            await testDependencies.getKaTeX();
+
+            // Act
+            const widgetDisclosure = screen.getByRole("link", {
+                name: "input-number 1",
+            });
+            userEvent.click(widgetDisclosure);
+            const correctAnswerInput = screen.getByLabelText("Correct answer:");
+
+            // Assert
+            expect(correctAnswerInput).toHaveValue("0.5");
+        });
+
+        it("should update values", async () => {
+            // Arrange
+            const changeFn = jest.fn();
+            testDependencies.shouldUseFutureKaTeX(false);
+            render(
+                <Editor
+                    apiOptions={ApiOptions.defaults}
+                    content={question1.content}
+                    placeholder=""
+                    widgets={question1.widgets}
+                    images={question1.images}
+                    disabled={false}
+                    widgetEnabled={true}
+                    immutableWidgets={false}
+                    showWordCount={true}
+                    warnNoPrompt={true}
+                    warnNoWidgets={true}
+                    onChange={changeFn}
+                />,
+            );
+            await testDependencies.getKaTeX();
+
+            // Act
+            const widgetDisclosure = screen.getByRole("link", {
+                name: "input-number 1",
+            });
+            userEvent.click(widgetDisclosure);
+            const correctAnswerInput = screen.getByLabelText("Correct answer:");
+
+            userEvent.clear(correctAnswerInput);
+            userEvent.paste(correctAnswerInput, "0.75");
+            userEvent.tab(); // blurring the input triggers onChange to be called
+
+            // Assert
+            expect(changeFn).toHaveBeenCalledWith(
+                {
+                    widgets: {
+                        "input-number 1": {
+                            graded: true,
+                            version: {major: 0, minor: 0},
+                            static: false,
+                            type: "input-number",
+                            options: {
+                                value: 0.75,
+                                simplify: "required",
+                                size: "normal",
+                                inexact: false,
+                                maxError: 0.1,
+                                answerType: "number",
+                                rightAlign: false,
+                            },
+                            alignment: "default",
+                        },
+                    },
+                },
+                undefined,
+                undefined,
+            );
+        });
+    });
+});