Skip to content

Commit

Permalink
[test] Migrate more components to react-testing-library (#22872)
Browse files Browse the repository at this point in the history
  • Loading branch information
@baterson
baterson committed Oct 6, 2020
1 parent 16f63bb commit 79e8073
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 51 deletions.
56 changes: 28 additions & 28 deletions packages/material-ui/src/Grid/Grid.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
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 { 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 />);
});

Expand All @@ -24,68 +23,69 @@ 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 />);

expect(container.firstChild).to.have.class(classes.container);
});
});

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 />);

expect(container.firstChild).to.have.class(classes.item);
});
});

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 />);

expect(container.firstChild).to.have.class(classes['grid-xs-true']);
});

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} />);

expect(container.firstChild).to.have.class(classes['grid-xs-3']);
});

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" />);

expect(container.firstChild).to.have.class(classes['grid-xs-auto']);
});
});

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} />);

expect(container.firstChild).to.have.class(classes['spacing-xs-1']);
});
});

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 />);

expect(container.firstChild).to.have.class(classes['align-items-xs-center']);
});
});

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 />);

expect(container.firstChild).to.have.class(classes['align-content-xs-center']);
});
});

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 />);

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);
expect(container.firstChild).to.have.class(classes['justify-content-xs-space-evenly']);
});
});

Expand Down
52 changes: 29 additions & 23 deletions packages/material-ui/src/SvgIcon/SvgIcon.test.js
View file
Original file line number Diff line number Diff line change
@@ -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(
Expand All @@ -39,55 +38,62 @@ 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, queryByTestId } = render(<SvgIcon>{path}</SvgIcon>);

expect(queryByTestId('test-path')).to.not.equal(null);
expect(container.firstChild).to.have.attribute('aria-hidden', 'true');
});

describe('prop: titleAccess', () => {
it('should be able to make an icon accessible', () => {
const wrapper = shallow(
const { container, queryByText } = 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);

expect(queryByText('Network')).to.not.equal(null);
expect(container.firstChild).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>);

expect(container.firstChild).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>);

expect(container.firstChild).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>);

expect(container.firstChild).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>);

expect(container.firstChild).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>);

expect(container.firstChild).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>);

expect(container.firstChild).to.have.class(classes.fontSizeInherit);
});
});
});

0 comments on commit 79e8073

Please sign in to comment.