polish

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

@@ -27,20 +27,20 @@ describe('<TableRow> integration', () => {
 
   it('should render a th with the head class when in the context of a table head', () => {
     const { getByTestId } = renderInTable(<TableCell data-testid="cell" />, TableHead);
-    expect(getByTestId('cell').tagName).to.equal('TH');
+    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.property('scope', 'col');
+    expect(getByTestId('cell')).to.have.attribute('scope', 'col');
   });
 
   it('should render specified scope attribute even when in the context of a table head', () => {
     const { getByTestId } = renderInTable(<TableCell scope="row" data-testid="cell" />, TableHead);
-    expect(getByTestId('cell')).to.have.property('scope', 'row');
+    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 { getByTestId } = renderInTable(<TableCell data-testid="cell" />, TableFooter);
-    expect(getByTestId('cell').localName).to.equal('td');
+    expect(getByTestId('cell')).to.have.tagName('td');
     expect(getByTestId('cell')).to.have.class(classes.root);
     expect(getByTestId('cell')).to.have.class(classes.footer);
   });
@@ -57,7 +57,7 @@ describe('<TableRow> integration', () => {
       TableFooter,
     );
     expect(getByTestId('cell')).to.have.class(classes.head);
-    expect(getByTestId('cell')).to.have.property('scope', '');
+    expect(getByTestId('cell')).to.not.have.attribute('scope');
   });
 
   it('should render without head class when variant is body, overriding context', () => {