Jest test correctness fixes (#2427)

## Summary:

This PR fixes a bunch of Jest tests to be more reliable. It improves:

  * Switches to using `findByXyz()` functions when using `userEvent` functions on the result. I've found that in some environments we'll see the dreaded `An update to XyzComponent inside a test was not wrapped in act(...).` error.
  * Move away from using the `done` callback in Jest tests (it's more portable to [return a `Promise`](https://jestjs.io/docs/asynchronous#promises) that just resolves when the test is done). 
  * Fixed a format option in a `test.each()` test (`%b` is invalid)
  * Wrapping operations that mutate the DOM in [`act()`](https://testing-library.com/docs/react-testing-library/api/#act) calls.

Issue: n/a

## Test plan:

`pnpm test` <-- all tests pass!

Author: jeremywiebe

Reviewers: jeremywiebe, Myranae

Required Reviewers:

Approved By: Myranae

Checks: ✅ 8 checks were successful

Pull Request URL: #2427

Author: jeremywiebe

.changeset/six-pants-brush.md

@@ -0,0 +1,2 @@
+---
+---

packages/perseus-editor/src/widgets/__tests__/interactive-graph-editor-locked-figures.test.tsx

@@ -87,7 +87,7 @@ describe("InteractiveGraphEditor locked figures", () => {
                 name: "Add locked figure",
             });
             await userEvent.click(addLockedFigureButton);
-            const addFigureButton = screen.getByText(figureType);
+            const addFigureButton = await screen.findByText(figureType);
             await userEvent.click(addFigureButton);
 
             // Assert

packages/perseus/src/__tests__/renderer-api.test.tsx

@@ -96,18 +96,19 @@ describe("Perseus API", function () {
             expect(score).toHaveInvalidInput();
         });
 
-        it("should be able to accept a callback", function (done) {
-            const {renderer} = renderQuestion(mockWidget1Item.question);
-            act(() =>
-                renderer.setInputValue(["mock-widget 1"], "3", function () {
-                    const guess =
-                        renderer.getUserInput()[0] as PerseusMockWidgetUserInput;
-                    expect(guess?.currentValue).toBe("3");
-                    done();
-                }),
-            );
-            jest.runAllTimers();
-        });
+        it("should be able to accept a callback", () =>
+            new Promise(function (resolve) {
+                const {renderer} = renderQuestion(mockWidget1Item.question);
+                act(() =>
+                    renderer.setInputValue(["mock-widget 1"], "3", function () {
+                        const guess =
+                            renderer.getUserInput()[0] as PerseusMockWidgetUserInput;
+                        expect(guess?.currentValue).toBe("3");
+                        resolve(null);
+                    }),
+                );
+                jest.runAllTimers();
+            }));
     });
 
     describe("getInputPaths", function () {

packages/perseus/src/components/number-input.tsx

@@ -226,12 +226,10 @@ class NumberInput extends React.Component<any, any> {
         }
 
         const {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            onFormatChange,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            checkValidity,
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            useArrowKeys,
+            onFormatChange: _,
+            checkValidity: __,
+            useArrowKeys: ___,
+            allowPiTruncation: ____,
             ...restProps
         } = this.props;
 

packages/perseus/src/widgets/graded-group/graded-group.test.ts

@@ -251,7 +251,7 @@ describe("graded-group", () => {
 
             // Assert
             expect(
-                screen.getByRole("button", {name: "Try again"}),
+                await screen.findByRole("button", {name: "Try again"}),
             ).toBeVisible();
         });
 

packages/perseus/src/widgets/image/__snapshots__/image.test.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`image widget - isMobile %b should snapshot: first render 1`] = `
+exports[`image widget - isMobile(false) should snapshot: first render 1`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
@@ -28,6 +28,24 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                   class="perseus-image-widget"
                   style="max-width: 420px;"
                 >
+                  <div
+                    class="perseus-image-title"
+                  >
+                    <div
+                      class="perseus-renderer perseus-renderer-responsive"
+                    >
+                      <div
+                        class="paragraph"
+                        data-perseus-paragraph-index="0"
+                      >
+                        <div
+                          class="paragraph"
+                        >
+                          Image Title
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                   <div
                     class="fixed-to-responsive svg-image"
                     style="max-width: 420px; max-height: 345px;"
@@ -57,25 +75,20 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                     </span>
                   </div>
                   <figcaption
-                    class="perseus-image-caption has-title"
+                    class="perseus-image-caption"
                     style="max-width: 420px;"
                   >
-                    <div>
+                    <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>
-                              Image Title.
-                            </strong>
-                             Image Caption
-                          </div>
+                          Image Caption
                         </div>
                       </div>
                     </div>
@@ -164,7 +177,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
 </div>
 `;
 
-exports[`image widget - isMobile %b should snapshot: first render 2`] = `
+exports[`image widget - isMobile(true) should snapshot: first render 1`] = `
 <div>
   <div
     class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
@@ -192,24 +205,6 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                   class="perseus-image-widget"
                   style="max-width: 420px;"
                 >
-                  <div
-                    class="perseus-image-title"
-                  >
-                    <div
-                      class="perseus-renderer perseus-renderer-responsive"
-                    >
-                      <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
-                      >
-                        <div
-                          class="paragraph"
-                        >
-                          Image Title
-                        </div>
-                      </div>
-                    </div>
-                  </div>
                   <div
                     class="fixed-to-responsive svg-image"
                     style="max-width: 420px; max-height: 345px;"
@@ -239,20 +234,25 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                     </span>
                   </div>
                   <figcaption
-                    class="perseus-image-caption"
+                    class="perseus-image-caption has-title"
                     style="max-width: 420px;"
                   >
-                    <div
-                      class="perseus-renderer perseus-renderer-responsive"
-                    >
+                    <div>
                       <div
-                        class="paragraph"
-                        data-perseus-paragraph-index="0"
+                        class="perseus-renderer perseus-renderer-responsive"
                       >
                         <div
                           class="paragraph"
+                          data-perseus-paragraph-index="0"
                         >
-                          Image Caption
+                          <div
+                            class="paragraph"
+                          >
+                            <strong>
+                              Image Title.
+                            </strong>
+                             Image Caption
+                          </div>
                         </div>
                       </div>
                     </div>

packages/perseus/src/widgets/image/image.test.ts

@@ -10,7 +10,7 @@ import {question} from "./image.testdata";
 
 import type {APIOptions} from "../../types";
 
-describe.each([true, false])("image widget - isMobile %b", (isMobile) => {
+describe.each([[true], [false]])("image widget - isMobile(%j)", (isMobile) => {
     const apiOptions: APIOptions = {isMobile};
 
     beforeEach(() => {

packages/perseus/src/widgets/input-number/input-number.test.ts

@@ -2,7 +2,7 @@
  * Disclaimer: Definitely not thorough enough
  */
 import {describe, beforeEach, it} from "@jest/globals";
-import {act, screen} from "@testing-library/react";
+import {act, screen, waitFor} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import _ from "underscore";
 
@@ -37,7 +37,7 @@ describe("input-number", function () {
             const {renderer} = renderQuestion(question);
 
             // Act
-            const textbox = screen.getByRole("textbox");
+            const textbox = await screen.findByRole("textbox");
             await userEvent.click(textbox);
             await userEvent.type(textbox, "1/2");
             const score = scorePerseusItemTesting(
@@ -54,7 +54,7 @@ describe("input-number", function () {
             const {renderer} = renderQuestion(question);
 
             // Act
-            const textbox = screen.getByRole("textbox");
+            const textbox = await screen.findByRole("textbox");
             await userEvent.click(textbox);
             await userEvent.type(textbox, "0.7");
             const score = scorePerseusItemTesting(
@@ -71,7 +71,7 @@ describe("input-number", function () {
             const {renderer} = renderQuestion(question);
 
             // Act
-            const textbox = screen.getByRole("textbox");
+            const textbox = await screen.findByRole("textbox");
             await userEvent.click(textbox);
             await userEvent.type(textbox, "0..7");
             const score = scorePerseusItemTesting(
@@ -205,7 +205,7 @@ describe("input-number", function () {
             const {renderer} = renderQuestion(question);
 
             // Act
-            const textbox = screen.getByRole("textbox");
+            const textbox = await screen.findByRole("textbox");
             await userEvent.click(textbox);
             await userEvent.type(textbox, correct);
             const score = scorePerseusItemTesting(
@@ -222,7 +222,7 @@ describe("input-number", function () {
             const {renderer} = renderQuestion(question);
 
             // Act
-            const textbox = screen.getByRole("textbox");
+            const textbox = await screen.findByRole("textbox");
             await userEvent.click(textbox);
             await userEvent.type(textbox, incorrect);
             const score = scorePerseusItemTesting(
@@ -335,18 +335,22 @@ describe("focus state", () => {
         const gotFocus = await act(() => renderer.focus());
 
         // Assert
+        expect(screen.getByRole("textbox")).toHaveFocus();
         expect(gotFocus).toBe(true);
     });
 
     it("supports blurring", async () => {
         //  Arrange
         const {renderer} = renderQuestion(question);
+        await act(() => renderer.focus());
+        expect(screen.getByRole("textbox")).toHaveFocus();
 
         // Act
-        const gotFocus = await act(() => renderer.focus());
-        act(() => renderer.blur());
+        await act(() => renderer.blur());
 
         // Assert
-        expect(gotFocus).toBe(true);
+        await waitFor(() => {
+            expect(screen.getByRole("textbox")).not.toHaveFocus();
+        });
     });
 });

packages/perseus/src/widgets/interactive-graphs/graphs/circle.test.tsx

@@ -1,4 +1,4 @@
-import {render, screen} from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import {Mafs} from "mafs";
 import * as React from "react";
@@ -315,7 +315,7 @@ describe("Circle graph screen reader", () => {
 
         // Act
         // move the radius point
-        radiusPoint.focus();
+        act(() => radiusPoint.focus());
         await userEvent.keyboard("{arrowright}");
 
         // Assert
@@ -333,12 +333,12 @@ describe("Circle graph screen reader", () => {
 
         // Act
         // move the radius point so that its aria-live is set to polite
-        radiusPoint.focus();
+        act(() => radiusPoint.focus());
         await userEvent.keyboard("{arrowright}");
         expect(radiusPoint).toHaveAttribute("aria-live", "polite");
 
         // move the circle
-        circleGraph.focus();
+        act(() => circleGraph.focus());
         await userEvent.keyboard("{arrowright}");
 
         // Assert

packages/perseus/src/widgets/interactive-graphs/graphs/linear-system.test.tsx

@@ -1,4 +1,4 @@
-import {render, screen} from "@testing-library/react";
+import {act, render, screen} from "@testing-library/react";
 import {userEvent as userEventLib} from "@testing-library/user-event";
 import * as React from "react";
 
@@ -276,7 +276,7 @@ describe("Linear System graph screen reader", () => {
                 const movingElement = interactiveElements[index];
 
                 // Act - Move the element
-                movingElement.focus();
+                act(() => movingElement.focus());
                 await userEvent.keyboard("{ArrowRight}");
 
                 const expectedAriaLive = ["off", "off", "off"];