[test] Migrate more components to react-testing-library

packages/material-ui/src/Grid/Grid.test.js

@@ -1,16 +1,22 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow, getClasses, createMount, describeConformance } from 'test/utils';
+import { spy } from 'sinon';
+import {
+  getClasses,
+  createMount,
+  describeConformance,
+  createClientRender,
+  fireEvent,
+} from 'test/utils';
 import { createMuiTheme } from '@material-ui/core/styles';
 import Grid, { styles } from './Grid';
 
 describe('<Grid />', () => {
   const mount = createMount();
-  let shallow;
+  const render = createClientRender();
   let classes;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<Grid />);
   });
 
@@ -24,68 +30,89 @@ describe('<Grid />', () => {
 
   describe('prop: container', () => {
     it('should apply the container class', () => {
-      const wrapper = shallow(<Grid container />);
-      expect(wrapper.hasClass(classes.container)).to.equal(true);
+      const { container } = render(<Grid container />);
+      const node = container.querySelector(`.${classes.container}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: item', () => {
     it('should apply the item class', () => {
-      const wrapper = shallow(<Grid item />);
-      expect(wrapper.hasClass(classes.item)).to.equal(true);
+      const { container } = render(<Grid item />);
+      const node = container.querySelector(`.${classes.item}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: xs', () => {
     it('should apply the flex-grow class', () => {
-      const wrapper = shallow(<Grid item xs />);
-      expect(wrapper.hasClass(classes['grid-xs-true'])).to.equal(true);
+      const { container } = render(<Grid item xs />);
+      const node = container.querySelector(`.${classes['grid-xs-true']}`);
+
+      expect(node).to.not.equal(null);
     });
 
     it('should apply the flex size class', () => {
-      const wrapper = shallow(<Grid item xs={3} />);
-      expect(wrapper.hasClass(classes['grid-xs-3'])).to.equal(true);
+      const { container } = render(<Grid item xs={3} />);
+      const node = container.querySelector(`.${classes['grid-xs-3']}`);
+
+      expect(node).to.not.equal(null);
     });
 
     it('should apply the flex auto class', () => {
-      const wrapper = shallow(<Grid item xs="auto" />);
-      expect(wrapper.hasClass(classes['grid-xs-auto'])).to.equal(true);
+      const { container } = render(<Grid item xs="auto" />);
+      const node = container.querySelector(`.${classes['grid-xs-auto']}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: spacing', () => {
     it('should have a spacing', () => {
-      const wrapper = shallow(<Grid container spacing={1} />);
-      expect(wrapper.hasClass(classes['spacing-xs-1'])).to.equal(true);
+      const { container } = render(<Grid container spacing={1} />);
+      const node = container.querySelector(`.${classes['spacing-xs-1']}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: alignItems', () => {
     it('should apply the align-item class', () => {
-      const wrapper = shallow(<Grid alignItems="center" container />);
-      expect(wrapper.hasClass(classes['align-items-xs-center'])).to.equal(true);
+      const { container } = render(<Grid alignItems="center" container />);
+      const node = container.querySelector(`.${classes['align-items-xs-center']}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: alignContent', () => {
     it('should apply the align-content class', () => {
-      const wrapper = shallow(<Grid alignContent="center" container />);
-      expect(wrapper.hasClass(classes['align-content-xs-center'])).to.equal(true);
+      const { container } = render(<Grid alignContent="center" container />);
+      const node = container.querySelector(`.${classes['align-content-xs-center']}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: justifyContent', () => {
     it('should apply the justify-content class', () => {
-      const wrapper = shallow(<Grid justifyContent="space-evenly" container />);
-      expect(wrapper.hasClass(classes['justify-content-xs-space-evenly'])).to.equal(true);
+      const { container } = render(<Grid justifyContent="space-evenly" container />);
+      const node = container.querySelector(`.${classes['justify-content-xs-space-evenly']}`);
+
+      expect(node).to.not.equal(null);
     });
   });
 
   describe('prop: other', () => {
     it('should spread the other props to the root element', () => {
-      const handleClick = () => {};
-      const wrapper = shallow(<Grid component="span" onClick={handleClick} />);
-      expect(wrapper.props().onClick).to.equal(handleClick);
+      const handleClick = spy();
+      const { container } = render(<Grid component="span" onClick={handleClick} />);
+      const root = container.querySelector(`.${classes.root}`);
+
+      fireEvent.click(root);
+      expect(handleClick.callCount).to.equal(1);
     });
   });
 

packages/material-ui/src/SvgIcon/SvgIcon.test.js

@@ -1,18 +1,17 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createShallow, getClasses, createMount, describeConformance } from 'test/utils';
+import { getClasses, createMount, describeConformance, createClientRender } from 'test/utils';
 import SvgIcon from './SvgIcon';
 
 describe('<SvgIcon />', () => {
-  let shallow;
   const mount = createMount();
+  const render = createClientRender();
   let classes;
   let path;
 
   before(() => {
-    shallow = createShallow({ dive: true });
     classes = getClasses(<SvgIcon>foo</SvgIcon>);
-    path = <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />;
+    path = <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" data-testid="test-path" />;
   });
 
   describeConformance(
@@ -39,55 +38,70 @@ describe('<SvgIcon />', () => {
   );
 
   it('renders children by default', () => {
-    const wrapper = shallow(<SvgIcon>{path}</SvgIcon>);
-    expect(wrapper.contains(path)).to.equal(true);
-    expect(wrapper.props()['aria-hidden']).to.equal(true);
+    const { container, getByTestId } = render(<SvgIcon>{path}</SvgIcon>);
+    const root = container.querySelector(`.${classes.root}`);
+
+    expect(getByTestId('test-path')).to.not.equal(null);
+    expect(root).to.have.attribute('aria-hidden', 'true');
   });
 
   describe('prop: titleAccess', () => {
     it('should be able to make an icon accessible', () => {
-      const wrapper = shallow(
+      const { container, getByText } = render(
         <SvgIcon title="Go to link" titleAccess="Network">
           {path}
         </SvgIcon>,
       );
-      expect(wrapper.find('title').text()).to.equal('Network');
-      expect(wrapper.props()['aria-hidden']).to.equal(undefined);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(getByText('Network')).to.not.equal(null);
+      expect(root).to.not.have.attribute('aria-hidden');
     });
   });
 
   describe('prop: color', () => {
     it('should render with the user and SvgIcon classes', () => {
-      const wrapper = shallow(<SvgIcon className="meow">{path}</SvgIcon>);
-      expect(wrapper.hasClass('meow')).to.equal(true);
-      expect(wrapper.hasClass(classes.root)).to.equal(true);
+      const { container } = render(<SvgIcon className="meow">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class('meow');
     });
 
     it('should render with the secondary color', () => {
-      const wrapper = shallow(<SvgIcon color="secondary">{path}</SvgIcon>);
-      expect(wrapper.hasClass(classes.colorSecondary)).to.equal(true);
+      const { container } = render(<SvgIcon color="secondary">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class(classes.colorSecondary);
     });
 
     it('should render with the action color', () => {
-      const wrapper = shallow(<SvgIcon color="action">{path}</SvgIcon>);
-      expect(wrapper.hasClass(classes.colorAction)).to.equal(true);
+      const { container } = render(<SvgIcon color="action">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class(classes.colorAction);
     });
 
     it('should render with the error color', () => {
-      const wrapper = shallow(<SvgIcon color="error">{path}</SvgIcon>);
-      expect(wrapper.hasClass(classes.colorError)).to.equal(true);
+      const { container } = render(<SvgIcon color="error">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class(classes.colorError);
     });
 
     it('should render with the primary class', () => {
-      const wrapper = shallow(<SvgIcon color="primary">{path}</SvgIcon>);
-      expect(wrapper.hasClass(classes.colorPrimary)).to.equal(true);
+      const { container } = render(<SvgIcon color="primary">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class(classes.colorPrimary);
     });
   });
 
   describe('prop: fontSize', () => {
     it('should be able to change the fontSize', () => {
-      const wrapper = shallow(<SvgIcon fontSize="inherit">{path}</SvgIcon>);
-      expect(wrapper.hasClass(classes.fontSizeInherit)).to.equal(true);
+      const { container } = render(<SvgIcon fontSize="inherit">{path}</SvgIcon>);
+      const root = container.querySelector(`.${classes.root}`);
+
+      expect(root).to.have.class(classes.fontSizeInherit);
     });
   });
 });