[test] Add visual regression test for SpeedDIal (mui#13140)

* [SpeedDialAction] Fix tooltip not being open on already open speeddial * [test] Add visual regression test for SpeedDial
mmacu · Oct 8, 2018 · 340b85e · 340b85e
1 parent 8c0d257
commit 340b85e
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 3 deletions.
diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js
@@ -28,9 +28,12 @@ export const styles = theme => ({
 });
 
 class SpeedDialAction extends React.Component {
-  state = {
-    tooltipOpen: false,
-  };
+  constructor(props) {
+    super();
+    this.state = {
+      tooltipOpen: props.tooltipOpen,
+    };
+  }
 
   static getDerivedStateFromProps = (props, state) => {
     if (!props.open && state.tooltipOpen) {

diff --git a/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js b/packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.test.js
@@ -29,6 +29,11 @@ describe('<SpeedDialAction />', () => {
     wrapper.unmount();
   });
 
+  it('initializes its state from props', () => {
+    const wrapper = shallow(<SpeedDialAction {...defaultProps} open tooltipOpen />);
+    assert.strictEqual(wrapper.state().tooltipOpen, true);
+  });
+
   it('should render a Tooltip', () => {
     const wrapper = shallow(<SpeedDialAction {...defaultProps} />);
     assert.strictEqual(wrapper.type(), Tooltip);

diff --git a/test/regressions/tests/SpeedDial/Directions.js b/test/regressions/tests/SpeedDial/Directions.js
@@ -0,0 +1,92 @@
+import classNames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Avatar from '@material-ui/core/Avatar';
+import { withStyles } from '@material-ui/core/styles';
+import { capitalize } from '@material-ui/core/utils/helpers';
+import SpeedDial from '@material-ui/lab/SpeedDial';
+import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
+import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
+
+const styles = {
+  root: {
+    position: 'relative',
+    height: 360,
+    width: 400,
+  },
+  speedDial: {
+    position: 'absolute',
+    '&$directionUp': {
+      bottom: 0,
+      right: 0,
+    },
+    '&$directionRight': {
+      bottom: 0,
+      left: 0,
+    },
+    '&$directionDown': {
+      top: 0,
+      left: 0,
+    },
+    '&$directionLeft': {
+      top: 0,
+      right: 0,
+    },
+  },
+  directionUp: {},
+  directionRight: {},
+  directionDown: {},
+  directionLeft: {},
+};
+
+function SimpleSpeedDial(props) {
+  const tooltipPlacement = {
+    up: 'left',
+    right: 'top',
+    down: 'right',
+    left: 'bottom',
+  };
+  const secondaryPlacement = ['-start', '', '-end'];
+
+  return (
+    <SpeedDial icon={<SpeedDialIcon />} open {...props}>
+      {['A', 'B', 'C'].map((name, i) => {
+        return (
+          <SpeedDialAction
+            key={name}
+            icon={<Avatar>{name}</Avatar>}
+            tooltipOpen
+            tooltipPlacement={`${tooltipPlacement[props.direction]}${secondaryPlacement[i]}`}
+            tooltipTitle={'Tooltip'}
+          />
+        );
+      })}
+    </SpeedDial>
+  );
+}
+
+function Directions({ classes }) {
+  const speedDialClassName = direction =>
+    classNames(classes.speedDial, classes[`direction${capitalize(direction)}`]);
+
+  return (
+    <div className={classes.root}>
+      {['up', 'right', 'down', 'left'].map(direction => {
+        return (
+          <SimpleSpeedDial
+            key={direction}
+            ariaLabel={direction}
+            className={speedDialClassName(direction)}
+            direction={direction}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+Directions.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Directions);