From 6c806ff82c29629483ad8981c1096ed7d3bd5e42 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 23 Nov 2018 13:13:04 +0100 Subject: [PATCH 01/96] [test] Add conformance test suite Tests that a component implements a common interface across all material-ui components. --- .../src/Typography/Typography.test.js | 32 +++++--- .../src/test-utils/describeConformance.js | 82 +++++++++++++++++++ packages/material-ui/src/test-utils/index.js | 1 + 3 files changed, 102 insertions(+), 13 deletions(-) create mode 100644 packages/material-ui/src/test-utils/describeConformance.js diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 131bcd4bc110e0..b15bd63c11c788 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -1,25 +1,37 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Typography from './Typography'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); + + describeConformance(, { + defaultRootClassName: classes.body2, + inheritComponentName: 'p', + mount, + }); }); - it('should render the text', () => { - const wrapper = shallow(Hello); - assert.strictEqual(wrapper.childAt(0).equals('Hello'), true); + after(() => { + mount.cleanUp(); }); - it('should spread props', () => { - const wrapper = shallow(Hello); - assert.strictEqual(wrapper.props()['data-test'], 'hello'); + it('should render the text', () => { + const wrapper = shallow(Hello); + assert.strictEqual(wrapper.text(), 'Hello'); }); it('should render body2 root by default', () => { @@ -28,12 +40,6 @@ describe('', () => { assert.strictEqual(wrapper.hasClass(classes.root), true); }); - it('should merge user classes', () => { - const wrapper = shallow(Hello); - assert.strictEqual(wrapper.hasClass(classes.body2), true); - assert.strictEqual(wrapper.hasClass('woofTypography'), true); - }); - it('should center text', () => { const wrapper = shallow( diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js new file mode 100644 index 00000000000000..39da65bf5375c5 --- /dev/null +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -0,0 +1,82 @@ +import { assert } from 'chai'; +import React from 'react'; + +/** + * Material-UI components have a className prop. The className is applied to the + * outermost DOM node. + * + * @param {React.ReactElement} element + * @param {Object} options + * @param {string} options.defaultRootClassName - the className that should be + * applied to the outermost DOM node + */ +function testClassName(element, options) { + const { defaultRootClassName, mount } = options; + + it('applies the className to the outermost DOM node', () => { + const className = Math.random().toString(36); + + const wrapper = mount(React.cloneElement(element, { className })); + const { classList } = wrapper.getDOMNode(); + + assert.ok(classList.contains(className)); + assert.ok(!defaultRootClassName || classList.contains(defaultRootClassName)); + }); +} + +function testComponentProp(element, options) { + const { componentProp = 'em', mount } = options; + + it('can render another root component with the `component` prop', () => { + const wrapper = mount(React.cloneElement(element, { component: componentProp })); + + assert.strictEqual(wrapper.getDOMNode().nodeName.toLowerCase(), componentProp); + }); +} + +/** + * Material-UI components can spread additional props to a documented component. + * It's set via @inheritComponent in the source. + * + * @param {React.ReactElement} element + * @param {Object} options + * @param {string} options.inheritComponentName - The display name of the component + * that should hold additional props. + */ +function testPropsSpread(element, options) { + const { inheritComponentName, mount } = options; + + it('should spread props', () => { + const testProp = 'data-test-props-spread'; + const wrapper = mount(React.cloneElement(element, { [testProp]: true })); + assert.ok(wrapper.find(inheritComponentName).props()[testProp]); + }); +} + +const fullSuite = { + class: testClassName, + componentProp: testComponentProp, + propsSpread: testPropsSpread, +}; + +/** + * Tests various aspects of a component that should be equal across material-ui + * components. + * + * @param {React.ReactElement} minimalElement - the component with it's minimal required props + * @param {Object} options + * @param {string} options.defaultRootClassName - see testClassName + * @param {string} options.inheritComponentName - see testPropsSpread + * @param {function} options.mount - Should be a return value from createMount + * @param {string[]} options.tests - list of tests that the component conforms to. see fullSuite + */ +export default function testConformance(minimalElement, options) { + const { tests = Object.keys(fullSuite) } = options; + + describe('Material-UI component API', () => { + tests.forEach(testKey => { + const test = fullSuite[testKey]; + test(minimalElement, options); + }); + }); +} diff --git a/packages/material-ui/src/test-utils/index.js b/packages/material-ui/src/test-utils/index.js index 46bb1fdbc9cfab..a8f13c32852f99 100644 --- a/packages/material-ui/src/test-utils/index.js +++ b/packages/material-ui/src/test-utils/index.js @@ -1,6 +1,7 @@ export { default as createShallow } from './createShallow'; export { default as createMount } from './createMount'; export { default as createRender } from './createRender'; +export { default as describeConformance } from './describeConformance'; export { default as findOutermostIntrinsic, wrapsIntrinsicElement } from './findOutermostIntrinsic'; export { default as getClasses } from './getClasses'; export { default as testRef } from './testRef'; From 2597ec4f6abf7ced4542525ee295959fc84a303b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 1 Dec 2018 17:38:18 +0100 Subject: [PATCH 02/96] [test] Add ref forwarding to conformance test --- .../src/Typography/Typography.test.js | 1 + .../src/test-utils/describeConformance.js | 36 +++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index b15bd63c11c788..c06db47e640fa8 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -22,6 +22,7 @@ describe('', () => { defaultRootClassName: classes.body2, inheritComponentName: 'p', mount, + noForwardRef: true, }); }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 39da65bf5375c5..c7d4ce113b6b1d 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,5 +1,6 @@ import { assert } from 'chai'; import React from 'react'; +import consoleErrorMock from 'test/utils/consoleErrorMock'; /** * Material-UI components have a className prop. The className is applied to the @@ -53,10 +54,44 @@ function testPropsSpread(element, options) { }); } +/** + * Some Material-UI components can forward their refs via innerRef + * + * @param {React.ReactElement} element + * @param {Object} options + * @param {boolean} options.noForwardRef - If `true` then this component can't forward its refs + */ +function testRefForwarding(element, options) { + const { noForwardRef, mount } = options; + + describe('prop: innerRef', () => { + before(() => { + // just to swallow possible error messages from attaching refs to function components + consoleErrorMock.spy(); + }); + + after(() => { + consoleErrorMock.reset(); + }); + + it(`should ${noForwardRef ? 'not' : ''} forward a ref`, () => { + const ref = React.createRef(); + mount(React.cloneElement(element, { innerRef: ref })); + + if (noForwardRef) { + assert.strictEqual(ref.current, null); + } else { + assert.ok(ref.current); + } + }); + }); +} + const fullSuite = { class: testClassName, componentProp: testComponentProp, propsSpread: testPropsSpread, + refForwarding: testRefForwarding, }; /** @@ -68,6 +103,7 @@ const fullSuite = { * @param {string} options.defaultRootClassName - see testClassName * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount + * @param {boolean} options.noForwardRef - see test testRefForwarding * @param {string[]} options.tests - list of tests that the component conforms to. see fullSuite */ export default function testConformance(minimalElement, options) { From 7f9fbb5b2c2c04a7dfe1e30a50b7c670273658fd Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 2 Dec 2018 10:50:05 +0100 Subject: [PATCH 03/96] [test] Improve props spreading test --- .../material-ui/src/test-utils/describeConformance.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index c7d4ce113b6b1d..6840d8897868ec 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -2,6 +2,10 @@ import { assert } from 'chai'; import React from 'react'; import consoleErrorMock from 'test/utils/consoleErrorMock'; +function randomStringValue() { + return Math.random().toString(36); +} + /** * Material-UI components have a className prop. The className is applied to the * outermost DOM node. @@ -15,7 +19,7 @@ function testClassName(element, options) { const { defaultRootClassName, mount } = options; it('applies the className to the outermost DOM node', () => { - const className = Math.random().toString(36); + const className = randomStringValue(); const wrapper = mount(React.cloneElement(element, { className })); const { classList } = wrapper.getDOMNode(); @@ -49,8 +53,9 @@ function testPropsSpread(element, options) { it('should spread props', () => { const testProp = 'data-test-props-spread'; - const wrapper = mount(React.cloneElement(element, { [testProp]: true })); - assert.ok(wrapper.find(inheritComponentName).props()[testProp]); + const value = randomStringValue(); + const wrapper = mount(React.cloneElement(element, { [testProp]: value })); + assert.strictEqual(wrapper.find(inheritComponentName).props()[testProp], value); }); } From fb38ed0c5fc73953dbbe74d2ec4407af770c81c5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 2 Dec 2018 10:57:44 +0100 Subject: [PATCH 04/96] [test] Allow to test for multiple default classes --- .../material-ui/src/Typography/Typography.test.js | 2 +- .../src/test-utils/describeConformance.js | 14 ++++++++++---- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index c06db47e640fa8..20a1c6b6cf4866 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -19,7 +19,7 @@ describe('', () => { classes = getClasses(); describeConformance(, { - defaultRootClassName: classes.body2, + defaultRootClassNames: [classes.body2], inheritComponentName: 'p', mount, noForwardRef: true, diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 6840d8897868ec..1bfa0d9deb86c8 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -12,11 +12,11 @@ function randomStringValue() { * * @param {React.ReactElement} element * @param {Object} options - * @param {string} options.defaultRootClassName - the className that should be + * @param {string} options.defaultRootClassNames - the className that should be * applied to the outermost DOM node */ function testClassName(element, options) { - const { defaultRootClassName, mount } = options; + const { defaultRootClassNames = [], mount } = options; it('applies the className to the outermost DOM node', () => { const className = randomStringValue(); @@ -25,7 +25,13 @@ function testClassName(element, options) { const { classList } = wrapper.getDOMNode(); assert.ok(classList.contains(className)); - assert.ok(!defaultRootClassName || classList.contains(defaultRootClassName)); + defaultRootClassNames.forEach(defaultClassName => { + assert.strictEqual( + classList.contains(defaultRootClassNames), + true, + `Does not have the '${defaultClassName}' class. Did you mean of ${classList}`, + ); + }); }); } @@ -105,7 +111,7 @@ const fullSuite = { * * @param {React.ReactElement} minimalElement - the component with it's minimal required props * @param {Object} options - * @param {string} options.defaultRootClassName - see testClassName + * @param {string} options.defaultRootClassNames - see testClassName * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount * @param {boolean} options.noForwardRef - see test testRefForwarding From d1ac097741f09484677af274b711e06e35230201 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 2 Dec 2018 11:05:19 +0100 Subject: [PATCH 05/96] [test] Use standard css class testint utils --- .../material-ui/src/test-utils/describeConformance.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 1bfa0d9deb86c8..8ca89811c18504 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,9 +1,10 @@ import { assert } from 'chai'; import React from 'react'; import consoleErrorMock from 'test/utils/consoleErrorMock'; +import findOutermostIntrinsic from './findOutermostIntrinsic'; function randomStringValue() { - return Math.random().toString(36); + return Math.random().toString(36).slice(2); } /** @@ -22,14 +23,14 @@ function testClassName(element, options) { const className = randomStringValue(); const wrapper = mount(React.cloneElement(element, { className })); - const { classList } = wrapper.getDOMNode(); + const domWrapper = findOutermostIntrinsic(wrapper); - assert.ok(classList.contains(className)); + assert.strictEqual(domWrapper.hasClass(className), true); defaultRootClassNames.forEach(defaultClassName => { assert.strictEqual( - classList.contains(defaultRootClassNames), + domWrapper.hasClass(defaultRootClassNames), true, - `Does not have the '${defaultClassName}' class. Did you mean of ${classList}`, + `Does not have the '${defaultClassName}' class`, ); }); }); From 19b7574fe59d271d773d38756d9689f5c35f89a4 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:10:33 +0100 Subject: [PATCH 06/96] [test] Decouple from display name but rather use type --- packages/material-ui/src/Typography/Typography.test.js | 2 +- packages/material-ui/src/test-utils/describeConformance.js | 7 +++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 20a1c6b6cf4866..68ecc300ab54aa 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -20,7 +20,7 @@ describe('', () => { describeConformance(, { defaultRootClassNames: [classes.body2], - inheritComponentName: 'p', + inheritComponent: 'p', mount, noForwardRef: true, }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 8ca89811c18504..db4fcbb385ca63 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -52,17 +52,16 @@ function testComponentProp(element, options) { * * @param {React.ReactElement} element * @param {Object} options - * @param {string} options.inheritComponentName - The display name of the component - * that should hold additional props. + * @param {string} options.inheritComponent - The element type that receives spread props */ function testPropsSpread(element, options) { - const { inheritComponentName, mount } = options; + const { inheritComponent, mount } = options; it('should spread props', () => { const testProp = 'data-test-props-spread'; const value = randomStringValue(); const wrapper = mount(React.cloneElement(element, { [testProp]: value })); - assert.strictEqual(wrapper.find(inheritComponentName).props()[testProp], value); + assert.strictEqual(wrapper.find(inheritComponent).props()[testProp], value); }); } From 17e241ebd78d54f8fb02dc73649710adea8b5dee Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:11:20 +0100 Subject: [PATCH 07/96] [test] cleanup describeConformance --- packages/material-ui/src/test-utils/describeConformance.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index db4fcbb385ca63..016ce8e676eea9 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -4,7 +4,9 @@ import consoleErrorMock from 'test/utils/consoleErrorMock'; import findOutermostIntrinsic from './findOutermostIntrinsic'; function randomStringValue() { - return Math.random().toString(36).slice(2); + return Math.random() + .toString(36) + .slice(2); } /** @@ -117,7 +119,7 @@ const fullSuite = { * @param {boolean} options.noForwardRef - see test testRefForwarding * @param {string[]} options.tests - list of tests that the component conforms to. see fullSuite */ -export default function testConformance(minimalElement, options) { +export default function describeConformance(minimalElement, options) { const { tests = Object.keys(fullSuite) } = options; describe('Material-UI component API', () => { From 3e60412594e44d04a986945d17df49b4fe2fb4a6 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:14:10 +0100 Subject: [PATCH 08/96] [test] use stronger wording in describeConformance --- packages/material-ui/src/test-utils/describeConformance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 016ce8e676eea9..6236c17edf1854 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -87,7 +87,7 @@ function testRefForwarding(element, options) { consoleErrorMock.reset(); }); - it(`should ${noForwardRef ? 'not' : ''} forward a ref`, () => { + it(`does ${noForwardRef ? 'not' : ''} forward ref`, () => { const ref = React.createRef(); mount(React.cloneElement(element, { innerRef: ref })); From 39d8f13934853f14944dd11fb291e3a6eadb5035 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:15:48 +0100 Subject: [PATCH 09/96] [test] Go back to describeConformance inheritComponentName It is closer to how we define it in @inheritComponent. It's also convenient to test the displayName here. Debugging experience is part of the public API --- .../material-ui/src/Typography/Typography.test.js | 2 +- .../src/test-utils/describeConformance.js | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 68ecc300ab54aa..20a1c6b6cf4866 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -20,7 +20,7 @@ describe('', () => { describeConformance(, { defaultRootClassNames: [classes.body2], - inheritComponent: 'p', + inheritComponentName: 'p', mount, noForwardRef: true, }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 6236c17edf1854..b42c1bdaedda88 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -54,16 +54,23 @@ function testComponentProp(element, options) { * * @param {React.ReactElement} element * @param {Object} options - * @param {string} options.inheritComponent - The element type that receives spread props + * @param {string} options.inheritComponentName - The element type display name + * that receives spread props. */ function testPropsSpread(element, options) { - const { inheritComponent, mount } = options; + const { inheritComponentName, mount } = options; - it('should spread props', () => { + it(`does spread props to the first ${inheritComponentName}`, () => { const testProp = 'data-test-props-spread'; const value = randomStringValue(); const wrapper = mount(React.cloneElement(element, { [testProp]: value })); - assert.strictEqual(wrapper.find(inheritComponent).props()[testProp], value); + assert.strictEqual( + wrapper + .find(inheritComponentName) + .first() + .props()[testProp], + value, + ); }); } From e13fcee2dcd316d9bebbdae32367b6b42a6e5686 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:25:42 +0100 Subject: [PATCH 10/96] [test] Use common `root` class as a default className --- .../src/Typography/Typography.test.js | 2 +- .../src/test-utils/describeConformance.js | 17 +++++------------ 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 20a1c6b6cf4866..bad548028197d2 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -19,7 +19,7 @@ describe('', () => { classes = getClasses(); describeConformance(, { - defaultRootClassNames: [classes.body2], + classes, inheritComponentName: 'p', mount, noForwardRef: true, diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index b42c1bdaedda88..239d64216a9cd1 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -15,11 +15,10 @@ function randomStringValue() { * * @param {React.ReactElement} element * @param {Object} options - * @param {string} options.defaultRootClassNames - the className that should be - * applied to the outermost DOM node + * @param {string} options.classes - `classes` of the component from `@material-ui/styles` */ function testClassName(element, options) { - const { defaultRootClassNames = [], mount } = options; + const { classes, mount } = options; it('applies the className to the outermost DOM node', () => { const className = randomStringValue(); @@ -27,14 +26,8 @@ function testClassName(element, options) { const wrapper = mount(React.cloneElement(element, { className })); const domWrapper = findOutermostIntrinsic(wrapper); - assert.strictEqual(domWrapper.hasClass(className), true); - defaultRootClassNames.forEach(defaultClassName => { - assert.strictEqual( - domWrapper.hasClass(defaultRootClassNames), - true, - `Does not have the '${defaultClassName}' class`, - ); - }); + assert.strictEqual(domWrapper.hasClass(classes.root), true, 'does have a `root` class'); + assert.strictEqual(domWrapper.hasClass(className), true, 'does have a custom `className`'); }); } @@ -120,7 +113,7 @@ const fullSuite = { * * @param {React.ReactElement} minimalElement - the component with it's minimal required props * @param {Object} options - * @param {string} options.defaultRootClassNames - see testClassName + * @param {string} options.classes - see testClassName * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount * @param {boolean} options.noForwardRef - see test testRefForwarding From 4065d0ac200fea379ef9361896746da2044c88bc Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:39:26 +0100 Subject: [PATCH 11/96] [test] Strict mode compliant testComponentProp --- .../src/Typography/Typography.test.js | 1 + .../src/test-utils/describeConformance.js | 16 +++++++++++++--- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index bad548028197d2..a9e153b9d186c4 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -23,6 +23,7 @@ describe('', () => { inheritComponentName: 'p', mount, noForwardRef: true, + testComponentPropWith: 'em' }); }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 239d64216a9cd1..b03a39e40b2b9d 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -31,13 +31,22 @@ function testClassName(element, options) { }); } +/** + * Material-UI components have a `component` prop that allows rendering a different + * Component from @inheritComponent + * + * @param {React.ReactElement} element + * @param {Object} options + * @param {string} options.testComponentPropWith - The host component that should + * be rendered instead. + */ function testComponentProp(element, options) { - const { componentProp = 'em', mount } = options; + const { testComponentPropWith: component, mount } = options; it('can render another root component with the `component` prop', () => { - const wrapper = mount(React.cloneElement(element, { component: componentProp })); + const wrapper = mount(React.cloneElement(element, { component })); - assert.strictEqual(wrapper.getDOMNode().nodeName.toLowerCase(), componentProp); + assert.strictEqual(findOutermostIntrinsic(wrapper).type(), component); }); } @@ -118,6 +127,7 @@ const fullSuite = { * @param {function} options.mount - Should be a return value from createMount * @param {boolean} options.noForwardRef - see test testRefForwarding * @param {string[]} options.tests - list of tests that the component conforms to. see fullSuite + * @param {string?} options.testComponentPropWith - see test testComponentProp */ export default function describeConformance(minimalElement, options) { const { tests = Object.keys(fullSuite) } = options; From 2757a1b41d0d8a93f000ab7dd05c6cb4136bfaf2 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:51:09 +0100 Subject: [PATCH 12/96] [test] use default testComponentPropWith Explicit description can be given by printing the full report --- packages/material-ui/src/Typography/Typography.test.js | 1 - packages/material-ui/src/test-utils/describeConformance.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index a9e153b9d186c4..bad548028197d2 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -23,7 +23,6 @@ describe('', () => { inheritComponentName: 'p', mount, noForwardRef: true, - testComponentPropWith: 'em' }); }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index b03a39e40b2b9d..11bd2babeeef63 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -41,7 +41,7 @@ function testClassName(element, options) { * be rendered instead. */ function testComponentProp(element, options) { - const { testComponentPropWith: component, mount } = options; + const { testComponentPropWith: component = 'em', mount } = options; it('can render another root component with the `component` prop', () => { const wrapper = mount(React.cloneElement(element, { component })); From ee5102e53b605f8c57d4f0e25b3f151913e7a5db Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 15:56:25 +0100 Subject: [PATCH 13/96] [test] Remove whitelist for describeConformance maybe introduce it later when we ne this behavior --- .../src/test-utils/describeConformance.js | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 11bd2babeeef63..48bddcf34faf1d 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -10,12 +10,12 @@ function randomStringValue() { } /** - * Material-UI components have a className prop. The className is applied to the + * Material-UI components have a `className` prop. The `className` is applied to the * outermost DOM node. * * @param {React.ReactElement} element * @param {Object} options - * @param {string} options.classes - `classes` of the component from `@material-ui/styles` + * @param {string} options.classes - `classes` of the component provided by `@material-ui/styles` */ function testClassName(element, options) { const { classes, mount } = options; @@ -77,7 +77,9 @@ function testPropsSpread(element, options) { } /** - * Some Material-UI components can forward their refs via innerRef + * Some Material-UI components can forward their refs via `innerRef` + * + * TODO: Use `ref` once WithStylesTest is no longer required * * @param {React.ReactElement} element * @param {Object} options @@ -117,7 +119,7 @@ const fullSuite = { }; /** - * Tests various aspects of a component that should be equal across material-ui + * Tests various aspects of a component that should be equal across Material-UI * components. * * @param {React.ReactElement} minimalElement - the component with it's minimal required props @@ -126,14 +128,11 @@ const fullSuite = { * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount * @param {boolean} options.noForwardRef - see test testRefForwarding - * @param {string[]} options.tests - list of tests that the component conforms to. see fullSuite * @param {string?} options.testComponentPropWith - see test testComponentProp */ export default function describeConformance(minimalElement, options) { - const { tests = Object.keys(fullSuite) } = options; - describe('Material-UI component API', () => { - tests.forEach(testKey => { + Object.keys(fullSuite).forEach(testKey => { const test = fullSuite[testKey]; test(minimalElement, options); }); From f4cab8b5bbf012f315bf9f85a4218efcca461c6f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 19 Mar 2019 16:50:55 +0100 Subject: [PATCH 14/96] [test] noForwardRef -> forwardRef our components should forward by default --- packages/material-ui/src/Typography/Typography.test.js | 2 +- .../material-ui/src/test-utils/describeConformance.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index bad548028197d2..4a394eaa931fc2 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -22,7 +22,7 @@ describe('', () => { classes, inheritComponentName: 'p', mount, - noForwardRef: true, + forwardRef: true, }); }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 48bddcf34faf1d..f3d6f5bb6741d0 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -83,10 +83,10 @@ function testPropsSpread(element, options) { * * @param {React.ReactElement} element * @param {Object} options - * @param {boolean} options.noForwardRef - If `true` then this component can't forward its refs + * @param {boolean} options.forwardRef - If `true` then this component forwards `ref` */ function testRefForwarding(element, options) { - const { noForwardRef, mount } = options; + const { forwardRef, mount } = options; describe('prop: innerRef', () => { before(() => { @@ -98,11 +98,11 @@ function testRefForwarding(element, options) { consoleErrorMock.reset(); }); - it(`does ${noForwardRef ? 'not' : ''} forward ref`, () => { + it(`does ${!forwardRef ? 'not' : ''} forward ref`, () => { const ref = React.createRef(); mount(React.cloneElement(element, { innerRef: ref })); - if (noForwardRef) { + if (!forwardRef) { assert.strictEqual(ref.current, null); } else { assert.ok(ref.current); From 6f565321f4bd113141c6d4d2104c2e303ef9e6ce Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 20 Mar 2019 10:46:07 +0100 Subject: [PATCH 15/96] Update packages/material-ui/src/test-utils/describeConformance.js Co-Authored-By: eps1lon --- packages/material-ui/src/test-utils/describeConformance.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index f3d6f5bb6741d0..c95e6d43026c25 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -127,7 +127,7 @@ const fullSuite = { * @param {string} options.classes - see testClassName * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount - * @param {boolean} options.noForwardRef - see test testRefForwarding + * @param {boolean} options.forwardRef - see test testRefForwarding * @param {string?} options.testComponentPropWith - see test testComponentProp */ export default function describeConformance(minimalElement, options) { From b9bab0655e19cbc16f972d7bd55fd15731d15d39 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 13:45:50 +0100 Subject: [PATCH 16/96] [test] More accurate ref forwarding test Test where the ref will actually be attached to. This means every component described by this test has to be able to hold a ref --- .../src/Typography/Typography.test.js | 2 +- .../src/test-utils/describeConformance.js | 36 +++++++------------ 2 files changed, 13 insertions(+), 25 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 4a394eaa931fc2..996b87e053fbe4 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -22,7 +22,7 @@ describe('', () => { classes, inheritComponentName: 'p', mount, - forwardRef: true, + refInstanceof: window.HTMLParagraphElement, }); }); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index c95e6d43026c25..36bbeb05d8e88d 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,6 +1,5 @@ import { assert } from 'chai'; import React from 'react'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; import findOutermostIntrinsic from './findOutermostIntrinsic'; function randomStringValue() { @@ -77,36 +76,25 @@ function testPropsSpread(element, options) { } /** - * Some Material-UI components can forward their refs via `innerRef` + * Tests that the `ref` of a component will return the correct instance * - * TODO: Use `ref` once WithStylesTest is no longer required + * This is determined by a given constructor i.e. a React.Component or HTMLElement for + * components that forward their ref and attach it to a host component. * * @param {React.ReactElement} element * @param {Object} options - * @param {boolean} options.forwardRef - If `true` then this component forwards `ref` + * @param {FunctionConstructor} options.refInstanceof - `ref` will be an instanceof this constructor. */ -function testRefForwarding(element, options) { - const { forwardRef, mount } = options; +function testRef(element, options) { + const { refInstanceof, mount } = options; - describe('prop: innerRef', () => { - before(() => { - // just to swallow possible error messages from attaching refs to function components - consoleErrorMock.spy(); - }); - - after(() => { - consoleErrorMock.reset(); - }); - - it(`does ${!forwardRef ? 'not' : ''} forward ref`, () => { + describe('ref', () => { + it(`attaches the ref to an instance of ${refInstanceof}`, () => { const ref = React.createRef(); + // TODO use `ref` once `WithStylesTest` is removed mount(React.cloneElement(element, { innerRef: ref })); - if (!forwardRef) { - assert.strictEqual(ref.current, null); - } else { - assert.ok(ref.current); - } + assert.instanceOf(ref.current, refInstanceof); }); }); } @@ -115,7 +103,7 @@ const fullSuite = { class: testClassName, componentProp: testComponentProp, propsSpread: testPropsSpread, - refForwarding: testRefForwarding, + refForwarding: testRef, }; /** @@ -127,7 +115,7 @@ const fullSuite = { * @param {string} options.classes - see testClassName * @param {string} options.inheritComponentName - see testPropsSpread * @param {function} options.mount - Should be a return value from createMount - * @param {boolean} options.forwardRef - see test testRefForwarding + * @param {boolean} options.refInstanceof - see test testRef * @param {string?} options.testComponentPropWith - see test testComponentProp */ export default function describeConformance(minimalElement, options) { From d5c59fe37d0b220918368c20bc8a08616c5c8153 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 21:15:16 +0100 Subject: [PATCH 17/96] [test] Get options for conformance suite lazily This way we can immediately invoke it in the suite description which has a couple of benefits: - will get pick up by test reporters - stack trace will point to test - graceful recovery if a test fails (fails in test hooks are bad) --- .../src/Typography/Typography.test.js | 14 ++-- .../src/test-utils/describeConformance.js | 69 ++++++++++--------- 2 files changed, 45 insertions(+), 38 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 996b87e053fbe4..0315bc32bf384d 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -17,19 +17,19 @@ describe('', () => { mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); - - describeConformance(, { - classes, - inheritComponentName: 'p', - mount, - refInstanceof: window.HTMLParagraphElement, - }); }); after(() => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponentName: 'p', + mount, + refInstanceof: window.HTMLParagraphElement, + })); + it('should render the text', () => { const wrapper = shallow(Hello); assert.strictEqual(wrapper.text(), 'Hello'); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 36bbeb05d8e88d..ffdd28cb3ca120 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -13,13 +13,13 @@ function randomStringValue() { * outermost DOM node. * * @param {React.ReactElement} element - * @param {Object} options - * @param {string} options.classes - `classes` of the component provided by `@material-ui/styles` + * @param {() => ConformanceOptions} getOptions */ -function testClassName(element, options) { - const { classes, mount } = options; +function testClassName(element, getOptions) { it('applies the className to the outermost DOM node', () => { + // declared in ConformanceOptopns + const { classes, mount } = getOptions(); const className = randomStringValue(); const wrapper = mount(React.cloneElement(element, { className })); @@ -35,14 +35,12 @@ function testClassName(element, options) { * Component from @inheritComponent * * @param {React.ReactElement} element - * @param {Object} options - * @param {string} options.testComponentPropWith - The host component that should - * be rendered instead. + * @param {() => ConformanceOptions} getOptions */ -function testComponentProp(element, options) { - const { testComponentPropWith: component = 'em', mount } = options; - +function testComponentProp(element, getOptions) { it('can render another root component with the `component` prop', () => { + // type def in ConformanceOptions + const { testComponentPropWith: component = 'em', mount } = getOptions(); const wrapper = mount(React.cloneElement(element, { component })); assert.strictEqual(findOutermostIntrinsic(wrapper).type(), component); @@ -54,14 +52,13 @@ function testComponentProp(element, options) { * It's set via @inheritComponent in the source. * * @param {React.ReactElement} element - * @param {Object} options - * @param {string} options.inheritComponentName - The element type display name - * that receives spread props. + * @param {() => ConformanceOptions} getOptions */ -function testPropsSpread(element, options) { - const { inheritComponentName, mount } = options; +function testPropsSpread(element, getOptions) { + it(`does spread props a defined component`, () => { + // type def in ConformanceOptions + const { inheritComponentName, mount } = getOptions(); - it(`does spread props to the first ${inheritComponentName}`, () => { const testProp = 'data-test-props-spread'; const value = randomStringValue(); const wrapper = mount(React.cloneElement(element, { [testProp]: value })); @@ -71,6 +68,7 @@ function testPropsSpread(element, options) { .first() .props()[testProp], value, + `should've spread props to ${inheritComponentName}`, ); }); } @@ -82,19 +80,23 @@ function testPropsSpread(element, options) { * components that forward their ref and attach it to a host component. * * @param {React.ReactElement} element - * @param {Object} options - * @param {FunctionConstructor} options.refInstanceof - `ref` will be an instanceof this constructor. + * @param {() => ConformanceOptions} getOptions */ -function testRef(element, options) { - const { refInstanceof, mount } = options; - +function testRef(element, getOptions) { describe('ref', () => { - it(`attaches the ref to an instance of ${refInstanceof}`, () => { + it(`attaches the ref`, () => { + // type def in ConformanceOptions + const { mount, refInstanceof } = getOptions(); + const ref = React.createRef(); // TODO use `ref` once `WithStylesTest` is removed mount(React.cloneElement(element, { innerRef: ref })); - assert.instanceOf(ref.current, refInstanceof); + assert.instanceOf( + ref.current, + refInstanceof, + `should've attached the ref to to an instance of ${refInstanceof}`, + ); }); }); } @@ -106,23 +108,28 @@ const fullSuite = { refForwarding: testRef, }; +/** + * @typedef {Object} ConformanceOptions + * @property {string} classes - `classes` of the component provided by `@material-ui/styles` + * @property {string} inheritComponentName - The element type display name that receives spread props. + * @property {function} mount - Should be a return value from createMount + * @property {boolean} refInstanceof - `ref` will be an instanceof this constructor. + * @property {string?} testComponentPropWith - The host component that should be rendered instead. + */ + /** * Tests various aspects of a component that should be equal across Material-UI * components. * * @param {React.ReactElement} minimalElement - the component with it's minimal required props - * @param {Object} options - * @param {string} options.classes - see testClassName - * @param {string} options.inheritComponentName - see testPropsSpread - * @param {function} options.mount - Should be a return value from createMount - * @param {boolean} options.refInstanceof - see test testRef - * @param {string?} options.testComponentPropWith - see test testComponentProp + * @param {() => ConformanceOptions} getOptions + * */ -export default function describeConformance(minimalElement, options) { +export default function describeConformance(minimalElement, getOptions) { describe('Material-UI component API', () => { Object.keys(fullSuite).forEach(testKey => { const test = fullSuite[testKey]; - test(minimalElement, options); + test(minimalElement, getOptions); }); }); } From e75050038af34011d4a925826f479a396ad20bcb Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 10:10:27 +0100 Subject: [PATCH 18/96] [test] Make describePerformance more robust - define what "root component" are - decouple from "outermost" concept: it doesn't apply to e.g. Tooltip - add test for `component` prop not being implemented --- .../src/Typography/Typography.test.js | 2 +- .../src/test-utils/describeConformance.js | 85 +++++++++++++------ 2 files changed, 59 insertions(+), 28 deletions(-) diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 0315bc32bf384d..eae2fdfc697ad9 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -25,7 +25,7 @@ describe('', () => { describeConformance(, () => ({ classes, - inheritComponentName: 'p', + inheritComponent: 'p', mount, refInstanceof: window.HTMLParagraphElement, })); diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index ffdd28cb3ca120..5b23e554ddacc8 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,6 +1,22 @@ import { assert } from 'chai'; import React from 'react'; -import findOutermostIntrinsic from './findOutermostIntrinsic'; +import consoleErrorMock from 'test/utils/consoleErrorMock'; + +/** + * Glossary + * - root component: + * - has the `root` class + * - 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}`); +} function randomStringValue() { return Math.random() @@ -9,24 +25,21 @@ function randomStringValue() { } /** - * Material-UI components have a `className` prop. The `className` is applied to the - * outermost DOM node. + * Material-UI components have a `className` prop. The `className` is applied to + * the root component. * * @param {React.ReactElement} element * @param {() => ConformanceOptions} getOptions */ function testClassName(element, getOptions) { - - it('applies the className to the outermost DOM node', () => { - // declared in ConformanceOptopns - const { classes, mount } = getOptions(); + it('applies the className to the root component', () => { + const { classes, inheritComponent, mount } = getOptions(); const className = randomStringValue(); const wrapper = mount(React.cloneElement(element, { className })); - const domWrapper = findOutermostIntrinsic(wrapper); + const root = findRootComponent(wrapper, { classes, component: inheritComponent }); - assert.strictEqual(domWrapper.hasClass(classes.root), true, 'does have a `root` class'); - assert.strictEqual(domWrapper.hasClass(className), true, 'does have a custom `className`'); + assert.strictEqual(root.hasClass(className), true, 'does have a custom `className`'); }); } @@ -38,12 +51,35 @@ function testClassName(element, getOptions) { * @param {() => ConformanceOptions} getOptions */ function testComponentProp(element, getOptions) { - it('can render another root component with the `component` prop', () => { - // type def in ConformanceOptions - const { testComponentPropWith: component = 'em', mount } = getOptions(); - const wrapper = mount(React.cloneElement(element, { component })); + const { testComponentPropWith } = getOptions(); + + describe('prop: component', () => { + if (testComponentPropWith === false) { + beforeEach(() => { + consoleErrorMock.spy(); + }); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), component); + after(() => { + consoleErrorMock.reset(); + }); + + // This test will fail on subsequent runs since React caches warnings + it('does not accept a `component` prop', () => { + const { testComponentPropWith: component = 'em', mount } = getOptions(); + + mount(React.cloneElement(element, { component })); + + assert.strictEqual(consoleErrorMock.callCount(), 1); + }); + } else { + it('can render another root component with the `component` prop', () => { + const { classes, mount, testComponentPropWith: component = 'em' } = getOptions(); + + const wrapper = mount(React.cloneElement(element, { component })); + + assert.strictEqual(findRootComponent(wrapper, { classes, component }).exists(), true); + }); + } }); } @@ -55,21 +91,16 @@ function testComponentProp(element, getOptions) { * @param {() => ConformanceOptions} getOptions */ function testPropsSpread(element, getOptions) { - it(`does spread props a defined component`, () => { + it(`does spread props to the root component`, () => { // type def in ConformanceOptions - const { inheritComponentName, mount } = getOptions(); - + const { classes, inheritComponent, mount } = getOptions(); const testProp = 'data-test-props-spread'; const value = randomStringValue(); + const wrapper = mount(React.cloneElement(element, { [testProp]: value })); - assert.strictEqual( - wrapper - .find(inheritComponentName) - .first() - .props()[testProp], - value, - `should've spread props to ${inheritComponentName}`, - ); + const root = findRootComponent(wrapper, { classes, component: inheritComponent }); + + assert.strictEqual(root.props()[testProp], value); }); } @@ -111,7 +142,7 @@ const fullSuite = { /** * @typedef {Object} ConformanceOptions * @property {string} classes - `classes` of the component provided by `@material-ui/styles` - * @property {string} inheritComponentName - The element type display name that receives spread props. + * @property {string} inheritComponent - The element type that receives spread props. * @property {function} mount - Should be a return value from createMount * @property {boolean} refInstanceof - `ref` will be an instanceof this constructor. * @property {string?} testComponentPropWith - The host component that should be rendered instead. From 688fec8106c84ee79736a5780e5c43ecbb4cb31e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 15:25:33 +0100 Subject: [PATCH 19/96] [Toolbar] Test conformance --- .../material-ui/src/Toolbar/Toolbar.test.js | 36 ++++++++++++------- 1 file changed, 23 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/Toolbar/Toolbar.test.js b/packages/material-ui/src/Toolbar/Toolbar.test.js index 9cdf44ed3c541f..f9e4d91bf7685b 100644 --- a/packages/material-ui/src/Toolbar/Toolbar.test.js +++ b/packages/material-ui/src/Toolbar/Toolbar.test.js @@ -1,38 +1,48 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { + createMount, + createShallow, + describeConformance, + findOutermostIntrinsic, + getClasses, +} from '@material-ui/core/test-utils'; import Toolbar from './Toolbar'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(foo); }); - it('should render a div', () => { - const wrapper = shallow(foo); - assert.strictEqual(wrapper.name(), 'div'); + after(() => { + mount.cleanUp(); }); - it('should render with the user, root and gutters classes', () => { - const wrapper = shallow(foo); - assert.strictEqual(wrapper.hasClass('woofToolbar'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.hasClass(classes.gutters), true); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + })); + + it('should render with gutters class', () => { + const wrapper = mount(foo); + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.gutters), true); }); - it('should disable the gutters', () => { + it('can disable the gutters', () => { const wrapper = shallow(foo); - assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.gutters), false); }); - it('should condense itself', () => { + it('can condense itself', () => { const wrapper = shallow(foo); - assert.strictEqual(wrapper.hasClass(classes.root), true); assert.strictEqual(wrapper.hasClass(classes.dense), true); }); }); From 5fc4dc937011ccc8d67dd0b12421cb85d935fb55 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 15:30:03 +0100 Subject: [PATCH 20/96] [TextField] Test conformance --- .../src/TextField/TextField.test.js | 26 +++++++++---------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/packages/material-ui/src/TextField/TextField.test.js b/packages/material-ui/src/TextField/TextField.test.js index 7ee41b29e5fcde..d6994bc0d82ba5 100644 --- a/packages/material-ui/src/TextField/TextField.test.js +++ b/packages/material-ui/src/TextField/TextField.test.js @@ -1,15 +1,17 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount } from '@material-ui/core/test-utils'; -import Input from '../Input'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import FormControl from '../FormControl'; +import Input from '../Input'; import OutlinedInput from '../OutlinedInput'; import TextField from './TextField'; describe('', () => { + let classes; let mount; before(() => { + classes = getClasses(); mount = createMount(); }); @@ -17,6 +19,14 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: FormControl, + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); + describe('mount', () => { let wrapper; @@ -25,18 +35,6 @@ describe('', () => { }); describe('structure', () => { - it('should be a FormControl', () => { - wrapper.setProps({ className: 'foo' }); - const formControl = wrapper.find(FormControl); - assert.strictEqual(formControl.exists(), true); - assert.strictEqual(formControl.hasClass('foo'), true); - }); - - it('should pass margin to the FormControl', () => { - wrapper.setProps({ margin: 'normal' }); - assert.strictEqual(wrapper.find(FormControl).props().margin, 'normal'); - }); - it('should have an input as the only child', () => { assert.strictEqual(wrapper.find(Input).length, 1); }); From c6de1fb517dcd36c6cb606f911a0dabe0216bf7e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 15:36:45 +0100 Subject: [PATCH 21/96] [Tabs] Test conformance --- packages/material-ui/src/Tabs/Tabs.test.js | 33 +++++----------------- 1 file changed, 7 insertions(+), 26 deletions(-) diff --git a/packages/material-ui/src/Tabs/Tabs.test.js b/packages/material-ui/src/Tabs/Tabs.test.js index e7d900588a23b5..e32b619431cc33 100644 --- a/packages/material-ui/src/Tabs/Tabs.test.js +++ b/packages/material-ui/src/Tabs/Tabs.test.js @@ -6,7 +6,7 @@ import consoleErrorMock from 'test/utils/consoleErrorMock'; import { createMount, createRender, - findOutermostIntrinsic, + describeConformance, getClasses, } from '@material-ui/core/test-utils'; import Tab from '../Tab'; @@ -61,17 +61,12 @@ describe('', () => { mount.cleanUp(); }); - it('should render with the root class', () => { - const wrapper = mount( - - - - , - ); - const root = findOutermostIntrinsic(wrapper); - assert.strictEqual(root.type(), 'div'); - assert.strictEqual(root.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + })); describe('warnings', () => { before(() => { @@ -118,20 +113,6 @@ describe('', () => { }); }); - describe('prop: className', () => { - it('should render with the user and root classes', () => { - const wrapper = mount( - - - - , - ); - const root = findOutermostIntrinsic(wrapper); - assert.strictEqual(root.hasClass('woofTabs'), true); - assert.strictEqual(root.hasClass(classes.root), true); - }); - }); - describe('prop: centered', () => { it('should render with the centered class', () => { const wrapper = mount( From 251474b5679a94446f994546857bd3af99185e0f Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 15:36:57 +0100 Subject: [PATCH 22/96] [TableSortLabel] Test conformance --- .../src/TableSortLabel/TableSortLabel.test.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js index 25105d72983520..78c8dda57f4334 100644 --- a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js +++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js @@ -1,7 +1,13 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import TableSortLabel from './TableSortLabel'; +import ButtonBase from '../ButtonBase'; import Sort from '@material-ui/icons/Sort'; describe('', () => { @@ -19,10 +25,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render TableSortLabel', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: ButtonBase, + mount, + refInstanceof: window.HTMLSpanElement, + testComponentPropWith: false, + })); it('should set the active class when active', () => { const activeFlag = true; @@ -90,10 +99,4 @@ describe('', () => { assert.strictEqual(iconChildren.length, 1); }); }); - - describe('mount', () => { - it('should mount without error', () => { - mount(); - }); - }); }); From 74a505d03e76bdafc6b9206a021167696cca827a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 15:37:32 +0100 Subject: [PATCH 23/96] [TableRow] test conformance --- .../material-ui/src/TableRow/TableRow.test.js | 31 ++++++------------- 1 file changed, 9 insertions(+), 22 deletions(-) diff --git a/packages/material-ui/src/TableRow/TableRow.test.js b/packages/material-ui/src/TableRow/TableRow.test.js index 32a69b14295cfb..1e3bab5e3b1bf3 100644 --- a/packages/material-ui/src/TableRow/TableRow.test.js +++ b/packages/material-ui/src/TableRow/TableRow.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import TableRow from './TableRow'; describe('', () => { @@ -12,7 +12,7 @@ describe('', () => { {node} , ); - return wrapper.childAt(0).childAt(0); + return wrapper.find('tbody').childAt(0); } before(() => { @@ -24,26 +24,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a tr', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'TR'); - }); - - it('should render a div', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - }); - - it('should spread custom props on the root node', () => { - const wrapper = mountInTable(); - assert.strictEqual(findOutermostIntrinsic(wrapper).props()['data-my-prop'], 'woofTableRow'); - }); - - it('should render with the user and root classes', () => { - const wrapper = mountInTable(); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTableRow'), true); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'tr', + mount: mountInTable, + refInstanceof: window.HTMLTableRowElement, + testComponentPropWith: 'tr', + })); it('should render children', () => { const children = ; From 6d27132536571767435271640cf37fc57d7f5dd2 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 17:35:29 +0100 Subject: [PATCH 24/96] [TableHead] Fix conformance --- .../src/TableHead/TableHead.test.js | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/material-ui/src/TableHead/TableHead.test.js b/packages/material-ui/src/TableHead/TableHead.test.js index e8aa7ae5083688..03b90f2b3710ec 100644 --- a/packages/material-ui/src/TableHead/TableHead.test.js +++ b/packages/material-ui/src/TableHead/TableHead.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import TableHead from './TableHead'; import Tablelvl2Context from '../Table/Tablelvl2Context'; @@ -9,7 +9,7 @@ describe('', () => { let classes; function mountInTable(node) { const wrapper = mount({node}
); - return wrapper.childAt(0); + return wrapper.find('table'); } before(() => { @@ -21,21 +21,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a thead', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'THEAD'); - }); - - it('should render a div', () => { - const wrapper = mount(foo); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - }); - - it('should render with the user and root class', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.find('thead').hasClass('woofTableHead'), true); - assert.strictEqual(wrapper.find('thead').hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'thead', + mount: mountInTable, + refInstanceof: window.HTMLTableSectionElement, + testComponentPropWith: 'tbody', + })); it('should render children', () => { const children = ; @@ -45,6 +37,7 @@ describe('', () => { it('should define table.head in the child context', () => { let context; + // TODO: test integration with TableCell mountInTable( From 5cd32b5d6d55b40a4d4211c8a3ec47c3737db26e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 19:11:54 +0100 Subject: [PATCH 25/96] [TableCell] Test conformance --- .../src/TableCell/TableCell.test.js | 79 +++++++------------ 1 file changed, 30 insertions(+), 49 deletions(-) diff --git a/packages/material-ui/src/TableCell/TableCell.test.js b/packages/material-ui/src/TableCell/TableCell.test.js index f8338177a29e53..c5039968abc93c 100644 --- a/packages/material-ui/src/TableCell/TableCell.test.js +++ b/packages/material-ui/src/TableCell/TableCell.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, getClasses } from '@material-ui/core/test-utils'; +import { + createMount, + describeConformance, + findOutermostIntrinsic, + getClasses, +} from '@material-ui/core/test-utils'; import TableCell from './TableCell'; describe('', () => { @@ -14,10 +19,7 @@ describe('', () => { , ); - return wrapper - .childAt(0) - .childAt(0) - .childAt(0); + return wrapper.find('tr').childAt(0); } before(() => { @@ -25,50 +27,35 @@ describe('', () => { classes = getClasses(); }); - it('should render a td', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'TD'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'td', + mount: mountInTable, + refInstanceof: window.HTMLTableCellElement, + // invalid nesting otherwise + testComponentPropWith: 'td', + })); - it('should spread custom props on the root node', () => { - const wrapper = mountInTable(); - assert.strictEqual( - wrapper.find('td').props()['data-my-prop'], - 'woofTableCell', - 'custom prop should be woofTableCell', - ); - }); + describe('prop: padding', () => { + it('doesn not have a class for padding by default', () => { + const wrapper = mountInTable(); + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.paddingDefault), false); + }); - it('should render with the user, root and padding classes', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.find('td').hasClass('woofTableCell'), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.root), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.paddingDefault), false); - }); + it('has a class when `none`', () => { + const wrapper = mountInTable(); + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.paddingNone), true); + }); - it('should render with the user, root and without the padding classes', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.find('td').hasClass('woofTableCell'), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.root), true); - assert.strictEqual( - wrapper.find('td').hasClass(classes.paddingDefault), - false, - 'should not have the padding class', - ); + it('has a class when `checkbox`', () => { + const wrapper = mountInTable(); + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.paddingCheckbox), true); + }); }); - it('should render with the user, root, padding, and checkbox classes', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.find('td').hasClass('woofTableCell'), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.root), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.paddingCheckbox), true); - }); - - it('should render with the user, root, padding, and small classes', () => { + it('has a class when `size="small"`', () => { const wrapper = mountInTable(); - assert.strictEqual(wrapper.find('td').hasClass('woofTableCell'), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.root), true); - assert.strictEqual(wrapper.find('td').hasClass(classes.sizeSmall), true); + assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.sizeSmall), true); }); it('should render children', () => { @@ -77,12 +64,6 @@ describe('', () => { assert.strictEqual(wrapper.contains(children), true); }); - it('should render a div when custom component prop is used', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - assert.strictEqual(wrapper.find('div').hasClass(classes.root), true); - }); - it('should render aria-sort="ascending" when prop sortDirection="asc" provided', () => { const wrapper = mountInTable(); assert.strictEqual(wrapper.find('td').props()['aria-sort'], 'ascending'); From 7aab1b8c514472dc399e063397ff632a047f2528 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 19:12:04 +0100 Subject: [PATCH 26/96] [TableFooter] Test conformance --- .../src/TableFooter/TableFooter.test.js | 27 +++++++------------ 1 file changed, 10 insertions(+), 17 deletions(-) diff --git a/packages/material-ui/src/TableFooter/TableFooter.test.js b/packages/material-ui/src/TableFooter/TableFooter.test.js index 0590b3a45259bc..ec56936ea1d22e 100644 --- a/packages/material-ui/src/TableFooter/TableFooter.test.js +++ b/packages/material-ui/src/TableFooter/TableFooter.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import TableFooter from './TableFooter'; import Tablelvl2Context from '../Table/Tablelvl2Context'; @@ -10,7 +10,7 @@ describe('', () => { function mountInTable(node) { const wrapper = mount({node}
); - return wrapper.childAt(0); + return wrapper.find('table').childAt(0); } before(() => { @@ -22,21 +22,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a tfoot', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'TFOOT'); - }); - - it('should render a div', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - }); - - it('should render with the user and root class', () => { - const wrapper = mountInTable(); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTableHead'), true); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'tfoot', + mount: mountInTable, + refInstanceof: window.HTMLTableSectionElement, + testComponentPropWith: 'thead', + })); it('should render children', () => { const children = ; @@ -46,6 +38,7 @@ describe('', () => { it('should define table.footer in the child context', () => { let context; + // TODO test integration with TableCell mountInTable( From a2038ee663608a4987c7a173c9a3535a2ef1d442 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 19:32:35 +0100 Subject: [PATCH 27/96] [TableBody] Test conformance --- .../src/TableBody/TableBody.test.js | 29 +++++++------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/material-ui/src/TableBody/TableBody.test.js b/packages/material-ui/src/TableBody/TableBody.test.js index 3852142f85c69e..8221088b34e1cd 100644 --- a/packages/material-ui/src/TableBody/TableBody.test.js +++ b/packages/material-ui/src/TableBody/TableBody.test.js @@ -1,6 +1,6 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import TableBody from './TableBody'; import Tablelvl2Context from '../Table/Tablelvl2Context'; @@ -10,12 +10,11 @@ describe('', () => { function mountInTable(node) { const wrapper = mount({node}
); - return wrapper.childAt(0); + return wrapper.find('table').childAt(0); } before(() => { mount = createMount(); - classes = getClasses(); }); @@ -23,21 +22,14 @@ describe('', () => { mount.cleanUp(); }); - it('should render a tbody', () => { - const wrapper = mountInTable(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'TBODY'); - }); - - it('should render a div', () => { - const wrapper = mount(foo); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - }); - - it('should render with the user and root class', () => { - const wrapper = mountInTable(); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTableBody'), true); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'tbody', + mount: mountInTable, + refInstanceof: window.HTMLTableSectionElement, + // can't test with custom `component` with `mountInTable` + testComponentPropWith: 'tbody', + })); it('should render children', () => { const children = ; @@ -47,6 +39,7 @@ describe('', () => { it('should define table.body in the child context', () => { let context; + // TODO test integration with TableCell mountInTable( From 0fd748c88354814fb54bfb712f83299d14809df3 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 20:18:28 +0100 Subject: [PATCH 28/96] [Table] Test conformance --- packages/material-ui/src/Table/Table.test.js | 56 ++++++++------------ 1 file changed, 23 insertions(+), 33 deletions(-) diff --git a/packages/material-ui/src/Table/Table.test.js b/packages/material-ui/src/Table/Table.test.js index 802ecf1c01a090..f493df88fb7786 100644 --- a/packages/material-ui/src/Table/Table.test.js +++ b/packages/material-ui/src/Table/Table.test.js @@ -1,8 +1,9 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import Table from './Table'; import TableContext from './TableContext'; +import findOutermostIntrinsic from '../test-utils/findOutermostIntrinsic'; describe('', () => { let mount; @@ -13,41 +14,29 @@ describe('
', () => { classes = getClasses(
foo
); }); - it('should render a table', () => { - const wrapper = mount( - - -
, - ); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'TABLE'); + after(() => { + mount.cleanUp(); }); - it('should render a div', () => { - const wrapper = mount(foo
); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'DIV'); - }); - - it('should spread custom props on the root node', () => { - const wrapper = mount( - - -
, - ); - assert.strictEqual( - wrapper.props()['data-my-prop'], - 'woofTable', - 'custom prop should be woofTable', - ); - }); + describeConformance( + + +
, + () => ({ + classes, + inheritComponent: 'table', + mount, + refInstanceof: window.HTMLTableElement, + // can't test another component with tbody as a child + testComponentPropWith: 'table', + }), + ); - it('should render with the user and root classes', () => { - const wrapper = mount( - - -
, - ); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass('woofTable'), true); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); + describe('prop: component', () => { + it('can render a different component', () => { + const wrapper = mount(foo
); + assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div'); + }); }); it('should render children', () => { @@ -59,6 +48,7 @@ describe('', () => { it('should define table in the child context', () => { let context; + // TODO test integration with TableCell mount(
From d22563d49211dbedc6e61ebbc00111b27000ccb0 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Thu, 21 Mar 2019 20:37:28 +0100 Subject: [PATCH 29/96] [Tab] Test conformance --- packages/material-ui/src/Tab/Tab.test.js | 27 +++++++----------------- 1 file changed, 8 insertions(+), 19 deletions(-) diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js index 0f84d5b8752163..0d4da8cee41b45 100644 --- a/packages/material-ui/src/Tab/Tab.test.js +++ b/packages/material-ui/src/Tab/Tab.test.js @@ -4,6 +4,7 @@ import { spy } from 'sinon'; import { createShallow, createMount, + describeConformance, getClasses, findOutermostIntrinsic, } from '@material-ui/core/test-utils'; @@ -27,25 +28,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render with the root class', () => { - const wrapper = mount(); - const root = wrapper.find(`.${classes.root}`).first(); - assert.strictEqual(root.exists(), true); - assert.strictEqual(root.type(), ButtonBase); - }); - - describe('prop: className', () => { - it('should render with the user and root classes', () => { - const wrapper = mount(); - assert.strictEqual( - wrapper - .find(`.${classes.root}`) - .first() - .hasClass('woofTab'), - true, - ); - }); - }); + describeConformance(, () => ({ + classes, + inheritComponent: ButtonBase, + mount, + refInstanceof: window.HTMLButtonElement, + testComponentPropWith: false, + })); describe('prop: selected', () => { it('should render with the selected and root classes', () => { From 165d4a80a9d0f07460589480ca0da1d572f05a97 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 12:27:47 +0100 Subject: [PATCH 30/96] [SvgIcon] Test conformance --- .../material-ui/src/SvgIcon/SvgIcon.test.js | 69 ++++++++----------- 1 file changed, 30 insertions(+), 39 deletions(-) diff --git a/packages/material-ui/src/SvgIcon/SvgIcon.test.js b/packages/material-ui/src/SvgIcon/SvgIcon.test.js index e1a608b20abaa6..0a80d59fd98ff4 100644 --- a/packages/material-ui/src/SvgIcon/SvgIcon.test.js +++ b/packages/material-ui/src/SvgIcon/SvgIcon.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import SvgIcon from './SvgIcon'; describe('', () => { @@ -20,27 +25,36 @@ describe('', () => { mount.cleanUp(); }); + describeConformance( + + + , + () => ({ + classes, + inheritComponent: 'svg', + mount, + refInstanceof: window.SVGSVGElement, + testComponentPropWith: props => ( + + + + + + + + {/* eslint-disable-next-line react/prop-types */} + {props.children} + + ), + }), + ); + it('renders children by default', () => { const wrapper = shallow({path}); assert.strictEqual(wrapper.contains(path), true); assert.strictEqual(wrapper.props()['aria-hidden'], 'true'); }); - it('should render an svg', () => { - const wrapper = shallow(book); - assert.strictEqual(wrapper.name(), 'svg'); - }); - - it('should spread props on svg', () => { - const wrapper = shallow( - - {path} - , - ); - assert.strictEqual(wrapper.props()['data-test'], 'hello'); - assert.strictEqual(wrapper.props().viewBox, '0 0 32 32'); - }); - describe('prop: titleAccess', () => { it('should be able to make an icon accessible', () => { const wrapper = shallow( @@ -87,27 +101,4 @@ describe('', () => { assert.strictEqual(wrapper.hasClass(classes.fontSizeInherit), true); }); }); - - describe('prop: component', () => { - it('should render component before path', () => { - const wrapper = mount( - ( - - - - - - - - {props.children} - - )} - > - {path} - , - ); - assert.strictEqual(wrapper.find('defs').length, 1); - }); - }); }); From a2a2a9ac439be8997826d9c18136d98fa88948a9 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 15:58:48 +0100 Subject: [PATCH 31/96] [Stepper] Test conformance --- .../material-ui/src/Stepper/Stepper.test.js | 39 ++++++++++++------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/Stepper/Stepper.test.js b/packages/material-ui/src/Stepper/Stepper.test.js index 603e8f0343314c..00f7370f4c912a 100644 --- a/packages/material-ui/src/Stepper/Stepper.test.js +++ b/packages/material-ui/src/Stepper/Stepper.test.js @@ -1,7 +1,12 @@ import React from 'react'; import { assert } from 'chai'; import CheckCircle from '../internal/svg-icons/CheckCircle'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Paper from '../Paper'; import Step from '../Step'; import StepLabel from '../StepLabel'; @@ -10,10 +15,12 @@ import StepContent from '../StepContent'; import Stepper from './Stepper'; describe('', () => { + let classes; let shallow; let mount; before(() => { + classes = getClasses(); shallow = createShallow({ dive: true }); mount = createMount(); }); @@ -22,24 +29,26 @@ describe('', () => { mount.cleanUp(); }); - it('merges user className into the root node', () => { - const wrapper = shallow( - - - , - ); - - assert.include(wrapper.props().className, 'foo'); - }); - - it('should render a Paper component', () => { - const wrapper = shallow( + describeConformance( + + + , + () => ({ + classes, + inheritComponent: Paper, + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + }), + ); + + it('has no elevation by default', () => { + const wrapper = mount( , ); - assert.strictEqual(wrapper.type(), Paper); - assert.strictEqual(wrapper.props().elevation, 0, 'should have no elevation'); + assert.strictEqual(wrapper.find(Paper).props().elevation, 0, 'should have no elevation'); }); describe('rendering children', () => { From 003d9625ce36b7361364dea0a68ac64e7cc11f84 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 16:01:27 +0100 Subject: [PATCH 32/96] [StepLabel] Test conformance --- .../src/StepLabel/StepLabel.test.js | 36 ++++++++----------- 1 file changed, 15 insertions(+), 21 deletions(-) diff --git a/packages/material-ui/src/StepLabel/StepLabel.test.js b/packages/material-ui/src/StepLabel/StepLabel.test.js index f2a963526ec1b9..50e45c3b38dd19 100644 --- a/packages/material-ui/src/StepLabel/StepLabel.test.js +++ b/packages/material-ui/src/StepLabel/StepLabel.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Typography from '../Typography'; import StepIcon from '../StepIcon'; import StepLabel from './StepLabel'; @@ -20,12 +25,19 @@ describe('', () => { mount.cleanUp(); }); - it('merges styles and other props into the root node', () => { + describeConformance(, () => ({ + classes, + inheritComponent: 'span', + mount, + refInstanceof: window.HTMLSpanElement, + testComponentPropWith: false, + })); + + it('merges styles into the root node', () => { const wrapper = shallow( My Label , @@ -34,7 +46,6 @@ describe('', () => { assert.strictEqual(props.style.paddingRight, 200); assert.strictEqual(props.style.color, 'purple'); assert.strictEqual(props.style.border, '1px solid tomato'); - assert.strictEqual(props['data-myProp'], 'hello'); }); describe('label content', () => { @@ -166,23 +177,6 @@ describe('', () => { }); }); - describe('prop: classes', () => { - it('should set iconContainer', () => { - const wrapper = shallow( - - Step One - , - ); - assert.include( - wrapper - .find('span') - .at(1) - .props().className, - 'my-custom-class', - ); - }); - }); - describe('prop: optional = Optional Text', () => { it('creates a component with text "Optional Text"', () => { const wrapper = shallow( From 646fbfee5477f8432bc5c4aa492de19cf7308383 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:01:33 +0100 Subject: [PATCH 33/96] [StepContent] Test conformance --- .../src/StepContent/StepContent.test.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/StepContent/StepContent.test.js b/packages/material-ui/src/StepContent/StepContent.test.js index ceae3199f913f4..f48a689c77f6d5 100644 --- a/packages/material-ui/src/StepContent/StepContent.test.js +++ b/packages/material-ui/src/StepContent/StepContent.test.js @@ -1,10 +1,16 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Collapse from '../Collapse'; import StepContent from './StepContent'; describe('', () => { + let classes; let shallow; let mount; const defaultProps = { @@ -12,6 +18,7 @@ describe('', () => { }; before(() => { + classes = getClasses(); shallow = createShallow({ dive: true }); mount = createMount(); }); @@ -20,16 +27,18 @@ describe('', () => { mount.cleanUp(); }); - it('renders a div', () => { - const wrapper = shallow(Here is the content); - assert.strictEqual(wrapper.type(), 'div'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); it('merges styles and other props into the root node', () => { const wrapper = shallow( Lorem ipsum @@ -39,7 +48,6 @@ describe('', () => { assert.strictEqual(props.style.paddingRight, 200); assert.strictEqual(props.style.color, 'purple'); assert.strictEqual(props.style.border, '1px solid tomato'); - assert.strictEqual(props['data-role'], 'Tabpanel'); }); it('renders children inside an Collapse component', () => { From dc668bbdc53edd7f004f92eab772bfd1540cb9d2 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:03:18 +0100 Subject: [PATCH 34/96] [StepConnector] Test conformance --- .../src/StepConnector/StepConnector.test.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/StepConnector/StepConnector.test.js b/packages/material-ui/src/StepConnector/StepConnector.test.js index eef50a2155ff58..1af38d5fc2c36f 100644 --- a/packages/material-ui/src/StepConnector/StepConnector.test.js +++ b/packages/material-ui/src/StepConnector/StepConnector.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import StepConnector from './StepConnector'; describe('', () => { @@ -18,6 +23,14 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); + describe('rendering', () => { it('renders a div containing a span', () => { const wrapper = shallow(); From b849d94242a55fa4722a2e2c7c91eec569f35959 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:04:40 +0100 Subject: [PATCH 35/96] [StepButton] Test conformance --- .../src/StepButton/StepButton.test.js | 40 +++++++++---------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/material-ui/src/StepButton/StepButton.test.js b/packages/material-ui/src/StepButton/StepButton.test.js index 9a16c6574626e2..9e1da4aa6f0d2d 100644 --- a/packages/material-ui/src/StepButton/StepButton.test.js +++ b/packages/material-ui/src/StepButton/StepButton.test.js @@ -1,17 +1,24 @@ import React from 'react'; import { assert } from 'chai'; import { spy } from 'sinon'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import StepButton from './StepButton'; import StepLabel from '../StepLabel'; import ButtonBase from '../ButtonBase'; describe('', () => { + let classes; let shallow; let mount; const defaultProps = { orientation: 'horizontal' }; before(() => { + classes = getClasses(); shallow = createShallow({ dive: true }); mount = createMount(); }); @@ -20,27 +27,17 @@ describe('', () => { mount.cleanUp(); }); - it('merges user className into the root node', () => { - const wrapper = shallow( - - Hello - , - ); + describeConformance(, () => ({ + classes, + inheritComponent: ButtonBase, + mount, + refInstanceof: window.HTMLButtonElement, + testComponentPropWith: false, + })); - assert.include(wrapper.props().className, 'foo'); - }); - - it('should render an ButtonBase with a StepLabel', () => { - const wrapper = shallow(Step One); - assert.strictEqual(wrapper.type(), ButtonBase); - const stepLabel = wrapper.find(StepLabel); - assert.strictEqual(stepLabel.length, 1); - assert.strictEqual(stepLabel.props().children, 'Step One'); - }); - - it('should pass props to StepLabel', () => { + it('passes active, completed, disabled to StepLabel', () => { const wrapper = shallow( - + Step One , ); @@ -48,6 +45,7 @@ describe('', () => { assert.strictEqual(stepLabel.props().active, true); assert.strictEqual(stepLabel.props().completed, true); assert.strictEqual(stepLabel.props().disabled, true); + assert.strictEqual(stepLabel.props().children, 'Step One'); }); it('should pass props to a provided StepLabel', () => { @@ -62,7 +60,7 @@ describe('', () => { assert.strictEqual(stepLabel.props().disabled, true); }); - it("should pass disabled prop to a StepLabel's Button", () => { + it('should pass disabled prop to the ButtonBase', () => { const wrapper = shallow( Step One From e706a3fa156a144e0c348e5344c0c3fdb9278093 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:20:33 +0100 Subject: [PATCH 36/96] [Step] Test conformance --- packages/material-ui/src/Step/Step.test.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Step/Step.test.js b/packages/material-ui/src/Step/Step.test.js index 42b7561c89a47f..7d4e48b2138281 100644 --- a/packages/material-ui/src/Step/Step.test.js +++ b/packages/material-ui/src/Step/Step.test.js @@ -1,13 +1,20 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, createMount } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Step from './Step'; describe('', () => { + let classes; let shallow; let mount; before(() => { + classes = getClasses(); shallow = createShallow({ dive: true }); mount = createMount(); }); @@ -16,6 +23,14 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); + it('merges styles and other props into the root node', () => { const wrapper = shallow( Date: Fri, 22 Mar 2019 17:29:55 +0100 Subject: [PATCH 37/96] [test] Don't test component if not required Behavior is simply undefined for not defined props. Might cause one or multiple errors, might be silent --- .../src/test-utils/describeConformance.js | 20 +------------------ 1 file changed, 1 insertion(+), 19 deletions(-) diff --git a/packages/material-ui/src/test-utils/describeConformance.js b/packages/material-ui/src/test-utils/describeConformance.js index 5b23e554ddacc8..2ec65a1bfd9506 100644 --- a/packages/material-ui/src/test-utils/describeConformance.js +++ b/packages/material-ui/src/test-utils/describeConformance.js @@ -1,6 +1,5 @@ import { assert } from 'chai'; import React from 'react'; -import consoleErrorMock from 'test/utils/consoleErrorMock'; /** * Glossary @@ -54,24 +53,7 @@ function testComponentProp(element, getOptions) { const { testComponentPropWith } = getOptions(); describe('prop: component', () => { - if (testComponentPropWith === false) { - beforeEach(() => { - consoleErrorMock.spy(); - }); - - after(() => { - consoleErrorMock.reset(); - }); - - // This test will fail on subsequent runs since React caches warnings - it('does not accept a `component` prop', () => { - const { testComponentPropWith: component = 'em', mount } = getOptions(); - - mount(React.cloneElement(element, { component })); - - assert.strictEqual(consoleErrorMock.callCount(), 1); - }); - } else { + if (testComponentPropWith !== false) { it('can render another root component with the `component` prop', () => { const { classes, mount, testComponentPropWith: component = 'em' } = getOptions(); From f3ad7da25f87f88580ecfbd109d53830b90ce9ec Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:30:08 +0100 Subject: [PATCH 38/96] [SnackbarContent] Test conformance --- .../SnackbarContent/SnackbarContent.test.js | 24 +++++++++++++++---- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js index 05e1dfa89c186c..84657f8de02430 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.test.js @@ -1,23 +1,37 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { + createShallow, + createMount, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; +import Paper from '../Paper'; import SnackbarContent from './SnackbarContent'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ untilSelector: 'withStyles(Paper)' }); classes = getClasses(); }); - it('should render a Paper with classes', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'div'); - assert.strictEqual(wrapper.hasClass(classes.root), true); + after(() => { + mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: Paper, + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); + describe('prop: action', () => { it('should render the action', () => { const action = action; From cb1520e591202ecd8a27ced08705d267c2a42fb6 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 22 Mar 2019 17:33:22 +0100 Subject: [PATCH 39/96] [Snackbar] Test conformance --- .../material-ui/src/Snackbar/Snackbar.test.js | 26 ++++++++++--------- 1 file changed, 14 insertions(+), 12 deletions(-) diff --git a/packages/material-ui/src/Snackbar/Snackbar.test.js b/packages/material-ui/src/Snackbar/Snackbar.test.js index 12c1368f7df77f..01659025013873 100644 --- a/packages/material-ui/src/Snackbar/Snackbar.test.js +++ b/packages/material-ui/src/Snackbar/Snackbar.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import { spy, useFakeTimers } from 'sinon'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import Snackbar from './Snackbar'; import Slide from '../Slide'; @@ -18,16 +18,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a ClickAwayListener with classes', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find('ClickAwayListener').exists(), true); - assert.strictEqual( - findOutermostIntrinsic(wrapper).hasClass(classes.root), - true, - 'should have the root class', - ); - assert.strictEqual(wrapper.find(Slide).exists(), true, 'should use a Slide by default'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); describe('prop: onClose', () => { it('should be call when clicking away', () => { @@ -384,7 +381,12 @@ describe('', () => { }); describe('prop: TransitionComponent', () => { - it('should render a Snackbar with TransitionComponent', () => { + it('should use a Slide by default', () => { + const wrapper = mount(); + assert.strictEqual(wrapper.find(Slide).exists(), true, 'should use a Slide by default'); + }); + + it('accepts a different component that handles the transition', () => { const Transition = () =>
; const wrapper = mount(); assert.strictEqual(wrapper.find(Transition).exists(), true); From 7b1f9525ae7ab2065ab9aba016131067fec043a5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 12:12:39 +0100 Subject: [PATCH 40/96] [Radio] Test conformance --- packages/material-ui/src/Radio/Radio.test.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Radio/Radio.test.js b/packages/material-ui/src/Radio/Radio.test.js index 0f6bdaac0f84fb..1aaca1e7d2ed27 100644 --- a/packages/material-ui/src/Radio/Radio.test.js +++ b/packages/material-ui/src/Radio/Radio.test.js @@ -2,7 +2,12 @@ import React from 'react'; import { assert } from 'chai'; import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked'; import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked'; -import { getClasses, createShallow, createMount } from '@material-ui/core/test-utils'; +import { + getClasses, + createShallow, + createMount, + describeConformance, +} from '@material-ui/core/test-utils'; import SwitchBase from '../internal/SwitchBase'; import Radio from './Radio'; @@ -21,6 +26,14 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: 'span', + mount, + refInstanceof: window.HTMLSpanElement, + testComponentPropWith: false, + })); + describe('styleSheet', () => { it('should have the classes required for SwitchBase', () => { assert.strictEqual(typeof classes.root, 'string'); From 3ee95979402915ae87dc930aa36569389640c1bb Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 12:20:31 +0100 Subject: [PATCH 41/96] [Paper] Test conformance --- packages/material-ui/src/Paper/Paper.test.js | 46 ++++++++++---------- 1 file changed, 22 insertions(+), 24 deletions(-) diff --git a/packages/material-ui/src/Paper/Paper.test.js b/packages/material-ui/src/Paper/Paper.test.js index a01f1cf3eebeaa..04b248a6ab289f 100644 --- a/packages/material-ui/src/Paper/Paper.test.js +++ b/packages/material-ui/src/Paper/Paper.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 Paper from './Paper'; describe('', () => { @@ -18,20 +23,24 @@ describe('', () => { mount.cleanUp(); }); - it('should render a div', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.name(), 'div'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: 'header', + })); - it('should render with the root class, default depth class', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass(classes.root), true); - assert.strictEqual(wrapper.hasClass(classes.rounded), true); - }); + describe('prop: square', () => { + it('can disable the rounded class', () => { + const wrapper = mount(Hello World); + assert.strictEqual(wrapper.find(`.${classes.root}`).some(`.${classes.rounded}`), false); + }); - it('should disable the rounded class', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.hasClass(classes.rounded), false); + it('adds a rounded class to the root when omitted', () => { + const wrapper = mount(Hello World); + assert.strictEqual(wrapper.find(`.${classes.root}`).every(`.${classes.rounded}`), true); + }); }); it('should set the elevation elevation class', () => { @@ -54,15 +63,4 @@ describe('', () => { 'should have the 2 elevation class', ); }); - - it('does forward refs', () => { - testRef(, mount); - }); - - describe('prop: component', () => { - it('should render a header', () => { - const wrapper = shallow(Hello World); - assert.strictEqual(wrapper.name(), 'header'); - }); - }); }); From 5c399c2418db1dd44a5b96295b9a049cbafc211b Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 12:33:33 +0100 Subject: [PATCH 42/96] [Modal] Test conformance --- packages/material-ui/src/Modal/Modal.test.js | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Modal/Modal.test.js b/packages/material-ui/src/Modal/Modal.test.js index e496f09cf5e9f3..1720563e523353 100644 --- a/packages/material-ui/src/Modal/Modal.test.js +++ b/packages/material-ui/src/Modal/Modal.test.js @@ -3,7 +3,12 @@ import { assert } from 'chai'; import { spy, stub } from 'sinon'; import PropTypes from 'prop-types'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { + createMount, + findOutermostIntrinsic, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import Fade from '../Fade'; import Portal from '../Portal'; import Backdrop from '../Backdrop'; @@ -32,6 +37,19 @@ describe('', () => { mount.cleanUp(); }); + describeConformance( + +
+ , + () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + }), + ); + describe('prop: open', () => { it('should not render the children by default', () => { const wrapper = mount( From 9548a49902b4e27c41b343890586e35743e62684 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:13:01 +0100 Subject: [PATCH 43/96] [MobileStepper] Test conformance --- .../src/MobileStepper/MobileStepper.test.js | 33 ++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.test.js b/packages/material-ui/src/MobileStepper/MobileStepper.test.js index 0323bd08f77bf9..e507ad2162733d 100644 --- a/packages/material-ui/src/MobileStepper/MobileStepper.test.js +++ b/packages/material-ui/src/MobileStepper/MobileStepper.test.js @@ -1,6 +1,11 @@ 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 KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft'; import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight'; import Paper from '../Paper'; @@ -9,6 +14,7 @@ import LinearProgress from '../LinearProgress'; import MobileStepper from './MobileStepper'; describe('', () => { + let mount; let shallow; let classes; const defaultProps = { @@ -28,25 +34,22 @@ describe('', () => { }; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); }); - it('should render a Paper component', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.type(), Paper); - assert.strictEqual(wrapper.props().elevation, 0); - }); - - it('should render with the root class', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: Paper, + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); - it('should render the custom className and the root class', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.is('.test-class-name'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); + it('should render a Paper with 0 elevation', () => { + const wrapper = mount(); + assert.strictEqual(wrapper.find(Paper).props().elevation, 0); }); it('should render with the bottom class if position prop is set to bottom', () => { From 3d4fbda88adefea49ecc5de98483a61cb04f6570 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:17:44 +0100 Subject: [PATCH 44/96] [MenuItem] Test conformance --- .../material-ui/src/MenuItem/MenuItem.test.js | 34 +++++++++---------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/material-ui/src/MenuItem/MenuItem.test.js b/packages/material-ui/src/MenuItem/MenuItem.test.js index b60920ce039aec..42cc803422a922 100644 --- a/packages/material-ui/src/MenuItem/MenuItem.test.js +++ b/packages/material-ui/src/MenuItem/MenuItem.test.js @@ -1,7 +1,12 @@ import React from 'react'; import { assert } from 'chai'; import { spy } from 'sinon'; -import { createShallow, getClasses, createMount } from '@material-ui/core/test-utils'; +import { + createShallow, + getClasses, + createMount, + describeConformance, +} from '@material-ui/core/test-utils'; import ListItem from '../ListItem'; import ListItemSecondaryAction from '../ListItemSecondaryAction'; import MenuItem from './MenuItem'; @@ -21,17 +26,19 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: ListItem, + mount, + refInstanceof: window.HTMLLIElement, + testComponentPropWith: 'a', + })); + it('should render a button ListItem with with ripple', () => { const wrapper = shallow(); assert.strictEqual(wrapper.type(), ListItem); - assert.strictEqual(wrapper.props().button, true); - assert.strictEqual(wrapper.props().disableRipple, undefined); - }); - - it('should render with the user and root classes', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass('woofMenuItem'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); + assert.strictEqual(wrapper.find(ListItem).props().button, true); + assert.strictEqual(wrapper.find(ListItem).props().disableRipple, undefined); }); it('should render with the selected class', () => { @@ -84,15 +91,6 @@ describe('', () => { }); }); - describe('prop: component', () => { - it('should be able to override the rendered component', () => { - const wrapper = shallow(); - - assert.strictEqual(wrapper.props().component, 'a'); - assert.strictEqual(wrapper.props().disableRipple, undefined); - }); - }); - describe('mount', () => { it('should not fail with a li > li error message', () => { const wrapper1 = mount( From cbbc672640921521bce859bf46fb27867ef02832 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:23:41 +0100 Subject: [PATCH 45/96] [ListSubheader] Test conformance --- .../src/ListSubheader/ListSubheader.test.js | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/material-ui/src/ListSubheader/ListSubheader.test.js b/packages/material-ui/src/ListSubheader/ListSubheader.test.js index 80e180d217cd9f..3c584f7fc1baa0 100644 --- a/packages/material-ui/src/ListSubheader/ListSubheader.test.js +++ b/packages/material-ui/src/ListSubheader/ListSubheader.test.js @@ -1,27 +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 ListSubheader from './ListSubheader'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); }); - it('should render a li', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'li'); - }); - - it('should render with the user and root classes', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass('woofListSubheader'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'li', + mount, + refInstanceof: window.HTMLLIElement, + })); it('should display primary color', () => { const wrapper = shallow(); From 0576fbeef227b5ec685650b3a1204695b052b596 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:25:55 +0100 Subject: [PATCH 46/96] [ListItemText] Test conformance --- .../src/ListItemText/ListItemText.test.js | 27 +++++++++---------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/material-ui/src/ListItemText/ListItemText.test.js b/packages/material-ui/src/ListItemText/ListItemText.test.js index 044f4254e34a51..0d8e5d9d85b744 100644 --- a/packages/material-ui/src/ListItemText/ListItemText.test.js +++ b/packages/material-ui/src/ListItemText/ListItemText.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { getClasses, createMount, findOutermostIntrinsic } from '@material-ui/core/test-utils'; +import { + getClasses, + createMount, + describeConformance, + findOutermostIntrinsic, +} from '@material-ui/core/test-utils'; import Typography from '../Typography'; import ListItemText from './ListItemText'; @@ -17,19 +22,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a div', () => { - const wrapper = mount(); - const listItemText = findOutermostIntrinsic(wrapper); - assert.strictEqual(listItemText.name(), 'div'); - assert.strictEqual(listItemText.hasClass(classes.root), true); - }); - - it('should render with the user and root classes', () => { - const wrapper = mount(); - const listItemText = findOutermostIntrinsic(wrapper); - assert.strictEqual(listItemText.hasClass('woofListItemText'), true); - assert.strictEqual(listItemText.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); it('should render with inset class', () => { const wrapper = mount(); From b815ddaa5d90efd84b490786f2e1dec91b79c009 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:27:43 +0100 Subject: [PATCH 47/96] [ListitemSecondaryAction] Test conformance --- .../ListItemSecondaryAction.test.js | 25 +++++++++---------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js index 47ddd93a6646e7..9b3e5e66b6c783 100644 --- a/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js +++ b/packages/material-ui/src/ListItemSecondaryAction/ListItemSecondaryAction.test.js @@ -1,26 +1,25 @@ import React from 'react'; -import { assert } from 'chai'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import ListItemSecondaryAction from './ListItemSecondaryAction'; describe('', () => { - let shallow; + let mount; let classes; before(() => { - shallow = createShallow({ untilSelector: 'ListItemSecondaryAction' }); + mount = createMount(); classes = getClasses(); }); - it('should render a div', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'div'); - assert.strictEqual(wrapper.hasClass(classes.root), true); + after(() => { + mount.cleanUp(); }); - it('should render with the user and root classes', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass('woofListItemSecondaryAction'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); }); From 21cdd6a9b90d021122c5a446affce6022fb7a9b7 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:33:56 +0100 Subject: [PATCH 48/96] [ListItemIcon] Test conformance --- .../src/ListItemIcon/ListItemIcon.test.js | 38 ++++++++++++------- 1 file changed, 25 insertions(+), 13 deletions(-) diff --git a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js index 08debf8c3284d6..539e0552c52f11 100644 --- a/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js +++ b/packages/material-ui/src/ListItemIcon/ListItemIcon.test.js @@ -1,13 +1,20 @@ 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 ListItemIcon from './ListItemIcon'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses( @@ -16,6 +23,23 @@ describe('', () => { ); }); + after(() => { + mount.cleanUp(); + }); + + describeConformance( + +
+ , + () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + }), + ); + it('should render a span inside a div', () => { const wrapper = shallow( @@ -25,16 +49,4 @@ describe('', () => { assert.strictEqual(wrapper.name(), 'div'); assert.strictEqual(wrapper.children().name(), 'span'); }); - - it('should render a div with the user and root classes, but not the children classes', () => { - const wrapper = shallow( - - - , - ); - assert.strictEqual(wrapper.hasClass('foo'), true); - assert.strictEqual(wrapper.hasClass('bar'), false); - assert.strictEqual(wrapper.children().hasClass('bar'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); }); From 8930151f56040674096ca3f391791b744b45f62a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:34:02 +0100 Subject: [PATCH 49/96] [ListItem] Test conformance --- .../material-ui/src/ListItem/ListItem.test.js | 47 +++++++------------ 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/packages/material-ui/src/ListItem/ListItem.test.js b/packages/material-ui/src/ListItem/ListItem.test.js index cd91fd8045747f..41928fb4b4f5ba 100644 --- a/packages/material-ui/src/ListItem/ListItem.test.js +++ b/packages/material-ui/src/ListItem/ListItem.test.js @@ -1,7 +1,12 @@ import React from 'react'; import { assert } from 'chai'; import PropTypes from 'prop-types'; -import { getClasses, createMount, findOutermostIntrinsic } from '@material-ui/core/test-utils'; +import { + getClasses, + createMount, + describeConformance, + findOutermostIntrinsic, +} from '@material-ui/core/test-utils'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import ListItemText from '../ListItemText'; import ListItemSecondaryAction from '../ListItemSecondaryAction'; @@ -24,36 +29,28 @@ describe('', () => { mount.cleanUp(); }); - it('should render a div', () => { - const wrapper = mount(); - const listItem = wrapper.getDOMNode(); - assert.strictEqual(listItem.nodeName, 'DIV'); - }); - - it('should render a li', () => { - const wrapper = mount(); - const listItem = wrapper.getDOMNode(); - assert.strictEqual(listItem.nodeName, 'LI'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'li', + mount, + refInstanceof: window.HTMLLIElement, + })); - it('should render with the user, root and gutters classes', () => { + it('should render with gutters classes', () => { const wrapper = mount(); - const listItem = findOutermostIntrinsic(wrapper); - assert.strictEqual(listItem.hasClass('woofListItem'), true); - assert.strictEqual(listItem.hasClass(classes.root), true); + const listItem = wrapper.find('li'); assert.strictEqual(listItem.hasClass(classes.gutters), true); }); it('should render with the selected class', () => { const wrapper = mount(); - const listItem = findOutermostIntrinsic(wrapper); + const listItem = wrapper.find('li'); assert.strictEqual(listItem.hasClass(classes.selected), true); }); it('should disable the gutters', () => { const wrapper = mount(); - const listItem = findOutermostIntrinsic(wrapper); - assert.strictEqual(listItem.hasClass(classes.root), true); + const listItem = wrapper.find('li'); assert.strictEqual(listItem.hasClass(classes.gutters), false); }); @@ -78,18 +75,6 @@ describe('', () => { }); }); - describe('prop: component', () => { - it('should change the component to a', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'A'); - }); - - it('should change the component to li', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.getDOMNode().nodeName, 'LI'); - }); - }); - describe('context: dense', () => { it('should forward the context', () => { let context = null; From 625b53b3c99c23435ceb4dbe6a4bd405f72fa468 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:35:41 +0100 Subject: [PATCH 50/96] [List] Test conformance --- packages/material-ui/src/List/List.test.js | 25 +++++++--------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/packages/material-ui/src/List/List.test.js b/packages/material-ui/src/List/List.test.js index b423da9a98adf2..26165bb2d8cee8 100644 --- a/packages/material-ui/src/List/List.test.js +++ b/packages/material-ui/src/List/List.test.js @@ -2,9 +2,9 @@ import React from 'react'; import { assert } from 'chai'; import { createMount, + describeConformance, findOutermostIntrinsic, getClasses, - testRef, } from '@material-ui/core/test-utils'; import ListSubheader from '../ListSubheader'; import List from './List'; @@ -23,21 +23,16 @@ describe('', () => { mount.cleanUp(); }); - it('renders a ul by default', () => { - const wrapper = mount(); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'ul'); - }); - - it('can render a div', () => { - const wrapper = mount(); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div'); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'ul', + mount, + refInstanceof: window.HTMLUListElement, + })); - it('should render with the user, root and padding classes', () => { + it('should render with padding classes', () => { const wrapper = mount(); const root = wrapper.find('ul'); - assert.strictEqual(root.hasClass('woofList'), true); - assert.strictEqual(root.hasClass(classes.root), true); assert.strictEqual(root.hasClass(classes.padding), true); }); @@ -46,10 +41,6 @@ describe('', () => { assert.strictEqual(wrapper.find('ul').hasClass(classes.padding), false); }); - it('does forward refs', () => { - testRef(, mount); - }); - describe('prop: subheader', () => { it('should render with subheader class', () => { const wrapper = mount(Title} />); From 4d619f2808e944d0297d60a3ff572eed05f6b623 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sat, 23 Mar 2019 13:41:28 +0100 Subject: [PATCH 51/96] [Link] Test conformance --- packages/material-ui/src/Link/Link.test.js | 35 ++++++++++------------ 1 file changed, 15 insertions(+), 20 deletions(-) diff --git a/packages/material-ui/src/Link/Link.test.js b/packages/material-ui/src/Link/Link.test.js index 007b26340dc00d..95c3aa0e9b08f9 100644 --- a/packages/material-ui/src/Link/Link.test.js +++ b/packages/material-ui/src/Link/Link.test.js @@ -1,43 +1,38 @@ 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 Link from './Link'; import Typography from '../Typography'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(Home); }); - it('should render a element', () => { - const wrapper = shallow(Home); - assert.strictEqual(wrapper.type(), Typography); - }); + describeConformance(Home, () => ({ + classes, + inheritComponent: Typography, + mount, + refInstanceof: window.HTMLAnchorElement, + testComponentPropWith: false, + })); it('should render children', () => { const wrapper = shallow(Home); assert.strictEqual(wrapper.contains('Home'), true); }); - it('should render with the root class', () => { - const wrapper = shallow(Home); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); - - it('should render the custom className and the root class', () => { - const wrapper = shallow( - - Test - , - ); - assert.strictEqual(wrapper.is('.test-class-name'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); - it('should pass props to the component', () => { const wrapper = shallow( From 697db86595415b618238a68202ec8092976df9b5 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:27:53 +0100 Subject: [PATCH 52/96] [LinearProgress] Test conformance --- .../src/LinearProgress/LinearProgress.test.js | 27 ++++++++++++------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/material-ui/src/LinearProgress/LinearProgress.test.js b/packages/material-ui/src/LinearProgress/LinearProgress.test.js index 5986232e8f6f6f..4d278b78484dd5 100644 --- a/packages/material-ui/src/LinearProgress/LinearProgress.test.js +++ b/packages/material-ui/src/LinearProgress/LinearProgress.test.js @@ -1,29 +1,36 @@ import React from 'react'; import { assert } from 'chai'; import consoleErrorMock from 'test/utils/consoleErrorMock'; -import { createShallow, getClasses } from '@material-ui/core/test-utils'; +import { + createMount, + createShallow, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import LinearProgress from './LinearProgress'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); }); - it('should render a div with the root class', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.name(), 'div'); - assert.strictEqual(wrapper.hasClass(classes.root), true); + after(() => { + mount.cleanUp(); }); - it('should render with the user and root classes', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.hasClass('woofLinearProgress'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); it('should render indeterminate variant by default', () => { const wrapper = shallow(); From cb6ba14aab5ba209819655ad43315750988b542a Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:30:43 +0100 Subject: [PATCH 53/96] [InputLabel] Test conformance --- .../src/InputLabel/InputLabel.test.js | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/InputLabel/InputLabel.test.js b/packages/material-ui/src/InputLabel/InputLabel.test.js index 8775c3ff295a33..68b378a8c93bae 100644 --- a/packages/material-ui/src/InputLabel/InputLabel.test.js +++ b/packages/material-ui/src/InputLabel/InputLabel.test.js @@ -1,9 +1,15 @@ import React from 'react'; import PropTypes from 'prop-types'; 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 FormControlContext from '../FormControl/FormControlContext'; import InputLabel from './InputLabel'; +import FormLabel from '../FormLabel'; describe('', () => { let mount; @@ -18,15 +24,21 @@ describe('', () => { mount.cleanUp(); }); - it('should render a FormLabel', () => { + describeConformance(Foo, () => ({ + classes, + inheritComponent: FormLabel, + mount, + refInstanceof: window.HTMLLabelElement, + testComponentPropWith: false, + })); + + it('should render a label with text', () => { const wrapper = mount(Foo); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'label'); - assert.strictEqual(wrapper.text(), 'Foo'); + assert.strictEqual(wrapper.find('label').text(), 'Foo'); }); - it('should have the root and animated classes by default', () => { + it('should have the animated class by default', () => { const wrapper = mount(Foo); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.animated), true); }); From f0746096e0f4192b41a807394d0e3f42fefc304e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:32:48 +0100 Subject: [PATCH 54/96] [InputBase] Test conformance --- .../material-ui/src/InputBase/InputBase.test.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js index 15952cad2a13eb..1a0076f60d30e9 100644 --- a/packages/material-ui/src/InputBase/InputBase.test.js +++ b/packages/material-ui/src/InputBase/InputBase.test.js @@ -4,6 +4,7 @@ import { assert } from 'chai'; import { spy } from 'sinon'; import { createMount, + describeConformance, findOutermostIntrinsic, getClasses, unwrap, @@ -33,11 +34,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a
', () => { - const wrapper = mount(); - assert.strictEqual(findOutermostIntrinsic(wrapper).name(), 'div'); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.root), true); - }); + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); it('should render an inside the div', () => { const wrapper = mount(); From b632afbeedbaedff42cda593f3267c30bdba8da6 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:35:27 +0100 Subject: [PATCH 55/96] [InputAdornment] Test conformance --- .../src/InputAdornment/InputAdornment.test.js | 29 +++++++++---------- 1 file changed, 13 insertions(+), 16 deletions(-) diff --git a/packages/material-ui/src/InputAdornment/InputAdornment.test.js b/packages/material-ui/src/InputAdornment/InputAdornment.test.js index a5c3e6973742ec..cbee081d1dd73e 100644 --- a/packages/material-ui/src/InputAdornment/InputAdornment.test.js +++ b/packages/material-ui/src/InputAdornment/InputAdornment.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createMount, getClasses, findOutermostIntrinsic } from '@material-ui/core/test-utils'; +import { + createMount, + getClasses, + describeConformance, + findOutermostIntrinsic, +} from '@material-ui/core/test-utils'; import consoleErrorMock from 'test/utils/consoleErrorMock'; import Typography from '../Typography'; import InputAdornment from './InputAdornment'; @@ -21,21 +26,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a div', () => { - const wrapper = mount(foo); - const adornment = findOutermostIntrinsic(wrapper); - assert.strictEqual(adornment.name(), 'div'); - }); - - it('should render given component', () => { - const wrapper = mount( - - foo - , - ); - const adornment = findOutermostIntrinsic(wrapper); - assert.strictEqual(adornment.name(), 'span'); - }); + describeConformance(foo, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: 'span', + })); it('should wrap text children in a Typography', () => { const wrapper = mount(foo); From ec3847a9c241344bff3b76807e46008778f4e175 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:41:54 +0100 Subject: [PATCH 56/96] [IconButton] Test conformance --- .../src/IconButton/IconButton.test.js | 46 ++++--------------- 1 file changed, 8 insertions(+), 38 deletions(-) diff --git a/packages/material-ui/src/IconButton/IconButton.test.js b/packages/material-ui/src/IconButton/IconButton.test.js index f8c083e620ab1c..4496b31badf5ab 100644 --- a/packages/material-ui/src/IconButton/IconButton.test.js +++ b/packages/material-ui/src/IconButton/IconButton.test.js @@ -1,11 +1,10 @@ import React from 'react'; -import ReactDOM from 'react-dom'; -import { spy } from 'sinon'; import { assert } from 'chai'; import PropTypes from 'prop-types'; import { createShallow, createMount, + describeConformance, getClasses, findOutermostIntrinsic, } from '@material-ui/core/test-utils'; @@ -29,10 +28,13 @@ describe('', () => { mount.cleanUp(); }); - it('should render a ButtonBase', () => { - const wrapper = shallow(book); - assert.strictEqual(wrapper.type(), ButtonBase); - }); + describeConformance(book, () => ({ + classes, + inheritComponent: ButtonBase, + mount, + refInstanceof: window.HTMLButtonElement, + testComponentPropWith: false, + })); it('should render an inner label span (bloody safari)', () => { const wrapper = shallow(book); @@ -69,22 +71,6 @@ describe('', () => { assert.strictEqual(wrapper.props().disableRipple, true); }); - it('should spread props on ButtonBase', () => { - const wrapper = shallow( - - book - , - ); - assert.strictEqual(wrapper.props()['data-test'], 'hello'); - assert.strictEqual(wrapper.props().disableRipple, true); - }); - - it('should render with the user and root classes', () => { - const wrapper = shallow(book); - assert.strictEqual(wrapper.hasClass('woofIconButton'), true); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); - it('should pass centerRipple={true} to ButtonBase', () => { const wrapper = shallow(book); assert.strictEqual(wrapper.props().centerRipple, true); @@ -126,22 +112,6 @@ describe('', () => { }); }); - describe('prop: ref', () => { - it('should give a reference on the native button', () => { - function IconButtonRef(props) { - return ; - } - IconButtonRef.propTypes = { - rootRef: PropTypes.func.isRequired, - }; - - const ref = spy(); - mount(); - assert.strictEqual(ref.callCount, 1); - assert.strictEqual(ReactDOM.findDOMNode(ref.args[0][0]).type, 'button'); - }); - }); - describe('Firefox onClick', () => { beforeEach(() => { consoleErrorMock.spy(); From e9118234ca977314e2228fab63c5a68011a315cb Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:44:01 +0100 Subject: [PATCH 57/96] [Icon] Test conformance --- packages/material-ui/src/Icon/Icon.test.js | 37 ++++++++++++---------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/packages/material-ui/src/Icon/Icon.test.js b/packages/material-ui/src/Icon/Icon.test.js index 15754373f3cc85..c955b26021bc52 100644 --- a/packages/material-ui/src/Icon/Icon.test.js +++ b/packages/material-ui/src/Icon/Icon.test.js @@ -1,39 +1,42 @@ 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 Icon from './Icon'; describe('', () => { + let mount; let shallow; let classes; before(() => { + mount = createMount(); shallow = createShallow({ dive: true }); classes = getClasses(); }); - it('renders children by default', () => { - const wrapper = shallow(account_circle); - assert.strictEqual(wrapper.contains('account_circle'), true); + after(() => { + mount.cleanUp(); }); - it('should render an span with root class', () => { - const wrapper = shallow(account_circle); - assert.strictEqual(wrapper.name(), 'span'); - assert.strictEqual(wrapper.hasClass(classes.root), true); - }); + describeConformance(account_circle, () => ({ + classes, + inheritComponent: 'span', + mount, + refInstanceof: window.HTMLSpanElement, + testComponentPropWith: 'div', + })); - it('should spread props on span', () => { - const wrapper = shallow(account_circle); - assert.strictEqual(wrapper.props()['data-test'], 'hello'); + it('renders children by default', () => { + const wrapper = shallow(account_circle); + assert.strictEqual(wrapper.contains('account_circle'), true); }); describe('optional classes', () => { - it('should render with the user class', () => { - const wrapper = shallow(account_circle); - assert.strictEqual(wrapper.hasClass('meow'), true); - }); - it('should render with the secondary color', () => { const wrapper = shallow(account_circle); assert.strictEqual(wrapper.hasClass(classes.colorSecondary), true); From 133006632598055cec05a77a4b9e26c8cff7b356 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:52:34 +0100 Subject: [PATCH 58/96] [GridListTileBar] Test conformance --- .../GridListTileBar/GridListTileBar.test.js | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js index 4608181bc3ecc6..643ccd7162f923 100644 --- a/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js +++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.test.js @@ -1,15 +1,36 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow } from '@material-ui/core/test-utils'; +import { + createMount, + createShallow, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import GridListTileBar from './GridListTileBar'; describe('', () => { + let classes; + let mount; let shallow; before(() => { + classes = getClasses(); + mount = createMount(); shallow = createShallow({ dive: true }); }); + after(() => { + mount.cleanUp(); + }); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + mount, + refInstanceof: window.HTMLDivElement, + testComponentPropWith: false, + })); + const tileData = { img: 'images/grid-list/00-52-29-429_640.jpg', title: 'Breakfast', From 2fdfcc1c3181531ce791fa8f238331b78295f695 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:53:54 +0100 Subject: [PATCH 59/96] [GridListTile] Test conformance --- .../src/GridListTile/GridListTile.test.js | 39 +++++-------------- 1 file changed, 9 insertions(+), 30 deletions(-) diff --git a/packages/material-ui/src/GridListTile/GridListTile.test.js b/packages/material-ui/src/GridListTile/GridListTile.test.js index deecf72b6765a1..73c6bcea779442 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.test.js +++ b/packages/material-ui/src/GridListTile/GridListTile.test.js @@ -1,7 +1,7 @@ import React from 'react'; import { assert } from 'chai'; import { spy, useFakeTimers } from 'sinon'; -import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils'; +import { createMount, describeConformance, getClasses } from '@material-ui/core/test-utils'; import { act } from 'react-dom/test-utils'; import { setRef } from '../utils/reactHelpers'; import GridListTile from './GridListTile'; @@ -19,32 +19,20 @@ describe('', () => { mount.cleanUp(); }); + describeConformance(, () => ({ + classes, + inheritComponent: 'li', + mount, + refInstanceof: window.HTMLLIElement, + testComponentPropWith: 'div', + })); + const tileData = { img: 'images/grid-list/00-52-29-429_640.jpg', title: 'Breakfast', author: 'jill111', }; - it('should render a li', () => { - const wrapper = mount( - - foo - , - ); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'li'); - }); - - describe('prop: component', () => { - it('controls the root host node', () => { - const wrapper = mount( - - foo - , - ); - assert.strictEqual(findOutermostIntrinsic(wrapper).type(), 'div'); - }); - }); - describe('prop: children', () => { it('should render children by default', () => { const children = foo; @@ -60,15 +48,6 @@ describe('', () => { }); }); - describe('prop: className', () => { - it('should renders className', () => { - const children = foo; - const wrapper = mount({children}); - - assert.strictEqual(wrapper.hasClass('foo'), true); - }); - }); - function mountMockImage(imgEl) { const Image = React.forwardRef((props, ref) => { return ( From 80c1ebf4593799cf121abd2f5cc047db45916fdd Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 09:57:44 +0100 Subject: [PATCH 60/96] [GridList] Test conformance --- .../material-ui/src/GridList/GridList.test.js | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/material-ui/src/GridList/GridList.test.js b/packages/material-ui/src/GridList/GridList.test.js index 21f3dbbaa4a4d6..2e19e3b90d2ea9 100644 --- a/packages/material-ui/src/GridList/GridList.test.js +++ b/packages/material-ui/src/GridList/GridList.test.js @@ -1,6 +1,11 @@ import React from 'react'; import { assert } from 'chai'; -import { createShallow } from '@material-ui/core/test-utils'; +import { + createMount, + createShallow, + describeConformance, + getClasses, +} from '@material-ui/core/test-utils'; import GridList from './GridList'; const tilesData = [ @@ -17,29 +22,32 @@ const tilesData = [ ]; describe('', () => { + let classes; + let mount; let shallow; before(() => { + classes = getClasses(); + mount = createMount(); shallow = createShallow({ dive: true }); }); - it('should render a ul', () => { - const wrapper = shallow( - -
- , - ); - assert.strictEqual(wrapper.name(), 'ul'); + after(() => { + mount.cleanUp(); }); - it('should accept a component property', () => { - const wrapper = shallow( - -
- , - ); - assert.strictEqual(wrapper.name(), 'li'); - }); + describeConformance( + +
+ , + () => ({ + classes, + inheritComponent: 'ul', + mount, + refInstanceof: window.HTMLUListElement, + testComponentPropWith: 'li', + }), + ); it('should render children and change cellHeight', () => { const cellHeight = 250; From 8964a7d5204bee9b292596b64c2f5144d6ac6525 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Tue, 26 Mar 2019 10:35:29 +0100 Subject: [PATCH 61/96] [FormLabel] Test conformance --- .../src/FormLabel/FormLabel.test.js | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/packages/material-ui/src/FormLabel/FormLabel.test.js b/packages/material-ui/src/FormLabel/FormLabel.test.js index 14d992103a2244..1e2046a6c57d4f 100644 --- a/packages/material-ui/src/FormLabel/FormLabel.test.js +++ b/packages/material-ui/src/FormLabel/FormLabel.test.js @@ -1,7 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; 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 FormLabel from './FormLabel'; import FormControlContext from '../FormControl/FormControlContext'; @@ -14,13 +19,18 @@ describe('', () => { classes = getClasses(); }); - it('should render a