From 4a29e94b4dae5f0d964a3d9beb8f5a86bb71ef12 Mon Sep 17 00:00:00 2001 From: eps1lon Date: Fri, 13 Nov 2020 10:22:32 +0100 Subject: [PATCH] [test] Remove data-mui-test from tests --- .../DateRangePicker/DateRangePicker.test.tsx | 4 +- packages/material-ui/src/Backdrop/Backdrop.js | 1 - .../material-ui/src/Backdrop/Backdrop.test.js | 2 +- packages/material-ui/src/Dialog/Dialog.js | 1 - .../material-ui/src/Dialog/Dialog.test.js | 39 ++++++++----------- packages/material-ui/src/Menu/Menu.js | 1 - packages/material-ui/src/Menu/Menu.test.js | 2 +- packages/material-ui/src/Modal/Modal.js | 1 - .../material-ui/src/Modal/SimpleBackdrop.js | 1 - packages/material-ui/src/Popover/Popover.js | 1 - .../material-ui/src/Popover/Popover.test.js | 28 +++++++------ .../material-ui/test/integration/Menu.test.js | 5 ++- test/utils/initMatchers.ts | 10 ++++- 13 files changed, 50 insertions(+), 46 deletions(-) diff --git a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx index 4778627f809a40..b1703da7800c5f 100644 --- a/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx +++ b/packages/material-ui-lab/src/DateRangePicker/DateRangePicker.test.tsx @@ -268,12 +268,12 @@ describe('', () => { open renderInput={defaultRangeRenderInput} onChange={() => {}} - renderDay={(day) =>
} + renderDay={(day) =>
} value={[null, null]} />, ); - expect(getAllByMuiTest('renderDayCalled')).not.to.have.length(0); + expect(screen.getAllByTestId('renderDayCalled')).not.to.have.length(0); }); it('prop – `calendars` renders provided amount of calendars', () => { diff --git a/packages/material-ui/src/Backdrop/Backdrop.js b/packages/material-ui/src/Backdrop/Backdrop.js index 5a396a0018d784..3bbe47c6974f2a 100644 --- a/packages/material-ui/src/Backdrop/Backdrop.js +++ b/packages/material-ui/src/Backdrop/Backdrop.js @@ -42,7 +42,6 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) { return (
', () => { it('should render a backdrop div with content of nested children', () => { const { container } = render( - +

Hello World

, ); diff --git a/packages/material-ui/src/Dialog/Dialog.js b/packages/material-ui/src/Dialog/Dialog.js index b5f0d8ea9e5872..0ee36339403157 100644 --- a/packages/material-ui/src/Dialog/Dialog.js +++ b/packages/material-ui/src/Dialog/Dialog.js @@ -219,7 +219,6 @@ const Dialog = React.forwardRef(function Dialog(props, ref) {
', () => { @@ -108,7 +109,9 @@ describe('', () => { dialog.click(); }); - fireEvent.keyDown(document.querySelector('[data-mui-test="FakeBackdrop"]'), { key: 'Esc' }); + // keyDown not targetted at anything specific + // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target + fireEvent.keyDown(document.activeElement, { key: 'Esc' }); expect(onEscapeKeyDown.calledOnce).to.equal(true); expect(onClose.calledOnce).to.equal(true); @@ -136,30 +139,22 @@ describe('', () => { act(() => { dialog.click(); - fireEvent.keyDown(document.querySelector('[data-mui-test="FakeBackdrop"]'), { key: 'Esc' }); + // keyDown is not targetted at anything specific. + // eslint-disable-next-line material-ui/disallow-active-element-as-key-event-target + fireEvent.keyDown(document.activeElement, { key: 'Esc' }); }); expect(onClose.callCount).to.equal(0); - clickBackdrop(document.body); + clickBackdrop(screen); expect(onClose.callCount).to.equal(0); }); - it('should spread custom props on the modal root node', () => { - render( - - foo - , - ); - const modal = document.querySelector('[data-mui-test="Modal"]'); - expect(modal).to.have.attribute('data-my-prop', 'woofDialog'); - }); - describe('backdrop', () => { it('does have `role` `none presentation`', () => { render(foo); - expect(findBackdrop(document.body)).to.have.attribute('role', 'none presentation'); + expect(findBackdrop(screen)).to.have.attribute('role', 'none presentation'); }); it('calls onBackdropClick and onClose when clicked', () => { @@ -171,7 +166,7 @@ describe('', () => { , ); - clickBackdrop(document); + clickBackdrop(screen); expect(onBackdropClick.callCount).to.equal(1); expect(onClose.callCount).to.equal(1); }); @@ -198,7 +193,7 @@ describe('', () => { ); fireEvent.mouseDown(getByRole('heading')); - findBackdrop(document.body).click(); + findBackdrop(screen).click(); expect(getByRole('dialog')).not.to.equal(null); }); }); diff --git a/packages/material-ui/src/Menu/Menu.js b/packages/material-ui/src/Menu/Menu.js index 8857372d8fbc8c..00590f8ea4a820 100644 --- a/packages/material-ui/src/Menu/Menu.js +++ b/packages/material-ui/src/Menu/Menu.js @@ -149,7 +149,6 @@ const Menu = React.forwardRef(function Menu(props, ref) { {...other} > ', () => { ); const popover = wrapper.find(Popover); expect(popover.props().open).to.equal(true); - const menuEl = document.querySelector('[data-mui-test="Menu"]'); + const menuEl = document.querySelector('[role="menu"]'); expect(document.activeElement).to.not.equal(menuEl); expect(false).to.equal(menuEl.contains(document.activeElement)); }); diff --git a/packages/material-ui/src/Modal/Modal.js b/packages/material-ui/src/Modal/Modal.js index d2d489257af6b4..3eb6006f66e3a7 100644 --- a/packages/material-ui/src/Modal/Modal.js +++ b/packages/material-ui/src/Modal/Modal.js @@ -223,7 +223,6 @@ const Modal = React.forwardRef(function Modal(inProps, ref) { * https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-static-element-interactions.md */}
', () => { it('uses Grow as the Transition of the modal', () => { const wrapper = mount( - +
, ); - const modal = wrapper.find('[data-mui-test="Modal"]'); + const modal = wrapper.find('[data-testid="Modal"]'); const transition = modal.find(Grow); expect(transition.exists()).to.equal(true); @@ -332,9 +332,10 @@ describe('', () => { anchorEl={anchorEl} anchorOrigin={anchorOrigin} transitionDuration={0} + PaperProps={{ 'data-testid': 'Popover' }} TransitionProps={{ onEntered: () => { - popoverEl = document.querySelector('[data-mui-test="Popover"]'); + popoverEl = document.querySelector('[data-testid="Popover"]'); resolve(); }, }} @@ -348,9 +349,8 @@ describe('', () => { }; expectPopover = (top, left) => { - expect(popoverEl.style.top).to.equal(`${top}px`); + expect(popoverEl).toHaveInlineStyle({ top: `${top}px`, left: `${left}px` }); - expect(popoverEl.style.left).to.equal(`${left}px`); wrapper.unmount(); }; }); @@ -473,9 +473,10 @@ describe('', () => { anchorPosition={anchorPosition} anchorOrigin={anchorOrigin} transitionDuration={0} + PaperProps={{ 'data-testid': 'Popover' }} TransitionProps={{ onEntered: () => { - popoverEl = document.querySelector('[data-mui-test="Popover"]'); + popoverEl = document.querySelector('[data-testid="Popover"]'); resolve(); }, }} @@ -487,9 +488,11 @@ describe('', () => { }); expectPopover = (top, left) => { - expect(popoverEl.style.top).to.equal(`${top}px`); + expect(popoverEl).toHaveInlineStyle({ + top: `${top}px`, + left: `${left}px`, + }); - expect(popoverEl.style.left).to.equal(`${left}px`); wrapper.unmount(); }; }); @@ -521,11 +524,12 @@ describe('', () => { transitionDuration={0} TransitionProps={{ onEntered: () => { - popoverEl = document.querySelector('[data-mui-test="Popover"]'); + popoverEl = document.querySelector('[data-testid="Popover"]'); resolve(); }, }} PaperProps={{ + 'data-testid': 'Popover', style: { top: 11, left: 12, @@ -539,9 +543,11 @@ describe('', () => { }); expectPopover = (top, left) => { - expect(popoverEl.style.top).to.equal(`${top}px`); + expect(popoverEl).toHaveInlineStyle({ + top: `${top}px`, + left: `${left}px`, + }); - expect(popoverEl.style.left).to.equal(`${left}px`); wrapper.unmount(); }; }); diff --git a/packages/material-ui/test/integration/Menu.test.js b/packages/material-ui/test/integration/Menu.test.js index 5a5f23232e94e4..e4ae0041407202 100644 --- a/packages/material-ui/test/integration/Menu.test.js +++ b/packages/material-ui/test/integration/Menu.test.js @@ -50,6 +50,7 @@ function ButtonMenu(props) { open={open} onClose={handleClose} transitionDuration={0} + BackdropProps={{ 'data-testid': 'Backdrop' }} {...other} > {options.map((option, index) => ( @@ -339,7 +340,7 @@ describe(' integration', () => { }); it('closes the menu when the backdrop is clicked', () => { - const { getByRole } = render(); + const { getByRole, getByTestId } = render(); const button = getByRole('button'); act(() => { button.focus(); @@ -347,7 +348,7 @@ describe(' integration', () => { }); act(() => { - document.querySelector('[data-mui-test="Backdrop"]').click(); + getByTestId('Backdrop').click(); clock.tick(0); }); diff --git a/test/utils/initMatchers.ts b/test/utils/initMatchers.ts index 8c905a047c013c..d457783a702025 100644 --- a/test/utils/initMatchers.ts +++ b/test/utils/initMatchers.ts @@ -1,4 +1,4 @@ -import chai from 'chai'; +import chai, { AssertionError } from 'chai'; import chaiDom from 'chai-dom'; import _ from 'lodash'; import { isInaccessible } from '@testing-library/dom'; @@ -367,6 +367,10 @@ chai.use((chaiAPI, utils) => { expectedStyleUnnormalized: Record, ) { const element = utils.flag(this, 'object') as HTMLElement; + if (element?.nodeType !== 1) { + // Same pre-condition for negated and unnegated assertion + throw new AssertionError(`Expected an Element but got ${String(element)}`); + } assertMatchingStyles.call(this, element.style, expectedStyleUnnormalized, { styleTypeHint: 'inline', @@ -377,6 +381,10 @@ chai.use((chaiAPI, utils) => { expectedStyleUnnormalized: Record, ) { const element = utils.flag(this, 'object') as HTMLElement; + if (element?.nodeType !== 1) { + // Same pre-condition for negated and unnegated assertion + throw new AssertionError(`Expected an Element but got ${String(element)}`); + } const computedStyle = element.ownerDocument.defaultView!.getComputedStyle(element); assertMatchingStyles.call(this, computedStyle, expectedStyleUnnormalized, {