mui · eps1lon · Nov 13, 2020 · Nov 13, 2020 · eps1lon · Nov 13, 2020
diff --git 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('<DateRangePicker />', () => {
         open
         renderInput={defaultRangeRenderInput}
         onChange={() => {}}
-        renderDay={(day) => <div key={String(day)} data-mui-test="renderDayCalled" />}
+        renderDay={(day) => <div key={String(day)} data-testid="renderDayCalled" />}
         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
@@ -42,7 +42,6 @@ const Backdrop = React.forwardRef(function Backdrop(props, ref) {
   return (
     <TransitionComponent in={open} timeout={transitionDuration} {...other}>
       <div
-        data-mui-test="Backdrop"
         className={clsx(
           classes.root,
           {

diff --git a/packages/material-ui/src/Backdrop/Backdrop.test.js b/packages/material-ui/src/Backdrop/Backdrop.test.js
@@ -27,7 +27,7 @@ describe('<Backdrop />', () => {
 
   it('should render a backdrop div with content of nested children', () => {
     const { container } = render(
-      <Backdrop open className="woofBackdrop">
+      <Backdrop open>
         <h1>Hello World</h1>
       </Backdrop>,
     );

diff --git 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) {
         <div
           className={clsx(classes.container, classes[`scroll${capitalize(scroll)}`])}
           onMouseDown={handleMouseDown}
-          data-mui-test="FakeBackdrop"
         >
           <PaperComponent
             elevation={24}

diff --git a/packages/material-ui/src/Dialog/Dialog.test.js b/packages/material-ui/src/Dialog/Dialog.test.js
@@ -8,6 +8,7 @@ import {
   act,
   createClientRender,
   fireEvent,
+  screen,
 } from 'test/utils';
 import Modal from '../Modal';
 import Dialog from './Dialog';
@@ -25,17 +26,17 @@ function userClick(element) {
 }
 
 /**
- * @param {HTMLElement} container
+ * @param {typeof import('test/utils').screen} view
  */
-function findBackdrop(container) {
-  return container.querySelector('[data-mui-test="FakeBackdrop"]');
+function findBackdrop(view) {
+  return view.getByRole('dialog').parentElement;
 }
 
 /**
- * @param {HTMLElement} container
+ * @param {typeof import('test/utils').screen} view
  */
-function clickBackdrop(container) {
-  userClick(findBackdrop(container));
+function clickBackdrop(view) {
+  userClick(findBackdrop(view));
 }
 
 describe('<Dialog />', () => {
@@ -108,7 +109,9 @@ describe('<Dialog />', () => {
       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('<Dialog />', () => {
 
     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(
-      <Dialog data-my-prop="woofDialog" open>
-        foo
-      </Dialog>,
-    );
-    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(<Dialog open>foo</Dialog>);
 
-      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('<Dialog />', () => {
         </Dialog>,
       );
 
-      clickBackdrop(document);
+      clickBackdrop(screen);
       expect(onBackdropClick.callCount).to.equal(1);
       expect(onClose.callCount).to.equal(1);
     });
@@ -198,7 +193,7 @@ describe('<Dialog />', () => {
       );
 
       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
@@ -149,7 +149,6 @@ const Menu = React.forwardRef(function Menu(props, ref) {
       {...other}
     >
       <MenuList
-        data-mui-test="Menu"
         onKeyDown={handleListKeyDown}
         actions={menuListActionsRef}
         autoFocus={autoFocus && (activeItemIndex === -1 || disableAutoFocusItem)}

diff --git a/packages/material-ui/src/Menu/Menu.test.js b/packages/material-ui/src/Menu/Menu.test.js
@@ -157,7 +157,7 @@ describe('<Menu />', () => {
     );
     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
@@ -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
        */}
       <div
-        data-mui-test="Modal"
         ref={handleRef}
         onKeyDown={handleKeyDown}
         role="presentation"

diff --git a/packages/material-ui/src/Modal/SimpleBackdrop.js b/packages/material-ui/src/Modal/SimpleBackdrop.js
@@ -27,7 +27,6 @@ const SimpleBackdrop = React.forwardRef(function SimpleBackdrop(props, ref) {
 
   return open ? (
     <div
-      data-mui-test="Backdrop"
       aria-hidden
       ref={ref}
       {...other}

diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js
@@ -395,7 +395,6 @@ const Popover = React.forwardRef(function Popover(props, ref) {
         {...TransitionProps}
       >
         <Paper
-          data-mui-test="Popover"
           elevation={elevation}
           ref={paperRef}
           {...PaperProps}

diff --git a/packages/material-ui/src/Popover/Popover.test.js b/packages/material-ui/src/Popover/Popover.test.js
@@ -178,11 +178,11 @@ describe('<Popover />', () => {
 
     it('uses Grow as the Transition of the modal', () => {
       const wrapper = mount(
-        <Popover {...defaultProps} open>
+        <Popover {...defaultProps} open data-testid="Modal">
           <div />
         </Popover>,
       );
-      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('<Popover />', () => {
               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('<Popover />', () => {
       };
 
       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('<Popover />', () => {
               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('<Popover />', () => {
         });
 
       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('<Popover />', () => {
               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('<Popover />', () => {
         });
 
       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
@@ -50,6 +50,7 @@ function ButtonMenu(props) {
         open={open}
         onClose={handleClose}
         transitionDuration={0}
+        BackdropProps={{ 'data-testid': 'Backdrop' }}
         {...other}
       >
         {options.map((option, index) => (
@@ -339,15 +340,15 @@ describe('<Menu /> integration', () => {
   });
 
   it('closes the menu when the backdrop is clicked', () => {
-    const { getByRole } = render(<ButtonMenu />);
+    const { getByRole, getByTestId } = render(<ButtonMenu />);
     const button = getByRole('button');
     act(() => {
       button.focus();
       button.click();
     });
 
     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
@@ -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<string, string>,
   ) {
     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<string, string>,
   ) {
     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, {