@khanacademy/perseus 4.0.2 → 6.0.0

package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap

@@ -2,296 +2,264 @@
 
 exports[`sorter widget should snapshot on mobile: first mobile render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          <strong>
-            Arrange the following measurements in order from smallest to largest.
-          </strong>
-        </div>
+        <strong>
+          Arrange the following measurements in order from smallest to largest.
+        </strong>
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="perseus-widget-sorter perseus-clearfix"
           >
-            <div
-              class="perseus-widget-sorter perseus-clearfix"
+            <ul
+              class="sortable_13d4756 perseus-sortable"
             >
-              <ul
-                class="sortable_13d4756 perseus-sortable"
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px 8px 0px 0px;"
               >
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px 8px 0px 0px;"
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              15
-                            </span>
-                            <span />
-                          </span>
-                           grams
-                        </div>
-                      </div>
+                          15
+                        </span>
+                        <span />
+                      </span>
+                       grams
                     </div>
-                  </span>
-                </li>
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px 8px 0px 0px;"
+                  </div>
+                </div>
+              </li>
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px 8px 0px 0px;"
+              >
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              0.005
-                            </span>
-                            <span />
-                          </span>
-                           kilograms
-                        </div>
-                      </div>
+                          0.005
+                        </span>
+                        <span />
+                      </span>
+                       kilograms
                     </div>
-                  </span>
-                </li>
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px;"
+                  </div>
+                </div>
+              </li>
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px;"
+              >
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              55
-                            </span>
-                            <span />
-                          </span>
-                           grams
-                        </div>
-                      </div>
+                          55
+                        </span>
+                        <span />
+                      </span>
+                       grams
                     </div>
-                  </span>
-                </li>
-              </ul>
-            </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;
 
 exports[`sorter widget should snapshot: first render 1`] = `
 <div>
-  <span
-    class="mock-KatexProvider"
+  <div
+    class="perseus-renderer perseus-renderer-responsive"
   >
     <div
-      class="perseus-renderer perseus-renderer-responsive"
+      class="paragraph"
+      data-perseus-paragraph-index="0"
     >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="0"
       >
-        <div
-          class="paragraph"
-        >
-          <strong>
-            Arrange the following measurements in order from smallest to largest.
-          </strong>
-        </div>
+        <strong>
+          Arrange the following measurements in order from smallest to largest.
+        </strong>
       </div>
+    </div>
+    <div
+      class="paragraph"
+      data-perseus-paragraph-index="1"
+    >
       <div
         class="paragraph"
-        data-perseus-paragraph-index="1"
       >
         <div
-          class="paragraph"
+          class="perseus-widget-container widget-nohighlight widget-block"
         >
           <div
-            class="perseus-widget-container widget-nohighlight widget-block"
+            class="perseus-widget-sorter perseus-clearfix"
           >
-            <div
-              class="perseus-widget-sorter perseus-clearfix"
+            <ul
+              class="sortable_13d4756 perseus-sortable"
             >
-              <ul
-                class="sortable_13d4756 perseus-sortable"
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px 5px 0px 0px;"
               >
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px 5px 0px 0px;"
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              15
-                            </span>
-                            <span />
-                          </span>
-                           grams
-                        </div>
-                      </div>
+                          15
+                        </span>
+                        <span />
+                      </span>
+                       grams
                     </div>
-                  </span>
-                </li>
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px 5px 0px 0px;"
+                  </div>
+                </div>
+              </li>
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px 5px 0px 0px;"
+              >
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              0.005
-                            </span>
-                            <span />
-                          </span>
-                           kilograms
-                        </div>
-                      </div>
+                          0.005
+                        </span>
+                        <span />
+                      </span>
+                       kilograms
                     </div>
-                  </span>
-                </li>
-                <li
-                  class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
-                  style="position: static; margin: 0px;"
+                  </div>
+                </div>
+              </li>
+              <li
+                class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+                style="position: static; margin: 0px;"
+              >
+                <div
+                  class="perseus-renderer perseus-renderer-responsive"
                 >
-                  <span
-                    class="mock-KatexProvider"
+                  <div
+                    class="paragraph"
+                    data-perseus-paragraph-index="0"
                   >
                     <div
-                      class="perseus-renderer perseus-renderer-responsive"
+                      class="paragraph"
                     >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                      <span
+                        style="white-space: nowrap;"
                       >
-                        <div
-                          class="paragraph"
+                        <span />
+                        <span
+                          class="tex-mock"
                         >
-                          <span
-                            style="white-space: nowrap;"
-                          >
-                            <span />
-                            <span
-                              class="tex-mock"
-                            >
-                              55
-                            </span>
-                            <span />
-                          </span>
-                           grams
-                        </div>
-                      </div>
+                          55
+                        </span>
+                        <span />
+                      </span>
+                       grams
                     </div>
-                  </span>
-                </li>
-              </ul>
-            </div>
+                  </div>
+                </div>
+              </li>
+            </ul>
           </div>
         </div>
       </div>
     </div>
-  </span>
+  </div>
 </div>
 `;

package/src/components/__tests__/sortable.test.tsx

@@ -4,7 +4,7 @@ import "@testing-library/jest-dom"; // Imports custom mathers
 
 import {testDependencies} from "../../../../../testing/test-dependencies";
 import * as Dependencies from "../../dependencies";
-import Sortable from "../sortable";
+import Sortable, {Layout} from "../sortable";
 
 describe("Sortable", () => {
     beforeEach(() => {
@@ -17,15 +17,53 @@ describe("Sortable", () => {
         // Arrange and Act
         const {container} = render(
             <Sortable
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
         // Assert
         expect(container).toMatchSnapshot("first render");
     });
+
+    it("renders a spinner while waiting for the TeX renderer to load", () => {
+        let simulateFakeTeXRendering = () => {};
+        function FakeTeX({
+            children,
+            onRender,
+        }: {
+            children: string;
+            onRender?: () => unknown;
+        }) {
+            simulateFakeTeXRendering = onRender || simulateFakeTeXRendering;
+            return <div className="fake-tex">{children}</div>;
+        }
+        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
+            ...testDependencies,
+            TeX: FakeTeX,
+        });
+
+        // Act
+        const {container} = render(
+            <Sortable
+                waitForTexRendererToLoad={true}
+                layout={Layout.HORIZONTAL}
+                options={["a", "b", "c"]}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot("first render: displays a spinner");
+
+        // Act
+        simulateFakeTeXRendering();
+
+        // Assert
+        expect(container).toMatchSnapshot(
+            "second render: displays the sortable",
+        );
+    });
 });
 
 describe("moveOptionToIndex", () => {
@@ -41,9 +79,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -64,9 +102,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -85,9 +123,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -106,9 +144,9 @@ describe("moveOptionToIndex", () => {
         render(
             <Sortable
                 ref={(r) => (sortable = r)}
-                layout="horizontal"
+                layout={Layout.HORIZONTAL}
                 options={["a", "b", "c"]}
-                waitForKatexLoad={false}
+                waitForTexRendererToLoad={false}
             />,
         );
 
@@ -147,7 +185,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 0,
                 "option": "a",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
               {
@@ -155,7 +193,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 1,
                 "option": "b",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
               {
@@ -163,7 +201,7 @@ describe("Sortable.itemsFromProps", () => {
                 "height": 0,
                 "key": 2,
                 "option": "c",
-                "type": "static",
+                "state": "static",
                 "width": 0,
               },
             ]
@@ -182,7 +220,7 @@ describe("Sortable.itemsFromProps", () => {
 
         // Assert
         items.forEach((item) => {
-            expect(item.type).toBe("disabled");
+            expect(item.state).toBe("disabled");
         });
     });
     it("sets the item type to static if disabled is false", () => {
@@ -197,7 +235,7 @@ describe("Sortable.itemsFromProps", () => {
 
         // Assert
         items.forEach((item) => {
-            expect(item.type).toBe("static");
+            expect(item.state).toBe("static");
         });
     });
 });

package/src/components/__tests__/sorter.test.tsx

@@ -1,4 +1,3 @@
-import getRenderA11yString from "katex/dist/contrib/render-a11y-string";
 import * as React from "react";
 import "@testing-library/jest-dom";
 
@@ -22,15 +21,19 @@ describe("sorter widget", () => {
 
         jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
             ...testDependencies,
-            getKaTeX: () => {
-                return Promise.resolve({});
+            TeX: ({
+                children,
+                // alias onRender to onLoad to quiet the overzealous testing-library linter
+                onRender: onLoad,
+            }: {
+                children: React.ReactNode;
+                onRender?: () => unknown;
+            }) => {
+                React.useLayoutEffect(() => {
+                    onLoad?.();
+                }, [onLoad]);
+                return <span className="tex-mock">{children}</span>;
             },
-            TeX: ({children}: {children: React.ReactNode}) => (
-                <span className="tex-mock">{children}</span>
-            ),
-            // @ts-expect-error [FEI-5003] - TS2322 - Type 'Promise<any>' is not assignable to type '() => Promise<katexA11y>'.
-            getRenderA11yString: Promise.resolve(getRenderA11yString),
-            shouldUseFutureKaTeX: (flag: boolean) => {},
         });
     });