[test] Add conformance suite

packages/material-ui-lab/src/ToggleButton/ToggleButton.test.js

@@ -22,6 +22,10 @@ describe('<ToggleButton />', () => {
     classes = getClasses(<ToggleButton value="classes">Hello World</ToggleButton>);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   it('does forward refs', () => {
     testRef(<ToggleButton value="classes">Hello World</ToggleButton>, mount);
   });

packages/material-ui-lab/src/ToggleButtonGroup/ToggleButtonGroup.test.js

@@ -23,6 +23,10 @@ describe('<ToggleButtonGroup />', () => {
     );
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
   function findToggleButton(wrapper, value) {
     return wrapper
       .find(ToggleButton)

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

@@ -1,36 +1,44 @@
 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 AppBar from './AppBar';
+import Paper from '../Paper';
 
 describe('<AppBar />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<AppBar>Hello World</AppBar>);
   });
 
-  it('should render a Paper component', () => {
-    const wrapper = shallow(<AppBar>Hello World</AppBar>);
-    assert.strictEqual(wrapper.props().elevation, 4);
+  after(() => {
+    mount.cleanUp();
   });
 
+  describeConformance(<AppBar>Conformance?</AppBar>, () => ({
+    classes,
+    inheritComponent: Paper,
+    mount,
+    refInstanceof: window.HTMLElement,
+    testComponentPropWith: false,
+  }));
+
   it('should render with the root class and primary', () => {
     const wrapper = shallow(<AppBar>Hello World</AppBar>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
     assert.strictEqual(wrapper.hasClass(classes.colorSecondary), false);
   });
 
-  it('should render the custom className and the appBar class', () => {
-    const wrapper = shallow(<AppBar className="test-class-name">Hello World</AppBar>);
-    assert.strictEqual(wrapper.is('.test-class-name'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-    assert.strictEqual(wrapper.hasClass(classes.colorPrimary), true);
-  });
-
   it('should render a primary app bar', () => {
     const wrapper = shallow(<AppBar color="primary">Hello World</AppBar>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);

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

@@ -1,18 +1,37 @@
 import React from 'react';
 import { assert } from 'chai';
 import CancelIcon from '../internal/svg-icons/Cancel';
-import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  createShallow,
+  describeConformance,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import Avatar from './Avatar';
 
 describe('<Avatar />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Avatar />);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
+  describeConformance(<Avatar />, () => ({
+    classes,
+    inheritComponent: 'div',
+    mount,
+    refInstanceof: window.HTMLDivElement,
+    testComponentPropWith: 'span',
+  }));
+
   describe('image avatar', () => {
     it('should render a div containing an img', () => {
       const wrapper = shallow(

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

@@ -1,17 +1,41 @@
 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 Badge from './Badge';
 
 describe('<Badge />', () => {
+  let mount;
   let shallow;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     classes = getClasses(<Badge badgeContent={1}>Hello World</Badge>);
   });
 
+  after(() => {
+    mount.cleanUp();
+  });
+
+  describeConformance(
+    <Badge>
+      <div />
+    </Badge>,
+    () => ({
+      classes,
+      inheritComponent: 'span',
+      mount,
+      refInstanceof: window.HTMLSpanElement,
+      testComponentPropWith: 'div',
+    }),
+  );
+
   const testChildren = <div className="unique">Hello World</div>;
 
   it('renders children and badgeContent', () => {

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils';
+import {
+  createShallow,
+  createMount,
+  describeConformance,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import BottomNavigationAction from '../BottomNavigationAction';
 import Icon from '../Icon';
 import BottomNavigation from './BottomNavigation';
@@ -26,6 +31,19 @@ describe('<BottomNavigation />', () => {
     mount.cleanUp();
   });
 
+  describeConformance(
+    <BottomNavigation>
+      <BottomNavigationAction label="One" />
+    </BottomNavigation>,
+    () => ({
+      classes,
+      inheritComponent: 'div',
+      mount,
+      refInstanceof: window.HTMLDivElement,
+      testComponentPropWith: 'span',
+    }),
+  );
+
   it('renders with a null child', () => {
     const wrapper = shallow(
       <BottomNavigation showLabels value={0}>
@@ -37,26 +55,6 @@ describe('<BottomNavigation />', () => {
     assert.strictEqual(wrapper.find(BottomNavigationAction).length, 2);
   });
 
-  it('should render with the root class', () => {
-    const wrapper = shallow(
-      <BottomNavigation showLabels value={0}>
-        <BottomNavigationAction icon={icon} />
-      </BottomNavigation>,
-    );
-    assert.strictEqual(wrapper.name(), 'div');
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-  });
-
-  it('should render with the user and root classes', () => {
-    const wrapper = shallow(
-      <BottomNavigation showLabels value={0} className="woofBottomNavigation">
-        <BottomNavigationAction icon={icon} />
-      </BottomNavigation>,
-    );
-    assert.strictEqual(wrapper.hasClass('woofBottomNavigation'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-  });
-
   it('should pass selected prop to children', () => {
     const wrapper = shallow(
       <BottomNavigation showLabels value={1}>

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

@@ -1,7 +1,12 @@
 import React from 'react';
 import { assert } from 'chai';
 import { spy } from 'sinon';
-import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  describeConformance,
+  findOutermostIntrinsic,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import ButtonBase from '../ButtonBase';
 import Icon from '../Icon';
 import BottomNavigationAction from './BottomNavigationAction';
@@ -16,21 +21,17 @@ describe('<BottomNavigationAction />', () => {
     classes = getClasses(<BottomNavigationAction />);
   });
 
-  it('should render a ButtonBase', () => {
-    const wrapper = mount(<BottomNavigationAction icon={icon} />);
-    const root = wrapper.find(`.${classes.root}`).first();
-    assert.strictEqual(root.exists(), true);
-    assert.strictEqual(root.type(), ButtonBase);
+  after(() => {
+    mount.cleanUp();
   });
 
-  it('should render with the user and root classes', () => {
-    const wrapper = mount(
-      <BottomNavigationAction className="woofBottomNavigationAction" icon={icon} />,
-    );
-    const root = wrapper.find(`.${classes.root}.woofBottomNavigationAction`).first();
-    assert.strictEqual(root.exists(), true);
-    assert.strictEqual(root.hasClass('woofBottomNavigationAction'), true);
-  });
+  describeConformance(<BottomNavigationAction />, () => ({
+    classes,
+    inheritComponent: ButtonBase,
+    mount,
+    refInstanceof: window.HTMLButtonElement,
+    testComponentPropWith: false,
+  }));
 
   it('should render with the selected and root classes', () => {
     const wrapper = mount(<BottomNavigationAction icon={icon} selected />);

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createMount, getClasses, findOutermostIntrinsic } from '@material-ui/core/test-utils';
+import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils';
 import Breadcrumbs from './Breadcrumbs';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
@@ -23,33 +23,13 @@ describe('<Breadcrumbs />', () => {
     mount.cleanUp();
   });
 
-  it('should render a <nav> element', () => {
-    const wrapper = mount(
-      <Breadcrumbs>
-        <span>Hello World</span>
-      </Breadcrumbs>,
-    );
-    assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'nav');
-  });
-
-  it('should render the root class', () => {
-    const wrapper = mount(
-      <Breadcrumbs className="test-class-name">
-        <span>Hello World</span>
-      </Breadcrumbs>,
-    );
-    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true);
-  });
-
-  it('should render the custom className and the root class', () => {
-    const wrapper = mount(
-      <Breadcrumbs className="test-class-name">
-        <span>Hello World</span>
-      </Breadcrumbs>,
-    );
-    assert.strictEqual(findOutermostIntrinsic(wrapper).is('.test-class-name'), true);
-    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true);
-  });
+  describeConformance(<Breadcrumbs>Conformance?</Breadcrumbs>, () => ({
+    classes,
+    inheritComponent: 'nav',
+    mount,
+    refInstanceof: window.HTMLElement,
+    testComponentPropWith: 'div',
+  }));
 
   it('should render seperators', () => {
     const wrapper = mount(

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

@@ -1,27 +1,41 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow, createRender, getClasses } from '@material-ui/core/test-utils';
+import {
+  createMount,
+  createShallow,
+  createRender,
+  describeConformance,
+  getClasses,
+} from '@material-ui/core/test-utils';
 import Button from './Button';
 import ButtonBase from '../ButtonBase';
 import Icon from '../Icon';
 
 describe('<Button />', () => {
+  let mount;
   let shallow;
   let render;
   let classes;
 
   before(() => {
+    mount = createMount();
     shallow = createShallow({ dive: true });
     render = createRender();
     classes = getClasses(<Button>Hello World</Button>);
   });
 
-  it('should render a <ButtonBase> element', () => {
-    const wrapper = shallow(<Button>Hello World</Button>);
-    assert.strictEqual(wrapper.type(), ButtonBase);
-    assert.strictEqual(wrapper.props().type, 'button');
+  after(() => {
+    mount.cleanUp();
   });
 
+  describeConformance(<Button>Conformance?</Button>, () => ({
+    classes,
+    inheritComponent: ButtonBase,
+    mount,
+    refInstanceof: window.HTMLButtonElement,
+    testComponentPropWith: false,
+  }));
+
   it('should render with the root & text classes but no others', () => {
     const wrapper = shallow(<Button>Hello World</Button>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);
@@ -38,12 +52,6 @@ describe('<Button />', () => {
     assert.strictEqual(wrapper.hasClass(classes.sizeLarge), false);
   });
 
-  it('should render the custom className and the root class', () => {
-    const wrapper = shallow(<Button className="test-class-name">Hello World</Button>);
-    assert.strictEqual(wrapper.is('.test-class-name'), true);
-    assert.strictEqual(wrapper.hasClass(classes.root), true);
-  });
-
   it('should render a text primary button', () => {
     const wrapper = shallow(<Button color="primary">Hello World</Button>);
     assert.strictEqual(wrapper.hasClass(classes.root), true);