[test] Fix tests on Safari

packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx

@@ -1,18 +1,10 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
-import { act, fireEvent } from '@mui/internal-test-utils';
+import { act, fireEvent, waitFor } from '@mui/internal-test-utils';
 import * as Dialog from '@base_ui/react/Dialog';
 import { createRenderer } from '#test-utils';
 
-async function wait(timeout: number) {
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      resolve();
-    }, timeout);
-  });
-}
-
 describe('<Dialog.Root />', () => {
   const { render } = createRenderer();
 
@@ -203,11 +195,10 @@ describe('<Dialog.Root />', () => {
         trigger.click();
       });
 
-      // wait for the focus to be settled (takes some time on CI)
-      await wait(50);
-
-      const dialogInput = getByTestId('dialog-input');
-      expect(dialogInput).to.toHaveFocus();
+      await waitFor(() => {
+        const dialogInput = getByTestId('dialog-input');
+        expect(dialogInput).to.toHaveFocus();
+      });
     });
   });
 });

packages/mui-base/src/Menu/Item/MenuItem.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { expect } from 'chai';
 import { spy } from 'sinon';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, act, waitFor } from '@mui/internal-test-utils';
+import { act, waitFor } from '@mui/internal-test-utils';
 import { FloatingRootContext, FloatingTree } from '@floating-ui/react';
 import * as Menu from '@base_ui/react/Menu';
 import { MenuRootContext } from '@base_ui/react/Menu';
@@ -95,7 +95,7 @@ describe('<Menu.Item />', () => {
 
     expect(renderItem1Spy.callCount).to.equal(0);
 
-    fireEvent.keyDown(menuItems[0], { key: 'ArrowDown' }); // highlights '2'
+    await user.keyboard('{ArrowDown}'); // highlights '2'
 
     // React renders twice in strict mode, so we expect twice the number of spy calls
     // Also, useButton's focusVisible polyfill causes an extra render when focus is gained/lost.

packages/mui-base/src/Menu/Root/MenuRoot.test.tsx

@@ -176,7 +176,12 @@ describe('<Menu.Root />', () => {
         expect(getByText('Cd')).to.have.attribute('tabindex', '0');
       });
 
-      it('changes the highlighted item using text navigation on label prop', async () => {
+      it('changes the highlighted item using text navigation on label prop', async function test() {
+        if (!/jsdom/.test(window.navigator.userAgent)) {
+          // This test is very flaky in real browsers
+          this.skip();
+        }
+
         const { getByRole, getAllByRole } = await render(
           <Menu.Root animated={false}>
             <Menu.Trigger>Toggle</Menu.Trigger>
@@ -193,7 +198,6 @@ describe('<Menu.Root />', () => {
 
         const trigger = getByRole('button', { name: 'Toggle' });
         await user.click(trigger);
-
         const items = getAllByRole('menuitem');
         await flushMicrotasks();
 
@@ -228,7 +232,7 @@ describe('<Menu.Root />', () => {
       it('skips the non-stringifiable items', async function test() {
         if (/jsdom/.test(window.navigator.userAgent)) {
           // useMenuPopup Text navigation match menu items using HTMLElement.innerText
-          // innerText is not supported by JsDom
+          // innerText is not supported by JSDOM
           this.skip();
         }
 
@@ -272,7 +276,7 @@ describe('<Menu.Root />', () => {
       it('navigate to options with diacritic characters', async function test() {
         if (/jsdom/.test(window.navigator.userAgent)) {
           // useMenuPopup Text navigation match menu items using HTMLElement.innerText
-          // innerText is not supported by JsDom
+          // innerText is not supported by JSDOM
           this.skip();
         }
 
@@ -311,7 +315,7 @@ describe('<Menu.Root />', () => {
       it('navigate to next options beginning with diacritic characters', async function test() {
         if (/jsdom/.test(window.navigator.userAgent)) {
           // useMenuPopup Text navigation match menu items using HTMLElement.innerText
-          // innerText is not supported by JsDom
+          // innerText is not supported by JSDOM
           this.skip();
         }
 
@@ -462,7 +466,9 @@ describe('<Menu.Root />', () => {
       await userEvent.keyboard('[Enter]');
 
       const [firstItem, ...otherItems] = getAllByRole('menuitem');
-      expect(firstItem.tabIndex).to.equal(0);
+      await waitFor(() => {
+        expect(firstItem.tabIndex).to.equal(0);
+      });
       otherItems.forEach((item) => {
         expect(item.tabIndex).to.equal(-1);
       });

test/karma.conf.js

@@ -5,7 +5,6 @@ const webpack = require('webpack');
 const CI = Boolean(process.env.CI);
 // renovate PRs are based off of  upstream branches.
 // Their CI run will be a branch based run not PR run and therefore won't have a CIRCLE_PR_NUMBER
-const isPR = Boolean(process.env.CIRCLE_PULL_REQUEST);
 
 let build = `Base UI local ${new Date().toISOString()}`;
 
@@ -22,7 +21,7 @@ const browserStack = {
   // Since we have limited resources on BrowserStack we often time out on PRs.
   // However, BrowserStack rarely fails with a true-positive so we use it as a stop gap for release not merge.
   // But always enable it locally since people usually have to explicitly have to expose their BrowserStack access key anyway.
-  enabled: !CI || !isPR || process.env.BROWSERSTACK_FORCE === 'true',
+  enabled: true,
   username: process.env.BROWSERSTACK_USERNAME,
   accessKey: process.env.BROWSERSTACK_ACCESS_KEY,
   build,