[test] Forward ref behavior (#15131)

eps1lon · web-flow · commit 49bb4554db1f · 2019-04-01T11:39:54.000+02:00
* [test] Add `only` option to whitelist tests

* [test] Add skip option to describeConformance

* [Backdrop] Use describeConformance for ref forward test

* [Box] Test ref forwarding

* [FilledInput] Test ref forwarding

* [Grid] Test ref forwarding

* [Input] Test ref forwarding

* [Menu] Use describeConformance for testRef

* [MenuList] Use describeConformance for testRef

* [NativeSelectInput] Test ref forwarding

* [OutlinedInput] Test ref forwarding

* [Popover] Test ref forwarding

* [RadioGroup] Use describeConformance for testRef

* [Select] Test ref forwarding

* [StepIcon] Test ref forwarding

* [Switch] Test ref forwarding

* [TablePagination] Test forward ref
diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, createShallow, getClasses, testRef } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  createShallow,
+  describeConformance,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import Backdrop from './Backdrop';
 
 describe('<Backdrop />', () => {
@@ -18,13 +23,15 @@ describe('<Backdrop />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<Backdrop open />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render a backdrop div', () => {
     const wrapper = shallow(<Backdrop open className="woofBackdrop" />);
     assert.strictEqual(wrapper.childAt(0).hasClass('woofBackdrop'), true);
     assert.strictEqual(wrapper.childAt(0).hasClass(classes.root), true);
   });
-
-  it('does forward refs', () => {
-    testRef(<Backdrop open />, mount);
-  });
 });
diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount } from '@material-ui/core/test-utils';
+import { createMount, describeConformance } from '@material-ui/core/test-utils';
 import Box from './Box';
 
 describe('<Box />', () => {
@@ -14,6 +14,12 @@ describe('<Box />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<Box />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   const testChildren = <div className="unique">Hello World</div>;
 
   it('renders children and box content', () => {
diff --git a/packages/material-ui/src/FilledInput/FilledInput.test.js b/packages/material-ui/src/FilledInput/FilledInput.test.js
@@ -1,6 +1,11 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  describeConformance,
+  findOutermostIntrinsic,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import FilledInput from './FilledInput';
 
 describe('<FilledInput />', () => {
@@ -16,6 +21,12 @@ describe('<FilledInput />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<FilledInput />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render a <div />', () => {
     const wrapper = mount(<FilledInput />);
     const root = findOutermostIntrinsic(wrapper);
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/packages/material-ui/src/Grid/Grid.test.js
@@ -1,17 +1,30 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  createShallow,
+  describeConformance,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import Grid from './Grid';
 
 describe('<Grid />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Grid />);
   });
 
+  describeConformance(<Grid />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render', () => {
     const wrapper = shallow(<Grid className="woofGrid" />);
     assert.strictEqual(wrapper.name(), 'div');
diff --git a/packages/material-ui/src/Input/Input.test.js b/packages/material-ui/src/Input/Input.test.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, findOutermostIntrinsic } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  describeConformance,
+  findOutermostIntrinsic,
+} from '@material-ui/core/test-utils';
 import Input from './Input';
 
 describe('<Input />', () => {
@@ -14,6 +18,12 @@ describe('<Input />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<Input />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render a <div />', () => {
     const wrapper = mount(<Input />);
     assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { spy } from 'sinon';
 import { assert } from 'chai';
-import { createMount, getClasses, testRef } from '@material-ui/core/test-utils';
+import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import Popover from '../Popover';
 import Menu from './Menu';
 import MenuList from '../MenuList';
@@ -11,13 +11,12 @@ const MENU_LIST_HEIGHT = 100;
 describe('<Menu />', () => {
   let classes;
   let mount;
-  let defaultProps;
+  const defaultProps = {
+    open: false,
+    anchorEl: () => document.createElement('div'),
+  };
 
   before(() => {
-    defaultProps = {
-      open: false,
-      anchorEl: document.createElement('div'),
-    };
     classes = getClasses(<Menu {...defaultProps} />);
     mount = createMount();
   });
@@ -26,9 +25,11 @@ describe('<Menu />', () => {
     mount.cleanUp();
   });
 
-  it('does forward refs', () => {
-    testRef(<Menu {...defaultProps} open />, mount);
-  });
+  describeConformance(<Menu {...defaultProps} open />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
 
   it('should render a Popover', () => {
     const wrapper = mount(<Menu {...defaultProps} />);
diff --git a/packages/material-ui/src/MenuList/MenuList.test.js b/packages/material-ui/src/MenuList/MenuList.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { stub } from 'sinon';
-import { createMount, testRef } from '@material-ui/core/test-utils';
+import { createMount, describeConformance } from '@material-ui/core/test-utils';
 import MenuList from './MenuList';
 import getScrollbarSize from '../utils/getScrollbarSize';
 
@@ -26,9 +26,11 @@ describe('<MenuList />', () => {
     mount.cleanUp();
   });
 
-  it('does forward refs', () => {
-    testRef(<MenuList />, mount);
-  });
+  describeConformance(<MenuList />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLUListElement,
+  }));
 
   describe('list node', () => {
     let wrapper;
diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js
@@ -1,8 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createShallow, createMount } from '@material-ui/core/test-utils';
-import MenuItem from '../MenuItem';
+import { createShallow, createMount, describeConformance } from '@material-ui/core/test-utils';
 import NativeSelectInput from './NativeSelectInput';
 
 describe('<NativeSelectInput />', () => {
@@ -13,15 +12,15 @@ describe('<NativeSelectInput />', () => {
     value: 10,
     IconComponent: 'div',
     children: [
-      <MenuItem key={1} value={10}>
+      <option key={1} value={10}>
         Ten
-      </MenuItem>,
-      <MenuItem key={2} value={20}>
+      </option>,
+      <option key={2} value={20}>
         Twenty
-      </MenuItem>,
-      <MenuItem key={3} value={30}>
+      </option>,
+      <option key={3} value={30}>
         Thirty
-      </MenuItem>,
+      </option>,
     ],
   };
 
@@ -34,6 +33,12 @@ describe('<NativeSelectInput />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<NativeSelectInput {...defaultProps} onChange={() => {}} />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLSelectElement,
+  }));
+
   it('should render a native select', () => {
     const wrapper = shallow(
       <NativeSelectInput {...defaultProps}>
diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js
@@ -1,6 +1,10 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, findOutermostIntrinsic } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  describeConformance,
+  findOutermostIntrinsic,
+} from '@material-ui/core/test-utils';
 import OutlinedInput from './OutlinedInput';
 import NotchedOutline from './NotchedOutline';
 
@@ -15,6 +19,12 @@ describe('<OutlinedInput />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<OutlinedInput labelWidth={0} />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render a <div />', () => {
     const wrapper = mount(<OutlinedInput labelWidth={0} />);
     assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import {
   createShallow,
   createMount,
+  describeConformance,
   findOutermostIntrinsic,
   getClasses,
 } from '@material-ui/core/test-utils';
@@ -18,7 +19,10 @@ describe('<Popover />', () => {
   let shallow;
   let mount;
   let classes;
-  let defaultProps;
+  const defaultProps = {
+    open: false,
+    anchorEl: () => document.createElement('div'),
+  };
 
   before(() => {
     shallow = createShallow({ dive: true });
@@ -28,16 +32,18 @@ describe('<Popover />', () => {
         <div />
       </Popover>,
     );
-    defaultProps = {
-      open: false,
-      anchorEl: document.createElement('div'),
-    };
   });
 
   after(() => {
     mount.cleanUp();
   });
 
+  describeConformance(<Popover {...defaultProps} open />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   describe('root node', () => {
     it('should render a Modal with an invisible backdrop as the root node', () => {
       const wrapper = mount(
diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js
@@ -1,7 +1,11 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createMount, findOutermostIntrinsic, testRef } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  describeConformance,
+  findOutermostIntrinsic,
+} from '@material-ui/core/test-utils';
 import FormGroup from '../FormGroup';
 import Radio from '../Radio';
 import RadioGroup from './RadioGroup';
@@ -22,9 +26,11 @@ describe('<RadioGroup />', () => {
     return wrapper.find(`input[value="${value}"]`).first();
   }
 
-  it('does forward refs', () => {
-    testRef(<RadioGroup />, mount);
-  });
+  describeConformance(<RadioGroup value="" />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
 
   it('should render a FormGroup with the radiogroup role', () => {
     const wrapper = mount(<RadioGroup value="" />);
diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
-import { getClasses, createMount } from '@material-ui/core/test-utils';
+import { getClasses, createMount, describeConformance } from '@material-ui/core/test-utils';
 import MenuItem from '../MenuItem';
 import Input from '../Input';
 import Select from './Select';
@@ -31,6 +31,12 @@ describe('<Select />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<Select {...defaultProps} />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
   it('should render a correct top element', () => {
     const wrapper = mount(<Select {...defaultProps} />);
     assert.strictEqual(wrapper.find(Input).exists(), true);
diff --git a/packages/material-ui/src/StepIcon/StepIcon.test.js b/packages/material-ui/src/StepIcon/StepIcon.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
-import { createShallow, createMount } from '@material-ui/core/test-utils';
+import { createShallow, createMount, describeConformance } from '@material-ui/core/test-utils';
 import StepIcon from './StepIcon';
 import SvgIcon from '../SvgIcon';
 
@@ -19,6 +19,12 @@ describe('<StepIcon />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(<StepIcon icon={1} />, () => ({
+    mount,
+    only: ['refForwarding'],
+    refInstanceof: window.SVGSVGElement,
+  }));
+
   it('renders <CheckCircle> when completed', () => {
     const wrapper = mount(<StepIcon icon={1} completed />);
     const checkCircle = wrapper.find(CheckCircle);
diff --git a/packages/material-ui/src/Switch/Switch.test.js b/packages/material-ui/src/Switch/Switch.test.js
diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js
diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js
