[test] Decouple root class from root component

packages/material-ui/src/Backdrop/Backdrop.test.js

@@ -7,6 +7,7 @@ import {
   getClasses,
 } from '@material-ui/core/test-utils';
 import Backdrop from './Backdrop';
+import Fade from '../Fade';
 
 describe('<Backdrop />', () => {
   let mount;
@@ -24,9 +25,11 @@ describe('<Backdrop />', () => {
   });
 
   describeConformance(<Backdrop open />, () => ({
+    classes,
+    inheritComponent: Fade,
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: false,
   }));
 
   it('should render a backdrop div', () => {

packages/material-ui/src/Collapse/Collapse.test.js

@@ -2,10 +2,17 @@ import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import { assert } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
-import { createShallow, createMount, getClasses, unwrap } from '@material-ui/core/test-utils';
+import {
+  createShallow,
+  createMount,
+  describeConformance,
+  getClasses,
+  unwrap,
+} from '@material-ui/core/test-utils';
 import Collapse from './Collapse';
 
 describe('<Collapse />', () => {
+  let mount;
   let shallow;
   let classes;
   const props = {
@@ -14,15 +21,23 @@ describe('<Collapse />', () => {
   };
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Collapse {...props} />);
   });
 
-  it('should render a Transition', () => {
-    const wrapper = shallow(<Collapse {...props} />);
-    assert.strictEqual(wrapper.name(), 'Transition');
+  after(() => {
+    mount.cleanUp();
   });
 
+  describeConformance(<Collapse {...props} />, () => ({
+    classes,
+    inheritComponent: 'Transition',
+    mount,
+    skip: ['refForwarding'],
+    testComponentPropWith: false,
+  }));
+
   it('should render a container around the wrapper', () => {
     const wrapper = shallow(<Collapse {...props} classes={{ container: 'woofCollapse1' }} />);
     const child = new ReactWrapper(wrapper.props().children('entered'));
@@ -364,19 +379,13 @@ describe('<Collapse />', () => {
   });
 
   describe('mount', () => {
-    let mount;
     let mountInstance;
 
     before(() => {
-      mount = createMount();
       const CollapseNaked = unwrap(Collapse);
       mountInstance = mount(<CollapseNaked classes={{}} theme={{}} />).instance();
     });
 
-    after(() => {
-      mount.cleanUp();
-    });
-
     it('instance should have a wrapper property', () => {
       assert.notStrictEqual(mountInstance.wrapperRef, undefined);
     });

packages/material-ui/src/Fade/Fade.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createMount } from '@material-ui/core/test-utils';
+import { createMount, describeConformance } from '@material-ui/core/test-utils';
 import Fade from './Fade';
 
 describe('<Fade />', () => {
@@ -20,10 +20,13 @@ describe('<Fade />', () => {
     mount.cleanUp();
   });
 
-  it('should render a Transition', () => {
-    const wrapper = mount(<Fade {...defaultProps} />);
-    assert.strictEqual(wrapper.find('Transition').exists(), true);
-  });
+  describeConformance(<Fade {...defaultProps} />, () => ({
+    classes: {},
+    inheritComponent: 'Transition',
+    mount,
+    skip: ['refForwarding'],
+    testComponentPropWith: false,
+  }));
 
   describe('event callbacks', () => {
     describe('entering', () => {

packages/material-ui/src/FilledInput/FilledInput.test.js

@@ -7,6 +7,7 @@ import {
   getClasses,
 } from '@material-ui/core/test-utils';
 import FilledInput from './FilledInput';
+import InputBase from '../InputBase';
 
 describe('<FilledInput />', () => {
   let classes;
@@ -21,24 +22,23 @@ describe('<FilledInput />', () => {
     mount.cleanUp();
   });
 
-  describeConformance(<FilledInput />, () => ({
+  describeConformance(<FilledInput open />, () => ({
+    classes,
+    inheritComponent: InputBase,
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: false,
   }));
 
-  it('should render a <div />', () => {
+  it('should have the underline class', () => {
     const wrapper = mount(<FilledInput />);
     const root = findOutermostIntrinsic(wrapper);
-    assert.strictEqual(root.type(), 'div');
-    assert.strictEqual(root.hasClass(classes.root), true);
     assert.strictEqual(root.hasClass(classes.underline), true);
   });
 
-  it('should disable the underline', () => {
+  it('can disable the underline', () => {
     const wrapper = mount(<FilledInput disableUnderline />);
     const root = findOutermostIntrinsic(wrapper);
-    assert.strictEqual(root.hasClass(classes.root), true);
     assert.strictEqual(root.hasClass(classes.underline), false);
   });
 });

packages/material-ui/src/Grid/Grid.test.js

@@ -19,6 +19,10 @@ describe('<Grid />', () => {
     classes = getClasses(<Grid />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   describeConformance(<Grid />, () => ({
     classes,
     inheritComponent: 'div',
@@ -27,12 +31,6 @@ describe('<Grid />', () => {
     testComponentPropWith: 'span',
   }));
 
-  it('should render', () => {
-    const wrapper = shallow(<Grid className="woofGrid" />);
-    assert.strictEqual(wrapper.name(), 'div');
-    assert.strictEqual(wrapper.hasClass('woofGrid'), true);
-  });
-
   describe('prop: container', () => {
     it('should apply the container class', () => {
       const wrapper = shallow(<Grid container />);
@@ -47,13 +45,6 @@ describe('<Grid />', () => {
     });
   });
 
-  describe('prop: component', () => {
-    it('should change the component', () => {
-      const wrapper = shallow(<Grid component="span" />);
-      assert.strictEqual(wrapper.name(), 'span');
-    });
-  });
-
   describe('prop: xs', () => {
     it('should apply the flex-grow class', () => {
       const wrapper = shallow(<Grid item xs />);

packages/material-ui/src/Grow/Grow.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy, stub, useFakeTimers } from 'sinon';
-import { createMount } from '@material-ui/core/test-utils';
+import { createMount, describeConformance } from '@material-ui/core/test-utils';
 import Grow from './Grow';
 import { createMuiTheme } from '@material-ui/core/styles';
 
@@ -20,10 +20,18 @@ describe('<Grow />', () => {
     mount.cleanUp();
   });
 
-  it('should render a Transition', () => {
-    const wrapper = mount(<Grow {...defaultProps} />);
-    assert.strictEqual(wrapper.find('Transition').exists(), true);
-  });
+  describeConformance(
+    <Grow in>
+      <div />
+    </Grow>,
+    () => ({
+      classes: {},
+      inheritComponent: 'Transition',
+      mount,
+      skip: ['refForwarding'],
+      testComponentPropWith: false,
+    }),
+  );
 
   describe('event callbacks', () => {
     describe('entering', () => {

packages/material-ui/src/Input/Input.test.js

@@ -1,16 +1,14 @@
 import React from 'react';
-import { assert } from 'chai';
-import {
-  createMount,
-  describeConformance,
-  findOutermostIntrinsic,
-} from '@material-ui/core/test-utils';
+import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import Input from './Input';
+import InputBase from '../InputBase';
 
 describe('<Input />', () => {
+  let classes;
   let mount;
 
   before(() => {
+    classes = getClasses(<Input />);
     mount = createMount();
   });
 
@@ -19,13 +17,10 @@ describe('<Input />', () => {
   });
 
   describeConformance(<Input />, () => ({
+    classes,
+    inheritComponent: InputBase,
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: false,
   }));
-
-  it('should render a <div />', () => {
-    const wrapper = mount(<Input />);
-    assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div');
-  });
 });

packages/material-ui/src/Menu/Menu.test.js

@@ -26,16 +26,13 @@ describe('<Menu />', () => {
   });
 
   describeConformance(<Menu {...defaultProps} open />, () => ({
+    classes,
+    inheritComponent: Popover,
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: false,
   }));
 
-  it('should render a Popover', () => {
-    const wrapper = mount(<Menu {...defaultProps} />);
-    assert.strictEqual(wrapper.find(Popover).exists(), true);
-  });
-
   describe('event callbacks', () => {
     describe('entering', () => {
       it('should fire callbacks', done => {
@@ -144,14 +141,6 @@ describe('<Menu />', () => {
         true,
       );
     });
-
-    it('should spread other props on the Popover', () => {
-      assert.strictEqual(wrapper.find(Popover).props()['data-test'], 'hi');
-    });
-
-    it('should have the user classes', () => {
-      assert.strictEqual(wrapper.find(Popover).hasClass('test-class'), true);
-    });
   });
 
   it('should open during the initial mount', () => {

packages/material-ui/src/MenuList/MenuList.test.js

@@ -4,6 +4,7 @@ import { stub } from 'sinon';
 import { createMount, describeConformance } from '@material-ui/core/test-utils';
 import MenuList from './MenuList';
 import getScrollbarSize from '../utils/getScrollbarSize';
+import List from '../List';
 
 function setStyleWidthForJsdomOrBrowser(style, width) {
   style.width = '';
@@ -27,24 +28,13 @@ describe('<MenuList />', () => {
   });
 
   describeConformance(<MenuList />, () => ({
+    classes: {},
+    inheritComponent: List,
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.HTMLUListElement,
+    testComponentPropWith: false,
   }));
 
-  describe('list node', () => {
-    let wrapper;
-
-    before(() => {
-      wrapper = mount(<MenuList className="test-class" data-test="hi" />);
-    });
-
-    it('should render a List', () => {
-      assert.strictEqual(wrapper.props()['data-test'], 'hi');
-      assert.strictEqual(wrapper.hasClass('test-class'), true);
-    });
-  });
-
   describe('prop: children', () => {
     it('should support invalid children', () => {
       const wrapper = mount(

packages/material-ui/src/NativeSelect/NativeSelect.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 Input from '../Input';
 import NativeSelect from './NativeSelect';
 
@@ -28,10 +28,14 @@ describe('<NativeSelect />', () => {
     mount.cleanUp();
   });
 
-  it('should render a correct top element', () => {
-    const wrapper = mount(<NativeSelect {...props} />);
-    assert.strictEqual(wrapper.find(Input).exists(), true);
-  });
+  describeConformance(<NativeSelect {...props} />, () => ({
+    classes,
+    inheritComponent: Input,
+    mount,
+    refInstanceof: window.HTMLDivElement,
+    skip: ['rootClass'],
+    testComponentPropWith: false,
+  }));
 
   it('should provide the classes to the input component', () => {
     const wrapper = mount(<NativeSelect {...props} />);