more details

mui · Sep 16, 2023 · f737871 · f737871
1 parent 12816a2
commit f737871
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 35 deletions.
diff --git a/docs/data/joy/components/autocomplete/Asynchronous.js b/docs/data/joy/components/autocomplete/Asynchronous.js
@@ -4,9 +4,11 @@ import FormLabel from '@mui/joy/FormLabel';
 import Autocomplete from '@mui/joy/Autocomplete';
 import CircularProgress from '@mui/joy/CircularProgress';
 
-function sleep(delay = 0) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(resolve, delay);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/docs/data/joy/components/autocomplete/Asynchronous.tsx b/docs/data/joy/components/autocomplete/Asynchronous.tsx
@@ -4,9 +4,11 @@ import FormLabel from '@mui/joy/FormLabel';
 import Autocomplete from '@mui/joy/Autocomplete';
 import CircularProgress from '@mui/joy/CircularProgress';
 
-function sleep(delay = 0) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delay);
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx
@@ -8,9 +8,11 @@ interface Film {
   year: number;
 }
 
-function sleep(delay = 0) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, delay);
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -17,9 +17,26 @@ function getStyleValue(value: string) {
   return parseInt(value, 10) || 0;
 }
 
+// TODO: merge into a shared test helpers.
+// MUI X already have one under mui-x/test/utils/helperFn.ts
 function sleep(duration: number): Promise<void> {
-  return new Promise<void>((res) => {
-    setTimeout(res, duration);
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+}
+
+async function raf() {
+  return new Promise<void>((resolve) => {
+    // Chrome and Safari have a bug where calling rAF once returns the current
+    // frame instead of the next frame, so we need to call a double rAF here.
+    // See crbug.com/675795 for more.
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        resolve();
+      });
+    });
   });
 }
 
@@ -104,7 +121,7 @@ describe('<TextareaAutosize />', () => {
   });
 
   // For https://github.com/mui/material-ui/pull/37135
-  it('should update height without delay', async function test() {
+  it.only('should update height without delay', async function test() {
     if (/jsdom/.test(window.navigator.userAgent)) {
       // It depends on ResizeObserver
       this.skip();
@@ -124,7 +141,13 @@ describe('<TextareaAutosize />', () => {
           <div>
             <TextareaAutosize
               ref={ref}
-              style={{ width: 150, padding: 0 }}
+              style={{
+                width: 150,
+                padding: 0,
+                fontSize: 14,
+                lineHeight: '15px',
+                border: '1px solid',
+              }}
               defaultValue="qdzqzd qzd qzd qzd qz dqz"
             />
           </div>
@@ -134,10 +157,11 @@ describe('<TextareaAutosize />', () => {
     const { container } = render(<App />);
     const input = container.querySelector<HTMLTextAreaElement>('textarea')!;
     const button = screen.getByRole('button');
-    expect(input.style).to.have.property('height', '30px');
+    expect(parseInt(input.style.height, 10)).to.be.within(30, 31);
     fireEvent.click(button);
-    await sleep(10);
-    expect(input.style).to.have.property('height', '15px');
+    await raf();
+    await raf();
+    expect(parseInt(input.style.height, 10)).to.be.within(15, 16);
   });
 
   describe('layout', () => {

diff --git a/packages/waterfall/sleep.mjs b/packages/waterfall/sleep.mjs
@@ -1,6 +1,8 @@
-function sleep(delay = 0) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(resolve, delay);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js b/test/bundling/fixtures/create-react-app/testCreateReactAppIntegration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/esbuild/testEsbuildIntegration.js b/test/bundling/fixtures/esbuild/testEsbuildIntegration.js
@@ -4,12 +4,13 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
-
 /**
  * Attempts page.goto with retries
  *

diff --git a/test/bundling/fixtures/gatsby/testGatsbyIntegration.js b/test/bundling/fixtures/gatsby/testGatsbyIntegration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js b/test/bundling/fixtures/next-webpack4/testNextWebpack4Integration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js b/test/bundling/fixtures/next-webpack5/testNextWebpack5Integration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/snowpack/testSnowpackIntegration.js b/test/bundling/fixtures/snowpack/testSnowpackIntegration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/bundling/fixtures/vite/testViteIntegration.js b/test/bundling/fixtures/vite/testViteIntegration.js
@@ -4,9 +4,11 @@ const playwright = require('playwright');
  * @param {number} timeoutMS
  * @returns {Promise<void>}
  */
-function sleep(timeoutMS) {
+function sleep(duration) {
   return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }
 

diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -9,9 +9,11 @@ import type {
 } from '@testing-library/dom';
 import '../utils/initPlaywrightMatchers';
 
-function sleep(timeoutMS: number): Promise<void> {
-  return new Promise((resolve) => {
-    setTimeout(() => resolve(), timeoutMS);
+function sleep(duration: number): Promise<void> {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
   });
 }