diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js index 6abd4f5d2cc293..767318ca3f619c 100644 --- 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('', () => { let mount; @@ -24,9 +25,11 @@ describe('', () => { }); describeConformance(, () => ({ + 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 index ee0d2da39825ef..5d3aeb89575cb0 100644 --- 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('', () => { + let mount; let shallow; let classes; const props = { @@ -14,15 +21,23 @@ describe('', () => { }; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); }); - it('should render a Transition', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'Transition'); + after(() => { + mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: 'Transition', + mount, + skip: ['refForwarding'], + testComponentPropWith: false, + })); + it('should render a container around the wrapper', () => { const wrapper = shallow(); const child = new ReactWrapper(wrapper.props().children('entered')); @@ -364,19 +379,13 @@ describe('', () => { }); describe('mount', () => { - let mount; let mountInstance; before(() => { - mount = createMount(); const CollapseNaked = unwrap(Collapse); mountInstance = mount().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 index d8163ac314814f..164eae2ea60ed0 100644 --- 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('', () => { @@ -20,10 +20,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a Transition', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find('Transition').exists(), true); - }); + describeConformance(, () => ({ + 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 index 3a6e50e62ba474..0bf2c07eed6761 100644 --- 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('', () => { let classes; @@ -21,24 +22,23 @@ describe('', () => { mount.cleanUp(); }); - describeConformance(, () => ({ + describeConformance(, () => ({ + classes, + inheritComponent: InputBase, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); - it('should render a
', () => { + it('should have the underline class', () => { const wrapper = mount(); 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(); 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 index 07f13177f063af..46cba8e9aa94dc 100644 --- a/packages/material-ui/src/Grid/Grid.test.js +++ b/packages/material-ui/src/Grid/Grid.test.js @@ -19,6 +19,10 @@ describe('', () => { classes = getClasses(); }); + after(() => { + mount.cleanUp(); + }); + describeConformance(, () => ({ classes, inheritComponent: 'div', @@ -27,12 +31,6 @@ describe('', () => { testComponentPropWith: 'span', })); - it('should render', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'div'); - assert.strictEqual(wrapper.hasClass('woofGrid'), true); - }); - describe('prop: container', () => { it('should apply the container class', () => { const wrapper = shallow(); @@ -47,13 +45,6 @@ describe('', () => { }); }); - describe('prop: component', () => { - it('should change the component', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'span'); - }); - }); - describe('prop: xs', () => { it('should apply the flex-grow class', () => { const wrapper = shallow(); diff --git a/packages/material-ui/src/Grow/Grow.test.js b/packages/material-ui/src/Grow/Grow.test.js index 65e84ed3248196..e8aef2caf69f11 100644 --- 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('', () => { mount.cleanUp(); }); - it('should render a Transition', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find('Transition').exists(), true); - }); + describeConformance( + +
+ , + () => ({ + 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 index 5a2be386aeaca3..d91d1db1435e9c 100644 --- 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('', () => { + let classes; let mount; before(() => { + classes = getClasses(); mount = createMount(); }); @@ -19,13 +17,10 @@ describe('', () => { }); describeConformance(, () => ({ + classes, + inheritComponent: InputBase, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); - - it('should render a
', () => { - const wrapper = mount(); - 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 index 65ad22fedefee7..38e1f5aee347c3 100644 --- a/packages/material-ui/src/Menu/Menu.test.js +++ b/packages/material-ui/src/Menu/Menu.test.js @@ -26,16 +26,13 @@ describe('', () => { }); describeConformance(, () => ({ + classes, + inheritComponent: Popover, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); - it('should render a Popover', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find(Popover).exists(), true); - }); - describe('event callbacks', () => { describe('entering', () => { it('should fire callbacks', done => { @@ -144,14 +141,6 @@ describe('', () => { 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 index c355dc50e5e5f1..8739ac988a4eda 100644 --- 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('', () => { }); describeConformance(, () => ({ + classes: {}, + inheritComponent: List, mount, - only: ['refForwarding'], refInstanceof: window.HTMLUListElement, + testComponentPropWith: false, })); - describe('list node', () => { - let wrapper; - - before(() => { - wrapper = mount(); - }); - - 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 index 79cb127a2d8935..11ad0be96b9b81 100644 --- 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('', () => { mount.cleanUp(); }); - it('should render a correct top element', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find(Input).exists(), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: Input, + mount, + refInstanceof: window.HTMLDivElement, + skip: ['rootClass'], + testComponentPropWith: false, + })); it('should provide the classes to the input component', () => { const wrapper = mount(); diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js index 9ec17e1b7cdfae..9dfecc9720f67c 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.test.js @@ -1,17 +1,16 @@ 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 OutlinedInput from './OutlinedInput'; import NotchedOutline from './NotchedOutline'; +import InputBase from '../InputBase'; describe('', () => { + let classes; let mount; before(() => { + classes = getClasses(); mount = createMount(); }); @@ -20,17 +19,14 @@ describe('', () => { }); describeConformance(, () => ({ + classes, + inheritComponent: InputBase, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); - it('should render a
', () => { - const wrapper = mount(); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div'); - }); - - it('should mount', () => { + it('should render a NotchedOutline', () => { const wrapper = mount(); assert.strictEqual(wrapper.find(NotchedOutline).length, 1); }); diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js index 70054c15404145..34437881058d2c 100644 --- a/packages/material-ui/src/Popover/Popover.test.js +++ b/packages/material-ui/src/Popover/Popover.test.js @@ -39,9 +39,11 @@ describe('', () => { }); describeConformance(, () => ({ + classes, + inheritComponent: Modal, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); describe('root node', () => { diff --git a/packages/material-ui/src/Popper/Popper.test.js b/packages/material-ui/src/Popper/Popper.test.js index 094c7a2d771f2c..416fee35c051db 100644 --- a/packages/material-ui/src/Popper/Popper.test.js +++ b/packages/material-ui/src/Popper/Popper.test.js @@ -2,7 +2,7 @@ import React from 'react'; import { assert } from 'chai'; import { spy } from 'sinon'; import PropTypes from 'prop-types'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { createShallow, createMount, describeConformance } from '@material-ui/core/test-utils'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import Grow from '../Grow'; import Popper from './Popper'; @@ -10,31 +10,28 @@ import Popper from './Popper'; describe('', () => { let shallow; let mount; - let anchorEl; - let defaultProps; + const defaultProps = { + anchorEl: () => window.document.createElement('div'), + children: Hello World, + open: true, + }; before(() => { - anchorEl = window.document.createElement('div'); - window.document.body.appendChild(anchorEl); shallow = createShallow(); mount = createMount(); - defaultProps = { - anchorEl, - children: Hello World, - open: true, - }; }); after(() => { mount.cleanUp(); - window.document.body.removeChild(anchorEl); }); - it('should render the correct structure', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'Portal'); - assert.strictEqual(wrapper.childAt(0).name(), 'div'); - }); + describeConformance(, () => ({ + classes: {}, + inheritComponent: 'div', + mount, + refInstanceof: React.Component, + testComponentPropWith: false, + })); describe('prop: placement', () => { before(() => { diff --git a/packages/material-ui/src/RadioGroup/RadioGroup.test.js b/packages/material-ui/src/RadioGroup/RadioGroup.test.js index 7be00c2e405cc9..9bfd225e7fe87d 100644 --- a/packages/material-ui/src/RadioGroup/RadioGroup.test.js +++ b/packages/material-ui/src/RadioGroup/RadioGroup.test.js @@ -27,14 +27,15 @@ describe('', () => { } describeConformance(, () => ({ + classes: {}, + inheritComponent: FormGroup, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, })); - it('should render a FormGroup with the radiogroup role', () => { + it('the root component has the radiogroup role', () => { const wrapper = mount(); - assert.strictEqual(wrapper.childAt(0).type(), FormGroup); assert.strictEqual(findOutermostIntrinsic(wrapper).props().role, 'radiogroup'); }); diff --git a/packages/material-ui/src/Select/Select.test.js b/packages/material-ui/src/Select/Select.test.js index cd6fd8390ddf40..17608bc755f517 100644 --- a/packages/material-ui/src/Select/Select.test.js +++ b/packages/material-ui/src/Select/Select.test.js @@ -32,16 +32,14 @@ describe(', () => ({ + classes, + inheritComponent: Input, mount, - only: ['refForwarding'], refInstanceof: window.HTMLDivElement, + skip: ['rootClass'], + testComponentPropWith: false, })); - it('should render a correct top element', () => { - const wrapper = mount(); assert.deepEqual(wrapper.find(Input).props().inputProps.classes, classes); diff --git a/packages/material-ui/src/Slide/Slide.test.js b/packages/material-ui/src/Slide/Slide.test.js index 17506074890635..65f415ebb7d16a 100644 --- a/packages/material-ui/src/Slide/Slide.test.js +++ b/packages/material-ui/src/Slide/Slide.test.js @@ -1,7 +1,12 @@ import React from 'react'; import { assert } from 'chai'; import { spy, useFakeTimers } from 'sinon'; -import { createShallow, createMount, unwrap } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + unwrap, +} from '@material-ui/core/test-utils'; import Slide, { setTranslateValue } from './Slide'; import transitions, { easing } from '../styles/transitions'; import createMuiTheme from '../styles/createMuiTheme'; @@ -25,11 +30,18 @@ describe('', () => { mount.cleanUp(); }); - it('should render a Transition', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'EventListener'); - assert.strictEqual(wrapper.childAt(0).name(), 'Transition'); - }); + describeConformance( + +
+ , + () => ({ + classes: {}, + inheritComponent: 'Transition', + mount, + refInstanceof: React.Component, + testComponentPropWith: false, + }), + ); it('should not override children styles', () => { const wrapper = mount( diff --git a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js index cb3dfb5c625d50..3c20147c9231e3 100644 --- a/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js +++ b/packages/material-ui/src/SwipeableDrawer/SwipeableDrawer.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import { spy, stub } from 'sinon'; -import { createMount, unwrap } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, unwrap } from '@material-ui/core/test-utils'; import Drawer from '../Drawer'; import SwipeableDrawer, { reset } from './SwipeableDrawer'; import SwipeArea from './SwipeArea'; @@ -58,6 +58,14 @@ describe('', () => { mount.cleanUp(); }); + describeConformance( {}} onClose={() => {}} open />, () => ({ + classes: {}, + inheritComponent: Drawer, + mount, + refInstanceof: React.Component, + testComponentPropWith: false, + })); + it('should render a Drawer and a SwipeArea', () => { const wrapper = mount( ', () => { refInstanceof: window.HTMLSpanElement, })); + /* TODO Switch violates root component + describeConformance(, () => ({ + classes, + inheritComponent: IconButton, + mount, + refInstanceof: window.HTMLSpanElement, + testComponentPropWith: false, + })); */ + describe('styleSheet', () => { it('should have the classes required for SwitchBase', () => { assert.strictEqual(typeof classes.root, 'string'); @@ -46,12 +55,6 @@ describe('', () => { wrapper = shallow(); }); - it('should render a span with the root and user classes', () => { - assert.strictEqual(wrapper.name(), 'span'); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.hasClass('foo'), true); - }); - it('should render SwitchBase with a custom span icon with the thumb class', () => { const switchBase = wrapper.childAt(0); assert.strictEqual(switchBase.type(), SwitchBase); diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js index 03b90f2b3710ec..1f1e64f7cf6260 100644 --- a/packages/material-ui/src/TableHead/TableHead.test.js +++ b/packages/material-ui/src/TableHead/TableHead.test.js @@ -9,7 +9,7 @@ describe('', () => { let classes; function mountInTable(node) { const wrapper = mount({node}
); - return wrapper.find('table'); + return wrapper.find('table').childAt(0); } before(() => { diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index 3116c5ec04fcec..af52d568402b86 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -1,13 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import PropTypes from 'prop-types'; -import { - createShallow, - createMount, - describeConformance, - findOutermostIntrinsic, - getClasses, -} from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import Select from '../Select'; import IconButton from '../IconButton'; @@ -20,7 +14,6 @@ import TablePagination from './TablePagination'; describe('', () => { const noop = () => {}; let classes; - let shallow; let mount; function mountInTable(node) { @@ -38,7 +31,6 @@ describe('', () => { classes = getClasses( {}} page={0} rowsPerPage={1} />, ); - shallow = createShallow({ dive: true }); mount = createMount(); }); @@ -49,86 +41,15 @@ describe('', () => { describeConformance( {}} page={0} rowsPerPage={1} />, () => ({ + classes, + inheritComponent: TableCell, mount: mountInTable, - only: ['refForwarding'], refInstanceof: window.HTMLTableCellElement, + // can only use `td` in a tr so we just fake a different component + testComponentPropWith: props => , }), ); - it('should render a TableCell', () => { - const wrapper = mount( - - - - - - -
, - ); - assert.strictEqual(wrapper.find(TableCell).hasClass(classes.root), true); - }); - - it('should spread custom props on the root node', () => { - const wrapper = shallow( - , - ); - assert.strictEqual( - wrapper.props()['data-my-prop'], - 'woofTablePagination', - 'custom prop should be woofTablePagination', - ); - }); - - describe('prop: component', () => { - it('should render a TableCell by default', () => { - const wrapper = mount( - - - - - - -
, - ); - assert.strictEqual(wrapper.find(TableCell).hasClass(classes.root), true); - assert.notStrictEqual(wrapper.find('td').props().colSpan, undefined); - }); - - it('should be able to use outside of the table', () => { - const wrapper = mount( - , - ); - assert.strictEqual(findOutermostIntrinsic(wrapper).name(), 'div'); - assert.strictEqual(wrapper.props().colSpan, undefined); - }); - }); - describe('mount', () => { it('should use the labelDisplayedRows callback', () => { let labelDisplayedRowsCalled = false; diff --git a/packages/material-ui/src/Zoom/Zoom.test.js b/packages/material-ui/src/Zoom/Zoom.test.js index d84f4cb7f3a96b..877751f25fe981 100644 --- a/packages/material-ui/src/Zoom/Zoom.test.js +++ b/packages/material-ui/src/Zoom/Zoom.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 Zoom from './Zoom'; describe('', () => { @@ -19,10 +19,18 @@ describe('', () => { mount.cleanUp(); }); - it('should render a Transition', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find('Transition').exists(), true); - }); + describeConformance( + +
+ , + () => ({ + classes: {}, + inheritComponent: 'Transition', + mount, + skip: ['refForwarding'], + testComponentPropWith: false, + }), + ); describe('event callbacks', () => { describe('entering', () => { diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 0366cf28134189..0d1c71e596ac79 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,21 +1,31 @@ import { assert } from 'chai'; import React from 'react'; +import findOutermostIntrinsic from './findOutermostIntrinsic'; import testRef from './testRef'; /** * Glossary * - root component: - * - has the `root` class + * - renders the outermost host component + * - has the `root` class if the component has one * - excess props are spread to this component * - has the type of `inheritComponent` */ -function findRootComponent(wrapper, { classes, component }) { - /** - * We look for the component that is `inheritComponent` and `.rootClassName` - * Using find().find().first() is not equivalent since `find` searches deep - */ - return wrapper.find(component).filter(`.${classes.root}`); +/** + * Returns the component with the same constructor as `component` that renders + * the outermost host + * + * @param {import('enzyme').ReactWrapper} wrapper + * @param {object} options + * @param {import('react').ElementType} component + */ +function findRootComponent(wrapper, { component }) { + const outermostHostElement = findOutermostIntrinsic(wrapper).getElement(); + + return wrapper.find(component).filterWhere(componentWrapper => { + return componentWrapper.contains(outermostHostElement); + }); } function randomStringValue() { @@ -33,13 +43,16 @@ function randomStringValue() { */ function testClassName(element, getOptions) { it('applies the className to the root component', () => { - const { classes, inheritComponent, mount } = getOptions(); + const { mount } = getOptions(); const className = randomStringValue(); const wrapper = mount(React.cloneElement(element, { className })); - const root = findRootComponent(wrapper, { classes, component: inheritComponent }); - assert.strictEqual(root.hasClass(className), true, 'does have a custom `className`'); + assert.strictEqual( + findOutermostIntrinsic(wrapper).hasClass(className), + true, + 'does have a custom `className`', + ); }); } @@ -107,11 +120,35 @@ function describeRef(element, getOptions) { }); } +/** + * Tests that the root component has the root class + * + * @param {React.ReactElement} element + * @param {() => ConformanceOptions} getOptions + */ +function testRootClass(element, getOptions) { + it('applies to root class to the root component if it has this class', () => { + const { classes, mount } = getOptions(); + if (classes.root == null) { + return; + } + + const wrapper = mount(element); + + // we established that the root component renders the outermost host previously. We immediately + // jump to the host component because some components pass the `root` class + // to the `classes` prop of the root component. + // https://github.com/mui-org/material-ui/blob/f9896bcd129a1209153106296b3d2487547ba205/packages/material-ui/src/OutlinedInput/OutlinedInput.js#L101 + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); + }); +} + const fullSuite = { - class: testClassName, componentProp: testComponentProp, + mergeClassName: testClassName, propsSpread: testPropsSpread, refForwarding: describeRef, + rootClass: testRootClass, }; /**