From 615a89137456bf6d6c8b56169d13cea6fb21f1f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 5 Aug 2024 08:26:26 +0200 Subject: [PATCH 01/10] Use CSB test-utils --- docs/package.json | 2 +- package.json | 2 +- packages/mui-base/package.json | 2 +- pnpm-lock.yaml | 41 +++++++++++++++++----------------- test/package.json | 2 +- 5 files changed, 25 insertions(+), 24 deletions(-) diff --git a/docs/package.json b/docs/package.json index 22429c67e7..5d60b7c224 100644 --- a/docs/package.json +++ b/docs/package.json @@ -76,7 +76,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.25.1", "@babel/preset-typescript": "^7.24.7", "@mui/internal-docs-utils": "^1.0.8", - "@mui/internal-test-utils": "1.0.6", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.17", "@types/node": "^18.19.42", diff --git a/package.json b/package.json index 1d69b148b6..4f554ee799 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "@mui/internal-docs-utils": "^1.0.8", "@mui/internal-markdown": "^1.0.8", "@mui/internal-scripts": "^1.0.14", - "@mui/internal-test-utils": "1.0.6", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", "@mui/material": "6.0.0-beta.4", "@mui/monorepo": "github:mui/material-ui#v6.0.0-beta.4", "@mui/utils": "6.0.0-beta.4", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 71690645e4..760130e688 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -49,7 +49,7 @@ }, "devDependencies": { "@mui/internal-babel-macros": "^1.0.1", - "@mui/internal-test-utils": "1.0.6", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.17", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 01c9224094..de66605e30 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,8 +65,8 @@ importers: specifier: ^1.0.14 version: 1.0.14 '@mui/internal-test-utils': - specifier: 1.0.6 - version: 1.0.6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils + version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: 6.0.0-beta.4 version: 6.0.0-beta.4(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -240,7 +240,7 @@ importers: version: 0.13.0 mocha: specifier: ^10.4.0 - version: 10.6.0 + version: 10.7.0 nx: specifier: ^18.3.5 version: 18.3.5 @@ -492,8 +492,8 @@ importers: specifier: ^1.0.8 version: 1.0.8 '@mui/internal-test-utils': - specifier: 1.0.6 - version: 1.0.6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils + version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/autosuggest-highlight': specifier: ^3.2.3 version: 3.2.3 @@ -586,8 +586,8 @@ importers: specifier: ^1.0.1 version: 1.0.1(@mui/utils@5.16.6(@types/react@18.3.1)(react@18.3.1)) '@mui/internal-test-utils': - specifier: 1.0.6 - version: 1.0.6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils + version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@testing-library/react': specifier: ^15.0.7 version: 15.0.7(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -650,8 +650,8 @@ importers: specifier: ^11.11.4 version: 11.13.0(@types/react@18.3.1)(react@18.3.1) '@mui/internal-test-utils': - specifier: 1.0.6 - version: 1.0.6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils + version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/joy': specifier: 5.0.0-beta.48 version: 5.0.0-beta.48(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2077,8 +2077,9 @@ packages: '@mui/internal-scripts@1.0.14': resolution: {integrity: sha512-v2HQWzssX8l+WAZh4JpgAtnxvwi4ZEm7+spi3e/1zxTXz/k3aWlcc50lpfeAtD6TGbegN2/j0OCORfDHTDQdbQ==} - '@mui/internal-test-utils@1.0.6': - resolution: {integrity: sha512-S2I9ytriELHH3kr+RNRQ9On0wRMVTNTSQagD7H6/rwoQC8BDs1J72etjamjItagEFXAyuUXX2FzWwhUTZFJHlg==} + '@mui/internal-test-utils@https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils': + resolution: {tarball: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils} + version: 1.0.6 peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 @@ -4232,8 +4233,8 @@ packages: dom-accessibility-api@0.5.16: resolution: {integrity: sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==} - dom-accessibility-api@0.6.3: - resolution: {integrity: sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==} + dom-accessibility-api@0.7.0: + resolution: {integrity: sha512-LjjdFmd9AITAet3Hy6Y6rwB7Sq1+x5NiwbOpnkLHC1bCXJqJKiV9DyppSSWobuSKvjKXt9G2u3hW402MPt6m+g==} dom-converter@0.2.0: resolution: {integrity: sha512-gd3ypIPfOMr9h5jIKq8E3sHOTCjeirnl0WK5ZdS1AW0Odt0b1PaWaHdJ4Qk4klv+YB9aJBS7mESXjFoDQPu6DA==} @@ -6293,8 +6294,8 @@ packages: engines: {node: '>=10'} hasBin: true - mocha@10.6.0: - resolution: {integrity: sha512-hxjt4+EEB0SA0ZDygSS015t65lJw/I2yRCS3Ae+SJ5FrbzrXgfYwJr96f0OvIXdj7h4lv/vLCrH3rkiuizFSvw==} + mocha@10.7.0: + resolution: {integrity: sha512-v8/rBWr2VO5YkspYINnvu81inSz2y3ODJrhO175/Exzor1RcEZZkizgE2A+w/CAXXoESS8Kys5E62dOHGHzULA==} engines: {node: '>= 14.0.0'} hasBin: true @@ -10216,7 +10217,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-test-utils@1.0.6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/internal-test-utils@https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2) '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2) @@ -10229,12 +10230,12 @@ snapshots: '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0) chai: 4.5.0 chai-dom: 1.12.0(chai@4.5.0) - dom-accessibility-api: 0.6.3 + dom-accessibility-api: 0.7.0 format-util: 1.0.5 fs-extra: 11.2.0 jsdom: 24.0.0 lodash: 4.17.21 - mocha: 10.6.0 + mocha: 10.7.0 playwright: 1.45.3 prop-types: 15.8.1 react: 18.3.1 @@ -12777,7 +12778,7 @@ snapshots: dom-accessibility-api@0.5.16: {} - dom-accessibility-api@0.6.3: {} + dom-accessibility-api@0.7.0: {} dom-converter@0.2.0: dependencies: @@ -15347,7 +15348,7 @@ snapshots: mkdirp@1.0.4: {} - mocha@10.6.0: + mocha@10.7.0: dependencies: ansi-colors: 4.1.3 browser-stdout: 1.3.1 diff --git a/test/package.json b/test/package.json index 2036724706..d1ae778987 100644 --- a/test/package.json +++ b/test/package.json @@ -10,7 +10,7 @@ "@base_ui/react": "workspace:*", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", - "@mui/internal-test-utils": "1.0.6", + "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", "@mui/joy": "5.0.0-beta.48", "@mui/material": "6.0.0-beta.4", "@playwright/test": "1.45.3", From b106d4f62641d431b53ae6affab9f71c8f72137f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 5 Aug 2024 11:26:22 +0200 Subject: [PATCH 02/10] Fix legacy tests --- .../mui-base/test/describeConformanceUnstyled.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-base/test/describeConformanceUnstyled.tsx b/packages/mui-base/test/describeConformanceUnstyled.tsx index 23c54d87d7..890125399a 100644 --- a/packages/mui-base/test/describeConformanceUnstyled.tsx +++ b/packages/mui-base/test/describeConformanceUnstyled.tsx @@ -92,7 +92,7 @@ function testPropForwarding( expect(customRoot).to.have.attribute('data-foobar', otherProps.fooBar); }); - it('does forward standard props to the root element if an intrinsic element is provided', () => { + it('does forward standard props to the root element if an intrinsic element is provided', async () => { const otherProps = { lang: 'fr', 'data-foobar': randomStringValue(), @@ -100,7 +100,7 @@ function testPropForwarding( ...(rootElementNameMustMatchComponentProp ? { rootElementName: Element } : {}), }; - render(React.cloneElement(element, { slots: { root: Element }, ...otherProps })); + await render(React.cloneElement(element, { slots: { root: Element }, ...otherProps })); const customRoot = screen.getByTestId('custom-root'); expect(customRoot).to.have.attribute('lang', otherProps.lang); @@ -324,7 +324,7 @@ function testOwnerStatePropagation( } forEachSlot(slots, (slotName) => { - it(`sets the ownerState prop on the ${slotName} slot's component`, () => { + it(`sets the ownerState prop on the ${slotName} slot's component`, async () => { let componentOwnerState; const TestComponent = React.forwardRef( ({ ownerState }: WithOwnerState, ref: React.Ref) => { @@ -343,7 +343,7 @@ function testOwnerStatePropagation( id: 'foo', }; - render( + await render( React.cloneElement(element, { slots: slotOverrides, id: 'foo', @@ -366,8 +366,8 @@ function testDisablingClassGeneration( throwMissingPropError('render'); } - it(`does not generate any class names if placed within a ClassNameConfigurator`, () => { - render({element}); + it(`does not generate any class names if placed within a ClassNameConfigurator`, async () => { + await render({element}); const elementsWithClasses = document.querySelectorAll(`[class]`); From 532e6220abc35623a4680682fe9f02e36af2f986 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 5 Aug 2024 11:35:37 +0200 Subject: [PATCH 03/10] Use canary version of test-utils --- docs/package.json | 2 +- package.json | 2 +- packages/mui-base/package.json | 2 +- pnpm-lock.yaml | 23 +++++++++++------------ test/package.json | 2 +- 5 files changed, 15 insertions(+), 16 deletions(-) diff --git a/docs/package.json b/docs/package.json index 5d60b7c224..57d36e6607 100644 --- a/docs/package.json +++ b/docs/package.json @@ -76,7 +76,7 @@ "@babel/plugin-transform-react-constant-elements": "^7.25.1", "@babel/preset-typescript": "^7.24.7", "@mui/internal-docs-utils": "^1.0.8", - "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", + "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6", "@types/autosuggest-highlight": "^3.2.3", "@types/chai": "^4.3.17", "@types/node": "^18.19.42", diff --git a/package.json b/package.json index 4f554ee799..f867253502 100644 --- a/package.json +++ b/package.json @@ -79,7 +79,7 @@ "@mui/internal-docs-utils": "^1.0.8", "@mui/internal-markdown": "^1.0.8", "@mui/internal-scripts": "^1.0.14", - "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", + "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6", "@mui/material": "6.0.0-beta.4", "@mui/monorepo": "github:mui/material-ui#v6.0.0-beta.4", "@mui/utils": "6.0.0-beta.4", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 760130e688..45394700b8 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -49,7 +49,7 @@ }, "devDependencies": { "@mui/internal-babel-macros": "^1.0.1", - "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", + "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6", "@testing-library/react": "^15.0.7", "@testing-library/user-event": "^14.5.2", "@types/chai": "^4.3.17", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de66605e30..5666162c79 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,8 +65,8 @@ importers: specifier: ^1.0.14 version: 1.0.14 '@mui/internal-test-utils': - specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils - version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.6-dev.20240805-092432-9f940a61d6 + version: 1.0.6-dev.20240805-092432-9f940a61d6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/material': specifier: 6.0.0-beta.4 version: 6.0.0-beta.4(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -492,8 +492,8 @@ importers: specifier: ^1.0.8 version: 1.0.8 '@mui/internal-test-utils': - specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils - version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.6-dev.20240805-092432-9f940a61d6 + version: 1.0.6-dev.20240805-092432-9f940a61d6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@types/autosuggest-highlight': specifier: ^3.2.3 version: 3.2.3 @@ -586,8 +586,8 @@ importers: specifier: ^1.0.1 version: 1.0.1(@mui/utils@5.16.6(@types/react@18.3.1)(react@18.3.1)) '@mui/internal-test-utils': - specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils - version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.6-dev.20240805-092432-9f940a61d6 + version: 1.0.6-dev.20240805-092432-9f940a61d6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@testing-library/react': specifier: ^15.0.7 version: 15.0.7(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -650,8 +650,8 @@ importers: specifier: ^11.11.4 version: 11.13.0(@types/react@18.3.1)(react@18.3.1) '@mui/internal-test-utils': - specifier: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils - version: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 1.0.6-dev.20240805-092432-9f940a61d6 + version: 1.0.6-dev.20240805-092432-9f940a61d6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@mui/joy': specifier: 5.0.0-beta.48 version: 5.0.0-beta.48(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@emotion/styled@11.11.5(@emotion/react@11.13.0(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react@18.3.1))(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -2077,9 +2077,8 @@ packages: '@mui/internal-scripts@1.0.14': resolution: {integrity: sha512-v2HQWzssX8l+WAZh4JpgAtnxvwi4ZEm7+spi3e/1zxTXz/k3aWlcc50lpfeAtD6TGbegN2/j0OCORfDHTDQdbQ==} - '@mui/internal-test-utils@https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils': - resolution: {tarball: https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils} - version: 1.0.6 + '@mui/internal-test-utils@1.0.6-dev.20240805-092432-9f940a61d6': + resolution: {integrity: sha512-bagoSVQFWUJaHK2iJkTLGSUxTchucNEpQorfFNjv0Ep2I/LBnmnLWJZG0vhKq0dljgZj5Y9UYaCjClfLrjTvCA==} peerDependencies: react: ^18.2.0 react-dom: ^18.2.0 @@ -10217,7 +10216,7 @@ snapshots: transitivePeerDependencies: - supports-color - '@mui/internal-test-utils@https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@mui/internal-test-utils@1.0.6-dev.20240805-092432-9f940a61d6(@babel/core@7.25.2)(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@babel/plugin-transform-modules-commonjs': 7.24.8(@babel/core@7.25.2) '@babel/preset-typescript': 7.24.7(@babel/core@7.25.2) diff --git a/test/package.json b/test/package.json index d1ae778987..bbc13c5104 100644 --- a/test/package.json +++ b/test/package.json @@ -10,7 +10,7 @@ "@base_ui/react": "workspace:*", "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.4", - "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/a09cbe73/@mui/internal-test-utils", + "@mui/internal-test-utils": "1.0.6-dev.20240805-092432-9f940a61d6", "@mui/joy": "5.0.0-beta.48", "@mui/material": "6.0.0-beta.4", "@playwright/test": "1.45.3", From 9a0cdf02c1879723cdb24efb3234b1912ee53a4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 5 Aug 2024 11:39:57 +0200 Subject: [PATCH 04/10] Use flushMicrotasks from test-utils --- .../mui-base/src/Menu/Root/MenuRoot.test.tsx | 4 +- .../src/legacy/Unstable_Popup/Popup.test.tsx | 54 +++++++++---------- .../test/conformanceTests/propForwarding.tsx | 6 +-- 3 files changed, 29 insertions(+), 35 deletions(-) diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx index 2bc1bee771..3862c4294a 100644 --- a/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx +++ b/packages/mui-base/src/Menu/Root/MenuRoot.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { act, waitFor } from '@mui/internal-test-utils'; +import { act, flushMicrotasks, waitFor } from '@mui/internal-test-utils'; import * as Menu from '@base_ui/react/Menu'; import userEvent from '@testing-library/user-event'; import { createRenderer } from '../../../test'; @@ -552,7 +552,7 @@ describe('', () => { }); await user.keyboard('[Escape]'); - await act(async () => {}); + await flushMicrotasks(); expect(queryByRole('menu', { hidden: false })).to.equal(null); }); diff --git a/packages/mui-base/src/legacy/Unstable_Popup/Popup.test.tsx b/packages/mui-base/src/legacy/Unstable_Popup/Popup.test.tsx index b82af53bab..1de7cd30ee 100644 --- a/packages/mui-base/src/legacy/Unstable_Popup/Popup.test.tsx +++ b/packages/mui-base/src/legacy/Unstable_Popup/Popup.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { act, createRenderer, screen, fireEvent } from '@mui/internal-test-utils'; +import { act, createRenderer, screen, fireEvent, flushMicrotasks } from '@mui/internal-test-utils'; import { Unstable_Popup as Popup, popupClasses, @@ -45,14 +45,6 @@ function FakeTransition(props: React.PropsWithChildren<{}>) { describe('', () => { const { clock, render } = createRenderer(); - // https://floating-ui.com/docs/react#testing - async function waitForPosition() { - if (/jsdom/.test(window.navigator.userAgent)) { - // This is only needed for JSDOM and causes issues in real browsers - await act(() => async () => {}); - } - } - const defaultProps: PopupProps = { anchor: () => createAnchor(), children: Hello World, @@ -63,7 +55,7 @@ describe('', () => { inheritComponent: 'div', render: async (...renderArgs) => { const result = render(...renderArgs); - await waitForPosition(); + await flushMicrotasks(); return result; }, @@ -89,12 +81,14 @@ describe('', () => { it('should have top placement', async () => { render( - - - , +
+ + + +
, ); - await waitForPosition(); + await flushMicrotasks(); expect(screen.getByTestId('placement-tester')).to.have.text('top'); }); @@ -131,7 +125,7 @@ describe('', () => { } render(); - await waitForPosition(); + await flushMicrotasks(); await new Promise((resolve) => { requestAnimationFrame(resolve); @@ -149,7 +143,7 @@ describe('', () => { anchor.click(); }); - await waitForPosition(); + await flushMicrotasks(); expect(popup.getBoundingClientRect().right).to.equal(popup.getBoundingClientRect().right); expect(popup.getBoundingClientRect().left).not.to.equal(anchor.getBoundingClientRect().left); }); @@ -260,22 +254,22 @@ describe('', () => { it('should open without any issues', async () => { const { queryByRole, getByRole, setProps } = render(); - await waitForPosition(); + await flushMicrotasks(); expect(queryByRole('tooltip')).to.equal(null); setProps({ open: true }); - await waitForPosition(); + await flushMicrotasks(); expect(getByRole('tooltip')).to.have.text('Hello World'); }); it('should close without any issues', async () => { const { queryByRole, getByRole, setProps } = render(); - await waitForPosition(); + await flushMicrotasks(); expect(getByRole('tooltip')).to.have.text('Hello World'); setProps({ open: false }); - await waitForPosition(); + await flushMicrotasks(); expect(queryByRole('tooltip')).to.equal(null); }); }); @@ -283,7 +277,7 @@ describe('', () => { describe('prop: keepMounted', () => { it('should keep the children mounted in the DOM', async () => { render(); - await waitForPosition(); + await flushMicrotasks(); const tooltip = document.querySelector('[role="tooltip"]') as HTMLElement; expect(tooltip).to.have.text('Hello World'); @@ -303,11 +297,11 @@ describe('', () => { , ); - await waitForPosition(); + await flushMicrotasks(); expect(getByRole('tooltip')).to.have.text('Hello World'); setProps({ open: false }); - await waitForPosition(); + await flushMicrotasks(); clock.tick(TRANSITION_DURATION); expect(queryByRole('tooltip')).to.equal(null); @@ -343,11 +337,11 @@ describe('', () => { } const { getByRole } = render(); - await waitForPosition(); + await flushMicrotasks(); expect(document.querySelector('p')).to.equal(null); fireEvent.click(getByRole('button')); - await waitForPosition(); + await flushMicrotasks(); expect(document.querySelector('p')).to.equal(null); }); }); @@ -360,7 +354,7 @@ describe('', () => { , ); - await waitForPosition(); + await flushMicrotasks(); const tooltip = getByRole('tooltip'); const parent = getByTestId('parent'); @@ -376,7 +370,7 @@ describe('', () => { , ); - await waitForPosition(); + await flushMicrotasks(); const tooltip = getByRole('tooltip'); expect(tooltip.parentNode).to.equal(document.body); @@ -395,15 +389,15 @@ describe('', () => { , ); - await waitForPosition(); + await flushMicrotasks(); expect(getByRole('tooltip', { hidden: true }).style.visibility).to.equal('hidden'); setProps({ open: true }); - await waitForPosition(); + await flushMicrotasks(); clock.tick(TRANSITION_DURATION); setProps({ open: false }); - await waitForPosition(); + await flushMicrotasks(); clock.tick(TRANSITION_DURATION); expect(getByRole('tooltip', { hidden: true }).style.visibility).to.equal('hidden'); }); diff --git a/packages/mui-base/test/conformanceTests/propForwarding.tsx b/packages/mui-base/test/conformanceTests/propForwarding.tsx index ec8e70110e..f7a3c34327 100644 --- a/packages/mui-base/test/conformanceTests/propForwarding.tsx +++ b/packages/mui-base/test/conformanceTests/propForwarding.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; -import { act, randomStringValue } from '@mui/internal-test-utils'; +import { flushMicrotasks, randomStringValue } from '@mui/internal-test-utils'; import { throwMissingPropError } from './utils'; import { type BaseUiConformanceTestsOptions } from '../describeConformance'; @@ -25,7 +25,7 @@ export function testPropForwarding( React.cloneElement(element, { 'data-testid': 'root', ...otherProps }), ); - await act(async () => {}); + await flushMicrotasks(); const customRoot = getByTestId('root'); expect(customRoot).to.have.attribute('lang', otherProps.lang); @@ -45,7 +45,7 @@ export function testPropForwarding( }), ); - await act(async () => {}); + await flushMicrotasks(); const customRoot = getByTestId('custom-root'); expect(customRoot).to.have.attribute('lang', otherProps.lang); From 7b301757d2fbb1e82eedd2a1607671b409dbbdc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dudak?= Date: Mon, 5 Aug 2024 12:14:11 +0200 Subject: [PATCH 05/10] Remove inheritComponent from conformance tests --- .../Indicator/CheckboxIndicator.test.tsx | 1 - .../src/Checkbox/Root/CheckboxRoot.test.tsx | 45 +++--- .../src/Dialog/Root/DialogRoot.test.tsx | 4 +- .../src/Menu/Arrow/MenuArrow.test.tsx | 1 - .../src/Menu/Popup/MenuPopup.test.tsx | 1 - .../Decrement/NumberFieldDecrement.test.tsx | 1 - .../Group/NumberFieldGroup.test.tsx | 1 - .../Increment/NumberFieldIncrement.test.tsx | 1 - .../Input/NumberFieldInput.test.tsx | 49 +++---- .../NumberField/Root/NumberFieldRoot.test.tsx | 15 +- .../ScrubArea/NumberFieldScrubArea.test.tsx | 1 - .../NumberFieldScrubAreaCursor.test.tsx | 1 - .../src/Popover/Arrow/PopoverArrow.test.tsx | 1 - .../Popover/Backdrop/PopoverBackdrop.test.tsx | 1 - .../src/Popover/Close/PopoverClose.test.tsx | 1 - .../Description/PopoverDescription.test.tsx | 1 - .../src/Popover/Popup/PopoverPopup.test.tsx | 1 - .../Positioner/PopoverPositioner.test.tsx | 1 - .../src/Popover/Title/PopoverTitle.test.tsx | 1 - .../Popover/Trigger/PopoverTrigger.test.tsx | 1 - .../Arrow/PreviewCardArrow.test.tsx | 1 - .../Backdrop/PreviewCardBackdrop.test.tsx | 1 - .../Popup/PreviewCardPopup.test.tsx | 1 - .../Positioner/PreviewCardPositioner.test.tsx | 1 - .../PreviewCard/Root/PreviewCardRoot.test.tsx | 11 +- .../Trigger/PreviewCardTrigger.test.tsx | 1 - .../Indicator/ProgressIndicator.test.tsx | 1 - .../src/Progress/Root/ProgressRoot.test.tsx | 1 - .../src/Progress/Track/ProgressTrack.test.tsx | 1 - .../src/Slider/Control/SliderControl.test.tsx | 1 - .../Slider/Indicator/SliderIndicator.test.tsx | 1 - .../src/Slider/Output/SliderOutput.test.tsx | 1 - .../src/Slider/Root/SliderRoot.test.tsx | 137 +++++++++--------- .../src/Slider/Thumb/SliderThumb.test.tsx | 1 - .../src/Slider/Track/SliderTrack.test.tsx | 1 - .../src/Switch/Root/SwitchRoot.test.tsx | 1 - .../src/Switch/Thumb/SwitchThumb.test.tsx | 1 - .../mui-base/src/Tabs/Root/TabsRoot.test.tsx | 91 ++++++------ packages/mui-base/src/Tabs/Tab/Tab.test.tsx | 1 - .../Tabs/TabIndicator/TabIndicator.test.tsx | 1 - .../src/Tabs/TabPanel/TabPanel.test.tsx | 1 - .../src/Tabs/TabsList/TabsList.test.tsx | 9 +- .../src/Tooltip/Popup/TooltipPopup.test.tsx | 1 - .../Positioner/TooltipPositioner.test.tsx | 1 - .../src/Tooltip/Root/TooltipRoot.test.tsx | 6 +- .../Tooltip/Trigger/TooltipTrigger.test.tsx | 1 - .../legacy/FormControl/FormControl.test.tsx | 1 - .../src/legacy/Option/Option.test.tsx | 1 - .../legacy/OptionGroup/OptionGroup.test.tsx | 1 - .../src/legacy/Select/Select.test.tsx | 1 - .../src/legacy/Snackbar/Snackbar.test.tsx | 1 - .../TablePagination/TablePagination.test.tsx | 1 - .../TextareaAutosize.test.tsx | 1 - .../src/legacy/Unstable_Popup/Popup.test.tsx | 1 - 54 files changed, 181 insertions(+), 231 deletions(-) diff --git a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx index c058e42eea..adb0c58745 100644 --- a/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx +++ b/packages/mui-base/src/Checkbox/Indicator/CheckboxIndicator.test.tsx @@ -17,7 +17,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', refInstanceof: window.HTMLSpanElement, render(node) { return render( diff --git a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx index 2e008c4f84..7f8f3ad990 100644 --- a/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx +++ b/packages/mui-base/src/Checkbox/Root/CheckboxRoot.test.tsx @@ -11,7 +11,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render, })); @@ -23,7 +22,7 @@ describe('', () => { }); }); - it('should change its state when clicked', () => { + it('should change its state when clicked', async () => { const { getAllByRole, container } = render(); const [checkbox] = getAllByRole('checkbox'); const input = container.querySelector('input[type=checkbox]') as HTMLInputElement; @@ -31,14 +30,14 @@ describe('', () => { expect(checkbox).to.have.attribute('aria-checked', 'false'); expect(input.checked).to.equal(false); - act(() => { + await act(() => { checkbox.click(); }); expect(checkbox).to.have.attribute('aria-checked', 'true'); expect(input.checked).to.equal(true); - act(() => { + await act(() => { checkbox.click(); }); @@ -46,7 +45,7 @@ describe('', () => { expect(input.checked).to.equal(false); }); - it('should update its state when changed from outside', () => { + it('should update its state when changed from outside', async () => { function Test() { const [checked, setChecked] = React.useState(false); return ( @@ -62,25 +61,25 @@ describe('', () => { const button = getByText('Toggle'); expect(checkbox).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { button.click(); }); expect(checkbox).to.have.attribute('aria-checked', 'true'); - act(() => { + await act(() => { button.click(); }); expect(checkbox).to.have.attribute('aria-checked', 'false'); }); - it('should call onChange when clicked', () => { + it('should call onChange when clicked', async () => { const handleChange = spy(); const { getAllByRole } = render(); const [checkbox] = getAllByRole('checkbox'); - act(() => { + await act(() => { checkbox.click(); }); @@ -99,13 +98,13 @@ describe('', () => { expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-disabled'); }); - it('should not change its state when clicked', () => { + it('should not change its state when clicked', async () => { const { getAllByRole } = render(); const [checkbox] = getAllByRole('checkbox'); expect(checkbox).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { checkbox.click(); }); @@ -124,13 +123,13 @@ describe('', () => { expect(getAllByRole('checkbox')[0]).not.to.have.attribute('aria-readonly'); }); - it('should not change its state when clicked', () => { + it('should not change its state when clicked', async () => { const { getAllByRole } = render(); const [checkbox] = getAllByRole('checkbox'); expect(checkbox).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { checkbox.click(); }); @@ -144,13 +143,13 @@ describe('', () => { expect(getAllByRole('checkbox')[0]).to.have.attribute('aria-checked', 'mixed'); }); - it('should not change its state when clicked', () => { + it('should not change its state when clicked', async () => { const { getAllByRole } = render(); const [checkbox] = getAllByRole('checkbox'); expect(checkbox).to.have.attribute('aria-checked', 'mixed'); - act(() => { + await act(() => { checkbox.click(); }); @@ -173,12 +172,12 @@ describe('', () => { }); }); - it('should update its state if the underlying input is toggled', () => { + it('should update its state if the underlying input is toggled', async () => { const { getAllByRole, container } = render(); const [checkbox] = getAllByRole('checkbox'); const input = container.querySelector('input[type=checkbox]') as HTMLInputElement; - act(() => { + await act(() => { input.click(); }); @@ -214,7 +213,7 @@ describe('', () => { }); describe('form handling', () => { - it('should toggle the checkbox when a parent label is clicked', function test() { + it('should toggle the checkbox when a parent label is clicked', async function test() { // Clicking the label causes unrelated browser tests to fail. if (!isJSDOM) { this.skip(); @@ -232,14 +231,14 @@ describe('', () => { expect(checkbox).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { label.click(); }); expect(checkbox).to.have.attribute('aria-checked', 'true'); }); - it('should toggle the checkbox when a linked label is clicked', function test() { + it('should toggle the checkbox when a linked label is clicked', async function test() { // Clicking the label causes unrelated browser tests to fail. if (!isJSDOM) { this.skip(); @@ -259,7 +258,7 @@ describe('', () => { expect(checkbox).to.have.attribute('aria-checked', 'false'); - act(() => { + await act(() => { label.click(); }); @@ -267,7 +266,7 @@ describe('', () => { }); }); - it('should include the checkbox value in the form submission', function test() { + it('should include the checkbox value in the form submission', async function test() { if (isJSDOM) { // FormData is not available in JSDOM this.skip(); @@ -295,7 +294,7 @@ describe('', () => { expect(stringifiedFormData).to.equal('test-checkbox=off'); - act(() => { + await act(() => { checkbox.click(); }); diff --git a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx index a62a2ca467..374f653460 100644 --- a/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx +++ b/packages/mui-base/src/Dialog/Root/DialogRoot.test.tsx @@ -28,7 +28,7 @@ describe('', () => { const button = getByRole('button'); expect(queryByRole('dialog')).to.equal(null); - act(() => { + await act(() => { button.click(); }); @@ -199,7 +199,7 @@ describe('', () => { ); const trigger = getByText('Open'); - act(() => { + await act(() => { trigger.click(); }); diff --git a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx index b121e8e80d..5a7d4d3ca2 100644 --- a/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx +++ b/packages/mui-base/src/Menu/Arrow/MenuArrow.test.tsx @@ -6,7 +6,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx index 04a4141ca7..c623b269a8 100644 --- a/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx +++ b/packages/mui-base/src/Menu/Popup/MenuPopup.test.tsx @@ -40,7 +40,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', render: (node) => { return render( diff --git a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx index 9498db77c4..7d77f497d0 100644 --- a/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx +++ b/packages/mui-base/src/NumberField/Decrement/NumberFieldDecrement.test.tsx @@ -21,7 +21,6 @@ describe('', () => { const { render, clock } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render(node) { return render( diff --git a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx index ce0cce6cc6..b3795c1670 100644 --- a/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx +++ b/packages/mui-base/src/NumberField/Group/NumberFieldGroup.test.tsx @@ -20,7 +20,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx index 4b907fe605..a14fd4f1cd 100644 --- a/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx +++ b/packages/mui-base/src/NumberField/Increment/NumberFieldIncrement.test.tsx @@ -21,7 +21,6 @@ describe('', () => { const { render, clock } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render(node) { return render( diff --git a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx index 97d2efc226..96c9ca0a02 100644 --- a/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx +++ b/packages/mui-base/src/NumberField/Input/NumberFieldInput.test.tsx @@ -20,7 +20,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'input', refInstanceof: window.HTMLInputElement, render(node) { return render( @@ -38,154 +37,154 @@ describe('', () => { expect(screen.queryByRole('textbox')).not.to.equal(null); }); - it('should not allow non-numeric characters on change', () => { + it('should not allow non-numeric characters on change', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: 'abc' } }); expect(input).to.have.value(''); }); - it('should not allow non-numeric characters on keydown', () => { + it('should not allow non-numeric characters on keydown', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.keyDown(input, { key: 'a' }); expect(input).to.have.value(''); }); - it('should allow numeric characters on change', () => { + it('should allow numeric characters on change', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '123' } }); expect(input).to.have.value('123'); }); - it('should increment on keydown ArrowUp', () => { + it('should increment on keydown ArrowUp', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.keyDown(input, { key: 'ArrowUp' }); expect(input).to.have.value('1'); }); - it('should decrement on keydown ArrowDown', () => { + it('should decrement on keydown ArrowDown', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.keyDown(input, { key: 'ArrowDown' }); expect(input).to.have.value('-1'); }); - it('should increment to min on keydown Home', () => { + it('should increment to min on keydown Home', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.keyDown(input, { key: 'Home' }); expect(input).to.have.value('-10'); }); - it('should decrement to max on keydown End', () => { + it('should decrement to max on keydown End', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.keyDown(input, { key: 'End' }); expect(input).to.have.value('10'); }); - it('commits formatted value only on blur', () => { + it('commits formatted value only on blur', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '1234' } }); expect(input).to.have.value('1234'); fireEvent.blur(input); expect(input).to.have.value((1234).toLocaleString()); }); - it('should commit validated number on blur (min)', () => { + it('should commit validated number on blur (min)', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '-1' } }); expect(input).to.have.value('-1'); fireEvent.blur(input); expect(input).to.have.value('0'); }); - it('should commit validated number on blur (max)', () => { + it('should commit validated number on blur (max)', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '1' } }); expect(input).to.have.value('1'); fireEvent.blur(input); expect(input).to.have.value('0'); }); - it('should commit validated number on blur (step)', () => { + it('should commit validated number on blur (step)', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '1.1' } }); expect(input).to.have.value('1.1'); fireEvent.blur(input); expect(input).to.have.value('1'); }); - it('should commit validated number on blur (step and min)', () => { + it('should commit validated number on blur (step and min)', async () => { render( , ); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.change(input, { target: { value: '3' } }); expect(input).to.have.value('3'); fireEvent.blur(input); diff --git a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx index 5de1231753..eca927fa29 100644 --- a/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx +++ b/packages/mui-base/src/NumberField/Root/NumberFieldRoot.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render, })); @@ -418,20 +417,20 @@ describe('', () => { }); describe('prop: allowWheelScrub', () => { - it('should allow the user to scrub the input value with the mouse wheel', () => { + it('should allow the user to scrub the input value with the mouse wheel', async () => { render(); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.wheel(input, { deltaY: 1 }); expect(input).to.have.value('4'); fireEvent.wheel(input, { deltaY: -1 }); expect(input).to.have.value('5'); }); - it('should not allow the user to scrub the input value with the mouse wheel if `allowWheelScrub` is `false`', () => { + it('should not allow the user to scrub the input value with the mouse wheel if `allowWheelScrub` is `false`', async () => { render(); const input = screen.getByRole('textbox'); - act(() => input.focus()); + await act(() => input.focus()); fireEvent.wheel(input, { deltaY: 1 }); expect(input).to.have.value('5'); fireEvent.wheel(input, { deltaY: -5 }); @@ -440,7 +439,7 @@ describe('', () => { }); describe('form handling', () => { - it('should include the input value in the form submission', function test() { + it('should include the input value in the form submission', async function test() { if (/jsdom/.test(window.navigator.userAgent)) { // FormData is not available in JSDOM this.skip(); @@ -466,13 +465,13 @@ describe('', () => { const numberField = screen.getByRole('textbox'); const submitButton = screen.getByTestId('submit'); - act(() => submitButton.click()); + await act(() => submitButton.click()); expect(stringifiedFormData).to.equal('test-number-field='); fireEvent.change(numberField, { target: { value: '5' } }); - act(() => submitButton.click()); + await act(() => submitButton.click()); expect(stringifiedFormData).to.equal('test-number-field=5'); }); diff --git a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx index 07479ef400..4adb59e99f 100644 --- a/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubArea/NumberFieldScrubArea.test.tsx @@ -29,7 +29,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', refInstanceof: window.HTMLSpanElement, render(node) { return render( diff --git a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx index c1acf088af..afd3080b08 100644 --- a/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx +++ b/packages/mui-base/src/NumberField/ScrubAreaCursor/NumberFieldScrubAreaCursor.test.tsx @@ -27,7 +27,6 @@ describe('', () => { } describeConformance(, () => ({ - inheritComponent: 'span', refInstanceof: window.HTMLSpanElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx index ea5149d92c..737c874286 100644 --- a/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx +++ b/packages/mui-base/src/Popover/Arrow/PopoverArrow.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx index bafeaa43f1..de3bb8c34f 100644 --- a/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx +++ b/packages/mui-base/src/Popover/Backdrop/PopoverBackdrop.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx index e76e7a49db..c473250ffe 100644 --- a/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx +++ b/packages/mui-base/src/Popover/Close/PopoverClose.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx index e874e352a9..592e1959f2 100644 --- a/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx +++ b/packages/mui-base/src/Popover/Description/PopoverDescription.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'p', refInstanceof: window.HTMLParagraphElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx index a266fb8462..7e91d24f63 100644 --- a/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx +++ b/packages/mui-base/src/Popover/Popup/PopoverPopup.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx index bdb6770b7c..e58685e014 100644 --- a/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx +++ b/packages/mui-base/src/Popover/Positioner/PopoverPositioner.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx index c08b03c69d..23a76032d6 100644 --- a/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx +++ b/packages/mui-base/src/Popover/Title/PopoverTitle.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'h2', refInstanceof: window.HTMLHeadingElement, render(node) { return render( diff --git a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx index 5cf8e23f00..9731c68857 100644 --- a/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx +++ b/packages/mui-base/src/Popover/Trigger/PopoverTrigger.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render(node) { return render( diff --git a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx index 5af966a11e..58478eee01 100644 --- a/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx +++ b/packages/mui-base/src/PreviewCard/Arrow/PreviewCardArrow.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx index 95b600bf09..6696ae3d54 100644 --- a/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx +++ b/packages/mui-base/src/PreviewCard/Backdrop/PreviewCardBackdrop.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx index 3a22cfeba0..bf1aa7d67b 100644 --- a/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx +++ b/packages/mui-base/src/PreviewCard/Popup/PreviewCardPopup.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx index 2476c26d92..b593780a77 100644 --- a/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx +++ b/packages/mui-base/src/PreviewCard/Positioner/PreviewCardPositioner.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx index 90580f301e..cf015493f7 100644 --- a/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx +++ b/packages/mui-base/src/PreviewCard/Root/PreviewCardRoot.test.tsx @@ -91,7 +91,7 @@ describe('', () => { const trigger = screen.getByRole('link'); - act(() => trigger.focus()); + await act(() => trigger.focus()); clock.tick(OPEN_DELAY); @@ -100,7 +100,7 @@ describe('', () => { expect(screen.getByText('Content')).not.to.equal(null); }); - it('should close when the trigger is blurred', async () => { + it.only('should close when the trigger is blurred', async () => { await render( @@ -112,13 +112,14 @@ describe('', () => { const trigger = screen.getByRole('link'); - act(() => trigger.focus()); + await act(() => trigger.focus()); clock.tick(OPEN_DELAY); - await flushMicrotasks(); + await act(async () => {}); + // flushMicrotasks(); - act(() => trigger.blur()); + await act(() => trigger.blur()); clock.tick(CLOSE_DELAY); diff --git a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx index b39c47e48a..42211e582f 100644 --- a/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx +++ b/packages/mui-base/src/PreviewCard/Trigger/PreviewCardTrigger.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'a', refInstanceof: window.HTMLAnchorElement, render(node) { return render( diff --git a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx index 90614e5172..2d0b7b3ba1 100644 --- a/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx +++ b/packages/mui-base/src/Progress/Indicator/ProgressIndicator.test.tsx @@ -23,7 +23,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx index 928b063f71..f79e89f72b 100644 --- a/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx +++ b/packages/mui-base/src/Progress/Root/ProgressRoot.test.tsx @@ -19,7 +19,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, })); diff --git a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx index f3b74cfc58..53c043134f 100644 --- a/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx +++ b/packages/mui-base/src/Progress/Track/ProgressTrack.test.tsx @@ -22,7 +22,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx index 62cea7659e..40cece0980 100644 --- a/packages/mui-base/src/Slider/Control/SliderControl.test.tsx +++ b/packages/mui-base/src/Slider/Control/SliderControl.test.tsx @@ -56,7 +56,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx index c1175c0943..0efad7cd3b 100644 --- a/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx +++ b/packages/mui-base/src/Slider/Indicator/SliderIndicator.test.tsx @@ -56,7 +56,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx index 4167c40d91..63a1a27308 100644 --- a/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx +++ b/packages/mui-base/src/Slider/Output/SliderOutput.test.tsx @@ -57,7 +57,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'output', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx index b4fc1ecb20..add3d63ce8 100644 --- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx +++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx @@ -76,7 +76,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, })); @@ -143,10 +142,10 @@ describe('', () => { expect(input).to.have.attribute('aria-valuenow', '30'); }); - it('should update aria-valuenow', () => { + it('should update aria-valuenow', async () => { const { getByRole } = render(); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -197,7 +196,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.equal(78); }); - it('increments on ArrowUp', () => { + it('increments on ArrowUp', async () => { const handleValueChange = spy(); const { container } = render( , @@ -207,7 +206,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -220,7 +219,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(31); }); - it('increments on ArrowLeft', () => { + it('increments on ArrowLeft', async () => { const handleValueChange = spy(); const { container } = render( , @@ -230,7 +229,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -243,7 +242,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(31); }); - it('decrements on ArrowDown', () => { + it('decrements on ArrowDown', async () => { const handleValueChange = spy(); const { container } = render( , @@ -253,7 +252,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -266,7 +265,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(9); }); - it('decrements on ArrowRight', () => { + it('decrements on ArrowRight', async () => { const handleValueChange = spy(); const { container } = render( , @@ -276,7 +275,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -459,13 +458,13 @@ describe('', () => { }); describe('prop: step', () => { - it('supports non-integer values', () => { + it('supports non-integer values', async () => { const { getByRole } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -479,13 +478,13 @@ describe('', () => { expect(slider).to.have.attribute('aria-valuenow', '1e-7'); }); - it('should round value to step precision', () => { + it('should round value to step precision', async () => { const { getByRole, getByTestId } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -494,7 +493,7 @@ describe('', () => { () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL, ); - act(() => { + await act(() => { slider.focus(); }); @@ -518,13 +517,13 @@ describe('', () => { expect(slider).to.have.attribute('aria-valuenow', '0.4'); }); - it('should not fail to round value to step precision when step is very small', () => { + it('should not fail to round value to step precision when step is very small', async () => { const { getByRole, getByTestId } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -533,7 +532,7 @@ describe('', () => { () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL, ); - act(() => { + await act(() => { slider.focus(); }); @@ -551,13 +550,13 @@ describe('', () => { expect(slider).to.have.attribute('aria-valuenow', '8e-8'); }); - it('should not fail to round value to step precision when step is very small and negative', () => { + it('should not fail to round value to step precision when step is very small and negative', async () => { const { getByRole, getByTestId } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -566,7 +565,7 @@ describe('', () => { () => GETBOUNDINGCLIENTRECT_HORIZONTAL_SLIDER_RETURN_VAL, ); - act(() => { + await act(() => { slider.focus(); }); @@ -598,13 +597,13 @@ describe('', () => { expect(slider).to.have.attribute('max', String(MAX)); }); - it('should not go more than the max', () => { + it('should not go more than the max', async () => { const { getByRole } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -612,7 +611,7 @@ describe('', () => { expect(slider).to.have.attribute('aria-valuenow', String(MAX)); }); - it('should reach right edge value', () => { + it('should reach right edge value', async () => { const { getByRole, getByTestId } = render( , ); @@ -624,7 +623,7 @@ describe('', () => { ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -674,24 +673,24 @@ describe('', () => { expect(slider).to.have.attribute('min', String(MIN)); }); - it('should use min as the step origin', () => { + it('should use min as the step origin', async () => { const { getByRole } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); expect(slider).to.have.attribute('aria-valuenow', String(MIN)); }); - it('should not go less than the min', () => { + it('should not go less than the min', async () => { const { getByRole } = render( , ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); @@ -701,7 +700,7 @@ describe('', () => { }); describe('prop: minStepsBetweenValues', () => { - it('should enforce a minimum difference between range slider values', () => { + it('should enforce a minimum difference between range slider values', async () => { const handleValueChange = spy(); const { getByTestId } = render( @@ -716,7 +715,7 @@ describe('', () => { const thumbOne = getByTestId('thumb-0'); const thumbTwo = getByTestId('thumb-1'); - act(() => { + await act(() => { thumbOne.focus(); }); @@ -726,7 +725,7 @@ describe('', () => { fireEvent.keyDown(thumbOne, { key: 'ArrowUp' }); expect(handleValueChange.callCount).to.equal(1); - act(() => { + await act(() => { thumbTwo.focus(); }); @@ -741,7 +740,7 @@ describe('', () => { }); describe('events', () => { - it('should call handlers', () => { + it('should call handlers', async () => { const handleValueChange = spy(); const handleValueCommitted = spy(); @@ -775,7 +774,7 @@ describe('', () => { expect(handleValueCommitted.callCount).to.equal(1); expect(handleValueCommitted.args[0][0]).to.equal(10); - act(() => { + await act(() => { slider.focus(); }); @@ -1095,7 +1094,7 @@ describe('', () => { describe('form submission', () => { // doesn't work with two `` elements with the same name attribute - it('includes the slider value in formData when the `name` attribute is provided', function test() { + it('includes the slider value in formData when the `name` attribute is provided', async function test() { if (/jsdom/.test(window.navigator.userAgent)) { // FormData is not available in JSDOM this.skip(); @@ -1119,7 +1118,7 @@ describe('', () => { ); const button = getByText('Submit'); - act(() => { + await act(() => { button.click(); }); }); @@ -1232,8 +1231,8 @@ describe('', () => { // pixel: 0 20 40 60 80 100 // slider: |---|---|---|---|---| // values: 0 1 2 3 4 5 - // value: ¡ü ¡ü - // mouse: ¡ü + // value: �� �� + // mouse: �� fireEvent.pointerDown(sliderControl, { buttons: 1, @@ -1246,7 +1245,7 @@ describe('', () => { }); }); - it('should pass "name" and "value" as part of the event.target for onValueChange', () => { + it('should pass "name" and "value" as part of the event.target for onValueChange', async () => { const handleValueChange = stub().callsFake((newValue, thumbIndex, event) => event.target); const { getByRole } = render( @@ -1254,7 +1253,7 @@ describe('', () => { ); const slider = getByRole('slider'); - act(() => { + await act(() => { slider.focus(); }); fireEvent.change(slider, { @@ -1273,7 +1272,7 @@ describe('', () => { }); describe('keyboard interactions', () => { - it('increments on ArrowUp', () => { + it('increments on ArrowUp', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1283,7 +1282,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1296,7 +1295,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(31); }); - it('increments on ArrowRight', () => { + it('increments on ArrowRight', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1306,7 +1305,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1319,7 +1318,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(31); }); - it('decrements on ArrowDown', () => { + it('decrements on ArrowDown', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1329,7 +1328,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1342,7 +1341,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(9); }); - it('decrements on ArrowLeft', () => { + it('decrements on ArrowLeft', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1352,7 +1351,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1366,7 +1365,7 @@ describe('', () => { }); describe('key: Home', () => { - it('sets value to max in a single value slider', () => { + it('sets value to max in a single value slider', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1376,7 +1375,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1385,7 +1384,7 @@ describe('', () => { expect(handleValueChange.args[0][0]).to.deep.equal(77); }); - it('sets value to the maximum possible value in a range slider', () => { + it('sets value to the maximum possible value in a range slider', async () => { const handleValueChange = spy(); const { getByTestId } = render( , @@ -1394,7 +1393,7 @@ describe('', () => { const thumbOne = getByTestId('thumb-0'); const thumbTwo = getByTestId('thumb-1'); - act(() => { + await act(() => { thumbOne.focus(); }); @@ -1404,7 +1403,7 @@ describe('', () => { fireEvent.keyDown(thumbOne, { key: 'Home' }); expect(handleValueChange.callCount).to.equal(1); - act(() => { + await act(() => { thumbTwo.focus(); }); @@ -1415,7 +1414,7 @@ describe('', () => { }); describe('key: End', () => { - it('sets value to min on End', () => { + it('sets value to min on End', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1425,7 +1424,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1434,7 +1433,7 @@ describe('', () => { expect(handleValueChange.args[0][0]).to.deep.equal(17); }); - it('sets value to the minimum possible value in a range slider', () => { + it('sets value to the minimum possible value in a range slider', async () => { const handleValueChange = spy(); const { getByTestId } = render( , @@ -1443,7 +1442,7 @@ describe('', () => { const thumbOne = getByTestId('thumb-0'); const thumbTwo = getByTestId('thumb-1'); - act(() => { + await act(() => { thumbTwo.focus(); }); @@ -1453,7 +1452,7 @@ describe('', () => { fireEvent.keyDown(thumbTwo, { key: 'End' }); expect(handleValueChange.callCount).to.equal(1); - act(() => { + await act(() => { thumbOne.focus(); }); @@ -1463,7 +1462,7 @@ describe('', () => { }); }); - it('should support Shift + Left Arrow / Right Arrow keys', () => { + it('should support Shift + Left Arrow / Right Arrow keys', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1473,7 +1472,7 @@ describe('', () => { fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1486,7 +1485,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(20); }); - it('should support Shift + Up Arrow / Down Arrow keys', () => { + it('should support Shift + Up Arrow / Down Arrow keys', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1495,7 +1494,7 @@ describe('', () => { const input = container.querySelector('input'); fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1508,7 +1507,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(20); }); - it('should support PageUp / PageDown keys', () => { + it('should support PageUp / PageDown keys', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1517,7 +1516,7 @@ describe('', () => { const input = container.querySelector('input'); fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1530,7 +1529,7 @@ describe('', () => { expect(handleValueChange.args[1][0]).to.deep.equal(20); }); - it('should support Shift + Left Arrow / Right Arrow keys by taking acount step and largeStep', () => { + it('should support Shift + Left Arrow / Right Arrow keys by taking acount step and largeStep', async () => { const handleValueChange = spy(); const DEFAULT_VALUE = 20; const LARGE_STEP = 15; @@ -1547,7 +1546,7 @@ describe('', () => { const input = container.querySelector('input'); fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); @@ -1562,7 +1561,7 @@ describe('', () => { expect(input).to.have.attribute('aria-valuenow', `${DEFAULT_VALUE}`); }); - it('should stop at max/min when using Shift + Left Arrow / Right Arrow keys', () => { + it('should stop at max/min when using Shift + Left Arrow / Right Arrow keys', async () => { const handleValueChange = spy(); const { container } = render( , @@ -1571,7 +1570,7 @@ describe('', () => { const input = container.querySelector('input'); fireEvent.keyDown(document.body, { key: 'TAB' }); - act(() => { + await act(() => { (input as HTMLInputElement).focus(); }); diff --git a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx index 22376a55f7..32be08e9dd 100644 --- a/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx +++ b/packages/mui-base/src/Slider/Thumb/SliderThumb.test.tsx @@ -56,7 +56,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx index 0e6467bcfa..7f655386f8 100644 --- a/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx +++ b/packages/mui-base/src/Slider/Track/SliderTrack.test.tsx @@ -56,7 +56,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx index 63154f0eaa..cca74edebc 100644 --- a/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx +++ b/packages/mui-base/src/Switch/Root/SwitchRoot.test.tsx @@ -10,7 +10,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render, })); diff --git a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx index 96032e4654..3c916c85ad 100644 --- a/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx +++ b/packages/mui-base/src/Switch/Thumb/SwitchThumb.test.tsx @@ -15,7 +15,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', refInstanceof: window.HTMLSpanElement, render: (node) => { return render({node}); diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx index eee319e7e4..3850e9dfa3 100644 --- a/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx +++ b/packages/mui-base/src/Tabs/Root/TabsRoot.test.tsx @@ -21,7 +21,6 @@ describe('', () => { }); describeConformance(, () => ({ - inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, })); @@ -128,7 +127,7 @@ describe('', () => { expect(tabElements[1]).to.have.attribute('aria-selected', 'true'); }); - it('should support values of different types', () => { + it('should support values of different types', async () => { const tabValues = [0, '1', { value: 2 }, () => 3, Symbol('4'), /5/]; const { getAllByRole } = render( @@ -147,10 +146,10 @@ describe('', () => { const tabElements = getAllByRole('tab'); const tabPanelElements = getAllByRole('tabpanel', { hidden: true }); - tabValues.forEach((value, index) => { + tabValues.forEach(async (value, index) => { expect(tabPanelElements[index]).to.have.attribute('aria-labelledby', tabElements[index].id); - act(() => { + await act(() => { tabElements[index].click(); }); @@ -191,7 +190,7 @@ describe('', () => { expect(handleChange.callCount).to.equal(0); }); - it('should call onValueChange if an unselected tab gets focused', () => { + it('should call onValueChange if an unselected tab gets focused', async () => { const handleChange = spy(); const { getAllByRole } = render( @@ -203,7 +202,7 @@ describe('', () => { ); const [firstTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -213,7 +212,7 @@ describe('', () => { expect(handleChange.firstCall.args[0]).to.equal(1); }); - it('when `activateOnFocus = false` should not call onValueChange if an unselected tab gets focused', () => { + it('when `activateOnFocus = false` should not call onValueChange if an unselected tab gets focused', async () => { const handleChange = spy(); const { getAllByRole } = render( @@ -226,7 +225,7 @@ describe('', () => { const [firstTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -271,7 +270,7 @@ describe('', () => { describe(`when focus is on a tab element in a ${orientation} ${direction} tablist`, () => { describe(previousItemKey ?? '', () => { describe('with `activateOnFocus = false`', () => { - it('moves focus to the last tab without activating it if focus is on the first tab', () => { + it('moves focus to the last tab without activating it if focus is on the first tab', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -290,7 +289,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -302,7 +301,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to the previous tab without activating it', () => { + it('moves focus to the previous tab without activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -321,7 +320,7 @@ describe('', () => { , ); const [firstTab, secondTab] = getAllByRole('tab'); - act(() => { + await act(() => { secondTab.focus(); }); @@ -335,7 +334,7 @@ describe('', () => { }); describe('with `activateOnFocus = true`', () => { - it('moves focus to the last tab while activating it if focus is on the first tab', () => { + it('moves focus to the last tab while activating it if focus is on the first tab', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -354,7 +353,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -367,7 +366,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to the previous tab while activating it', () => { + it('moves focus to the previous tab while activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -386,7 +385,7 @@ describe('', () => { , ); const [firstTab, secondTab] = getAllByRole('tab'); - act(() => { + await act(() => { secondTab.focus(); }); @@ -400,7 +399,7 @@ describe('', () => { }); }); - it('skips over disabled tabs', () => { + it('skips over disabled tabs', async () => { const handleKeyDown = spy(); const { getAllByRole } = render( ', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -431,7 +430,7 @@ describe('', () => { describe(nextItemKey ?? '', () => { describe('with `activateOnFocus = false`', () => { - it('moves focus to the first tab without activating it if focus is on the last tab', () => { + it('moves focus to the first tab without activating it if focus is on the last tab', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -450,7 +449,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -462,7 +461,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to the next tab without activating it', () => { + it('moves focus to the next tab without activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -481,7 +480,7 @@ describe('', () => { , ); const [, secondTab, lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { secondTab.focus(); }); @@ -495,7 +494,7 @@ describe('', () => { }); describe('with `activateOnFocus = true`', () => { - it('moves focus to the first tab while activating it if focus is on the last tab', () => { + it('moves focus to the first tab while activating it if focus is on the last tab', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -514,7 +513,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -527,7 +526,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to the next tab while activating it', () => { + it('moves focus to the next tab while activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -546,7 +545,7 @@ describe('', () => { , ); const [, secondTab, lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { secondTab.focus(); }); @@ -560,7 +559,7 @@ describe('', () => { }); }); - it('skips over disabled tabs', () => { + it('skips over disabled tabs', async () => { const handleKeyDown = spy(); const { getAllByRole } = render( ', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -593,7 +592,7 @@ describe('', () => { describe('when focus is on a tab regardless of orientation', () => { describe('Home', () => { - it('when `activateOnFocus = false`, moves focus to the first tab without activating it', () => { + it('when `activateOnFocus = false`, moves focus to the first tab without activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -606,7 +605,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -618,7 +617,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('when `activateOnFocus = true`, moves focus to the first tab while activating it', () => { + it('when `activateOnFocus = true`, moves focus to the first tab while activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -631,7 +630,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -644,7 +643,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to first non-disabled tab', () => { + it('moves focus to first non-disabled tab', async () => { const handleKeyDown = spy(); const { getAllByRole } = render( @@ -656,7 +655,7 @@ describe('', () => { , ); const [, secondTab, lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { lastTab.focus(); }); @@ -669,7 +668,7 @@ describe('', () => { }); describe('End', () => { - it('when `activateOnFocus = false`, moves focus to the last tab without activating it', () => { + it('when `activateOnFocus = false`, moves focus to the last tab without activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -682,7 +681,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -694,7 +693,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('when `activateOnFocus = true`, moves focus to the last tab while activating it', () => { + it('when `activateOnFocus = true`, moves focus to the last tab while activating it', async () => { const handleChange = spy(); const handleKeyDown = spy(); const { getAllByRole } = render( @@ -707,7 +706,7 @@ describe('', () => { , ); const [firstTab, , lastTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -720,7 +719,7 @@ describe('', () => { expect(handleKeyDown.firstCall.args[0]).to.have.property('defaultPrevented', true); }); - it('moves focus to first non-disabled tab', () => { + it('moves focus to first non-disabled tab', async () => { const handleKeyDown = spy(); const { getAllByRole } = render( @@ -732,7 +731,7 @@ describe('', () => { , ); const [firstTab, secondTab] = getAllByRole('tab'); - act(() => { + await act(() => { firstTab.focus(); }); @@ -769,7 +768,7 @@ describe('', () => { } }); - it('should set the `data-activation-direction` attribute on the tabs root with orientation=horizontal', () => { + it('should set the `data-activation-direction` attribute on the tabs root with orientation=horizontal', async () => { const { getAllByRole, getByTestId } = render( @@ -783,20 +782,20 @@ describe('', () => { const tabs = getAllByRole('tab'); expect(root).to.have.attribute('data-activation-direction', 'none'); - act(() => { + await act(() => { tabs[1].click(); }); expect(root).to.have.attribute('data-activation-direction', 'right'); - act(() => { + await act(() => { tabs[0].click(); }); expect(root).to.have.attribute('data-activation-direction', 'left'); }); - it('should set the `data-activation-direction` attribute on the tabs root with orientation=vertical', () => { + it('should set the `data-activation-direction` attribute on the tabs root with orientation=vertical', async () => { const { getAllByRole, getByTestId } = render( @@ -810,13 +809,13 @@ describe('', () => { const tabs = getAllByRole('tab'); expect(root).to.have.attribute('data-activation-direction', 'none'); - act(() => { + await act(() => { tabs[1].click(); }); expect(root).to.have.attribute('data-activation-direction', 'down'); - act(() => { + await act(() => { tabs[0].click(); }); diff --git a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx index 4b2e28998d..fa3fbf9f97 100644 --- a/packages/mui-base/src/Tabs/Tab/Tab.test.tsx +++ b/packages/mui-base/src/Tabs/Tab/Tab.test.tsx @@ -39,7 +39,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'div', render: (node) => { const { container, ...other } = render( diff --git a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx index 7d238a7f3a..961d534ab5 100644 --- a/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx +++ b/packages/mui-base/src/Tabs/TabIndicator/TabIndicator.test.tsx @@ -16,7 +16,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'span', render: (node) => { const { container, ...other } = render( diff --git a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx index 198089eaec..14545b9387 100644 --- a/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx +++ b/packages/mui-base/src/Tabs/TabPanel/TabPanel.test.tsx @@ -22,7 +22,6 @@ describe('', () => { }; describeConformance(, () => ({ - inheritComponent: 'div', render: (node) => { const { container, ...other } = render( {node}, diff --git a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx index f4dfd4a1fa..f9d40eaad6 100644 --- a/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx +++ b/packages/mui-base/src/Tabs/TabsList/TabsList.test.tsx @@ -9,7 +9,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', render: (node) => { const { container, ...other } = render( ', () => { })); describe('accessibility attributes', () => { - it('sets the aria-selected attribute on the selected tab', () => { + it('sets the aria-selected attribute on the selected tab', async () => { const { getByText } = render( @@ -53,7 +52,7 @@ describe('', () => { expect(tab2).to.have.attribute('aria-selected', 'false'); expect(tab3).to.have.attribute('aria-selected', 'false'); - act(() => { + await act(() => { tab2.click(); }); @@ -61,7 +60,7 @@ describe('', () => { expect(tab2).to.have.attribute('aria-selected', 'true'); expect(tab3).to.have.attribute('aria-selected', 'false'); - act(() => { + await act(() => { tab3.click(); }); @@ -69,7 +68,7 @@ describe('', () => { expect(tab2).to.have.attribute('aria-selected', 'false'); expect(tab3).to.have.attribute('aria-selected', 'true'); - act(() => { + await act(() => { tab1.click(); }); diff --git a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx index 9966ea6bc8..94d7607965 100644 --- a/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx +++ b/packages/mui-base/src/Tooltip/Popup/TooltipPopup.test.tsx @@ -8,7 +8,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render( diff --git a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx index 0e39148590..d9ec78b31e 100644 --- a/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx +++ b/packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'div', refInstanceof: window.HTMLDivElement, render(node) { return render({node}); diff --git a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx index 9342ec26b4..65f0072faf 100644 --- a/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx +++ b/packages/mui-base/src/Tooltip/Root/TooltipRoot.test.tsx @@ -81,7 +81,7 @@ describe('', () => { const trigger = screen.getByRole('button'); - act(() => trigger.focus()); + await act(() => trigger.focus()); await flushMicrotasks(); @@ -100,13 +100,13 @@ describe('', () => { const trigger = screen.getByRole('button'); - act(() => trigger.focus()); + await act(() => trigger.focus()); clock.tick(OPEN_DELAY); await flushMicrotasks(); - act(() => trigger.blur()); + await act(() => trigger.blur()); clock.tick(OPEN_DELAY); diff --git a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx index 190f7f4082..7fe1aedf23 100644 --- a/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx +++ b/packages/mui-base/src/Tooltip/Trigger/TooltipTrigger.test.tsx @@ -7,7 +7,6 @@ describe('', () => { const { render } = createRenderer(); describeConformance(, () => ({ - inheritComponent: 'button', refInstanceof: window.HTMLButtonElement, render(node) { return render({node}); diff --git a/packages/mui-base/src/legacy/FormControl/FormControl.test.tsx b/packages/mui-base/src/legacy/FormControl/FormControl.test.tsx index 94935c113c..b4b82447f2 100644 --- a/packages/mui-base/src/legacy/FormControl/FormControl.test.tsx +++ b/packages/mui-base/src/legacy/FormControl/FormControl.test.tsx @@ -13,7 +13,6 @@ describe('', () => { const { render } = createRenderer(); describeConformanceUnstyled(, () => ({ - inheritComponent: 'div', render, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'div', diff --git a/packages/mui-base/src/legacy/Option/Option.test.tsx b/packages/mui-base/src/legacy/Option/Option.test.tsx index 99c092eba2..e32e951b4e 100644 --- a/packages/mui-base/src/legacy/Option/Option.test.tsx +++ b/packages/mui-base/src/legacy/Option/Option.test.tsx @@ -15,7 +15,6 @@ describe('