@khanacademy/perseus 1.1.2 → 1.3.0

package/src/widgets/__tests__/__snapshots__/passage_test.jsx.snap

@@ -219,13 +219,13 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -711,13 +711,13 @@ exports[`passage widget should snapshot multiple passages (mobile: false) 1`] =
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1090,13 +1090,13 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1582,13 +1582,13 @@ exports[`passage widget should snapshot multiple passages (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1840,13 +1840,13 @@ exports[`passage widget should snapshot simple passage (mobile: false) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div
@@ -1941,13 +1941,13 @@ exports[`passage widget should snapshot simple passage (mobile: true) 1`] = `
                         <div>
                           <div>
                             <div
-                              class="measurer_vtwrnx"
+                              aria-hidden="true"
+                              class="measurer_225hir"
                             >
-                              <div>
-                                <div
-                                  class="paragraph"
-                                />
-                                <div />
+                              <div
+                                class="paragraph"
+                              >
+                                Line Height Measurement
                               </div>
                             </div>
                             <div

package/src/widgets/__tests__/passage_test.jsx

@@ -8,15 +8,12 @@ import {testDependencies} from "../../../../../testing/test-dependencies.js";
 import * as Dependencies from "../../dependencies.js";
 import {ApiOptions} from "../../perseus-api.jsx";
 import {question1, question2} from "../__testdata__/passage_testdata.js";
-import PassageWidgetExport from "../passage.jsx";
-import * as getLineHeightModule from "../passage/get-line-height-for-node.js";
+import PassageWidgetExport, {LineHeightMeasurer} from "../passage.jsx";
 
 import {renderQuestion} from "./renderQuestion.jsx";
 
 import type {APIOptions} from "../../types.js";
 
-jest.mock("../passage/get-line-height-for-node.js");
-
 function renderPassage(overwrite) {
     const widgetPropsBase = {
         footnotes: "",
@@ -53,10 +50,6 @@ function renderPassage(overwrite) {
 
 describe("passage widget", () => {
     beforeEach(() => {
-        jest.spyOn(getLineHeightModule, "getLineHeightForNode").mockReturnValue(
-            21,
-        );
-
         // passage widget uses the height of the entire rendered passage along
         // with the above line height calculations to determine the number of
         // lines rendered (as a way to provide line numbering).
@@ -66,6 +59,11 @@ describe("passage widget", () => {
             "get",
         ).mockReturnValue(200.0);
 
+        jest.spyOn(
+            LineHeightMeasurer.prototype,
+            "measureLineHeight",
+        ).mockReturnValue(20);
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );

package/src/widgets/__tests__/radio_test.jsx

@@ -800,7 +800,9 @@ describe("multi-choice question", () => {
 
         // Act
         const option = screen.getAllByRole("checkbox");
-        userEvent.click(option[3]); // incorrect
+        userEvent.click(option[0]); // correct
+        userEvent.click(option[1]); // correct
+        userEvent.click(option[2]); // incorrect
 
         // Assert
         expect(renderer).toHaveInvalidInput(

package/src/widgets/passage.jsx

@@ -1,5 +1,4 @@
 // @flow
-
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import {StyleSheet, css} from "aphrodite";
@@ -12,7 +11,6 @@ import HighlightableContent from "../components/highlighting/highlightable-conte
 import {getDependencies} from "../dependencies.js";
 import Renderer from "../renderer.jsx";
 
-import {getLineHeightForNode} from "./passage/get-line-height-for-node.js";
 import PassageMarkdown from "./passage/passage-markdown.jsx";
 
 import type {SerializedHighlightSet} from "../components/highlighting/types.js";
@@ -27,51 +25,24 @@ import type {
 import type {ParseState} from "./passage/passage-markdown.jsx";
 import type {SingleASTNode} from "@khanacademy/simple-markdown";
 
-// A fake paragraph to measure the line height of the passage. In CSS we always
-// set the line height to 22 pixels, but when using the browser zoom feature,
-// the line height often ends up being a fractional number of pixels close to
-// 22 pixels.
-class LineHeightMeasurer extends React.Component<{...}> {
-    _cachedLineHeight: number;
-    body: ?HTMLDivElement;
-    end: ?HTMLDivElement;
+// A fake paragraph to measure the line height of the passage,
+// so we can adapt to browser zoom
+export class LineHeightMeasurer extends React.Component<{...}> {
+    _line: ?HTMLDivElement;
 
     measureLineHeight(): number {
-        if (typeof this._cachedLineHeight !== "number") {
-            this.forceMeasureLineHeight();
-        }
-
-        return this._cachedLineHeight;
-    }
-
-    forceMeasureLineHeight() {
-        const body = this.body;
-        const end = this.end;
-
-        if (!body || !end) {
-            return;
+        if (!this._line) {
+            return 0;
         }
 
-        // Add some text which magically fills an entire line.
-        body.textContent = " \u0080";
-
-        // Now, the line height is the difference between the top of the
-        // second line and the top of the first line.
-        this._cachedLineHeight = getLineHeightForNode(body, end);
-
-        // Clear out the first line so it doesn't overlap the passage.
-        body.textContent = "";
+        return this._line.clientHeight;
     }
 
     render(): React.Node {
         return (
-            <div className={css(styles.measurer)}>
-                <div>
-                    <div
-                        ref={(ref) => (this.body = ref)}
-                        className="paragraph"
-                    />
-                    <div ref={(ref) => (this.end = ref)} />
+            <div className={css(styles.measurer)} aria-hidden="true">
+                <div ref={(ref) => (this._line = ref)} className="paragraph">
+                    Line Height Measurement
                 </div>
             </div>
         );
@@ -81,9 +52,9 @@ class LineHeightMeasurer extends React.Component<{...}> {
 const styles = StyleSheet.create({
     measurer: {
         position: "absolute",
-        width: "100%",
         top: 0,
         left: 0,
+        visibility: "hidden",
         // keep from blocking text selection
         zIndex: -1,
     },
@@ -168,7 +139,7 @@ class Passage extends React.Component<PassageProps, PassageState> {
             // height changes we expect are subpixel changes when the user
             // zooms in/out, and the only way to listen for zoom events is to
             // listen for resize events.
-            this._lineHeightMeasurerRef?.forceMeasureLineHeight();
+            this._lineHeightMeasurerRef?.measureLineHeight();
             this._updateState();
         }, 500);
         window.addEventListener("resize", this._onResize);

package/src/widgets/radio/widget.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/sort-comp */
 // @flow
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
@@ -66,6 +65,134 @@ class Radio extends React.Component<Props> {
         linterContext: linterContextDefault,
     };
 
+    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
+        const numSelected = userInput.choicesSelected.reduce(
+            (sum, selected) => {
+                return sum + (selected ? 1 : 0);
+            },
+            0,
+        );
+
+        if (numSelected === 0) {
+            return {
+                type: "invalid",
+                message: null,
+            };
+        }
+
+        if (
+            userInput.numCorrect &&
+            userInput.numCorrect > 1 &&
+            numSelected !== userInput.numCorrect
+        ) {
+            return {
+                type: "invalid",
+                message: i18n._("Please choose the correct number of answers."),
+            };
+            // If NOTA and some other answer are checked, ...
+        }
+        if (userInput.noneOfTheAboveSelected && numSelected > 1) {
+            return {
+                type: "invalid",
+                message: i18n._(
+                    "'None of the above' may not be selected " +
+                        "when other answers are selected.",
+                ),
+            };
+        }
+
+        const correct = userInput.choicesSelected.every((selected, i) => {
+            let isCorrect;
+            if (userInput.noneOfTheAboveIndex === i) {
+                isCorrect = rubric.choices.every((choice, j) => {
+                    return i === j || !choice.correct;
+                });
+            } else {
+                isCorrect = !!rubric.choices[i].correct;
+            }
+            return isCorrect === selected;
+        });
+
+        return {
+            type: "points",
+            earned: correct ? 1 : 0,
+            total: 1,
+            message: null,
+        };
+    }
+
+    static getUserInputFromProps(props: Props): UserInput {
+        // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
+        // future timeline implementers: this used to be {value: i} before
+        // multiple select was added)
+        if (props.choiceStates) {
+            let noneOfTheAboveIndex = null;
+            let noneOfTheAboveSelected = false;
+
+            const choiceStates = props.choiceStates;
+            const choicesSelected = choiceStates.map(() => false);
+            const countChoices = props.countChoices;
+            const numCorrect = props.numCorrect;
+
+            for (let i = 0; i < choicesSelected.length; i++) {
+                const index = props.choices[i].originalIndex;
+
+                choicesSelected[index] = choiceStates[i].selected;
+
+                if (props.choices[i].isNoneOfTheAbove) {
+                    noneOfTheAboveIndex = index;
+
+                    if (choicesSelected[i]) {
+                        noneOfTheAboveSelected = true;
+                    }
+                }
+            }
+
+            return {
+                countChoices,
+                choicesSelected,
+                numCorrect,
+                noneOfTheAboveIndex,
+                noneOfTheAboveSelected,
+            };
+            // Support legacy choiceState implementation
+        }
+        /* istanbul ignore if - props.values is deprecated */
+        const {values} = props;
+        if (values) {
+            let noneOfTheAboveIndex = null;
+            let noneOfTheAboveSelected = false;
+
+            const choicesSelected = [...values];
+            const countChoices = props.countChoices;
+            const numCorrect = props.numCorrect;
+            const valuesLength = values.length;
+
+            for (let i = 0; i < valuesLength; i++) {
+                const index = props.choices[i].originalIndex;
+                choicesSelected[index] = values[i];
+
+                if (props.choices[i].isNoneOfTheAbove) {
+                    noneOfTheAboveIndex = index;
+                    if (choicesSelected[i]) {
+                        noneOfTheAboveSelected = true;
+                    }
+                }
+            }
+            return {
+                choicesSelected,
+                noneOfTheAboveIndex,
+                noneOfTheAboveSelected,
+                countChoices,
+                numCorrect,
+            };
+        }
+        // Nothing checked
+        return {
+            choicesSelected: props.choices.map(() => false),
+        };
+    }
+
     _renderRenderer: (content?: string) => React.Node = (
         content?: string = "",
     ) => {
@@ -382,134 +509,6 @@ class Radio extends React.Component<Props> {
             />
         );
     }
-
-    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
-        const numSelected = userInput.choicesSelected.reduce(
-            (sum, selected) => {
-                return sum + (selected ? 1 : 0);
-            },
-            0,
-        );
-
-        if (numSelected === 0) {
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-
-        if (
-            userInput.numCorrect &&
-            userInput.numCorrect > 1 &&
-            numSelected !== userInput.numCorrect
-        ) {
-            return {
-                type: "invalid",
-                message: i18n._("Please choose the correct number of answers."),
-            };
-            // If NOTA and some other answer are checked, ...
-        }
-        if (userInput.noneOfTheAboveSelected && numSelected > 1) {
-            return {
-                type: "invalid",
-                message: i18n._(
-                    "'None of the above' may not be selected " +
-                        "when other answers are selected.",
-                ),
-            };
-        }
-
-        const correct = userInput.choicesSelected.every((selected, i) => {
-            let isCorrect;
-            if (userInput.noneOfTheAboveIndex === i) {
-                isCorrect = rubric.choices.every((choice, j) => {
-                    return i === j || !choice.correct;
-                });
-            } else {
-                isCorrect = !!rubric.choices[i].correct;
-            }
-            return isCorrect === selected;
-        });
-
-        return {
-            type: "points",
-            earned: correct ? 1 : 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    static getUserInputFromProps(props: Props): UserInput {
-        // Return checked inputs in the form {choicesSelected: [bool]}. (Dear
-        // future timeline implementers: this used to be {value: i} before
-        // multiple select was added)
-        if (props.choiceStates) {
-            let noneOfTheAboveIndex = null;
-            let noneOfTheAboveSelected = false;
-
-            const choiceStates = props.choiceStates;
-            const choicesSelected = choiceStates.map(() => false);
-            const countChoices = props.countChoices;
-            const numCorrect = props.numCorrect;
-
-            for (let i = 0; i < choicesSelected.length; i++) {
-                const index = props.choices[i].originalIndex;
-
-                choicesSelected[index] = choiceStates[i].selected;
-
-                if (props.choices[i].isNoneOfTheAbove) {
-                    noneOfTheAboveIndex = index;
-
-                    if (choicesSelected[i]) {
-                        noneOfTheAboveSelected = true;
-                    }
-                }
-            }
-
-            return {
-                countChoices,
-                choicesSelected,
-                numCorrect,
-                noneOfTheAboveIndex,
-                noneOfTheAboveSelected,
-            };
-            // Support legacy choiceState implementation
-        }
-        /* istanbul ignore if - props.values is deprecated */
-        const {values} = props;
-        if (values) {
-            let noneOfTheAboveIndex = null;
-            let noneOfTheAboveSelected = false;
-
-            const choicesSelected = [...values];
-            const countChoices = props.countChoices;
-            const numCorrect = props.numCorrect;
-            const valuesLength = values.length;
-
-            for (let i = 0; i < valuesLength; i++) {
-                const index = props.choices[i].originalIndex;
-                choicesSelected[index] = values[i];
-
-                if (props.choices[i].isNoneOfTheAbove) {
-                    noneOfTheAboveIndex = index;
-                    if (choicesSelected[i]) {
-                        noneOfTheAboveSelected = true;
-                    }
-                }
-            }
-            return {
-                choicesSelected,
-                noneOfTheAboveIndex,
-                noneOfTheAboveSelected,
-                countChoices,
-                numCorrect,
-            };
-        }
-        // Nothing checked
-        return {
-            choicesSelected: props.choices.map(() => false),
-        };
-    }
 }
 
 export default Radio;

package/src/components/new-tooltip/README.md

@@ -1,3 +0,0 @@
-# `NewTooltip`: KA tooltip component
-
-This is a wrapper around [Wonderblock's popover component](https://github.com/Khan/wonder-blocks). It is API compatiable with Perseus and remains for compatiability and legacy reasons. If you are anyone but the Perseus group at Khan Academy please use the wonderblocks component directly.