[test] Decouple root class from root component (mui#15168)

* [test] Add notion of outermost host to conformance * [test] Decouple root class from root component These are separate concepts in the docs. The root class is applied to the root component. Not the root component has the root class. There's probably a good analogy in relational databases to be found * [test] Use outermost for root class check * [Backdrop] Full conformance * [Fade] Test conformance * [Collapse] Test conformance * [Grid] Test full conformance * [FilledInput] Test full conformance * [Grow] Test conformance * [Input] Test conformance * [Menu] Test conformance * [MenuList] Test conformance * [NativeSelect] Test conformance * [Popover] Test conformance * [Popper] Test conformance * [RadioGroup] Test conformance * [Select] Test conformance * [Slide] Test conformance * [SwipeableDrawer] Test conformance * [Switch] Add notice about non-conformance * [TablePagination] Test conformance * [Zoom] Test conformance * [test] Fix failing conformance test in browser May be an enzyme bug. Can only find Transition by display name not constructor * [test] Clean up describeConformance comments
dugi-x · Apr 3, 2019 · 7c7645e · 7c7645e
1 parent 638ca64
commit 7c7645e
Show file tree

Hide file tree

Showing 22 changed files with 213 additions and 238 deletions.
diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/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', () => {

diff --git a/packages/material-ui/src/Collapse/Collapse.test.js b/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);
     });

diff --git a/packages/material-ui/src/Fade/Fade.test.js b/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', () => {

diff --git a/packages/material-ui/src/FilledInput/FilledInput.test.js b/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);
   });
 });
diff --git a/packages/material-ui/src/Grid/Grid.test.js b/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 />);

diff --git a/packages/material-ui/src/Grow/Grow.test.js b/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', () => {

diff --git a/packages/material-ui/src/Input/Input.test.js b/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');
-  });
 });
diff --git a/packages/material-ui/src/Menu/Menu.test.js b/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', () => {

diff --git a/packages/material-ui/src/MenuList/MenuList.test.js b/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(

diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/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} />);