Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Oct 6, 2020
Merged

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

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d122e5f
[test] - Use testing-library in Grid and SvgIcon
baterson Oct 4, 2020
f6666ea
[test] - Refactor query selectors
baterson Oct 4, 2020
f058d4b
[test] - Refactor dom selectors
baterson Oct 4, 2020
98fc401
[test] - Refactor dom selectors
baterson Oct 4, 2020
abfad80
Add css class check in Grid tests
baterson Oct 5, 2020
32e5a35
fix ci
oliviertassinari Oct 5, 2020
6e088d6
yarn prettier
oliviertassinari Oct 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
61 changes: 33 additions & 28 deletions packages/material-ui/src/Grid/Grid.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
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 +28,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
Open in desktop
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);
});
});
});