From 8b481aa52793821457625d97659a0c20fd9d97b3 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 25 Oct 2019 18:31:01 +0200 Subject: [PATCH 1/3] [Tab] Run tests in StrictMode --- packages/material-ui/src/Tab/Tab.test.js | 137 +++++++++++++---------- 1 file changed, 79 insertions(+), 58 deletions(-) diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js index c9294dc223b864..d792b3c21786a0 100644 --- a/packages/material-ui/src/Tab/Tab.test.js +++ b/packages/material-ui/src/Tab/Tab.test.js @@ -1,136 +1,157 @@ import React from 'react'; -import { assert } from 'chai'; +import { expect } from 'chai'; import { spy } from 'sinon'; -import { - createShallow, - createMount, - getClasses, - findOutermostIntrinsic, -} from '@material-ui/core/test-utils'; +import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '../test-utils/describeConformance'; +import { act, createClientRender } from 'test/utils/createClientRender'; import Tab from './Tab'; import ButtonBase from '../ButtonBase'; -import Icon from '../Icon'; + +const render = createClientRender({ strict: true }); describe('', () => { - let shallow; let mount; let classes; - const icon = restore; before(() => { - shallow = createShallow({ dive: true }); - // StrictModeViolation: test uses text() - mount = createMount({ strict: false }); + mount = createMount({ strict: true }); classes = getClasses(); }); - after(() => { - mount.cleanUp(); - }); - describeConformance(, () => ({ classes, inheritComponent: ButtonBase, mount, refInstanceof: window.HTMLButtonElement, skip: ['componentProp'], + after: () => mount.cleanUp(), })); it('should have a ripple by default', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.props().disableRipple, undefined); + const { container } = render(); + + expect(container.querySelector('.touch-ripple')).to.be.ok; }); - it('should pass disableRipple to ButtonBase', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.props().disableRipple, true); + it('can disable the ripple', () => { + const { container } = render( + , + ); + + expect(container.querySelector('.touch-ripple')).to.be.null; }); it('should have a focusRipple by default', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.props().focusRipple, true); + const { container, getByRole } = render( + , + ); + + act(() => { + getByRole('tab').focus(); + }); + + expect(container.querySelector('.focus-ripple')).to.be.ok; }); - it('should pass disableFocusRipple to ButtonBase', () => { - const wrapper = shallow(); - assert.strictEqual(wrapper.props().focusRipple, false); + it('can disable the focusRipple', () => { + const { container, getByRole } = render( + , + ); + + act(() => { + getByRole('tab').focus(); + }); + + expect(container.querySelector('.focus-ripple')).to.be.null; }); describe('prop: selected', () => { it('should render with the selected and root classes', () => { - const wrapper = mount(); - const root = wrapper.find(`.${classes.root}`).first(); - assert.strictEqual(root.hasClass(classes.selected), true); - assert.strictEqual(root.hasClass(classes.textColorSecondary), true); - assert.strictEqual(root.props()['aria-selected'], true); + const { getByRole } = render(); + + const tab = getByRole('tab'); + expect(tab).to.have.class(classes.root); + expect(tab).to.have.class(classes.selected); + expect(tab).to.have.class(classes.textColorSecondary); + expect(tab).to.have.attribute('aria-selected', 'true'); }); }); describe('prop: disabled', () => { it('should render with the disabled and root classes', () => { - const wrapper = mount(); - const tab = wrapper.find('button'); - assert.strictEqual(tab.hasClass(classes.disabled), true); - assert.strictEqual(tab.hasClass(classes.textColorSecondary), true); - assert.strictEqual(tab.hasClass(classes.root), true); + const { getByRole } = render(); + + const tab = getByRole('tab'); + expect(tab).to.have.class(classes.root); + expect(tab).to.have.class(classes.disabled); + expect(tab).to.have.class(classes.textColorSecondary); }); }); describe('prop: onClick', () => { it('should be called when a click is triggered', () => { const handleClick = spy(); - const wrapper = shallow( - {}} />, - ); - wrapper.simulate('click'); - assert.strictEqual(handleClick.callCount, 1, 'it should forward the onClick'); + const { getByRole } = render(); + + getByRole('tab').click(); + + expect(handleClick.callCount).to.equal(1); }); }); describe('prop: label', () => { it('should render label', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.text(), 'foo'); + const { getByRole } = render(); + + expect(getByRole('tab')).to.have.text('foo'); }); }); describe('prop: wrapped', () => { it('should add the wrapped class', () => { - const wrapper = mount(); - assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.wrapped), true); + const { getByRole } = render(); + + expect(getByRole('tab')).to.have.class(classes.wrapped); }); }); describe('prop: icon', () => { it('should render icon element', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find(Icon).exists(), true); + const { getByTestId } = render(} />); + + expect(getByTestId('icon')).to.be.ok; }); }); describe('prop: textColor', () => { it('should support the inherit value', () => { - const wrapper = mount(); - const tab = wrapper.find('button'); - assert.strictEqual(tab.hasClass(classes.selected), true); - assert.strictEqual(tab.hasClass(classes.textColorInherit), true); - assert.strictEqual(tab.hasClass(classes.root), true); + const { getByRole } = render(); + + const tab = getByRole('tab'); + expect(tab).to.have.class(classes.selected); + expect(tab).to.have.class(classes.textColorInherit); + expect(tab).to.have.class(classes.root); }); }); describe('prop: fullWidth', () => { it('should have the fullWidth class', () => { - const wrapper = mount(); - assert.strictEqual(wrapper.find(`button`).hasClass(classes.fullWidth), true); + const { getByRole } = render(); + + expect(getByRole('tab')).to.have.class(classes.fullWidth); }); }); describe('prop: style', () => { it('should be able to override everything', () => { - const style = { width: '80%', color: 'red', alignText: 'center' }; - const wrapper = shallow(); - assert.deepEqual(wrapper.props().style, style); + const { getByRole } = render( + , + ); + + const { style } = getByRole('tab'); + expect(style).to.have.property('width', '80%'); + expect(style).to.have.property('color', 'red'); + expect(style).to.have.property('alignText', 'center'); }); }); }); From 7b8412814ebe50f7fe95a5032609df5f001296e0 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Fri, 25 Oct 2019 19:00:46 +0200 Subject: [PATCH 2/3] Fix incomplete focus ripple tests --- packages/material-ui/src/Tab/Tab.test.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js index d792b3c21786a0..1ea05d3cb1be80 100644 --- a/packages/material-ui/src/Tab/Tab.test.js +++ b/packages/material-ui/src/Tab/Tab.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { spy } from 'sinon'; import { createMount, getClasses } from '@material-ui/core/test-utils'; import describeConformance from '../test-utils/describeConformance'; -import { act, createClientRender } from 'test/utils/createClientRender'; +import { act, createClientRender, fireEvent } from 'test/utils/createClientRender'; import Tab from './Tab'; import ButtonBase from '../ButtonBase'; @@ -45,8 +45,12 @@ describe('', () => { const { container, getByRole } = render( , ); + // simulate pointer device + fireEvent.pointerDown(document.body); act(() => { + fireEvent.keyDown(document.activeElement, { key: 'Tab' }); + // jsdom doesn't actually support tab focus, we need to do it manually getByRole('tab').focus(); }); @@ -57,8 +61,12 @@ describe('', () => { const { container, getByRole } = render( , ); + // simulate pointer device + fireEvent.pointerDown(document.body); act(() => { + fireEvent.keyDown(document.activeElement, { key: 'Tab' }); + // jsdom doesn't actually support tab focus, we need to do it manually getByRole('tab').focus(); }); From c46026f1710e1e23cecea4dafda6d24985548a0e Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 27 Oct 2019 14:56:11 +0100 Subject: [PATCH 3/3] Update packages/material-ui/src/Tab/Tab.test.js Co-Authored-By: Olivier Tassinari --- packages/material-ui/src/Tab/Tab.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui/src/Tab/Tab.test.js b/packages/material-ui/src/Tab/Tab.test.js index 1ea05d3cb1be80..cddc3dac1cf76c 100644 --- a/packages/material-ui/src/Tab/Tab.test.js +++ b/packages/material-ui/src/Tab/Tab.test.js @@ -23,7 +23,6 @@ describe('', () => { inheritComponent: ButtonBase, mount, refInstanceof: window.HTMLButtonElement, - skip: ['componentProp'], after: () => mount.cleanUp(), }));