@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/diffs/__stories__/tags-diff.stories.jsx

@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from "react";
+
+import TagsDiff from "../tags-diff.jsx";
+
+import Wrapper from "./perseus-diff-wrapper.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+    decorators: $ReadOnlyArray<
+        (StoryComponent: typeof React.Component) => React.Node,
+    >,
+|};
+
+export default ({
+    title: "Perseus/Editor/Diffs/Tags Diff",
+    decorators: [
+        (StoryComponent) => (
+            <Wrapper>
+                <StoryComponent />
+            </Wrapper>
+        ),
+    ],
+}: Story);
+
+export const Example = (args: StoryArgs): React.Node => {
+    return (
+        <TagsDiff
+            title="tags"
+            beforeOnly={["Math", "Biology", "History"]}
+            afterOnly={["World War I"]}
+            intersection={["Physics", "Chemistry"]}
+        />
+    );
+};

package/src/diffs/__stories__/text-diff.stories.jsx

@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from "react";
+
+import TextDiff from "../text-diff.jsx";
+
+import Wrapper from "./perseus-diff-wrapper.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+    decorators: $ReadOnlyArray<
+        (StoryComponent: typeof React.Component) => React.Node,
+    >,
+|};
+
+export default ({
+    title: "Perseus/Editor/Diffs/Text Diff",
+    decorators: [
+        (StoryComponent) => (
+            <Wrapper>
+                <StoryComponent />
+            </Wrapper>
+        ),
+    ],
+}: Story);
+
+export const Example = (args: StoryArgs): React.Node => {
+    return (
+        <TextDiff
+            title="A day in the life of a text diff"
+            before="🥱 Hello world!"
+            after="😴 Goodbye world!"
+        />
+    );
+};

package/src/diffs/__tests__/split-diff_test.js

@@ -0,0 +1,34 @@
+// @flow
+import splitDiff from "../split-diff.jsx";
+
+describe("split diff", function () {
+    it("splits an empty diff", function () {
+        expect(splitDiff([])).toEqual([]);
+    });
+
+    it("does not split a one line string", function () {
+        expect(splitDiff([{value: "hello"}])).toEqual([[{value: "hello"}]]);
+    });
+
+    it("splits a multiline string into two parts", function () {
+        expect(splitDiff([{value: "he\nllo"}])).toEqual([
+            [{value: "he"}],
+            [{value: "llo"}],
+        ]);
+    });
+
+    it("keeps things on the same line when splitting a changed value", () => {
+        expect(
+            splitDiff([{value: "hello"}, {value: "goodbye", removed: true}]),
+        ).toEqual([[{value: "hello"}, {value: "goodbye", removed: true}]]);
+    });
+
+    it("splits a string with a change and a newline", function () {
+        expect(
+            splitDiff([{value: "hello"}, {value: "good\nbye", removed: true}]),
+        ).toEqual([
+            [{value: "hello"}, {value: "good", removed: true}],
+            [{value: "bye", removed: true}],
+        ]);
+    });
+});

package/src/diffs/__tests__/string-array-diff_test.js

@@ -0,0 +1,74 @@
+// @flow
+import stringArrayDiff from "../string-array-diff.jsx";
+
+describe("string array diff", function () {
+    it("diffs an empty diff", function () {
+        expect(stringArrayDiff([], [])).toEqual({
+            before: [],
+            after: [],
+        });
+    });
+
+    it("diffs the same values", function () {
+        expect(stringArrayDiff([1], [1])).toEqual({
+            before: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+            ],
+            after: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+            ],
+        });
+    });
+
+    it("diffs an added value", function () {
+        expect(stringArrayDiff([1], [1, 2])).toEqual({
+            before: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+            ],
+            after: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+                {
+                    status: "added",
+                    value: 2,
+                },
+            ],
+        });
+    });
+
+    it("diffs a removed value", function () {
+        expect(stringArrayDiff([1, 2, 3], [1])).toEqual({
+            before: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+                {
+                    status: "removed",
+                    value: 2,
+                },
+                {
+                    status: "removed",
+                    value: 3,
+                },
+            ],
+            after: [
+                {
+                    status: "unchanged",
+                    value: 1,
+                },
+            ],
+        });
+    });
+});

package/src/diffs/__tests__/structured-item-diff_test.js

@@ -0,0 +1,432 @@
+// @flow
+import {buildEmptyItemTreeForShape, shapes} from "@khanacademy/perseus";
+
+import StructuredItemDiff from "../structured-item-diff.jsx";
+
+const gtpPassageShape = shapes.shape({
+    directions: shapes.content,
+    passage: shapes.content,
+    overview: shapes.content,
+    hints: shapes.hints,
+
+    questions: shapes.arrayOf(
+        shapes.shape({
+            tags: shapes.tags,
+            question: shapes.content,
+            keepInMind: shapes.content,
+            overview: shapes.content,
+            hints: shapes.hints,
+        }),
+    ),
+});
+
+const gtpSingleQuestionShape = shapes.shape({
+    blurb: shapes.content,
+    question: shapes.content,
+    hints: shapes.hints,
+});
+
+const emptyContent = buildEmptyItemTreeForShape(shapes.content);
+const emptyHint = buildEmptyItemTreeForShape(shapes.hint);
+
+describe("StructuredItemDiff", function () {
+    /**
+     * Testing adding all empty content items,
+     * and then testing removing by reversing the order.
+     */
+    it("test adding empty items, removing empty items", function () {
+        const beforeList = [
+            [emptyContent, ["directions"]],
+            [emptyContent, ["passage"]],
+            [emptyContent, ["overview"]],
+        ];
+
+        const afterList = [
+            [emptyContent, ["directions"]],
+            [emptyContent, ["passage"]],
+            [emptyContent, ["overview"]],
+            [emptyHint, ["hints", 0]],
+            [emptyHint, ["hints", 1]],
+            [emptyContent, ["questions", 0, "tags"]],
+            [emptyContent, ["questions", 0, "question"]],
+            [emptyContent, ["questions", 0, "keepInMind"]],
+            [emptyContent, ["questions", 0, "overview"]],
+            [emptyContent, ["questions", 1, "tags"]],
+            [emptyContent, ["questions", 1, "question"]],
+            [emptyContent, ["questions", 1, "keepInMind"]],
+            [emptyContent, ["questions", 1, "overview"]],
+            [emptyHint, ["questions", 1, "hints", 0]],
+            [emptyHint, ["questions", 1, "hints", 1]],
+        ];
+
+        const addingResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            beforeList.slice(),
+            afterList.slice(),
+            addingResult,
+            gtpPassageShape,
+            [],
+        );
+
+        const removingResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            afterList,
+            beforeList,
+            removingResult,
+            gtpPassageShape,
+            [],
+        );
+
+        expect(addingResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+        ]);
+
+        expect(removingResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+        ]);
+    });
+
+    /**
+     * Testing editing content of items,
+     * including top level items, as well as hints,
+     * and items within questions.
+     */
+    it("test editing items", function () {
+        const passage = buildEmptyItemTreeForShape(shapes.content);
+        // $FlowFixMe[prop-missing]
+        passage.content = "passage";
+        const firstQuestion = buildEmptyItemTreeForShape(shapes.content);
+        // $FlowFixMe[prop-missing]
+        firstQuestion.content = "question 1";
+        const firstHint = buildEmptyItemTreeForShape(shapes.hint);
+        // $FlowFixMe[prop-missing]
+        firstHint.content = "hint 1";
+        const secondQuestionFirstHint = buildEmptyItemTreeForShape(shapes.hint);
+        // $FlowFixMe[prop-missing]
+        secondQuestionFirstHint.content = "question 1 hint 1";
+        const beforeList = [
+            [emptyContent, ["directions"]],
+            [passage, ["passage"]],
+            [emptyContent, ["overview"]],
+            [firstHint, ["hints", 0]],
+            [emptyHint, ["hints", 1]],
+            [emptyContent, ["questions", 0, "tags"]],
+            [firstQuestion, ["questions", 0, "question"]],
+            [emptyContent, ["questions", 0, "keepInMind"]],
+            [emptyContent, ["questions", 0, "overview"]],
+            [emptyContent, ["questions", 1, "tags"]],
+            [emptyContent, ["questions", 1, "question"]],
+            [emptyContent, ["questions", 1, "keepInMind"]],
+            [emptyContent, ["questions", 1, "overview"]],
+            [secondQuestionFirstHint, ["questions", 1, "hints", 0]],
+            [emptyHint, ["questions", 1, "hints", 1]],
+        ];
+
+        const passageEdited = buildEmptyItemTreeForShape(shapes.content);
+        // $FlowFixMe[prop-missing]
+        passageEdited.content = "passage edited";
+        const firstQuestionEdited = buildEmptyItemTreeForShape(shapes.content);
+        // $FlowFixMe[prop-missing]
+        firstQuestionEdited.content = "question edited 1";
+        const firstHintEdited = buildEmptyItemTreeForShape(shapes.hint);
+        // $FlowFixMe[prop-missing]
+        firstHintEdited.content = "edited hint 1";
+        const secondQuestionFirstHintEdited = buildEmptyItemTreeForShape(
+            shapes.hint,
+        );
+        // $FlowFixMe[prop-missing]
+        secondQuestionFirstHintEdited.content = "question 1 hint 1 edited";
+        const afterList = [
+            [emptyContent, ["directions"]],
+            [passageEdited, ["passage"]],
+            [emptyContent, ["overview"]],
+            [firstHintEdited, ["hints", 0]],
+            [emptyHint, ["hints", 1]],
+            [emptyContent, ["questions", 0, "tags"]],
+            [firstQuestionEdited, ["questions", 0, "question"]],
+            [emptyContent, ["questions", 0, "keepInMind"]],
+            [emptyContent, ["questions", 0, "overview"]],
+            [emptyContent, ["questions", 1, "tags"]],
+            [emptyContent, ["questions", 1, "question"]],
+            [emptyContent, ["questions", 1, "keepInMind"]],
+            [emptyContent, ["questions", 1, "overview"]],
+            [secondQuestionFirstHintEdited, ["questions", 1, "hints", 0]],
+            [emptyHint, ["questions", 1, "hints", 1]],
+        ];
+
+        const firstResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            beforeList.slice(),
+            afterList.slice(),
+            firstResult,
+            gtpPassageShape,
+            [],
+        );
+
+        const secondResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            afterList,
+            beforeList,
+            secondResult,
+            gtpPassageShape,
+            [],
+        );
+
+        expect(firstResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+        ]);
+
+        expect(secondResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+        ]);
+    });
+
+    /**
+     * Testing these cases:
+     * (1) adding/removing overall hints
+     * (2) adding/removing question hints of a middle question
+     *      (question is surrounded by other questions)
+     * (3) adding/removing question hints of the last question
+     * (4) adding/removing questions entirely
+     *
+     * This test is done with empty items, since we've tested for edits,
+     * and generateCompletePathLists() doesn't look at the contents.
+     */
+    it("testing adding and removing in special cases", function () {
+        const beforeList = [
+            [emptyContent, ["directions"]],
+            [emptyContent, ["passage"]],
+            [emptyContent, ["overview"]],
+            [emptyContent, ["questions", 0, "tags"]],
+            [emptyContent, ["questions", 0, "question"]],
+            [emptyContent, ["questions", 0, "keepInMind"]],
+            [emptyContent, ["questions", 0, "overview"]],
+            [emptyContent, ["questions", 1, "tags"]],
+            [emptyContent, ["questions", 1, "question"]],
+            [emptyContent, ["questions", 1, "keepInMind"]],
+            [emptyContent, ["questions", 1, "overview"]],
+            [emptyHint, ["questions", 1, "hints", 0]],
+            [emptyHint, ["questions", 1, "hints", 1]],
+            [emptyContent, ["questions", 2, "tags"]],
+            [emptyContent, ["questions", 2, "question"]],
+            [emptyContent, ["questions", 2, "keepInMind"]],
+            [emptyContent, ["questions", 2, "overview"]],
+            [emptyHint, ["questions", 2, "hints", 0]],
+            [emptyHint, ["questions", 2, "hints", 1]],
+            [emptyContent, ["questions", 3, "tags"]],
+            [emptyContent, ["questions", 3, "question"]],
+            [emptyContent, ["questions", 3, "keepInMind"]],
+            [emptyContent, ["questions", 3, "overview"]],
+        ];
+
+        const afterList = [
+            [emptyContent, ["directions"]],
+            [emptyContent, ["passage"]],
+            [emptyContent, ["overview"]],
+            [emptyHint, ["hints", 0]], // add
+            [emptyHint, ["hints", 1]], // add
+            [emptyContent, ["questions", 0, "tags"]],
+            [emptyContent, ["questions", 0, "question"]],
+            [emptyContent, ["questions", 0, "keepInMind"]],
+            [emptyContent, ["questions", 0, "overview"]],
+            [emptyHint, ["questions", 0, "hints", 0]], // add
+            [emptyHint, ["questions", 0, "hints", 1]], // add
+            [emptyContent, ["questions", 1, "tags"]],
+            [emptyContent, ["questions", 1, "question"]],
+            [emptyContent, ["questions", 1, "keepInMind"]],
+            [emptyContent, ["questions", 1, "overview"]],
+            [emptyHint, ["questions", 1, "hints", 0]],
+            // remove second hint of question 1
+            [emptyContent, ["questions", 2, "tags"]],
+            [emptyContent, ["questions", 2, "question"]],
+            [emptyContent, ["questions", 2, "keepInMind"]],
+            [emptyContent, ["questions", 2, "overview"]],
+            [emptyHint, ["questions", 2, "hints", 0]],
+            [emptyHint, ["questions", 2, "hints", 1]],
+            // removed question 2, added two hints to question 3
+        ];
+
+        const firstResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            beforeList.slice(),
+            afterList.slice(),
+            firstResult,
+            gtpPassageShape,
+            [],
+        );
+
+        const secondResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            afterList,
+            beforeList,
+            secondResult,
+            gtpPassageShape,
+            [],
+        );
+
+        expect(firstResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 0, "hints", 0],
+            ["questions", 0, "hints", 1],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+            ["questions", 2, "tags"],
+            ["questions", 2, "question"],
+            ["questions", 2, "keepInMind"],
+            ["questions", 2, "overview"],
+            ["questions", 2, "hints", 0],
+            ["questions", 2, "hints", 1],
+            ["questions", 3, "tags"],
+            ["questions", 3, "question"],
+            ["questions", 3, "keepInMind"],
+            ["questions", 3, "overview"],
+        ]);
+
+        expect(secondResult).toEqual([
+            ["directions"],
+            ["passage"],
+            ["overview"],
+            ["hints", 0],
+            ["hints", 1],
+            ["questions", 0, "tags"],
+            ["questions", 0, "question"],
+            ["questions", 0, "keepInMind"],
+            ["questions", 0, "overview"],
+            ["questions", 0, "hints", 0],
+            ["questions", 0, "hints", 1],
+            ["questions", 1, "tags"],
+            ["questions", 1, "question"],
+            ["questions", 1, "keepInMind"],
+            ["questions", 1, "overview"],
+            ["questions", 1, "hints", 0],
+            ["questions", 1, "hints", 1],
+            ["questions", 2, "tags"],
+            ["questions", 2, "question"],
+            ["questions", 2, "keepInMind"],
+            ["questions", 2, "overview"],
+            ["questions", 2, "hints", 0],
+            ["questions", 2, "hints", 1],
+            ["questions", 3, "tags"],
+            ["questions", 3, "question"],
+            ["questions", 3, "keepInMind"],
+            ["questions", 3, "overview"],
+        ]);
+    });
+
+    /**
+     * Testing single question layout shape.
+     */
+    it("testing single question layout", function () {
+        const beforeList = [
+            [emptyContent, ["blurb"]],
+            [emptyContent, ["question"]],
+        ];
+
+        const afterList = [
+            [emptyContent, ["blurb"]],
+            [emptyContent, ["question"]],
+            [emptyHint, ["hints", 0]],
+            [emptyHint, ["hints", 1]],
+        ];
+
+        const firstResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            beforeList.slice(),
+            afterList.slice(),
+            firstResult,
+            gtpSingleQuestionShape,
+            [],
+        );
+
+        const secondResult = [];
+        StructuredItemDiff.generateCompletePathsList(
+            afterList,
+            beforeList,
+            secondResult,
+            gtpSingleQuestionShape,
+            [],
+        );
+
+        expect(firstResult).toEqual([
+            ["blurb"],
+            ["question"],
+            ["hints", 0],
+            ["hints", 1],
+        ]);
+
+        expect(secondResult).toEqual([
+            ["blurb"],
+            ["question"],
+            ["hints", 0],
+            ["hints", 1],
+        ]);
+    });
+});

package/src/diffs/__tests__/widget-diff-performer_test.js

@@ -0,0 +1,44 @@
+// @flow
+import diff from "../widget-diff-performer.jsx";
+
+describe("widget-diff-performer", function () {
+    it("diffs a same single value", function () {
+        const sameValue = diff("a", "a");
+        expect(sameValue.status).toEqual("unchanged");
+    });
+
+    it("diffs a different single value", function () {
+        const differentValue = diff("a", "b");
+        expect(differentValue.status).toEqual("changed");
+    });
+
+    it("diffs two identical objects", function () {
+        const objSame = diff({a: "b"}, {a: "b"});
+        expect(objSame.status).toEqual("unchanged");
+
+        expect(objSame.children).toHaveLength(1);
+
+        const child = objSame.children[0];
+        expect(child.status).toEqual("unchanged");
+    });
+
+    it("diffs two different objects", function () {
+        const objDiff = diff({a: "b"}, {a: "c"});
+        expect(objDiff.status).toEqual("changed");
+
+        expect(objDiff.children).toHaveLength(1);
+
+        const diffChild = objDiff.children[0];
+        expect(diffChild.status).toEqual("changed");
+    });
+
+    it("diffs a removed object", function () {
+        const removedObj = diff({a: "b"}, {});
+        expect(removedObj.children[0].status).toEqual("removed");
+    });
+
+    it("diffs an added object", function () {
+        const addedObj = diff({}, {a: "c"});
+        expect(addedObj.children[0].status).toEqual("added");
+    });
+});