Simplify controlling animations in tests

mui · Jan 8, 2025 · 49eb462 · 49eb462
1 parent 1726a1d
commit 49eb462
Show file tree

Hide file tree

Showing 18 changed files with 53 additions and 41 deletions.
diff --git a/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx b/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx
@@ -169,7 +169,7 @@ describe('<AlertDialog.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx b/packages/react/src/checkbox/indicator/CheckboxIndicator.test.tsx
@@ -18,7 +18,7 @@ const testContext = {
 
 describe('<Checkbox.Indicator />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -132,7 +132,7 @@ describe('<Checkbox.Indicator />', () => {
       skip();
     }
 
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
     let animationFinished = false;
     const notifyAnimationFinished = () => {

diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -11,7 +11,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<Dialog.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -92,7 +92,7 @@ describe('<Dialog.Root />', () => {
         skip();
       }
 
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let animationFinished = false;
       const notifyAnimationFinished = () => {
@@ -384,7 +384,7 @@ describe('<Dialog.Root />', () => {
       skip();
     }
 
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
     const notifyTransitionEnd = spy();
 
@@ -621,7 +621,7 @@ describe('<Dialog.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/global.d.ts b/packages/react/src/global.d.ts
@@ -0,0 +1,9 @@
+declare global {
+  /**
+   * When `true`, disables animation-related code, even if supported by the runtime enviroment.
+   */
+  // eslint-disable-next-line no-var, vars-on-top
+  var BASE_UI_ANIMATIONS_DISABLED: boolean;
+}
+
+export type {};
diff --git a/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx b/packages/react/src/menu/checkbox-item-indicator/MenuCheckboxItemIndicator.test.tsx
@@ -6,7 +6,7 @@ import { expect } from 'chai';
 
 describe('<Menu.CheckboxItemIndicator />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -71,7 +71,7 @@ describe('<Menu.CheckboxItemIndicator />', () => {
       skip();
     }
 
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
     let animationFinished = false;
     const notifyAnimationFinished = () => {

diff --git a/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx b/packages/react/src/menu/radio-item-indicator/MenuRadioItemIndicator.test.tsx
@@ -76,7 +76,7 @@ describe('<Menu.RadioItemIndicator />', () => {
       skip();
     }
 
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
     let animationFinished = false;
     const notifyAnimationFinished = () => {

diff --git a/packages/react/src/menu/root/MenuRoot.test.tsx b/packages/react/src/menu/root/MenuRoot.test.tsx
@@ -11,7 +11,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<Menu.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -757,7 +757,7 @@ describe('<Menu.Root />', () => {
         skip();
       }
 
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let animationFinished = false;
       const notifyAnimationFinished = () => {
@@ -915,7 +915,7 @@ describe('<Menu.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/popover/root/PopoverRoot.test.tsx b/packages/react/src/popover/root/PopoverRoot.test.tsx
@@ -14,7 +14,7 @@ function Root(props: Popover.Root.Props) {
 
 describe('<Popover.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render, clock } = createRenderer();
@@ -227,7 +227,7 @@ describe('<Popover.Root />', () => {
         skip();
       }
 
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let animationFinished = false;
       const notifyAnimationFinished = () => {
@@ -574,7 +574,7 @@ describe('<Popover.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx b/packages/react/src/preview-card/root/PreviewCardRoot.test.tsx
@@ -22,7 +22,7 @@ function Trigger(props: PreviewCard.Trigger.Props) {
 
 describe('<PreviewCard.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render, clock } = createRenderer();
@@ -208,7 +208,7 @@ describe('<PreviewCard.Root />', () => {
         animationFinished = true;
       };
 
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       function Test() {
         const style = `
@@ -534,7 +534,7 @@ describe('<PreviewCard.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/radio/indicator/RadioIndicator.test.tsx b/packages/react/src/radio/indicator/RadioIndicator.test.tsx
@@ -7,7 +7,7 @@ import { RadioGroup } from '@base-ui-components/react/radio-group';
 
 describe('<Radio.Indicator />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -63,7 +63,7 @@ describe('<Radio.Indicator />', () => {
       skip();
     }
 
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
     let animationFinished = false;
     const notifyAnimationFinished = () => {

diff --git a/packages/react/src/select/root/SelectRoot.test.tsx b/packages/react/src/select/root/SelectRoot.test.tsx
@@ -9,7 +9,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<Select.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render } = createRenderer();
@@ -252,7 +252,7 @@ describe('<Select.Root />', () => {
         skip();
       }
 
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let animationFinished = false;
       const notifyAnimationFinished = () => {
@@ -469,7 +469,7 @@ describe('<Select.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/tooltip/root/TooltipRoot.test.tsx b/packages/react/src/tooltip/root/TooltipRoot.test.tsx
@@ -14,7 +14,7 @@ function Root(props: Tooltip.Root.Props) {
 
 describe('<Tooltip.Root />', () => {
   beforeEach(() => {
-    (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = true;
+    globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
   });
 
   const { render, clock } = createRenderer();
@@ -433,7 +433,7 @@ describe('<Tooltip.Root />', () => {
     });
 
     it('is called on close when the exit animation finishes', async () => {
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED = false;
+      globalThis.BASE_UI_ANIMATIONS_DISABLED = false;
 
       let onCloseCompleteCalled = false;
       function notifyonCloseComplete() {

diff --git a/packages/react/src/utils/useAnimationsFinished.ts b/packages/react/src/utils/useAnimationsFinished.ts
@@ -25,10 +25,7 @@ export function useAnimationsFinished(ref: React.RefObject<HTMLElement | null>)
       return;
     }
 
-    if (
-      typeof element.getAnimations !== 'function' ||
-      (globalThis as any).BASE_UI_ANIMATIONS_DISABLED
-    ) {
+    if (typeof element.getAnimations !== 'function' || globalThis.BASE_UI_ANIMATIONS_DISABLED) {
       fnToExecute();
     } else {
       frameRef.current = requestAnimationFrame(() => {

diff --git a/packages/react/tsconfig.test.json b/packages/react/tsconfig.test.json
@@ -11,6 +11,6 @@
     "outDir": "build-tests",
     "types": ["vitest/globals", "@types/chai", "@types/chai-dom"]
   },
-  "include": ["src/**/*.spec.ts*", "src/**/*.test.ts*", "src/index.test.js", "test"],
+  "include": ["src/**/*.spec.ts*", "src/**/*.test.ts*", "src/index.test.js", "test", "src/global.d.ts"],
   "references": [{ "path": "./tsconfig.build.json" }]
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/test/package.json b/test/package.json
@@ -12,6 +12,7 @@
     "@playwright/test": "1.49.1",
     "@testing-library/dom": "^10.4.0",
     "@types/chai": "^4.3.20",
+    "@types/chai-dom": "^1.11.3",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/sinon": "^17.0.3",

diff --git a/test/setupVitest.ts b/test/setupVitest.ts
@@ -1,21 +1,23 @@
-import { beforeAll, afterAll, vi } from 'vitest';
+/* eslint-disable no-var */
+/* eslint-disable vars-on-top */
+import { beforeAll, afterAll } from 'vitest';
 import chai from 'chai';
-
 import chaiDom from 'chai-dom';
 import chaiPlugin from '@mui/internal-test-utils/chaiPlugin';
 
+declare global {
+  var before: typeof beforeAll;
+  var after: typeof afterAll;
+  var BASE_UI_ANIMATIONS_DISABLED: boolean;
+}
+
 chai.use(chaiDom);
 chai.use(chaiPlugin);
 
-// @ts-ignore
+// required for conformance tests (until everything is migrated to Vite)
 globalThis.before = beforeAll;
-// @ts-ignore
 globalThis.after = afterAll;
 
-// @ts-ignore
-globalThis.vi = vi;
-
-// @ts-ignore
 globalThis.BASE_UI_ANIMATIONS_DISABLED = true;
 
 const isVitestJsdom = process.env.VITEST_ENV === 'jsdom';

diff --git a/test/tsconfig.json b/test/tsconfig.json
@@ -2,9 +2,9 @@
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "module": "es2022",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "types": ["vite/client", "vitest/globals"]
   },
-  "include": ["e2e/**/*", "regressions/**/*"],
+  "include": ["e2e/**/*", "regressions/**/*", "./*.ts"],
   "exclude": ["node_modules", "build"]
 }