From 5ab3eec6ff6b5ec974ee6e06f79d432a4a5478d0 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:24:07 +0200 Subject: [PATCH 1/2] [docs] Add `PickersPopper` component to customization playground (@LukasTy) (#15397) Co-authored-by: Lukas Tyla --- .../date-picker/examplesConfig.styling.tsx | 34 ++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx index e5ade00e61d4e..2751b1b7682ef 100644 --- a/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx +++ b/docs/data/date-pickers/date-picker/examplesConfig.styling.tsx @@ -166,7 +166,7 @@ export const datePickerExamples: PickersSubcomponentType = { parentSlot: 'layout', parentComponent: 'PickersLayout', comments: - 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component', }, }, slots: ['root'], @@ -187,7 +187,7 @@ export const datePickerExamples: PickersSubcomponentType = { parentSlot: 'layout', parentComponent: 'PickersLayout', comments: - 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component', }, }, slots: ['root', 'label', 'labelContainer', 'switchViewButton', 'switchViewIcon'], @@ -208,7 +208,7 @@ export const datePickerExamples: PickersSubcomponentType = { parentSlot: 'layout', parentComponent: 'PickersLayout', comments: - 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component', }, }, slots: [ @@ -235,7 +235,7 @@ export const datePickerExamples: PickersSubcomponentType = { parentSlot: 'layout', parentComponent: 'PickersLayout', comments: - 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component', }, }, slots: ['root', 'today'], @@ -259,7 +259,7 @@ export const datePickerExamples: PickersSubcomponentType = { parentSlot: 'layout', parentComponent: 'PickersLayout', comments: - 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a wtyled component', + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `layout` slot will need to be replaced with a styled component', componentProps: { views: ['month'] }, }, }, @@ -289,6 +289,30 @@ export const datePickerExamples: PickersSubcomponentType = { slots: ['root'], moreInformation: , }, + PickersPopper: { + examples: { + customTheme: { + type: 'success', + parentSlot: 'paper', + }, + sxProp: { + type: 'warning', + parentSlot: 'popper', + current: true, + comments: + 'Because of the structure of the DesktopDatePicker, the `sx` prop needs to be applied to the `popper` slot', + }, + styledComponents: { + type: 'warning', + parentSlot: 'desktopPaper', + parentComponent: 'Paper', + current: true, + comments: + 'Because of the structure of the DesktopDatePicker and the way the popper renders, the `desktopPaper` slot will need to be replaced with a styled component', + }, + }, + slots: ['paper', 'root'], + }, }; const pickerProps: DatePickerProps = { From 044cd21592f5747fbf7f6b926685c87ea3fae2d1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 13 Nov 2024 13:52:30 +0100 Subject: [PATCH 2/2] [code-infra] Tentative fix for Argos flaky screenshot tests (@JCQuintas) (#15399) Co-authored-by: Jose C Quintas Jr --- package.json | 2 +- test/regressions/.mocharc.js | 3 +- .../{index.test.js => index.test.ts} | 51 ++++++++++++------- 3 files changed, 36 insertions(+), 20 deletions(-) rename test/regressions/{index.test.js => index.test.ts} (89%) diff --git a/package.json b/package.json index d88f56892f580..2f5310607d060 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "test:regressions": "cross-env NODE_ENV=production pnpm test:regressions:build && concurrently --success first --kill-others \"pnpm test:regressions:run\" \"pnpm test:regressions:server\"", "test:regressions:build": "cross-env E2E_BUILD=true webpack --config test/regressions/webpack.config.js", "test:regressions:dev": "concurrently \"pnpm test:regressions:build --watch\" \"pnpm test:regressions:server\"", - "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.js'", + "test:regressions:run": "mocha --config test/regressions/.mocharc.js --delay 'test/regressions/**/*.test.ts'", "test:regressions:server": "serve test/regressions -p 5001", "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "lerna run --no-bail --parallel typescript", diff --git a/test/regressions/.mocharc.js b/test/regressions/.mocharc.js index 25ded7571a03a..d58ff938cb98f 100644 --- a/test/regressions/.mocharc.js +++ b/test/regressions/.mocharc.js @@ -1,6 +1,7 @@ module.exports = { + extension: ['js', 'ts', 'tsx'], recursive: true, slow: 500, timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs. - require: [require.resolve('@babel/register')], + require: [require.resolve('../utils/setupBabel')], }; diff --git a/test/regressions/index.test.js b/test/regressions/index.test.ts similarity index 89% rename from test/regressions/index.test.js rename to test/regressions/index.test.ts index cc3f44deeb07d..849ee53754d6c 100644 --- a/test/regressions/index.test.js +++ b/test/regressions/index.test.ts @@ -5,15 +5,18 @@ import * as childProcess from 'child_process'; import { chromium } from '@playwright/test'; import materialPackageJson from '@mui/material/package.json'; -function sleep(timeoutMS) { +function sleep(timeoutMS: number | undefined) { return new Promise((resolve) => { - setTimeout(() => resolve(), timeoutMS); + setTimeout(resolve, timeoutMS); }); } const isMaterialUIv6 = materialPackageJson.version.startsWith('6.'); -const isConsoleWarningIgnored = (msg) => { +// Tests that need a longer timeout. +const timeSensitiveSuites = ['ColumnAutosizingAsync']; + +const isConsoleWarningIgnored = (msg?: string) => { if ( msg && isMaterialUIv6 && @@ -51,7 +54,7 @@ async function main() { } }); - let errorConsole; + let errorConsole: string | undefined; page.on('console', (msg) => { // Filter out native user-agent errors e.g. "Failed to load resource: net::ERR_FAILED" @@ -62,7 +65,7 @@ async function main() { // Wait for all requests to finish. // This should load shared resources such as fonts. - await page.goto(`${baseUrl}#no-dev`, { waitUntil: 'networkidle0' }); + await page.goto(`${baseUrl}#no-dev`, { waitUntil: 'networkidle' }); // Simulate portrait mode for date pickers. // See `useIsLandscape`. @@ -76,20 +79,20 @@ async function main() { const routes = await page.$$eval('#tests a', (links) => { return links.map((link) => { - return link.href; + return (link as HTMLAnchorElement).href; }); }); // prepare screenshots await fse.emptyDir(screenshotDir); - function navigateToTest(testIndex) { + function navigateToTest(testIndex: number) { // Use client-side routing which is much faster than full page navigation via page.goto(). // Could become an issue with test isolation. // If tests are flaky due to global pollution switch to page.goto(route); // puppeteers built-in click() times out return page.$eval(`#tests li:nth-of-type(${testIndex}) a`, (link) => { - link.click(); + (link as HTMLAnchorElement).click(); }); } @@ -130,12 +133,7 @@ async function main() { await navigateToTest(index + 1); } // Move cursor offscreen to not trigger unwanted hover effects. - page.mouse.move(0, 0); - - if (/^\docs-charts-.*/.test(pathURL)) { - // Run one tick of the clock to get the final animation state - await sleep(10); - } + await page.mouse.move(0, 0); const screenshotPath = path.resolve(screenshotDir, `${route.replace(baseUrl, '.')}.png`); await fse.ensureDir(path.dirname(screenshotPath)); @@ -160,6 +158,18 @@ async function main() { { timeout: 1000 }, ); + if (/^\docs-charts-.*/.test(pathURL)) { + // Run one tick of the clock to get the final animation state + await sleep(10); + } + + if (timeSensitiveSuites.some((suite) => pathURL.includes(suite))) { + await sleep(100); + } + + // Wait for the page to settle after taking the screenshot. + await page.waitForLoadState(); + await testcase.screenshot({ path: screenshotPath, type: 'png' }); }); @@ -183,7 +193,7 @@ async function main() { const testcaseIndex = routes.indexOf(route); await page.$eval(`#tests li:nth-of-type(${testcaseIndex + 1}) a`, (link) => { - link.click(); + (link as HTMLAnchorElement).click(); }); const testcase = await page.waitForSelector( @@ -192,6 +202,11 @@ async function main() { await page.evaluate(() => { const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller'); + + if (!virtualScroller) { + throw new Error('missing virtualScroller'); + } + virtualScroller.scrollLeft = 400; virtualScroller.dispatchEvent(new Event('scroll')); }); @@ -208,12 +223,12 @@ async function main() { const testcaseIndex = routes.indexOf(route); await page.$eval(`#tests li:nth-of-type(${testcaseIndex + 1}) a`, (link) => { - link.click(); + (link as HTMLAnchorElement).click(); }); // Click the export button in the toolbar. await page.$eval(`button[aria-label="Export"]`, (exportButton) => { - exportButton.click(); + (exportButton as HTMLAnchorElement).click(); }); // Click the print export option from the export menu in the toolbar. @@ -221,7 +236,7 @@ async function main() { // Trigger the action async because window.print() is blocking the main thread // like window.alert() is. setTimeout(() => { - printButton.click(); + (printButton as HTMLAnchorElement).click(); }); });