@khanacademy/perseus 7.2.1 → 9.0.0

package/src/__stories__/article-renderer.stories.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 
-import {passageArticle} from "../__testdata__/article-renderer.testdata";
+import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
+import {
+    singleSectionArticle,
+    multiSectionArticle,
+    passageArticle,
+} from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 
 export default {
@@ -12,6 +17,34 @@ export default {
     },
 };
 
+export const ASingleSectionArticle = (args: {
+    useNewStyles;
+}): React.ReactElement => {
+    return (
+        <ArticleRenderer
+            json={singleSectionArticle}
+            dependencies={storybookDependenciesV2}
+            useNewStyles={args.useNewStyles}
+        />
+    );
+};
+
+export const BMultiSectionArticle = (args: {
+    useNewStyles;
+}): React.ReactElement => {
+    return (
+        <ArticleRenderer
+            json={multiSectionArticle}
+            dependencies={storybookDependenciesV2}
+            useNewStyles={args.useNewStyles}
+        />
+    );
+};
+
 export const PassageArticle = ({useNewStyles}): any => (
-    <ArticleRenderer json={passageArticle} useNewStyles={useNewStyles} />
+    <ArticleRenderer
+        json={passageArticle}
+        dependencies={storybookDependenciesV2}
+        useNewStyles={useNewStyles}
+    />
 );

package/src/__testdata__/article-renderer.testdata.ts

@@ -1,4 +1,38 @@
-export const passageArticle = {
+import type {PerseusRenderer} from "../perseus-types";
+
+export const singleSectionArticle: PerseusRenderer = {
+    content:
+        "[[☃ image 2]]\n\n**Part A:** Return to the main characters from your three favorite films. \n\n- What was one important choice they had to make where the stakes were **high**?\n\n-  What were the **stakes**?\n\n- Can you identify them as internal, external or philosophical?\n\n**Part B:** Think about a difficult choice you had to make in your own life.  What was at stake? \n\n**Part C:** Return to one of the obstacles your character might face from the previous exercise. Now think of the **choice** this obstacle forces them to make. Answer the following:\n\n- What are the possible stakes of this choice?\n\n- Can you come up with an internal, external or philosophical stake which applies to this choice? \n",
+    images: {},
+    widgets: {
+        "image 2": {
+            type: "image",
+            alignment: "block",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                title: "",
+                range: [
+                    [0, 10],
+                    [0, 10],
+                ],
+                box: [1258, 703],
+                backgroundImage: {
+                    url: "https://ka-perseus-images.s3.amazonaws.com/b08029bc1786fbe54468a2ddc96aaa20be7a663a.png",
+                    width: 1258,
+                    height: 703,
+                },
+                labels: [],
+                alt: 'A scene from Pixar\'s film "Toy Story 3" where the characters are swimming in a sea of trash and look very afraid.',
+                caption: "",
+            },
+            version: {major: 0, minor: 0},
+        },
+    },
+};
+
+export const passageArticle: PerseusRenderer = {
     content:
         "###Group/Pair Activity \n\nThis passage is adapted from Ed Yong, “Turtles Use the Earth’s Magnetic Field as Global GPS.” ©2011 by Kalmbach Publishing Co.\n\n[[☃ passage 1]]\n\n**Question 9**\n\nThe passage most strongly suggests that Adelita used which of the following to navigate her 9,000-mile journey?\n\nA) The current of the North Atlantic gyre\n\nB) Cues from electromagnetic coils designed by Putman and Lohmann\n\nC) The inclination and intensity of Earth’s magnetic field\n\nD) A simulated “magnetic signature” configured by Lohmann\n\n10) Which choice provides the best evidence for the answer to the previous question?\n\nA) Lines 1–2 (“In 1996...way”)\n\nB) Lines 20–21 (“Using...surface”)\n\nC) Lines 36–37 (“In the wild...stars”)\n\nD) Lines 43–45 (“Neither...it is”)\n\n**Question 12** \n\nBased on the passage, which choice best describes the relationship between Putman’s and Lohmann’s research?\n\nA) Putman’s research contradicts Lohmann’s.\n\nB) Putman’s research builds on Lohmann’s.\n\nC) Lohmann’s research confirms Putman’s.\n\nD) Lohmann’s research corrects Putman’s.",
     images: {},
@@ -23,3 +57,42 @@ export const passageArticle = {
         },
     },
 };
+
+export const multiSectionArticle: ReadonlyArray<PerseusRenderer> = [
+    {
+        content:
+            "## What is a matrix?\n\nA matrix is a rectangular array of numbers arranged in rows and columns.\n\nMatrices can be useful for organizing and manipulating data. They can also be used as a tool to help solve systems of equations.",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we multiply a matrix by a scalar?\n\nTo multiply a matrix by a scalar, we multiply each entry in the matrix by the scalar. For example, if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$\n\nand we want to multiply $A$ by $2$, we can multiply each entry by $2$ to get:\n\n$2A = \\begin{bmatrix} \n4 & 6 \\\\\n2 & 8 \\\\\n\\end{bmatrix}$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we add or subtract two matrices?\n\nTo add or subtract two matrices, we add or subtract corresponding entries. So if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$ \n\nand \n\n$B = \\begin{bmatrix} \n5 & 2 \\\\\n3 & 1 \\\\\n\\end{bmatrix}$,\n\nthen \n\n$A+B = \\begin{bmatrix} \n7 & 5 \\\\\n4 & 5 \\\\\n\\end{bmatrix}$\n\nand \n\n$A-B = \\begin{bmatrix} \n-3 & 1 \\\\\n-2 & 3 \\\\\n\\end{bmatrix}$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## How do we multiply two matrices together?\n\nThis one's a bit trickier. To multiply two matrices together, we take the dot product of the rows from the first matrix with the columns from the second matrix. The result is a new matrix. For example, if \n\n$A = \\begin{bmatrix} \n2 & 3 \\\\\n1 & 4 \\\\\n\\end{bmatrix}$ \n\nand \n\n$B = \\begin{bmatrix} \n5 & 2 \\\\\n3 & 1 \\\\\n\\end{bmatrix}$,\n\nthen \n\n$AB = \\begin{bmatrix} \n2\\cdot5+3\\cdot3 & 2\\cdot2+3\\cdot1 \\\\\n1\\cdot5+4\\cdot3 & 1\\cdot2+4\\cdot1 \\\\\n\\end{bmatrix} = \\begin{bmatrix} \n19 & 7 \\\\\n17 & 6 \\\\\n\\end{bmatrix}.$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## What can we do with the inverse of a matrix?\n\nFinding the inverse of a matrix can be useful for solving linear systems of equations. If $A$ is the matrix representing the system of equations, and $b$ is the vector of solutions, then $Ax=b$. If we can find the inverse of $A$, we can multiply both sides of the equation by it to isolate $x$:\n\n$A^{-1}Ax=A^{-1}b \\Rightarrow x=A^{-1}b.$",
+        images: {},
+        widgets: {},
+    },
+    {
+        content:
+            "## Where are matrices used in the real world?\n\nMatrices have tons of real-world applications! They can be used in computer graphics to perform transformations on images, in physics to model physical systems, and in statistics to analyze data, just to name a few.",
+        images: {},
+        widgets: {},
+    },
+];

package/src/__testdata__/item-renderer.testdata.ts

@@ -251,7 +251,7 @@ export const mockedItem: PerseusItem = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types
     // for test purposes) so we force TypeScript to accept it here.
-    // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+    // @ts-expect-error - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; "mock-widget 4": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
     question: {
         content:
             "Mock widget ==> [[\u2603 mock-widget 1]] [[\u2603 mock-widget 2]] [[\u2603 mock-widget 3]] [[\u2603 mock-widget 4]]",

package/src/__testdata__/renderer.testdata.ts

@@ -85,7 +85,7 @@ export const question2: PerseusRenderer = {
 };
 
 // Note that if this item is used, you _must_ first register the MockWidget
-// @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+// @ts-expect-error - TS2352 - Conversion of type '{ content: string; images: {}; widgets: { "mock-widget 1": { graded: true; version: { major: number; minor: number; }; static: false; type: "mock-widget"; options: { static: false; smiling: boolean; }; alignment: string; }; "mock-widget 2": { ...; }; "mock-widget 3": { ...; }; }; }' to type 'PerseusRenderer' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
 export const mockedItem: PerseusRenderer = {
     // The mock widget type is not part of the PerseusWidget type union (and
     // we don't want to make it such to avoid polluting our production types

package/src/__tests__/item-renderer.test.tsx

@@ -4,7 +4,10 @@ import userEvent from "@testing-library/user-event";
 import * as React from "react";
 import "@testing-library/jest-dom"; // Imports custom matchers
 
-import {testDependencies} from "../../../../testing/test-dependencies";
+import {
+    testDependencies,
+    testDependenciesV2,
+} from "../../../../testing/test-dependencies";
 import {
     itemWithInput,
     labelImageItem,
@@ -76,6 +79,7 @@ export const renderQuestion = (
                 reviewMode={false}
                 savedState=""
                 controlPeripherals={false}
+                dependencies={testDependenciesV2}
                 {...optionalProps}
             />
             {/* The ItemRenderer _requires_ two divs: a work area and hints
@@ -115,7 +119,7 @@ const makeHint = (content: string): PerseusRenderer => ({
             graded: true,
             version: {major: 0, minor: 0},
             static: false,
-            // @ts-expect-error [FEI-5003] - TS2322 - Type '"mock-widget"' is not assignable to type '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"'.
+            // @ts-expect-error - TS2322 - Type '"mock-widget"' is not assignable to type '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"'.
             type: "mock-widget",
             options: {static: false},
             alignment: "default",
@@ -132,6 +136,13 @@ describe("item renderer", () => {
     });
 
     beforeEach(() => {
+        // Mock ResizeObserver used by the mobile keypad
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+            disconnect: jest.fn(),
+        }));
+
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
             testDependencies,
         );

package/src/__tests__/mock-asset-loading-widget.tsx

@@ -34,7 +34,7 @@ export const mockedAssetItem = {
 } as const;
 
 export class MockAssetLoadingWidget extends React.Component<Record<any, any>> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property 'setAssetStatus' has no initializer and is not definitely assigned in the constructor.
+    // @ts-expect-error - TS2564 - Property 'setAssetStatus' has no initializer and is not definitely assigned in the constructor.
     setAssetStatus: (assetKey: string, loaded: boolean) => void;
 
     render(): React.ReactNode {

package/src/__tests__/perseus-markdown.test.ts

@@ -35,7 +35,7 @@ describe("perseus markdown", () => {
             },
         ])("should parse math", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -75,7 +75,7 @@ describe("perseus markdown", () => {
             },
         ])("should parse nested math", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -161,7 +161,7 @@ describe("perseus markdown", () => {
             },
         ])("should allow escaping in math", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -229,7 +229,7 @@ describe("perseus markdown", () => {
             },
         ])("should parse block math", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -274,7 +274,7 @@ describe("perseus markdown", () => {
             },
         ])("should break on paragraphs", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -352,7 +352,7 @@ describe("perseus markdown", () => {
             },
         ])("should parse widget types and ids", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -361,7 +361,7 @@ describe("perseus markdown", () => {
 
         it("should allow escaping widget identifiers", () => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse("\\[[☃ test 1]]");
 
             // Assert
@@ -408,7 +408,7 @@ describe("perseus markdown", () => {
             "should parse widgets next to each other as widgets",
             ({content, expected}) => {
                 // Arrange, Act
-                // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+                // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
                 const parsed = parse(content);
 
                 // Assert
@@ -418,7 +418,7 @@ describe("perseus markdown", () => {
 
         it("should parse multiple columns", () => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse("hi\n\n" + "=====\n\n" + "there\n\n");
 
             // Assert
@@ -539,7 +539,7 @@ describe("perseus markdown", () => {
             },
         ])("should detect unescaped dollars", ({content, expected}) => {
             // Arrange, Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -557,7 +557,7 @@ describe("perseus markdown", () => {
                 "data 7 | data 8 | data 9";
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
 
             // Assert
@@ -582,7 +582,7 @@ describe("perseus markdown", () => {
             } as const;
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsedWithLint = parse(content);
             PerseusLinter.runLinter(parsedWithLint, context, true);
 
@@ -601,7 +601,7 @@ describe("perseus markdown", () => {
             const content = "para!";
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
             const output = basicOutput(parsed);
 
@@ -614,7 +614,7 @@ describe("perseus markdown", () => {
             const content = "col1\n\n" + "=====\n\n" + "col2";
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
             const output = basicOutput(parsed);
 
@@ -627,7 +627,7 @@ describe("perseus markdown", () => {
             const content = "```alt\n" + "screenreader-only text!\n" + "```";
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
             const output = basicOutput(parsed);
 
@@ -646,7 +646,7 @@ describe("perseus markdown", () => {
                 "data 7 | data 8 | data 9";
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsed = parse(content);
             const output = basicOutput(parsed);
 
@@ -672,7 +672,7 @@ describe("perseus markdown", () => {
             } as const;
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const parsedWithLint = parse(content);
             PerseusLinter.runLinter(parsedWithLint, context, true);
 

package/src/__tests__/renderer-api.test.tsx

@@ -56,7 +56,7 @@ describe("Perseus API", function () {
 
     describe("setInputValue", function () {
         it("should be able to produce a correctly graded value", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "5");
             const score = renderer.guessAndScore()[1];
@@ -65,7 +65,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce a wrong value", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", () => {});
             const score = renderer.guessAndScore()[1];
@@ -74,7 +74,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to produce an empty score", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3");
             let score = renderer.guessAndScore()[1];
@@ -86,7 +86,7 @@ describe("Perseus API", function () {
         });
 
         it("should be able to accept a callback", function (done) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber1Item);
             renderer.setInputValue(["input-number 1"], "3", function () {
                 const guess = renderer.getUserInput()[0];
@@ -99,14 +99,14 @@ describe("Perseus API", function () {
 
     describe("getInputPaths", function () {
         it("should be able to find all the input widgets", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(2);
         });
 
         it("should be able to find all inputs within widgets", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(tableItem);
             const numPaths = renderer.getInputPaths().length;
             expect(numPaths).toBe(8);
@@ -115,7 +115,7 @@ describe("Perseus API", function () {
 
     describe("getDOMNodeForPath", function () {
         it("should find one DOM node per <input>", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -126,7 +126,7 @@ describe("Perseus API", function () {
         });
 
         it("should find the right DOM nodes for the <input>s", function () {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 2 arguments, but got 1.
+            // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
             const renderer = renderQuestionArea(inputNumber2Item);
             const inputPaths = renderer.getInputPaths();
             const allInputs = TestUtils.scryRenderedDOMComponentsWithTag(
@@ -135,9 +135,9 @@ describe("Perseus API", function () {
             );
             _.each(inputPaths, (inputPath, i) => {
                 const $node = $(renderer.getDOMNodeForPath(inputPath));
-                // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+                // @ts-expect-error - TS2769 - No overload matches this call.
                 const $input = $(ReactDOM.findDOMNode(allInputs[i]));
-                // @ts-expect-error [FEI-5003] - TS2339 - Property 'closest' does not exist on type 'JQueryStatic'.
+                // @ts-expect-error - TS2339 - Property 'closest' does not exist on type 'JQueryStatic'.
                 expect($input.closest($node).length).toBeTruthy();
             });
         });
@@ -172,18 +172,18 @@ describe("Perseus API", function () {
                 });
 
                 const input =
-                    // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
+                    // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
                     ReactDOM.findDOMNode(renderer).querySelector("input");
 
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(false);
 
                 TestUtils.Simulate.focus(input);
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(true);
 
                 TestUtils.Simulate.blur(input);
-                // @ts-expect-error [FEI-5003] - TS2532 - Object is possibly 'undefined'.
+                // @ts-expect-error - TS2532 - Object is possibly 'undefined'.
                 expect($(input).attr("class").includes("focused")).toBe(false);
             });
         });
@@ -204,7 +204,7 @@ describe("Perseus API", function () {
                 },
             });
 
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelector' does not exist on type 'Element | Text'.
             const input = ReactDOM.findDOMNode(renderer).querySelector("input");
 
             callCount = 0;
@@ -215,7 +215,7 @@ describe("Perseus API", function () {
             // result here. This also means that this test should
             // continue to pass if we decide it makes more sense for
             // this callback to be async, which could reasonably happen
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+            // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
             return delayedPromise()
                 .then(() => {
                     expect(callCount).toBe(1);
@@ -224,7 +224,7 @@ describe("Perseus API", function () {
 
                     callCount = 0;
                     TestUtils.Simulate.blur(input);
-                    // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+                    // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
                     return delayedPromise();
                 })
                 .then(() => {
@@ -249,7 +249,7 @@ describe("Perseus API", function () {
             });
 
             const inputs =
-                // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
+                // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'querySelectorAll' does not exist on type 'Element | Text'.
                 ReactDOM.findDOMNode(renderer).querySelectorAll("input");
             const input1 = inputs[0];
             const input2 = inputs[1];
@@ -263,7 +263,7 @@ describe("Perseus API", function () {
             // result here. This also means that this test should
             // continue to pass if we decide it makes more sense for
             // this callback to be async, which could reasonably happen
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 1 arguments, but got 0.
+            // @ts-expect-error - TS2554 - Expected 1 arguments, but got 0.
             return delayedPromise().then(() => {
                 expect(callCount).toBe(1);
                 expect(oldFocusResult).toEqual(["input-number 1"]);
@@ -289,7 +289,7 @@ describe("Perseus API", function () {
             );
 
             const spans = TestUtils.scryRenderedDOMComponentsWithTag(
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
+                // @ts-expect-error - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
                 renderer,
                 "span",
             );
@@ -313,7 +313,7 @@ describe("Perseus API", function () {
             );
 
             const spans = TestUtils.scryRenderedDOMComponentsWithTag(
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
+                // @ts-expect-error - TS2345 - Argument of type 'void' is not assignable to parameter of type 'Component<any, {}, any>'.
                 renderer,
                 "span",
             );

package/src/__tests__/renderer.test.tsx

@@ -149,7 +149,7 @@ describe("renderer", () => {
             mockRunLinter.mockClear();
 
             // Act
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ problemNum: number; linterContext: { readonly contentType: "exercise"; readonly highlightLint: true; readonly paths: readonly []; readonly stack: readonly []; }; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
+            // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; linterContext: { readonly contentType: "exercise"; readonly highlightLint: true; readonly paths: readonly []; readonly stack: readonly []; }; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
             rerender(question1, {...extraProps, problemNum: 1});
 
             // Assert
@@ -192,7 +192,7 @@ describe("renderer", () => {
                     ...question1.widgets,
                     // $FlowIgnore[prop-missing]
                     // $FlowIgnore[incompatible-cast]
-                    // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ type: undefined; static?: boolean | undefined; graded?: boolean | undefined; alignment?: string | undefined; options: PerseusCategorizerWidgetOptions | null | undefined; key?: number | undefined; version?: Version | undefined; } | ... 38 more ... | { ...; }' to type 'DropdownWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+                    // @ts-expect-error - TS2352 - Conversion of type '{ type: undefined; static?: boolean | undefined; graded?: boolean | undefined; alignment?: string | undefined; options: PerseusCategorizerWidgetOptions | null | undefined; key?: number | undefined; version?: Version | undefined; } | ... 38 more ... | { ...; }' to type 'DropdownWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
                     "dropdown 1": {
                         ...question1.widgets["dropdown 1"],
                         // $FlowIgnore[incompatible-cast]
@@ -298,7 +298,7 @@ describe("renderer", () => {
             originalImage = window.Image;
             // Mock HTML Image so we can trigger onLoad callbacks and see full
             // image rendering.
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Mock<Record<string, any>, [], any>' is not assignable to type 'new (width?: number | undefined, height?: number | undefined) => HTMLImageElement'.
+            // @ts-expect-error - TS2322 - Type 'Mock<Record<string, any>, [], any>' is not assignable to type 'new (width?: number | undefined, height?: number | undefined) => HTMLImageElement'.
             window.Image = jest.fn(() => {
                 const img: Record<string, any> = {};
                 images.push(img);
@@ -426,7 +426,7 @@ describe("renderer", () => {
 
             const wrapperStyle = getComputedStyle(
                 // $FlowIgnore[incompatible-call]
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
+                // @ts-expect-error - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
                 screen.getByAltText("This image has dimensions").parentElement, // eslint-disable-line testing-library/no-node-access
             );
             expect(wrapperStyle.maxWidth).toBe("420px");
@@ -452,7 +452,7 @@ describe("renderer", () => {
 
             const wrapperStyle = getComputedStyle(
                 // $FlowIgnore[incompatible-call]
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
+                // @ts-expect-error - TS2345 - Argument of type 'HTMLElement | null' is not assignable to parameter of type 'Element'.
                 screen.getByAltText("This image doesn't").parentElement, // eslint-disable-line testing-library/no-node-access
             );
             expect(wrapperStyle.maxWidth).toBe("");
@@ -683,11 +683,11 @@ describe("renderer", () => {
             );
             expect(zoomable).not.toBeUndefined();
             expect(zoomable).not.toBeNull();
-            // @ts-expect-error [FEI-5003] - TS2339 - Property 'style' does not exist on type 'Element'.
+            // @ts-expect-error - TS2339 - Property 'style' does not exist on type 'Element'.
             expect(zoomable.style.transform).not.toBe("");
 
             /* eslint-disable testing-library/no-node-access */
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'.
             expect(zoomable.parentElement.style.transform).not.toBe("");
             /* eslint-enable testing-library/no-node-access */
         });
@@ -1139,7 +1139,7 @@ describe("renderer", () => {
 
             const {renderer} = renderQuestion(mockedItem);
             const [widget1, widget2, widget3] = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widget1.restoreSerializedState = makeRestoreSerializedStateMock;
@@ -1311,7 +1311,7 @@ describe("renderer", () => {
                     break;
                 }
                 // eslint-disable-next-line testing-library/no-node-access
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
+                // @ts-expect-error - TS2322 - Type 'HTMLElement | null' is not assignable to type 'HTMLElement'.
                 // eslint-disable-next-line testing-library/no-node-access
                 el = el.parentElement;
             }
@@ -1334,7 +1334,7 @@ describe("renderer", () => {
                     },
                 },
                 {},
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type '{ problemNum: number; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
+                // @ts-expect-error - TS2345 - Argument of type '{ problemNum: number; }' is not assignable to parameter of type 'Pick<{}, never> & InexactPartial<Pick<{}, never>> & InexactPartial<Pick<DefaultProps, keyof DefaultProps>>'.
                 {problemNum: 1},
             );
 
@@ -1349,7 +1349,7 @@ describe("renderer", () => {
             // Arrange
             const {renderer} = renderQuestion(mockedItem);
             const widgets = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widgets.forEach(
@@ -1376,7 +1376,7 @@ describe("renderer", () => {
             // Arrange
             const {renderer} = renderQuestion(mockedItem);
             const widgets = renderer.findWidgets(
-                // @ts-expect-error [FEI-5003] - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
+                // @ts-expect-error - TS2367 - This condition will always return 'false' since the types '"video" | "image" | "iframe" | "table" | "radio" | "definition" | "group" | "matrix" | "categorizer" | "cs-program" | "dropdown" | "example-graphie-widget" | "example-widget" | ... 26 more ... | "unit-input"' and '"mock-widget"' have no overlap.
                 (_, info) => info.type === "mock-widget",
             );
             widgets.forEach(
@@ -1489,7 +1489,7 @@ describe("renderer", () => {
 
             // Assert
             // "button" role is the WB dropdown's "opener" element
-            // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
+            // @ts-expect-error - TS2345 - Argument of type 'Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement'.
             expect(within(node).queryAllByRole("button")).toHaveLength(1);
         });