@khanacademy/perseus 13.1.0 → 14.0.0

package/src/widgets/__testdata__/radio.testdata.ts

@@ -1,7 +1,15 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {
     PerseusRenderer,
     RadioWidget,
     PassageWidget,
+    PerseusRadioChoice,
 } from "../../perseus-types";
 
 export const question: PerseusRenderer = {
@@ -259,3 +267,58 @@ export const multiChoiceQuestionAndAnswer: [
         [0, 1, 2, 3],
     ],
 ];
+
+export const randomRadioGenerator = (): PerseusRenderer => {
+    const randomChoice = (
+        isMultiSelect: boolean,
+        isCorrect: boolean,
+        isNoneOfTheAbove: boolean,
+    ): PerseusRadioChoice => {
+        return {
+            content: randomSentence(12),
+            isNoneOfTheAbove: isNoneOfTheAbove,
+            correct: isMultiSelect ? randomBoolean() : isCorrect,
+        };
+    };
+    const numberOfChoices = randomInteger(2, 6);
+
+    const isMultiSelect = randomBoolean();
+    // only used if not multi select
+    const correctIndex = randomInteger(0, numberOfChoices);
+
+    const containsNoneOfTheAbove = randomBoolean();
+    // only used if containsNoneOfTheAbove
+    const noneOfTheAboveIndex = randomInteger(0, numberOfChoices);
+
+    return {
+        content: `${randomSentence(30)}\n\n[[\u2603 radio 1]]`,
+        images: {},
+        widgets: {
+            "radio 1": {
+                graded: randomBoolean(),
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                type: "radio",
+                options: {
+                    onePerLine: randomBoolean(),
+                    displayCount: null,
+                    choices: arrayOfLength(numberOfChoices).map((_, i) =>
+                        randomChoice(
+                            isMultiSelect,
+                            correctIndex === i,
+                            containsNoneOfTheAbove && noneOfTheAboveIndex === i,
+                        ),
+                    ),
+                    hasNoneOfTheAbove: randomBoolean(),
+                    multipleSelect: isMultiSelect,
+                    randomize: randomBoolean(),
+                    deselectEnabled: randomBoolean(),
+                },
+                alignment: "default",
+            } as RadioWidget,
+        },
+    };
+};

package/src/widgets/__testdata__/randomizers.ts

@@ -0,0 +1,51 @@
+// Helpers to generate random test data for widgets
+
+// Returns a random letter inclusive of emoji and japanese characters
+export const randomLetter = (): string => {
+    const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
+    const emojis = ["🍇", "🍈", "🍌"];
+    const japaneseCharacters = ["ツ", "デ", "ト", "ド", "ナ", "ぁ", "あ"];
+    const characters = alphabet.concat(emojis).concat(japaneseCharacters);
+    const letter = randomInteger(0, characters.length - 1);
+    return characters[letter];
+};
+
+// Returns a random word 3-20 characters long composed of the random letter function
+export const randomWord = (): string => {
+    // words are 3 - 20 characters
+    const numLetters = randomInteger(3, 11);
+    return arrayOfLength(numLetters).map(randomLetter).join("");
+};
+
+// Returns a random sentence of a specified number of words, using the random word function
+export const randomSentence = (maxWords: number): string => {
+    const numWords = randomInteger(5, Math.max(maxWords, 5));
+    return arrayOfLength(numWords).map(randomWord).join(" ");
+};
+
+// generates a boolean. 50/50 unless rateTrue is specified
+export const randomBoolean = (rateTrue?: number): boolean => {
+    let threshold = rateTrue;
+    if (threshold == null) {
+        threshold = 0.5;
+    }
+    return Math.random() < threshold;
+};
+
+// generates an integer inclusive of the specified min and max
+export const randomInteger = (min: number, max: number): number => {
+    return Math.floor(Math.random() * (max + 1 - min)) + min;
+};
+
+// A helper to create an array of a certain length.
+export const arrayOfLength = (length: number): number[] => {
+    return Array.from(Array(length).keys());
+};
+
+// Returns a random element from a provided list
+export function randomElement<T>(items: Array<T>): T | undefined {
+    if (items.length > 0) {
+        return items[randomInteger(0, items.length - 1)];
+    }
+    return undefined;
+}

package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap

@@ -40,18 +40,10 @@ exports[`Dropdown widget should snapshot when opened: dropdown open 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>
@@ -113,18 +105,10 @@ exports[`Dropdown widget should snapshot: initial render 1`] = `
                 >
                   greater/less than or equal to
                 </span>
-                <svg
+                <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  width="16"
-                >
-                  <path
-                    d="M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z"
-                    fill="rgba(33,36,44,0.64)"
-                  />
-                </svg>
+                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                />
               </button>
             </div>
           </div>

package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap

@@ -242,7 +242,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>
@@ -470,7 +470,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>
@@ -698,7 +698,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>

package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap

@@ -308,7 +308,7 @@ exports[`graded group widget should snapshot 1`] = `
                 type="button"
               >
                 <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
                 >
                   Check
                 </span>

package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap

@@ -443,7 +443,7 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
               type="button"
             >
               <span
-                class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
+                class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_6kf3xs"
               >
                 Check
               </span>

package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap

@@ -3638,7 +3638,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-0"
                     >
                       <div
@@ -3834,7 +3834,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-1"
                     >
                       <div
@@ -4014,7 +4014,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-2"
                     >
                       <div
@@ -4195,7 +4195,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
                       </button>
                     </div>
                     <div
-                      class="perseus-radio-rationale-content rationale_1w3tmyh"
+                      class="perseus-radio-rationale-content rationale_1ctj0s0"
                       data-test-id="perseus-radio-rationale-content-3"
                     >
                       <div

package/src/widgets/__tests__/expression-mobile.test.tsx

@@ -60,7 +60,6 @@ function KeypadWithContext() {
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

package/src/widgets/__tests__/matcher.test.tsx

@@ -9,7 +9,7 @@ import {question1} from "../__testdata__/matcher.testdata";
 import {renderQuestion} from "./renderQuestion";
 
 import type {APIOptions} from "../../types";
-import type {Matcher} from "enzyme-matchers/lib/types/Matcher";
+import type {Matcher} from "../matcher";
 
 describe("matcher widget", () => {
     beforeEach(() => {

package/src/widgets/__tests__/randomizers.test.ts

@@ -0,0 +1,53 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomElement,
+    randomLetter,
+    randomSentence,
+    randomWord,
+} from "../__testdata__/randomizers";
+
+describe("randomizers", () => {
+    describe("randomLetter", () => {
+        it("returns one letter", () => {
+            // can't check for just one character because some non english chars are longer than 1 char
+            expect(typeof randomLetter()).toBe("string");
+        });
+    });
+
+    describe("randomWord", () => {
+        it("returns a word of at least 3 letters", () => {
+            expect(randomWord().length).toBeGreaterThanOrEqual(3);
+        });
+    });
+
+    describe("randomSentence", () => {
+        it("returns a sentence of at least 5 words", () => {
+            expect(randomSentence(10).split(" ").length).toBeGreaterThanOrEqual(
+                5,
+            );
+        });
+    });
+
+    describe("randomBoolean", () => {
+        it("is true when rateTrue is 1", () => {
+            expect(randomBoolean(1)).toEqual(true);
+        });
+        it("is false when rateTrue is 0", () => {
+            expect(randomBoolean(0)).toEqual(false);
+        });
+    });
+
+    describe("arrayOfLength", () => {
+        it("returns an array of the specified length", () => {
+            expect(arrayOfLength(3).length).toEqual(3);
+            expect(arrayOfLength(12).length).toEqual(12);
+        });
+    });
+
+    describe("randomElement", () => {
+        it("returns one of the input array elements", () => {
+            expect([1, 2, 3]).toContain(randomElement([1, 2, 3]));
+        });
+    });
+});

package/src/widgets/image.tsx

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
 
+import AssetContext from "../asset-context";
 import SvgImage from "../components/svg-image";
 import * as Changeable from "../mixins/changeable";
 import Renderer from "../renderer";
@@ -93,11 +94,14 @@ class ImageWidget extends React.Component<Props> {
         const backgroundImage = this.props.backgroundImage;
 
         if (backgroundImage.url) {
+            const url = backgroundImage.url;
             image = (
-                <SvgImage
-                    src={backgroundImage.url}
-                    alt={
-                        /* alt text is formatted in a sr-only
+                <AssetContext.Consumer>
+                    {({setAssetStatus}) => (
+                        <SvgImage
+                            src={url}
+                            alt={
+                                /* alt text is formatted in a sr-only
                                div next to the image in addition to
                                the alt attribute.
                                If there is no alt text at all,
@@ -117,22 +121,25 @@ class ImageWidget extends React.Component<Props> {
                                in practice right now, although
                                it will exhibit weird behaviour
                                while editing. */
-                        this.props.alt
-                    }
-                    overrideAriaHidden={true}
-                    width={backgroundImage.width}
-                    height={backgroundImage.height}
-                    preloader={apiOptions.imagePreloader}
-                    extraGraphie={{
-                        box: this.props.box,
-                        range: this.props.range,
-                        labels: this.props.labels,
-                    }}
-                    trackInteraction={this.props.trackInteraction}
-                    zoomToFullSizeOnMobile={apiOptions.isMobile}
-                    constrainHeight={apiOptions.isMobile}
-                    allowFullBleed={apiOptions.isMobile}
-                />
+                                this.props.alt
+                            }
+                            overrideAriaHidden={true}
+                            width={backgroundImage.width}
+                            height={backgroundImage.height}
+                            preloader={apiOptions.imagePreloader}
+                            extraGraphie={{
+                                box: this.props.box,
+                                range: this.props.range,
+                                labels: this.props.labels,
+                            }}
+                            trackInteraction={this.props.trackInteraction}
+                            zoomToFullSizeOnMobile={apiOptions.isMobile}
+                            constrainHeight={apiOptions.isMobile}
+                            allowFullBleed={apiOptions.isMobile}
+                            setAssetStatus={setAssetStatus}
+                        />
+                    )}
+                </AssetContext.Consumer>
             );
         }
 

package/src/widgets/matcher.tsx

@@ -28,7 +28,7 @@ type State = {
     texRendererLoaded: boolean;
 };
 
-class Matcher extends React.Component<any, any> {
+export class Matcher extends React.Component<any, any> {
     static propTypes = {
         apiOptions: ApiOptions.propTypes,
         labels: PropTypes.array,

package/src/widgets/radio/choice.tsx

@@ -346,6 +346,7 @@ const styles = StyleSheet.create({
         padding: intermediateCheckboxPadding,
         paddingTop: 0,
         marginLeft: 54,
+        color: Color.offBlack64,
         [mediaQueries.smOrSmaller]: {
             padding: intermediateCheckboxPaddingPhone,
             paddingTop: 0,