[NumberField] Fix failing browser tests (#317)

mui · Apr 16, 2024 · 15b00bf · 15b00bf
1 parent b6f5b2e
commit 15b00bf
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/packages/mui-base/src/NumberField/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/NumberFieldScrubArea.test.tsx
@@ -4,6 +4,7 @@ import { createRenderer, screen, waitFor } from '@mui/internal-test-utils';
 import * as NumberField from '@base_ui/react/NumberField';
 import { describeConformance } from '../../test/describeConformance';
 import { NumberFieldContext, NumberFieldContextValue } from './NumberFieldContext';
+import { isWebKit } from '../utils/detectBrowser';
 
 function createPointerMoveEvent({ movementX = 0, movementY = 0 }) {
   return new PointerEvent('pointermove', {
@@ -47,10 +48,12 @@ describe('<NumberField.ScrubArea />', () => {
     expect(screen.queryByRole('presentation')).not.to.equal(null);
   });
 
-  if (/jsdom/.test(window.navigator.userAgent)) {
+  // Only run the following tests in Chromium/Firefox.
+  if (/jsdom/.test(window.navigator.userAgent) || isWebKit()) {
     return;
   }
 
+  // `PointerEvent` isn't defined in JSDOM. This needs to be located beneath the return above.
   const pointerDownEvent = new PointerEvent('pointerdown', {
     bubbles: true,
     clientX: 100,
@@ -70,9 +73,7 @@ describe('<NumberField.ScrubArea />', () => {
     const scrubArea = screen.getByTestId('scrub-area');
     const input = screen.getByRole('textbox');
 
-    scrubArea.dispatchEvent(
-      new PointerEvent('pointerdown', { bubbles: true, clientX: 100, clientY: 100 }),
-    );
+    scrubArea.dispatchEvent(pointerDownEvent);
     scrubArea.dispatchEvent(createPointerMoveEvent({ movementY: 10 }));
 
     await waitFor(() => expect(input).to.have.value('-10'));

diff --git a/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.test.tsx
@@ -4,6 +4,7 @@ import * as NumberField from '@base_ui/react/NumberField';
 import { expect } from 'chai';
 import { describeConformance } from '../../test/describeConformance';
 import { NumberFieldContext, NumberFieldContextValue } from './NumberFieldContext';
+import { isWebKit } from '../utils/detectBrowser';
 
 const testContext = {
   getScrubAreaCursorProps: (externalProps) => externalProps,
@@ -20,6 +21,11 @@ const testContext = {
 describe('<NumberField.ScrubAreaCursor />', () => {
   const { render } = createRenderer();
 
+  // This component doesn't render on WebKit.
+  if (isWebKit()) {
+    return;
+  }
+
   describeConformance(<NumberField.ScrubAreaCursor />, () => ({
     inheritComponent: 'span',
     refInstanceof: window.HTMLSpanElement,

diff --git a/packages/mui-base/src/useNumberField/useScrub.ts b/packages/mui-base/src/useNumberField/useScrub.ts
@@ -135,8 +135,17 @@ export function useScrub(params: ScrubParams) {
           if (!isWebKit()) {
             // There can be some frames where there's no cursor at all when requesting the pointer lock.
             // This is a workaround to avoid flickering.
-            avoidFlickerTimeoutRef.current = window.setTimeout(() => {
-              ownerDocument(scrubAreaRef.current).body.requestPointerLock?.();
+            avoidFlickerTimeoutRef.current = window.setTimeout(async () => {
+              try {
+                // Avoid non-deterministic errors in testing environments. This error sometimes
+                // appears:
+                // "The root document of this element is not valid for pointer lock."
+                // We need to await it even though it doesn't appear to return a promise in the
+                // types in order for the `catch` to work.
+                await ownerDocument(scrubAreaRef.current).body.requestPointerLock();
+              } catch (e) {
+                //
+              }
             }, 20);
           }
         },
@@ -185,7 +194,12 @@ export function useScrub(params: ScrubParams) {
         onScrubbingChange(false, event);
 
         if (!isWebKit()) {
-          ownerDocument(scrubAreaRef.current).exitPointerLock?.();
+          try {
+            // Avoid errors in testing environments.
+            ownerDocument(scrubAreaRef.current).exitPointerLock();
+          } catch (e) {
+            //
+          }
         }
       }