From f73787170c8bba1cfef6e4cc36c18f33f6dc28d1 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 16 Sep 2023 20:51:45 +0200 Subject: [PATCH] more details --- .../components/autocomplete/Asynchronous.js | 6 ++- .../components/autocomplete/Asynchronous.tsx | 8 ++-- .../components/autocomplete/Asynchronous.tsx | 8 ++-- .../TextareaAutosize.test.tsx | 38 +++++++++++++++---- packages/waterfall/sleep.mjs | 6 ++- .../testCreateReactAppIntegration.js | 6 ++- .../esbuild/testEsbuildIntegration.js | 7 ++-- .../fixtures/gatsby/testGatsbyIntegration.js | 6 ++- .../testNextWebpack4Integration.js | 6 ++- .../testNextWebpack5Integration.js | 6 ++- .../snowpack/testSnowpackIntegration.js | 6 ++- .../fixtures/vite/testViteIntegration.js | 6 ++- test/e2e/index.test.ts | 8 ++-- 13 files changed, 82 insertions(+), 35 deletions(-) diff --git a/docs/data/joy/components/autocomplete/Asynchronous.js b/docs/data/joy/components/autocomplete/Asynchronous.js index a449988fc78e95..82c987f77d8ea6 100644 --- 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 index e1379748d3c5bc..36c52369e77e78 100644 --- 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 { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, duration); }); } diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/Asynchronous.tsx index 7fbbd7e62684cd..c2c4e4720ed519 100644 --- 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 { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, duration); }); } diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx index 731b83246eae5a..d9a0e321170f10 100644 --- 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 { - return new Promise((res) => { - setTimeout(res, duration); + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, duration); + }); +} + +async function raf() { + return new Promise((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('', () => { }); // 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('', () => {
@@ -134,10 +157,11 @@ describe('', () => { const { container } = render(); const input = container.querySelector('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 index 1ca84351fa20ba..608d27ddcf4371 100644 --- 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 index 2142cdc2cd2230..740140e7d79fed 100644 --- 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} */ -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 index 2142cdc2cd2230..ce6eaa4f493a5d 100644 --- 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} */ -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 index 639c6027069a42..5425d43055406c 100644 --- 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} */ -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 index 5f6fc1c70e3dba..23630f301c8834 100644 --- 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} */ -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 index 5f6fc1c70e3dba..23630f301c8834 100644 --- 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} */ -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 index 32ef4ef36b0fa5..0885ee87964da4 100644 --- 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} */ -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 index 2142cdc2cd2230..740140e7d79fed 100644 --- 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} */ -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 index b944ad1a625602..2014d81fe96f74 100644 --- 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 { - return new Promise((resolve) => { - setTimeout(() => resolve(), timeoutMS); +function sleep(duration: number): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, duration); }); }