[Card] Migrate to testing-library

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
-import { assert } from 'chai';
+import { expect } from 'chai';
 import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { createClientRender } from 'test/utils/createClientRender';
 import describeConformance from '../test-utils/describeConformance';
 import Card from './Card';
 import Paper from '../Paper';
 
 describe('<Card />', () => {
   let mount;
   let classes;
-
+  const render = createClientRender();
   before(() => {
     mount = createMount({ strict: true });
     classes = getClasses(<Card />);
@@ -27,7 +28,7 @@ describe('<Card />', () => {
   }));
 
   it('when raised should render Paper with 8dp', () => {
-    const wrapper = mount(<Card raised />);
-    assert.strictEqual(wrapper.find(Paper).props().elevation, 8);
+    const { container } = render(<Card raised />);
+    expect(container.firstChild).to.have.class('MuiPaper-elevation8');
   });
 });

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

@@ -1,18 +1,18 @@
 import * as React from 'react';
-import { assert } from 'chai';
-import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { createClientRender } from 'test/utils/createClientRender';
 import describeConformance from '../test-utils/describeConformance';
 import CardHeader from './CardHeader';
 import Typography from '../Typography';
 
 describe('<CardHeader />', () => {
   let mount;
-  let shallow;
   let classes;
-
+  const render = createClientRender();
+  const typographyClasses = getClasses(<Typography />);
   before(() => {
     mount = createMount({ strict: true });
-    shallow = createShallow({ untilSelector: 'div' });
     classes = getClasses(<CardHeader />);
   });
 
@@ -29,72 +29,66 @@ describe('<CardHeader />', () => {
   }));
 
   describe('without an avatar', () => {
-    let wrapper;
-
-    beforeEach(() => {
-      wrapper = shallow(<CardHeader title="Title" subheader="Subheader" />).childAt(0);
-    });
-
     it('should render the title as headline text', () => {
-      const title = wrapper.childAt(0);
-      assert.strictEqual(title.type(), Typography);
-      assert.strictEqual(title.props().variant, 'h5');
+      const cardHeader = render(<CardHeader title="Title" subheader="Subheader" />).container
+        .firstChild;
+      const wrapper = cardHeader.firstChild;
+      const title = wrapper.childNodes[0];
+      expect(title).to.have.class(typographyClasses.root);
+      expect(title).to.have.class(typographyClasses.h5);
     });
 
     it('should render the subheader as body1 secondary text', () => {
-      const subheader = wrapper.childAt(1);
-      assert.strictEqual(subheader.type(), Typography);
-      assert.strictEqual(subheader.props().variant, 'body1');
-      assert.strictEqual(subheader.props().color, 'textSecondary');
+      const cardHeader = render(<CardHeader title="Title" subheader="Subheader" />).container
+        .firstChild;
+      const wrapper = cardHeader.firstChild;
+      const subheader = wrapper.childNodes[1];
+      expect(subheader).to.have.class(typographyClasses.root);
+      expect(subheader).to.have.class(typographyClasses.body1);
+      expect(subheader).to.have.class(typographyClasses.colorTextSecondary);
     });
 
     it('should not render the subheader if none is given', () => {
-      const title = wrapper.childAt(0);
-      assert.strictEqual(title.type(), Typography);
-      assert.strictEqual(wrapper.length, 1);
+      const cardHeader = render(<CardHeader title="Title" />).container.firstChild;
+      const wrapper = cardHeader.firstChild;
+      const title = wrapper.childNodes[0];
+      expect(title).to.have.class(typographyClasses.root);
+      expect(wrapper.childNodes.length).to.equal(1);
     });
   });
 
   describe('with an avatar', () => {
-    let wrapper;
     let avatar;
+    let cardHeader;
 
     beforeEach(() => {
       avatar = <span />;
-      wrapper = shallow(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />);
+      cardHeader = render(<CardHeader avatar={avatar} title="Title" subheader="Subhead" />)
+        .container.firstChild;
     });
 
     it('should render the avatar inside the first child', () => {
-      const container = wrapper.childAt(0);
-
-      assert.strictEqual(container.name(), 'div');
-      assert.strictEqual(container.hasClass(classes.avatar), true);
-      assert.strictEqual(container.childAt(0).equals(avatar), true);
+      const avatarWrapper = cardHeader.childNodes[0];
+      expect(avatarWrapper.tagName).to.equal('DIV');
+      expect(avatarWrapper).to.have.class(classes.avatar);
+      expect(avatarWrapper.firstChild.tagName).to.equal('SPAN');
     });
 
     it('should render the title text inside the second child', () => {
-      const container = wrapper.childAt(1);
-      assert.strictEqual(
-        container.hasClass(classes.content),
-        true,
-        'should have the content class',
-      );
-      const title = container.childAt(0);
-      assert.strictEqual(title.type(), Typography);
-      assert.strictEqual(title.props().variant, 'body2');
+      const titleWrapper = cardHeader.childNodes[1];
+      expect(titleWrapper).to.have.class(classes.content, 'should have the content class');
+      const title = titleWrapper.childNodes[0];
+      expect(title).to.have.class(typographyClasses.root);
+      expect(title).to.have.class(typographyClasses.body2);
     });
 
     it('should render the subheader as body2 secondary text inside the second child', () => {
-      const container = wrapper.childAt(1);
-      assert.strictEqual(
-        container.hasClass(classes.content),
-        true,
-        'should have the content class',
-      );
-      const subheader = container.childAt(1);
-      assert.strictEqual(subheader.type(), Typography);
-      assert.strictEqual(subheader.props().variant, 'body2');
-      assert.strictEqual(subheader.props().color, 'textSecondary');
+      const titleWrapper = cardHeader.childNodes[1];
+      expect(titleWrapper).to.have.class(classes.content, 'should have the content class');
+      const subHeader = titleWrapper.childNodes[1];
+      expect(subHeader).to.have.class(typographyClasses.root);
+      expect(subHeader).to.have.class(typographyClasses.body2);
+      expect(subHeader).to.have.class(typographyClasses.colorTextSecondary);
     });
   });
 });

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { assert } from 'chai';
-import { createMount, findOutermostIntrinsic, getClasses } from '@material-ui/core/test-utils';
+import { expect } from 'chai';
+import { createMount, getClasses } from '@material-ui/core/test-utils';
+import { createClientRender } from 'test/utils/createClientRender';
 import describeConformance from '../test-utils/describeConformance';
 import CardMedia from './CardMedia';
 import consoleErrorMock from 'test/utils/consoleErrorMock';
@@ -9,7 +10,7 @@ import PropTypes from 'prop-types';
 describe('<CardMedia />', () => {
   let mount;
   let classes;
-
+  const render = createClientRender();
   before(() => {
     mount = createMount({ strict: true });
     classes = getClasses(<CardMedia image="/foo.jpg" />);
@@ -28,56 +29,54 @@ describe('<CardMedia />', () => {
   }));
 
   it('should have the backgroundImage specified', () => {
-    const wrapper = mount(<CardMedia image="/foo.jpg" />);
-    assert.strictEqual(
-      findOutermostIntrinsic(wrapper).props().style.backgroundImage,
-      'url("/foo.jpg")',
-    );
+    const { container } = render(<CardMedia image="/foo.jpg" />);
+    const cardMedia = container.firstChild;
+    expect(cardMedia.style.backgroundImage).to.match(/\/foo\.jpg/m);
   });
 
   it('should have backgroundImage specified even though custom styles got passed', () => {
-    const wrapper = mount(<CardMedia image="/foo.jpg" style={{ height: 200 }} />);
-    assert.strictEqual(
-      findOutermostIntrinsic(wrapper).props().style.backgroundImage,
-      'url("/foo.jpg")',
-    );
-    assert.strictEqual(findOutermostIntrinsic(wrapper).props().style.height, 200);
+    const { container } = render(<CardMedia image="/foo.jpg" style={{ height: 200 }} />);
+    const cardMedia = container.firstChild;
+    expect(cardMedia.style.backgroundImage).to.match(/\/foo\.jpg/m);
+    expect(cardMedia.style.height).to.equal('200px');
   });
 
   it('should be possible to overwrite backgroundImage via custom styles', () => {
-    const wrapper = mount(
+    const { container } = render(
       <CardMedia image="/foo.jpg" style={{ backgroundImage: 'url(/bar.jpg)' }} />,
     );
-    assert.strictEqual(
-      findOutermostIntrinsic(wrapper).props().style.backgroundImage,
-      'url(/bar.jpg)',
-    );
+    const cardMedia = container.firstChild;
+    expect(cardMedia.style.backgroundImage).to.match(/\/bar\.jpg/m);
   });
 
   describe('prop: component', () => {
     it('should have `src` prop when media component specified', () => {
-      const wrapper = mount(<CardMedia image="/foo.jpg" component="iframe" />);
-      assert.strictEqual(findOutermostIntrinsic(wrapper).props().src, '/foo.jpg');
+      const { container } = render(<CardMedia image="/foo.jpg" component="iframe" />);
+      const cardMedia = container.firstChild;
+      expect(cardMedia).to.have.attribute('src', '/foo.jpg');
     });
 
     it('should not have `src` prop when picture media component specified', () => {
-      const wrapper = mount(
+      const { container } = render(
         <CardMedia component="picture">
           <source media="(min-width: 600px)" srcSet="big-cat.jpg" />
           <img src="cat.jpg" alt="hello" />
         </CardMedia>,
       );
-      assert.strictEqual(findOutermostIntrinsic(wrapper).props().src, undefined);
+      const cardMedia = container.firstChild;
+      expect(cardMedia).to.not.have.attribute('src');
     });
 
     it('should not have default inline style when media component specified', () => {
-      const wrapper = mount(<CardMedia src="/foo.jpg" component="picture" />);
-      assert.strictEqual(findOutermostIntrinsic(wrapper).props().style, undefined);
+      const { container } = render(<CardMedia src="/foo.jpg" component="picture" />);
+      const cardMedia = container.firstChild;
+      expect(cardMedia.style.backgroundImage).to.equal('');
     });
 
     it('should not have `src` prop if not media component specified', () => {
-      const wrapper = mount(<CardMedia image="/foo.jpg" component="table" />);
-      assert.strictEqual(findOutermostIntrinsic(wrapper).props().src, undefined);
+      const { container } = render(<CardMedia image="/foo.jpg" component="table" />);
+      const cardMedia = container.firstChild;
+      expect(cardMedia).to.not.have.attribute('src');
     });
   });
 
@@ -93,10 +92,8 @@ describe('<CardMedia />', () => {
 
     it('warns when neither `children`, nor `image`, nor `src`, nor `component` are provided', () => {
       PropTypes.checkPropTypes(CardMedia.Naked.propTypes, { classes: {} }, 'prop', 'MockedName');
-
-      assert.strictEqual(consoleErrorMock.callCount(), 1);
-      assert.include(
-        consoleErrorMock.messages()[0],
+      expect(consoleErrorMock.callCount()).to.equal(1);
+      expect(consoleErrorMock.messages()[0]).to.contain(
         'Material-UI: either `children`, `image`, `src` or `component` prop must be specified.',
       );
     });