Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[test] Improve visual regression tests #19175

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/pages/components/material-icons.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ const req = name => {
req.keys = () => ['material-icons.md', 'SearchIcons.js'];
const reqPrefix = 'pages/components/material-icons';

function Page() {
export default function Page() {
return <MarkdownDocs disableToc req={req} reqSource={() => {}} reqPrefix={reqPrefix} />;
}

export default Page;
1 change: 1 addition & 0 deletions docs/src/pages/components/modal/ServerModal.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const useStyles = makeStyles(theme => ({
root: {
height: 300,
flexGrow: 1,
minWidth: 300,
transform: 'translateZ(0)',
// The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others.
Expand Down
1 change: 1 addition & 0 deletions docs/src/pages/components/modal/ServerModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
root: {
height: 300,
flexGrow: 1,
minWidth: 300,
transform: 'translateZ(0)',
// The position fixed scoping doesn't work in IE 11.
// Disable this demo to preserve the others.
Expand Down
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/deprecatedPropType.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function deprecatedPropType(validator, reason) {
export default function deprecatedPropType(validator, reason) {
if (process.env.NODE_ENV === 'production') {
return () => null;
}
Expand All @@ -17,5 +17,3 @@ function deprecatedPropType(validator, reason) {
return null;
};
}

export default deprecatedPropType;
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/getScrollbarSize.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// A change of the browser zoom change the scrollbar size.
// Credit https://github.com/twbs/bootstrap/blob/3ffe3a5d82f6f561b82ff78d82b32a7d14aed558/js/src/modal.js#L512-L519
function getScrollbarSize() {
export default function getScrollbarSize() {
const scrollDiv = document.createElement('div');
scrollDiv.style.width = '99px';
scrollDiv.style.height = '99px';
Expand All @@ -14,5 +14,3 @@ function getScrollbarSize() {

return scrollbarSize;
}

export default getScrollbarSize;
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/ownerDocument.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
function ownerDocument(node) {
export default function ownerDocument(node) {
return (node && node.ownerDocument) || document;
}

export default ownerDocument;
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/ownerWindow.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import ownerDocument from './ownerDocument';

function ownerWindow(node) {
export default function ownerWindow(node) {
const doc = ownerDocument(node);
return doc.defaultView || window;
}

export default ownerWindow;
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/requirePropFactory.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function requirePropFactory(componentNameInError) {
export default function requirePropFactory(componentNameInError) {
if (process.env.NODE_ENV === 'production') {
return () => null;
}
Expand All @@ -17,5 +17,3 @@ function requirePropFactory(componentNameInError) {
};
return requireProp;
}

export default requirePropFactory;
4 changes: 1 addition & 3 deletions packages/material-ui/src/utils/unsupportedProp.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
function unsupportedProp(props, propName, componentName, location, propFullName) {
export default function unsupportedProp(props, propName, componentName, location, propFullName) {
if (process.env.NODE_ENV === 'production') {
return null;
}
Expand All @@ -11,5 +11,3 @@ function unsupportedProp(props, propName, componentName, location, propFullName)

return null;
}

export default unsupportedProp;
15 changes: 14 additions & 1 deletion test/regressions/debug.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,23 @@
<html>
<head>
<title>vrtest</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimum-scale=1" />
<meta charset="utf-8" />
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<style>body { background-color: white; }</style>
</head>
<body>
<script src="../../tmp/tests.js"></script>
</body>
</html>
<!--

Load the page and run

__vrtest__.runBeforeHooks();
__vrtest__.createTestController();
__vrtest__.testController.start();
__vrtest__.testController.next();

https://github.com/nathanmarks/vrtest/blob/e2240dc018d3392ca232712bb34aef7b80ee1000/src/server/runner.js#L94

-->
190 changes: 114 additions & 76 deletions test/regressions/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,8 @@ import React from 'react';
import ReactDOM from 'react-dom';
import vrtest from 'vrtest/client';
import webfontloader from 'webfontloader';
import { createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import TestViewer from './TestViewer';

const theme = createMuiTheme();

// Get all the tests specifically written for preventing regressions.
const requireRegression = require.context('./tests', true, /js$/);
const regressions = requireRegression.keys().reduce((res, path) => {
Expand All @@ -24,70 +20,114 @@ const regressions = requireRegression.keys().reduce((res, path) => {
return res;
}, []);

const blacklistSuite = [
// Flaky
'docs-components-progress',

// Internal dependencies
'docs-discover-more-languages',

// Needs interaction
'docs-components-click-away-listener',
'docs-components-dialogs',
'docs-components-menus',
'docs-components-tooltips',
'docs-components-transitions',

// Documentation extension
'docs-getting-started-templates',
'docs-customization-default-theme',

// Image load issue
'docs-components-skeleton',
'docs-discover-more-team',
'docs-getting-started-templates-album',
'docs-getting-started-templates-blog',
'docs-getting-started-templates-sign-in-side',

// Useless
'docs-', // Home
'docs-discover-more-showcase',
'docs-guides',
'docs-versions',
'docs-layouts',
'docs-customization-color',
];

const blacklistFilename = [
'docs-components-grid-list/tileData.png', // no component
'docs-css-in-js-basics/StressTest.png', // strange bug no time for it
'docs-components-steppers/SwipeableTextMobileStepper.png', // external img
'docs-components-steppers/TextMobileStepper.png', // external img
'docs-getting-started-usage/Usage.png', // codesandbox iframe
'docs-customization-typography/ResponsiveFontSizesChart.png', // Chart
'docs-components-material-icons/synonyms.png', // Not a component

// Already tested once assembled
'docs-getting-started-templates-dashboard/Chart.png',
'docs-getting-started-templates-dashboard/Deposits.png',
'docs-getting-started-templates-dashboard/Orders.png',
'docs-getting-started-templates-dashboard/Title.png',
'docs-getting-started-templates-checkout/AddressForm.png',
'docs-getting-started-templates-checkout/PaymentForm.png',
'docs-getting-started-templates-checkout/Review.png',

// Flaky
'docs-components-grid-list/ImageGridList.png',
'docs-components-icons/FontAwesome.png',
'docs-components-tree-view/CustomizedTreeView.png',

// Redux isolation
'docs-components-badges/BadgeAlignment.png',
'docs-components-chips/ChipsPlayground.png',
'docs-components-popover/AnchorPlayground.png',
'docs-components-popper/ScrollPlayground.png',
'docs-components-grid/InteractiveGrid.png',
'docs-customization-density/DensityTool.png',
const blacklist = [
'docs-components-alert/TransitionAlerts.png', // Needs interaction
'docs-components-app-bar/BackToTop.png', // Needs interaction
'docs-components-app-bar/ElevateAppBar.png', // Needs interaction
'docs-components-app-bar/HideAppBar.png', // Needs interaction
'docs-components-app-bar/MenuAppBar.png', // Redundant
'docs-components-autocomplete/Asynchronous.png', // Redundant
'docs-components-autocomplete/CheckboxesTags.png', // Redundant
'docs-components-autocomplete/CountrySelect.png', // Redundant
'docs-components-autocomplete/DisabledOptions.png', // Redundant
'docs-components-autocomplete/Filter.png', // Redundant
'docs-components-autocomplete/FreeSolo.png', // Redundant
'docs-components-autocomplete/GoogleMaps.png', // Redundant
'docs-components-autocomplete/Grouped.png', // Redundant
'docs-components-autocomplete/Highlights.png', // Redundant
'docs-components-autocomplete/Playground.png', // Redundant
'docs-components-autocomplete/UseAutocomplete.png', // Redundant
'docs-components-autocomplete/Virtualize.png', // Redundant
'docs-components-backdrop/SimpleBackdrop.png', // Needs interaction
'docs-components-badges/BadgeAlignment.png', // Redux isolation
'docs-components-badges/BadgeVisibility.png', // Needs interaction
'docs-components-breadcrumbs/ActiveLastBreadcrumb.png', // Redundant
'docs-components-buttons/ButtonBases.png', // Useless
'docs-components-buttons/FloatingActionButtonZoom.png', // Needs interaction
'docs-components-chips/ChipsPlayground.png', // Redux isolation
'docs-components-click-away-listener', // Needs interaction
'docs-components-container', // Not needed
'docs-components-dialogs', // Needs interaction
'docs-components-drawers/SwipeableTemporaryDrawer.png', // Needs interaction
'docs-components-drawers/TemporaryDrawer.png', // Needs interaction
'docs-components-grid-list', // Not needed
'docs-components-grid-list/tileData.png', // No component
'docs-components-grid/InteractiveGrid.png', // Redux isolation
'docs-components-grid/SpacingGrid.png', // Needs interaction
'docs-components-hidden', // Not needed
'docs-components-material-icons/synonyms.png', // No component
'docs-components-menus', // Not needed
'docs-components-modal/SimpleModal.png', // Needs interaction
'docs-components-modal/SpringModal.png', // Needs interaction
'docs-components-modal/TransitionsModal.png', // Needs interaction
'docs-components-modal/TransitionsModal.png', // Needs interaction
'docs-components-no-ssr/FrameDeferring.png', // Needs interaction
'docs-components-popover/AnchorPlayground.png', // Redux isolation
'docs-components-popover/MouseOverPopover.png', // Needs interaction
'docs-components-popover/PopoverPopupState.png', // Needs interaction
'docs-components-popover/SimplePopover.png', // Needs interaction
'docs-components-popper/FakedReferencePopper.png', // Needs interaction
'docs-components-popper/PopperPopupState.png', // Needs interaction
'docs-components-popper/PositionedPopper.png', // Needs interaction
'docs-components-popper/ScrollPlayground.png', // Redux isolation
'docs-components-popper/SimplePopper.png', // Needs interaction
'docs-components-popper/SpringPopper.png', // Needs interaction
'docs-components-popper/TransitionsPopper.png', // Needs interaction
'docs-components-portal/SimplePortal.png', // Needs interaction
'docs-components-progress', // Not needed
'docs-components-selects/ControlledOpenSelect.png', // Needs interaction
'docs-components-selects/DialogSelect.png', // Needs interaction
'docs-components-selects/GroupedSelect.png', // Needs interaction
'docs-components-skeleton/Animations.png', // Animation disabled
'docs-components-snackbars/ConsecutiveSnackbars.png', // Needs interaction
'docs-components-snackbars/CustomizedSnackbars.png', // Redundant
'docs-components-snackbars/DirectionSnackbar.png', // Needs interaction
'docs-components-snackbars/FabIntegrationSnackbar.png', // Not needed
'docs-components-snackbars/IntegrationNotistack.png', // Needs interaction
'docs-components-snackbars/PositionedSnackbar.png', // Needs interaction
'docs-components-snackbars/SimpleSnackbar.png', // Needs interaction
'docs-components-snackbars/TransitionsSnackbar.png', // Needs interaction
'docs-components-speed-dial', // Needs interaction
'docs-components-stepper/HorizontalNonLinearAlternativeLabelStepper.png', // Redundant
'docs-components-stepper/HorizontalNonLinearStepper.png', // Redundant
'docs-components-stepper/SwipeableTextMobileStepper.png', // Redundant
'docs-components-textarea-autosize', // Superseded by a dedicated regression test
'docs-components-tooltips', // Needs interaction
'docs-components-transitions', // Needs interaction
'docs-components-tree-view/ControlledTreeView.png', // Redundant
'docs-components-tree-view/CustomizedTreeView.png', // Flaky
'docs-components-use-media-query', // Not needed
'docs-customization-breakpoints', // Not needed
'docs-customization-color', // Not needed
'docs-customization-default-theme', // Redux isolation
'docs-customization-density/DensityTool.png', // Redux isolation
'docs-customization-typography/ResponsiveFontSizesChart.png', // Not needed
'docs-discover-more-languages', // Not needed
'docs-discover-more-showcase', // Not needed
'docs-discover-more-team', // Not needed
'docs-getting-started-templates', // Not needed
'docs-getting-started-templates-blog', // Not needed
'docs-getting-started-templates-checkout/AddressForm.png', // Already tested once assembled
'docs-getting-started-templates-checkout/PaymentForm.png', // Already tested once assembled
'docs-getting-started-templates-checkout/Review.png', // Already tested once assembled
'docs-getting-started-templates-dashboard/Chart.png', // Already tested once assembled
'docs-getting-started-templates-dashboard/Deposits.png', // Already tested once assembled
'docs-getting-started-templates-dashboard/Orders.png', // Already tested once assembled
'docs-getting-started-templates-dashboard/Title.png', // Already tested once assembled
'docs-getting-started-templates-sign-in-side/SignInSide.png', // Flaky
'docs-getting-started-usage/Usage.png', // Not needed
'docs-guides', // Not needed
'docs-styles-advanced', // Not needed
'docs-system-borders', // Not needed
'docs-system-display', // Not needed
'docs-system-flexbox', // Not needed
'docs-system-palette', // Not needed
'docs-system-positions', // Not needed
'docs-system-shadows', // Not needed
'docs-system-sizing', // Not needed
'docs-system-spacing', // Not needed
'docs-system-typography', // Not needed
'docs-versions', // Not needed
];

// Also use some of the demos to avoid code duplication.
Expand All @@ -100,11 +140,11 @@ const demos = requireDemos.keys().reduce((res, path) => {
.reverse();
const suite = `docs-${suiteArray.reverse().join('-')}`;

if (blacklistSuite.includes(suite)) {
if (blacklist.includes(suite)) {
return res;
}

if (blacklistFilename.includes(`${suite}/${name}.png`)) {
if (blacklist.includes(`${suite}/${name}.png`)) {
return res;
}

Expand Down Expand Up @@ -133,7 +173,7 @@ vrtest.before(() => {
return new Promise((resolve, reject) => {
webfontloader.load({
google: {
families: ['Roboto:300,400,500', 'Material+Icons'],
families: ['Roboto:300,400,500,700', 'Material+Icons'],
},
custom: {
families: ['Font Awesome 5 Free:400,900'],
Expand Down Expand Up @@ -166,11 +206,9 @@ tests.forEach(test => {

suite.createTest(test.name, () => {
ReactDOM.render(
<ThemeProvider theme={theme}>
<TestViewer>
<TestCase />
</TestViewer>
</ThemeProvider>,
<TestViewer>
<TestCase />
</TestViewer>,
rootEl,
);
});
Expand Down
7 changes: 0 additions & 7 deletions test/regressions/tests/Chip/DeletableAvatarChip.js

This file was deleted.

Loading