Updated tests to accommodate for new setTimeout method. (#909)

## Summary:
When testing the previous keypadHeight fix during a Perseus deploy on webapp, it was discovered that the height being returned on initial render seems to be the entire view height rather than the height of our keypad. 

This PR returns us to the original setTimeout method and method call order, and ensures that we're always getting the correct keypadHeight returned. I've also updated some tests to handle the additional asynchronous call. While the setTimeout method isn't ideal, this should solve our scroll-breaking issue until we're able to completely move the scrolling logic into Perseus. 

## Test plan:
- manual testing in webapp has shown that this has solved the issue

Author: SonicScrewdriver

Reviewers: handeyeco, SonicScrewdriver

Required Reviewers:

Approved By: handeyeco

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: #909

.changeset/shy-vans-wash.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": minor
+---
+
+Reworked onFocusChange logic to solve a bug on initial render.

packages/perseus/src/__stories__/article-renderer.stories.tsx

@@ -1,4 +1,5 @@
 import {KeypadContext} from "@khanacademy/math-input";
+import {action} from "@storybook/addon-actions";
 import React from "react";
 
 import {storybookDependenciesV2} from "../../../../testing/test-dependencies";
@@ -67,6 +68,7 @@ export const ExpressionArticle = ({useNewStyles}): any => (
                     apiOptions={{
                         isMobile: true,
                         customKeypad: true,
+                        onFocusChange: action("onFocusChange"),
                     }}
                     keypadElement={keypadElement}
                 />

packages/perseus/src/__tests__/server-item-renderer.test.tsx

@@ -326,9 +326,9 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(gotFocus).toBeTrue();
@@ -370,9 +370,9 @@ describe("server item renderer", () => {
 
             // Act
             const gotFocus = renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.activate).toHaveBeenCalled();
@@ -392,15 +392,12 @@ describe("server item renderer", () => {
                 onFocusChange,
             });
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(onFocusChange).toHaveBeenCalledTimes(2);
@@ -440,15 +437,12 @@ describe("server item renderer", () => {
                 {keypadElement},
             );
             renderer.focus();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
 
             // Act
             renderer.blur();
-            // We have _two_ different async processes that need to be resolved here
-            jest.runOnlyPendingTimers();
-            jest.runOnlyPendingTimers();
+
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
 
             // Assert
             expect(keypadElement.dismiss).toHaveBeenCalled();
@@ -471,6 +465,9 @@ describe("server item renderer", () => {
             // Act
             renderer.focusPath(["input-number 1"]);
 
+            // We have some async processes that need to be resolved here
+            jest.runAllTimers();
+
             // Assert
             expect(onFocusChange).toHaveBeenCalledWith(
                 ["input-number 1"],

packages/perseus/src/article-renderer.tsx

@@ -104,28 +104,33 @@ class ArticleRenderer
                 );
         }
 
+        const {onFocusChange} = this.props.apiOptions;
+        if (onFocusChange) {
+            // Wait for the keypad to mount before getting the height
+            setTimeout(() => {
+                const keypadDomNode =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                const keypadHeight =
+                    keypadDomNode && didFocusInput
+                        ? keypadDomNode.getBoundingClientRect().height
+                        : 0;
+
+                onFocusChange(
+                    this._currentFocus,
+                    prevFocusPath,
+                    keypadHeight,
+                    didFocusInput ? focusedInput : null,
+                );
+            }, 0);
+        }
+
         if (keypadElement && isMobile) {
             if (didFocusInput) {
                 keypadElement.activate();
             } else {
                 keypadElement.dismiss();
             }
         }
-
-        if (this.props.apiOptions.onFocusChange != null) {
-            const keypadDomNode = keypadElement?.getDOMNode() as HTMLElement;
-            const keypadHeight =
-                keypadDomNode && didFocusInput
-                    ? keypadDomNode.getBoundingClientRect().height
-                    : 0;
-
-            this.props.apiOptions.onFocusChange(
-                this._currentFocus,
-                prevFocusPath,
-                keypadHeight,
-                didFocusInput ? focusedInput : null,
-            );
-        }
     };
 
     _onRendererBlur: (arg1: any) => void = (blurPath) => {

packages/perseus/src/server-item-renderer.tsx

@@ -180,33 +180,36 @@ export class ServerItemRenderer
                 return Util.inputPathsEqual(inputPath, this._currentFocus);
             });
 
+        if (onFocusChange != null) {
+            // Wait for the keypad to mount before getting the height
+            setTimeout(() => {
+                // First, calculate the current keypad height
+                const keypadDomNode: HTMLElement =
+                    keypadElement?.getDOMNode() as HTMLElement;
+                const keypadHeight =
+                    keypadDomNode && didFocusInput
+                        ? keypadDomNode.getBoundingClientRect().height
+                        : 0;
+
+                // Then call the callback
+                onFocusChange(
+                    this._currentFocus,
+                    prevFocus,
+                    keypadHeight,
+                    // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
+                    didFocusInput &&
+                        this.questionRenderer.getDOMNodeForPath(newFocus),
+                );
+            }, 0);
+        }
+
         if (keypadElement && isMobile) {
             if (didFocusInput) {
                 keypadElement.activate();
             } else {
                 keypadElement.dismiss();
             }
         }
-
-        if (onFocusChange != null) {
-            // First, calculate the current keypad height
-            const keypadDomNode: HTMLElement =
-                keypadElement?.getDOMNode() as HTMLElement;
-            const keypadHeight =
-                keypadDomNode && didFocusInput
-                    ? keypadDomNode.getBoundingClientRect().height
-                    : 0;
-
-            // Then call the callback
-            onFocusChange(
-                this._currentFocus,
-                prevFocus,
-                keypadHeight,
-                // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
-                didFocusInput &&
-                    this.questionRenderer.getDOMNodeForPath(newFocus),
-            );
-        }
     }
 
     _onRendererBlur(blurPath: FocusPath) {