[test] Improve visual regression tests

mui · Jan 12, 2020 · 4707968 · 4707968
1 parent a992b09
commit 4707968
Show file tree

Hide file tree

Showing 34 changed files with 148 additions and 597 deletions.
diff --git a/docs/pages/components/material-icons.js b/docs/pages/components/material-icons.js
@@ -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;
diff --git a/docs/src/pages/components/modal/ServerModal.js b/docs/src/pages/components/modal/ServerModal.js
@@ -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.

diff --git a/docs/src/pages/components/modal/ServerModal.tsx b/docs/src/pages/components/modal/ServerModal.tsx
@@ -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.

diff --git a/packages/material-ui/src/utils/deprecatedPropType.js b/packages/material-ui/src/utils/deprecatedPropType.js
@@ -1,4 +1,4 @@
-function deprecatedPropType(validator, reason) {
+export default function deprecatedPropType(validator, reason) {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
@@ -17,5 +17,3 @@ function deprecatedPropType(validator, reason) {
     return null;
   };
 }
-
-export default deprecatedPropType;
diff --git a/packages/material-ui/src/utils/getScrollbarSize.js b/packages/material-ui/src/utils/getScrollbarSize.js
@@ -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';
@@ -14,5 +14,3 @@ function getScrollbarSize() {
 
   return scrollbarSize;
 }
-
-export default getScrollbarSize;
diff --git a/packages/material-ui/src/utils/ownerDocument.js b/packages/material-ui/src/utils/ownerDocument.js
@@ -1,5 +1,3 @@
-function ownerDocument(node) {
+export default function ownerDocument(node) {
   return (node && node.ownerDocument) || document;
 }
-
-export default ownerDocument;
diff --git a/packages/material-ui/src/utils/ownerWindow.js b/packages/material-ui/src/utils/ownerWindow.js
@@ -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;
diff --git a/packages/material-ui/src/utils/requirePropFactory.js b/packages/material-ui/src/utils/requirePropFactory.js
@@ -1,4 +1,4 @@
-function requirePropFactory(componentNameInError) {
+export default function requirePropFactory(componentNameInError) {
   if (process.env.NODE_ENV === 'production') {
     return () => null;
   }
@@ -17,5 +17,3 @@ function requirePropFactory(componentNameInError) {
   };
   return requireProp;
 }
-
-export default requirePropFactory;
diff --git a/packages/material-ui/src/utils/unsupportedProp.js b/packages/material-ui/src/utils/unsupportedProp.js
@@ -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;
   }
@@ -11,5 +11,3 @@ function unsupportedProp(props, propName, componentName, location, propFullName)
 
   return null;
 }
-
-export default unsupportedProp;
diff --git a/test/regressions/debug.html b/test/regressions/debug.html
@@ -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
+
+ -->
diff --git a/test/regressions/index.js b/test/regressions/index.js
@@ -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) => {
@@ -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-getting-started-templates-sign-in-side/SignInSide.png', // Flaky
+  'docs-components-tree-view/CustomizedTreeView.png', // Flaky
+  'docs-getting-started-usage/Usage.png', // Not needed
+  'docs-customization-typography/ResponsiveFontSizesChart.png', // 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-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-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-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.
@@ -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;
   }
 
@@ -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'],
@@ -166,11 +206,9 @@ tests.forEach(test => {
 
   suite.createTest(test.name, () => {
     ReactDOM.render(
-      <ThemeProvider theme={theme}>
-        <TestViewer>
-          <TestCase />
-        </TestViewer>
-      </ThemeProvider>,
+      <TestViewer>
+        <TestCase />
+      </TestViewer>,
       rootEl,
     );
   });

diff --git a/test/regressions/tests/Chip/DeletableAvatarChip.js b/test/regressions/tests/Chip/DeletableAvatarChip.js