@khanacademy/perseus 0.0.1 → 0.2.1

package/src/multi-items/__tests__/multi-renderer_test.js

@@ -0,0 +1,903 @@
+// @flow
+
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+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 MockWidgetExport from "../../__tests__/mock-widget.jsx";
+import * as Dependencies from "../../dependencies.js";
+import {registerAllWidgetsForTesting} from "../../util/register-all-widgets-for-testing.js";
+import {registerWidget} from "../../widgets.js";
+import {
+    mockedQuestion1,
+    question1,
+    simpleQuestionShape,
+} from "../__testdata__/multi-renderer_testdata.js";
+import MultiRenderer from "../multi-renderer.jsx";
+import shapes from "../shapes.js";
+
+import type {Widget} from "../../renderer.jsx";
+import type {FilterCriterion} from "../../types.js";
+import type {Item} from "../item-types.js";
+import type {Tree} from "../tree-types.js";
+
+// A little helper used in the render callback of a MultiRenderer.
+const SimpleLayout = ({renderers}: {|renderers: any|}): React.Node => {
+    if (renderers == null) {
+        throw new Error("renderers was null");
+    }
+
+    const {blurb, question, hints} = renderers;
+    return (
+        <div>
+            <div id="blurb">{blurb}</div>
+            <div id="question">{question}</div>
+            <div id="hints">{hints?.firstN(1)}</div>
+        </div>
+    );
+};
+
+// Note that the `question` passed in _must_ be of the simpleQuestionShape
+// shape.
+const renderSimpleQuestion = (question: Item) => {
+    // Arrange
+    let renderer: ?MultiRenderer = null;
+    const result = render(
+        <RenderStateRoot>
+            <MultiRenderer
+                item={question}
+                shape={simpleQuestionShape}
+                ref={(r) => (renderer = r)}
+            >
+                {({renderers}) => <SimpleLayout renderers={renderers} />}
+            </MultiRenderer>
+        </RenderStateRoot>,
+    );
+    if (renderer == null) {
+        throw new Error("Rendering failed.");
+    }
+
+    return {
+        ...result,
+        renderer,
+    };
+};
+
+// A test helper to find widgets in a MultiRenderer.
+const _findWidgets = (
+    renderer: MultiRenderer,
+    filterCriterion: FilterCriterion,
+): Tree<$ReadOnlyArray<?Widget>, $ReadOnlyArray<?Widget>, null> => {
+    return renderer._mapRenderers((data) => {
+        if (data.ref == null) {
+            return [];
+        }
+
+        // Note we use findInternalWidgets() here instead of
+        // _findWidgets(). Otherwise we get the same widget appearing in
+        // multiple places in the result tree.
+        return data.ref.findInternalWidgets(filterCriterion);
+    });
+};
+
+describe("multi-item renderer", () => {
+    beforeAll(() => {
+        registerWidget("mock-widget", MockWidgetExport);
+    });
+
+    beforeEach(() => {
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
+            testDependencies,
+        );
+        registerAllWidgetsForTesting();
+    });
+
+    it("should snapshot", () => {
+        // Arrange and Act
+        const {container} = renderSimpleQuestion(question1);
+
+        // Assert
+        expect(container).toMatchSnapshot("initial render");
+    });
+
+    it("should render the error if one occurs (item doesn't match shape)", () => {
+        // Arrange
+        // We mock out `console.error` because the we're explicitly
+        // triggering and error, but we don't want that to fail the test.
+        jest.spyOn(console, "error").mockImplementation(() => {});
+
+        // Act
+        render(
+            <RenderStateRoot>
+                <MultiRenderer
+                    item={question1}
+                    shape={shapes.shape({broken: shapes.content})}
+                >
+                    {({renderers}) => {
+                        return <div />;
+                    }}
+                </MultiRenderer>
+            </RenderStateRoot>,
+        );
+
+        // Assert
+        expect(screen.getByText(/Error rendering:/)).toBeInTheDocument();
+    });
+
+    describe("state serialization", () => {
+        it("should return serialized state from all items", () => {
+            // Arrange
+            const {renderer} = renderSimpleQuestion(question1);
+
+            // Nudge the widget to a non-default state (ie. an item is
+            // selected, a value is entered). You can see the result of this in the `choiceStates`
+            // array in the captured state below where the choice at index 2 has
+            // `"selected": true` (instead of false) and the input-number has a `currentValue`.
+            userEvent.click(screen.getAllByRole("radio")[2]); // Correct
+            userEvent.paste(screen.getByRole("textbox"), "+42"); // Correct
+
+            // Act
+            const state = renderer._getSerializedState(null);
+
+            // Assert
+            expect(state).toMatchInlineSnapshot(`
+                Object {
+                  "blurb": Object {},
+                  "hints": Array [
+                    null,
+                    null,
+                    null,
+                  ],
+                  "question": Object {
+                    "input-number 1": Object {
+                      "answerType": "number",
+                      "currentValue": "+42",
+                      "rightAlign": undefined,
+                      "simplify": "required",
+                      "size": "normal",
+                    },
+                    "radio 1": Object {
+                      "choiceStates": Array [
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": true,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                      ],
+                      "choices": Array [
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $3$, $4$, and $5$",
+                          "correct": false,
+                          "originalIndex": 0,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.
+
+                This choice is similar to triangle $ABC$.",
+                          "content": "A triangle with side lengths of $6$, $7$, and $10$",
+                          "correct": false,
+                          "originalIndex": 1,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $10$, $12$, and $18$",
+                          "correct": false,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 2,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $12$, $14$, and $20$",
+                          "correct": true,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 3,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.
+
+                This choice is similar to triangle $ABC$.",
+                          "content": "A triangle with side lengths of $24$, $28$, and $40$",
+                          "correct": false,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 4,
+                        },
+                      ],
+                      "countChoices": false,
+                      "deselectEnabled": false,
+                      "hasNoneOfTheAbove": false,
+                      "multipleSelect": false,
+                      "numCorrect": 1,
+                      "selectedChoices": Array [
+                        false,
+                        false,
+                        false,
+                        true,
+                        false,
+                      ],
+                    },
+                  },
+                }
+            `);
+        });
+
+        it("should return values from lastSerializedState if ref's getSerializedState returns null", () => {
+            // Arrange
+            const {renderer} = renderSimpleQuestion(question1);
+
+            userEvent.click(screen.getAllByRole("radio")[2]);
+            userEvent.paste(screen.getByRole("textbox"), "99");
+
+            // Act
+            const state = renderer._getSerializedState({
+                blurb: "last blurb",
+                hints: ["uno", "dos" /* intentionally not passing a third */],
+            });
+
+            // Assert
+            expect(state).toMatchInlineSnapshot(`
+                Object {
+                  "blurb": Object {},
+                  "hints": Array [
+                    "uno",
+                    "dos",
+                    undefined,
+                  ],
+                  "question": Object {
+                    "input-number 1": Object {
+                      "answerType": "number",
+                      "currentValue": "99",
+                      "rightAlign": undefined,
+                      "simplify": "required",
+                      "size": "normal",
+                    },
+                    "radio 1": Object {
+                      "choiceStates": Array [
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": true,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                        Object {
+                          "correctnessShown": false,
+                          "crossedOut": false,
+                          "highlighted": false,
+                          "previouslyAnswered": false,
+                          "rationaleShown": false,
+                          "readOnly": false,
+                          "selected": false,
+                        },
+                      ],
+                      "choices": Array [
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $3$, $4$, and $5$",
+                          "correct": false,
+                          "originalIndex": 0,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.
+
+                This choice is similar to triangle $ABC$.",
+                          "content": "A triangle with side lengths of $6$, $7$, and $10$",
+                          "correct": false,
+                          "originalIndex": 1,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $10$, $12$, and $18$",
+                          "correct": false,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 2,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.",
+                          "content": "A triangle with side lengths of $12$, $14$, and $20$",
+                          "correct": true,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 3,
+                        },
+                        Object {
+                          "clue": "Congruent triangles have the same side lengths.
+
+                This choice is similar to triangle $ABC$.",
+                          "content": "A triangle with side lengths of $24$, $28$, and $40$",
+                          "correct": false,
+                          "isNoneOfTheAbove": false,
+                          "originalIndex": 4,
+                        },
+                      ],
+                      "countChoices": false,
+                      "deselectEnabled": false,
+                      "hasNoneOfTheAbove": false,
+                      "multipleSelect": false,
+                      "numCorrect": 1,
+                      "selectedChoices": Array [
+                        false,
+                        false,
+                        false,
+                        true,
+                        false,
+                      ],
+                    },
+                  },
+                }
+            `);
+        });
+
+        it("should restore serialized state to each widget", () => {
+            // Arrange
+            const {renderer} = renderSimpleQuestion(question1);
+
+            // This state was built by getting the renderer into this state
+            // using `userEvent` calls and then calling `getSerializedState()`
+            // on the renderer.
+            const state = {
+                blurb: {},
+                hints: [null, null, null],
+                question: {
+                    "input-number 1": {
+                        answerType: "number",
+                        currentValue: "+42",
+                        rightAlign: false,
+                        simplify: "required",
+                        size: "normal",
+                    },
+                    "radio 1": {
+                        choiceStates: [
+                            {
+                                correctnessShown: false,
+                                crossedOut: false,
+                                highlighted: false,
+                                previouslyAnswered: false,
+                                rationaleShown: false,
+                                readOnly: false,
+                                selected: false,
+                            },
+                            {
+                                correctnessShown: false,
+                                crossedOut: false,
+                                highlighted: false,
+                                previouslyAnswered: false,
+                                rationaleShown: false,
+                                readOnly: false,
+                                selected: false,
+                            },
+                            {
+                                correctnessShown: false,
+                                crossedOut: false,
+                                highlighted: false,
+                                previouslyAnswered: false,
+                                rationaleShown: false,
+                                readOnly: false,
+                                selected: true,
+                            },
+                            {
+                                correctnessShown: false,
+                                crossedOut: false,
+                                highlighted: false,
+                                previouslyAnswered: false,
+                                rationaleShown: false,
+                                readOnly: false,
+                                selected: false,
+                            },
+                            {
+                                correctnessShown: false,
+                                crossedOut: false,
+                                highlighted: false,
+                                previouslyAnswered: false,
+                                rationaleShown: false,
+                                readOnly: false,
+                                selected: false,
+                            },
+                        ],
+                        choices: [
+                            {
+                                clue: "Congruent triangles have the same side lengths.",
+                                content:
+                                    "A triangle with side lengths of $3$, $4$, and $5$",
+                                correct: false,
+                                originalIndex: 0,
+                            },
+                            {
+                                clue:
+                                    "Congruent triangles have the same side lengths.\n" +
+                                    "\n" +
+                                    "This choice is similar to triangle $ABC$.",
+                                content:
+                                    "A triangle with side lengths of $6$, $7$, and $10$",
+                                correct: false,
+                                originalIndex: 1,
+                            },
+                            {
+                                clue: "Congruent triangles have the same side lengths.",
+                                content:
+                                    "A triangle with side lengths of $10$, $12$, and $18$",
+                                correct: false,
+                                isNoneOfTheAbove: false,
+                                originalIndex: 2,
+                            },
+                            {
+                                clue: "Congruent triangles have the same side lengths.",
+                                content:
+                                    "A triangle with side lengths of $12$, $14$, and $20$",
+                                correct: true,
+                                isNoneOfTheAbove: false,
+                                originalIndex: 3,
+                            },
+                            {
+                                clue:
+                                    "Congruent triangles have the same side lengths.\n" +
+                                    "\n" +
+                                    "This choice is similar to triangle $ABC$.",
+                                content:
+                                    "A triangle with side lengths of $24$, $28$, and $40$",
+                                correct: false,
+                                isNoneOfTheAbove: false,
+                                originalIndex: 4,
+                            },
+                        ],
+                        countChoices: false,
+                        deselectEnabled: false,
+                        hasNoneOfTheAbove: false,
+                        multipleSelect: false,
+                        numCorrect: 1,
+                        selectedChoices: [false, false, false, true, false],
+                    },
+                },
+            };
+
+            // Act
+            renderer.restoreSerializedState(state);
+
+            // Assert
+            expect(screen.getAllByRole("radio")[0]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[1]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[2]).toBeChecked();
+            expect(screen.getAllByRole("radio")[3]).not.toBeChecked();
+            expect(screen.getAllByRole("radio")[4]).not.toBeChecked();
+            expect(screen.getByRole("textbox")).toHaveValue("+42");
+        });
+
+        it("should call callback when restore serialized state is complete", () => {
+            // Arrange
+            const {renderer} = renderSimpleQuestion(mockedQuestion1);
+            const callback = jest.fn();
+
+            // Act
+            renderer.restoreSerializedState(
+                {
+                    blurb: {"mock-widget 1": 1},
+                    hints: [2, 3],
+                    question: {
+                        "mock-widget 4": 4,
+                        "mock-widget 5": 5,
+                    },
+                },
+                callback,
+            );
+            jest.runOnlyPendingTimers();
+
+            // Assert
+            expect(callback).toHaveBeenCalled();
+        });
+    });
+
+    it("should find widgets in other parts of the tree", () => {
+        // Arrange
+        const {renderer} = renderSimpleQuestion(mockedQuestion1);
+        // Grab "mock-widget 5" out of the render tree. Note that the result
+        // here is a tree of the same shape as the `mockedQuestion1`'s shape.
+        // Each node in the tree is a `$ReadOnlyArray<?Widget>`.
+        const result = _findWidgets(renderer, (id) => id === "mock-widget 5");
+
+        // Act
+        // We're using the API provided to the widget we found ("mock-widget
+        // 5") to look into other parts of the render tree for another widget
+        // ("mock-widget 1"). This verifies that the MultiRenderer has
+        // correctly passed down a functioning `findWidgets` prop to the
+        // widgets.
+        // Oh the Flow warnings we'll suppress. Welcome to multi items.
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
+        // $FlowFixMe[incompatible-type]
+        // $FlowFixMe[not-a-function]
+        const widget1 = result.question[0].props.findWidgets("mock-widget 1");
+
+        // Assert
+        expect(widget1).not.toBeNull();
+    });
+
+    it("should return the scores in the shape of the tree", () => {
+        // Arrange
+        const {renderer} = renderSimpleQuestion(question1);
+
+        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
+        userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
+
+        // Act
+        const score = renderer.getScores();
+
+        // Assert
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "blurb": Object {
+                "correct": true,
+                "empty": false,
+                "guess": Array [],
+                "message": null,
+                "state": Object {},
+              },
+              "hints": Array [
+                null,
+                null,
+                null,
+              ],
+              "question": Object {
+                "correct": true,
+                "empty": false,
+                "guess": Array [
+                  Object {
+                    "choicesSelected": Array [
+                      false,
+                      false,
+                      false,
+                      true,
+                      false,
+                    ],
+                    "countChoices": false,
+                    "noneOfTheAboveIndex": null,
+                    "noneOfTheAboveSelected": false,
+                    "numCorrect": 1,
+                  },
+                  Object {
+                    "currentValue": "-42",
+                  },
+                ],
+                "message": null,
+                "state": Object {
+                  "input-number 1": Object {
+                    "answerType": "number",
+                    "currentValue": "-42",
+                    "rightAlign": undefined,
+                    "simplify": "required",
+                    "size": "normal",
+                  },
+                  "radio 1": Object {
+                    "choiceStates": Array [
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": true,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                    ],
+                    "choices": Array [
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $3$, $4$, and $5$",
+                        "correct": false,
+                        "originalIndex": 0,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.
+
+            This choice is similar to triangle $ABC$.",
+                        "content": "A triangle with side lengths of $6$, $7$, and $10$",
+                        "correct": false,
+                        "originalIndex": 1,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $10$, $12$, and $18$",
+                        "correct": false,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 2,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $12$, $14$, and $20$",
+                        "correct": true,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 3,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.
+
+            This choice is similar to triangle $ABC$.",
+                        "content": "A triangle with side lengths of $24$, $28$, and $40$",
+                        "correct": false,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 4,
+                      },
+                    ],
+                    "countChoices": false,
+                    "deselectEnabled": false,
+                    "hasNoneOfTheAbove": false,
+                    "multipleSelect": false,
+                    "numCorrect": 1,
+                    "selectedChoices": Array [
+                      false,
+                      false,
+                      false,
+                      true,
+                      false,
+                    ],
+                  },
+                },
+              },
+            }
+        `);
+    });
+
+    it("should return the composite score for the whole tree", () => {
+        // Arrange
+        const {renderer} = renderSimpleQuestion(question1);
+
+        userEvent.click(screen.getAllByRole("radio")[3]); // Correct
+        userEvent.paste(screen.getByRole("textbox"), "-42"); // Correct
+
+        // Act
+        const score = renderer.score();
+
+        // Assert
+        expect(score).toMatchInlineSnapshot(`
+            Object {
+              "correct": true,
+              "empty": false,
+              "guess": Object {
+                "blurb": Array [],
+                "hints": Array [
+                  null,
+                  null,
+                  null,
+                ],
+                "question": Array [
+                  Object {
+                    "choicesSelected": Array [
+                      false,
+                      false,
+                      false,
+                      true,
+                      false,
+                    ],
+                    "countChoices": false,
+                    "noneOfTheAboveIndex": null,
+                    "noneOfTheAboveSelected": false,
+                    "numCorrect": 1,
+                  },
+                  Object {
+                    "currentValue": "-42",
+                  },
+                ],
+              },
+              "message": null,
+              "state": Array [
+                Object {},
+                Object {
+                  "input-number 1": Object {
+                    "answerType": "number",
+                    "currentValue": "-42",
+                    "rightAlign": undefined,
+                    "simplify": "required",
+                    "size": "normal",
+                  },
+                  "radio 1": Object {
+                    "choiceStates": Array [
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": true,
+                      },
+                      Object {
+                        "correctnessShown": false,
+                        "crossedOut": false,
+                        "highlighted": false,
+                        "previouslyAnswered": false,
+                        "rationaleShown": false,
+                        "readOnly": false,
+                        "selected": false,
+                      },
+                    ],
+                    "choices": Array [
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $3$, $4$, and $5$",
+                        "correct": false,
+                        "originalIndex": 0,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.
+
+            This choice is similar to triangle $ABC$.",
+                        "content": "A triangle with side lengths of $6$, $7$, and $10$",
+                        "correct": false,
+                        "originalIndex": 1,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $10$, $12$, and $18$",
+                        "correct": false,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 2,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.",
+                        "content": "A triangle with side lengths of $12$, $14$, and $20$",
+                        "correct": true,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 3,
+                      },
+                      Object {
+                        "clue": "Congruent triangles have the same side lengths.
+
+            This choice is similar to triangle $ABC$.",
+                        "content": "A triangle with side lengths of $24$, $28$, and $40$",
+                        "correct": false,
+                        "isNoneOfTheAbove": false,
+                        "originalIndex": 4,
+                      },
+                    ],
+                    "countChoices": false,
+                    "deselectEnabled": false,
+                    "hasNoneOfTheAbove": false,
+                    "multipleSelect": false,
+                    "numCorrect": 1,
+                    "selectedChoices": Array [
+                      false,
+                      false,
+                      false,
+                      true,
+                      false,
+                    ],
+                  },
+                },
+              ],
+            }
+        `);
+    });
+});