[test] Migrate TableCell to react-testing-library

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

@@ -40,8 +40,8 @@ describe('<Avatar />', () => {
       );
       const avatar = container.firstChild;
       const img = avatar.firstChild;
-      expect(avatar.tagName).to.equal('DIV');
-      expect(img.tagName).to.equal('IMG');
+      expect(avatar).to.have.tagName('div');
+      expect(img).to.have.tagName('img');
       expect(avatar).to.have.class(classes.root);
       expect(avatar).to.have.class('my-avatar');
       expect(avatar).to.have.attribute('data-my-prop', 'woofAvatar');
@@ -94,8 +94,8 @@ describe('<Avatar />', () => {
     });
 
     it('should render a div containing an font icon', () => {
-      expect(avatar.tagName).to.equal('DIV');
-      expect(icon.tagName).to.equal('SPAN');
+      expect(avatar).to.have.tagName('div');
+      expect(icon).to.have.tagName('span');
       expect(icon).to.have.class('my-icon-font');
       expect(icon).to.have.text('icon');
     });
@@ -125,7 +125,7 @@ describe('<Avatar />', () => {
     });
 
     it('should render a div containing an svg icon', () => {
-      expect(avatar.tagName).to.equal('DIV');
+      expect(avatar).to.have.tagName('div');
       const cancelIcon = avatar.firstChild;
       expect(cancelIcon).to.have.attribute('data-testid', 'CancelIcon');
     });
@@ -155,7 +155,7 @@ describe('<Avatar />', () => {
     });
 
     it('should render a div containing a string', () => {
-      expect(avatar.tagName).to.equal('DIV');
+      expect(avatar).to.have.tagName('div');
       expect(avatar.firstChild).to.text('OT');
     });
 
@@ -184,7 +184,7 @@ describe('<Avatar />', () => {
     });
 
     it('should render with defaultColor class when supplied with a child with falsey value', () => {
-      expect(avatar.tagName).to.equal('DIV');
+      expect(avatar).to.have.tagName('div');
       expect(avatar.firstChild).to.text('0');
     });
 

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

@@ -62,9 +62,9 @@ describe('<CardHeader />', () => {
 
     it('should render the avatar inside the first child', () => {
       const avatarWrapper = cardHeader.childNodes[0];
-      expect(avatarWrapper.tagName).to.equal('DIV');
+      expect(avatarWrapper).to.have.tagName('div');
       expect(avatarWrapper).to.have.class(classes.avatar);
-      expect(avatarWrapper.firstChild.tagName).to.equal('SPAN');
+      expect(avatarWrapper.firstChild).to.have.tagName('span');
     });
 
     it('should render the title text inside the second child', () => {

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

@@ -46,7 +46,7 @@ describe('<Chip />', () => {
       const chip = container.querySelector(`.${classes.root}`);
       const label = container.querySelector(`.${classes.label}`);
 
-      expect(label).to.have.property('tagName', 'SPAN');
+      expect(label).to.have.tagName('span');
       expect(label).to.have.text('My text Chip');
 
       expect(chip).to.have.class(classes.root);

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

@@ -42,9 +42,9 @@ describe('<CircularProgress />', () => {
     const { container } = render(<CircularProgress />);
     const circularProgress = container.firstChild;
     const svg = circularProgress.firstChild;
-    expect(svg.tagName).to.equal('svg');
+    expect(svg).to.have.tagName('svg');
     expect(circularProgress).to.have.class(classes.indeterminate);
-    expect(svg.firstChild.tagName).to.equal('circle', 'should be a circle');
+    expect(svg.firstChild).to.have.tagName('circle');
     expect(svg.firstChild).to.have.class(classes.circle, 'should have the circle class');
   });
 
@@ -66,9 +66,9 @@ describe('<CircularProgress />', () => {
     expect(circularProgress.style.width).to.equal('60px', 'should have width correctly set');
     expect(circularProgress.style.height).to.equal('60px', 'should have height correctly set');
     const svg = circularProgress.firstChild;
-    expect(svg.tagName).to.equal('svg');
+    expect(svg).to.have.tagName('svg');
     const circle = svg.firstChild;
-    expect(circle.tagName).to.equal('circle');
+    expect(circle).to.have.tagName('circle');
     expect(circle).to.have.attribute('cx', '44');
     expect(circle).to.have.attribute('cy', '44');
   });
@@ -79,7 +79,7 @@ describe('<CircularProgress />', () => {
       const circularProgress = container.firstChild;
       expect(circularProgress).to.have.class(classes.root);
       const svg = circularProgress.firstChild;
-      expect(svg.tagName).to.equal('svg');
+      expect(svg).to.have.tagName('svg');
       expect(svg).to.not.have.class(
         classes.svgIndeterminate,
         'should not have the svgIndeterminate class',
@@ -111,7 +111,7 @@ describe('<CircularProgress />', () => {
       expect(circularProgress).to.have.class(classes.root);
       const svg = circularProgress.firstChild;
       const circle = svg.firstChild;
-      expect(circle.tagName).to.equal('circle');
+      expect(circle).to.have.tagName('circle');
       expect(circle).to.not.have.class(classes.circleDisableShrink);
     });
 
@@ -123,7 +123,7 @@ describe('<CircularProgress />', () => {
       expect(circularProgress).to.have.class(classes.root);
       const svg = circularProgress.firstChild;
       const circle = svg.firstChild;
-      expect(circle.tagName).to.equal('circle');
+      expect(circle).to.have.tagName('circle');
       expect(circle).to.not.have.class(classes.circleDisableShrink);
     });
 
@@ -133,7 +133,7 @@ describe('<CircularProgress />', () => {
       expect(circularProgress).to.have.class(classes.root);
       const svg = circularProgress.firstChild;
       const circle = svg.firstChild;
-      expect(circle.tagName).to.equal('circle');
+      expect(circle).to.have.tagName('circle');
       expect(circle).to.have.class(classes.circleDisableShrink);
     });
   });

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

@@ -32,7 +32,7 @@ describe('<Collapse />', () => {
       <Collapse {...defaultProps} classes={{ root: 'woofCollapse1' }} />,
     );
     const collapse = container.firstChild;
-    expect(collapse.tagName).to.equal('DIV');
+    expect(collapse).to.have.tagName('div');
     expect(collapse).to.have.class(classes.root);
     expect(collapse).to.have.class('woofCollapse1');
   });
@@ -43,8 +43,8 @@ describe('<Collapse />', () => {
     const collapse = container.firstChild;
     const wrapper = collapse.firstChild;
     const innerWrapper = wrapper.firstChild;
-    expect(wrapper.tagName).to.equal('DIV');
-    expect(innerWrapper.firstChild.tagName).to.equal('H1');
+    expect(wrapper).to.have.tagName('div');
+    expect(innerWrapper.firstChild).to.have.tagName('h1');
   });
 
   describe('transition lifecycle', () => {

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

@@ -17,6 +17,6 @@ describe('<CssBaseline />', () => {
 
     const child = container.querySelector('#child');
 
-    expect(child.tagName).to.equal('DIV');
+    expect(child).to.have.tagName('div');
   });
 });

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

@@ -91,7 +91,7 @@ describe('<Modal />', () => {
         </Modal>,
       );
 
-      expect(getByTestId('Portal')).to.have.property('tagName', 'DIV');
+      expect(getByTestId('Portal')).to.have.tagName('div');
     });
 
     it('makes the child focusable without adding a role', () => {
@@ -102,7 +102,7 @@ describe('<Modal />', () => {
       );
 
       expect(getByTestId('child')).not.to.have.attribute('role');
-      expect(getByTestId('child')).to.have.property('tabIndex', -1);
+      expect(getByTestId('child')).to.have.attribute('tabIndex', '-1');
     });
   });
 

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

@@ -119,7 +119,7 @@ describe('<Rating />', () => {
       noValueRadio.focus();
     });
 
-    expect(container.querySelector('.customized')).to.have.property('tagName', 'LABEL');
+    expect(container.querySelector('.customized')).to.have.tagName('label');
   });
 
   describe('prop: readOnly', () => {

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

@@ -940,20 +940,20 @@ describe('<Select />', () => {
     const ref = React.createRef();
     const { setProps } = render(<Select inputProps={{ ref }} value="" />);
 
-    expect(ref.current.node).to.have.property('tagName', 'INPUT');
+    expect(ref.current.node).to.have.tagName('input');
 
     setProps({
       value: '',
     });
-    expect(ref.current.node).to.have.property('tagName', 'INPUT');
+    expect(ref.current.node).to.have.tagName('input');
   });
 
   describe('prop: inputRef', () => {
     it('should be able to return the input node via a ref object', () => {
       const ref = React.createRef();
       render(<Select inputRef={ref} value="" />);
 
-      expect(ref.current.node).to.have.property('tagName', 'INPUT');
+      expect(ref.current.node).to.have.tagName('input');
     });
 
     // TODO: This might be confusing a prop called input!Ref can imperatively

packages/material-ui/test/integration/TableCell.test.js

@@ -1,77 +1,88 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { findOutermostIntrinsic, getClasses, createMount, createClientRender } from 'test/utils';
+import { getClasses, createClientRender } from 'test/utils';
 import TableCell from '@material-ui/core/TableCell';
+import Table from '@material-ui/core/Table';
 import TableFooter from '@material-ui/core/TableFooter';
 import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
 import TableBody from '@material-ui/core/TableBody';
 
 describe('<TableRow> integration', () => {
   let classes;
-  const mount = createMount();
   const render = createClientRender();
-  function mountInTable(node, Variant) {
-    const wrapper = mount(
-      <table>
+  function renderInTable(node, Variant) {
+    return render(
+      <Table>
         <Variant>
-          <tr>{node}</tr>
+          <TableRow>{node}</TableRow>
         </Variant>
-      </table>,
+      </Table>,
     );
-    return wrapper.find('tr').childAt(0);
   }
 
   before(() => {
     classes = getClasses(<TableCell />);
   });
 
   it('should render a th with the head class when in the context of a table head', () => {
-    const wrapper = mountInTable(<TableCell />, TableHead);
-    const root = findOutermostIntrinsic(wrapper);
-    expect(root.type()).to.equal('th');
-    expect(root.hasClass(classes.root)).to.equal(true);
-    expect(root.hasClass(classes.head)).to.equal(true);
-    expect(root.props().scope).to.equal('col');
+    const { getByTestId } = renderInTable(<TableCell data-testid="cell" />, TableHead);
+    expect(getByTestId('cell')).to.have.tagName('th');
+    expect(getByTestId('cell')).to.have.class(classes.root);
+    expect(getByTestId('cell')).to.have.class(classes.head);
+    expect(getByTestId('cell')).to.have.attribute('scope', 'col');
   });
 
   it('should render specified scope attribute even when in the context of a table head', () => {
-    const wrapper = mountInTable(<TableCell scope="row" />, TableHead);
-    expect(wrapper.props().scope).to.equal('row');
+    const { getByTestId } = renderInTable(<TableCell scope="row" data-testid="cell" />, TableHead);
+    expect(getByTestId('cell')).to.have.attribute('scope', 'row');
   });
 
   it('should render a th with the footer class when in the context of a table footer', () => {
-    const wrapper = mountInTable(<TableCell />, TableFooter);
-    const root = findOutermostIntrinsic(wrapper);
-    expect(root.type()).to.equal('td');
-    expect(root.hasClass(classes.root)).to.equal(true);
-    expect(root.hasClass(classes.footer)).to.equal(true);
+    const { getByTestId } = renderInTable(<TableCell data-testid="cell" />, TableFooter);
+    expect(getByTestId('cell')).to.have.tagName('td');
+    expect(getByTestId('cell')).to.have.class(classes.root);
+    expect(getByTestId('cell')).to.have.class(classes.footer);
   });
 
   it('should render with the footer class when in the context of a table footer', () => {
-    const wrapper = mountInTable(<TableCell />, TableFooter);
-    expect(wrapper.find('td').hasClass(classes.root)).to.equal(true);
-    expect(wrapper.find('td').hasClass(classes.footer)).to.equal(true);
+    const { getByTestId } = renderInTable(<TableCell data-testid="cell" />, TableFooter);
+    expect(getByTestId('cell')).to.have.class(classes.root);
+    expect(getByTestId('cell')).to.have.class(classes.footer);
   });
 
   it('should render with the head class when variant is head, overriding context', () => {
-    const wrapper = mountInTable(<TableCell variant="head" />, TableFooter);
-    expect(wrapper.find('td').hasClass(classes.head)).to.equal(true);
-    expect(wrapper.find('td').props().scope).to.equal(undefined);
+    const { getByTestId } = renderInTable(
+      <TableCell variant="head" data-testid="cell" />,
+      TableFooter,
+    );
+    expect(getByTestId('cell')).to.have.class(classes.head);
+    expect(getByTestId('cell')).to.not.have.attribute('scope');
   });
 
   it('should render without head class when variant is body, overriding context', () => {
-    const wrapper = mountInTable(<TableCell variant="body" />, TableFooter);
-    expect(wrapper.find('td').hasClass(classes.head)).to.equal(false);
+    const { getByTestId } = renderInTable(
+      <TableCell variant="body" data-testid="cell" />,
+      TableFooter,
+    );
+    expect(getByTestId('cell')).not.to.have.class(classes.head);
   });
 
   it('should render without footer class when variant is body, overriding context', () => {
-    const wrapper = mountInTable(<TableCell variant="body" />, TableFooter);
-    expect(wrapper.find('td').hasClass(classes.footer)).to.equal(false);
+    const { getByTestId } = renderInTable(
+      <TableCell variant="body" data-testid="cell" />,
+      TableFooter,
+    );
+    expect(getByTestId('cell')).not.to.have.class(classes.footer);
   });
 
   it('should render with the footer class when variant is footer, overriding context', () => {
-    const wrapper = mountInTable(<TableCell variant="footer" />, TableHead);
-    expect(wrapper.find('th').hasClass(classes.footer)).to.equal(true);
+    const { getByTestId } = renderInTable(
+      <TableCell variant="footer" data-testid="cell" />,
+      TableHead,
+    );
+
+    expect(getByTestId('cell')).to.have.class(classes.footer);
   });
 
   it('sets role="columnheader" when "component" prop is set and used in the context of table head', () => {