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

[Badge] Migrate to testing-library #20710

Merged
merged 1 commit into from
Apr 23, 2020
Merged

[Badge] Migrate to testing-library #20710

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
126 changes: 67 additions & 59 deletions packages/material-ui/src/Badge/Badge.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,24 @@
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 Badge from './Badge';

function findBadge(wrapper) {
return wrapper.find('span').at(1);
function findBadge(container) {
return container.firstChild.querySelector('span');
}

describe('<Badge />', () => {
let mount;
let classes;
const render = createClientRender();
const defaultProps = {
children: <div className="unique">Hello World</div>,
children: (
<div className="unique" data-testid="children">
Hello World
</div>
),
badgeContent: 10,
};

Expand All @@ -39,131 +45,133 @@ describe('<Badge />', () => {
);

it('renders children and badgeContent', () => {
const children = <div id="child" />;
const badge = <div id="badge" />;
const wrapper = mount(<Badge badgeContent={badge}>{children}</Badge>);
assert.strictEqual(wrapper.contains(children), true);
assert.strictEqual(wrapper.contains(badge), true);
const children = <div id="child" data-testid="child" />;
const badge = <div id="badge" data-testid="badge" />;
const { container, getByTestId } = render(<Badge badgeContent={badge}>{children}</Badge>);
expect(container.firstChild).to.contain(getByTestId('child'));
expect(container.firstChild).to.contain(getByTestId('badge'));
});

it('renders children and overwrite badge class', () => {
const badgeClassName = 'testBadgeClassName';
const wrapper = mount(<Badge {...defaultProps} classes={{ badge: badgeClassName }} />);
assert.strictEqual(findBadge(wrapper).hasClass(badgeClassName), true);
const { container } = render(<Badge {...defaultProps} classes={{ badge: badgeClassName }} />);
expect(findBadge(container)).to.have.class(badgeClassName);
});

it('renders children', () => {
const wrapper = mount(<Badge className="testClassName" {...defaultProps} />);
assert.strictEqual(wrapper.contains(defaultProps.children), true);
const { container, getByTestId } = render(
<Badge className="testClassName" {...defaultProps} />,
);
expect(container.firstChild).to.contain(getByTestId('children'));
});

describe('prop: color', () => {
it('should have the colorPrimary class when color="primary"', () => {
const wrapper = mount(<Badge {...defaultProps} color="primary" />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.colorPrimary), true);
const { container } = render(<Badge {...defaultProps} color="primary" />);
expect(findBadge(container)).to.have.class(classes.colorPrimary);
});

it('should have the colorSecondary class when color="secondary"', () => {
const wrapper = mount(<Badge {...defaultProps} color="secondary" />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.colorSecondary), true);
const { container } = render(<Badge {...defaultProps} color="secondary" />);
expect(findBadge(container)).to.have.class(classes.colorSecondary);
});

it('should have the colorError class when color="error"', () => {
const wrapper = mount(<Badge {...defaultProps} color="error" />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.colorError), true);
const { container } = render(<Badge {...defaultProps} color="error" />);
expect(findBadge(container)).to.have.class(classes.colorError);
});
});

describe('prop: invisible', () => {
it('should default to false', () => {
const wrapper = mount(<Badge {...defaultProps} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), false);
const { container } = render(<Badge {...defaultProps} />);
expect(findBadge(container)).to.not.have.class(classes.invisible);
});

it('should render without the invisible class when set to false', () => {
const wrapper = mount(<Badge {...defaultProps} invisible={false} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), false);
const { container } = render(<Badge {...defaultProps} invisible={false} />);
expect(findBadge(container)).to.not.have.class(classes.invisible);
});

it('should render with the invisible class when set to true', () => {
const wrapper = mount(<Badge {...defaultProps} invisible />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), true);
const { container } = render(<Badge {...defaultProps} invisible />);
expect(findBadge(container)).to.have.class(classes.invisible);
});

it('should render with the invisible class when empty and not dot', () => {
let wrapper;
wrapper = mount(<Badge {...defaultProps} badgeContent={null} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), true);
wrapper = mount(<Badge {...defaultProps} badgeContent={undefined} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), true);
wrapper = mount(<Badge {...defaultProps} badgeContent={undefined} variant="dot" />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), false);
let container;
container = render(<Badge {...defaultProps} badgeContent={null} />).container;
expect(findBadge(container)).to.have.class(classes.invisible);
container = render(<Badge {...defaultProps} badgeContent={undefined} />).container;
expect(findBadge(container)).to.have.class(classes.invisible);
container = render(<Badge {...defaultProps} badgeContent={undefined} variant="dot" />)
.container;
expect(findBadge(container)).to.not.have.class(classes.invisible);
});
});

describe('prop: showZero', () => {
it('should default to false', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={0} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), true);
const { container } = render(<Badge {...defaultProps} badgeContent={0} />);
expect(findBadge(container)).to.have.class(classes.invisible);
});

it('should render without the invisible class when false and badgeContent is not 0', () => {
const wrapper = mount(<Badge {...defaultProps} showZero />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), false);
const { container } = render(<Badge {...defaultProps} showZero />);
expect(findBadge(container)).to.not.have.class(classes.invisible);
});

it('should render without the invisible class when true and badgeContent is 0', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={0} showZero />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), false);
const { container } = render(<Badge {...defaultProps} badgeContent={0} showZero />);
expect(findBadge(container)).to.not.have.class(classes.invisible);
});

it('should render with the invisible class when false and badgeContent is 0', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={0} showZero={false} />);

assert.strictEqual(findBadge(wrapper).hasClass(classes.invisible), true);
const { container } = render(<Badge {...defaultProps} badgeContent={0} showZero={false} />);
expect(findBadge(container)).to.have.class(classes.invisible);
});
});

describe('prop: variant', () => {
it('should default to standard', () => {
const wrapper = mount(<Badge {...defaultProps} />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.badge), true);
assert.strictEqual(findBadge(wrapper).hasClass(classes.dot), false);
const { container } = render(<Badge {...defaultProps} />);
expect(findBadge(container)).to.have.class(classes.badge);
expect(findBadge(container)).to.not.have.class(classes.dot);
});

it('should render with the standard class when variant="standard"', () => {
const wrapper = mount(<Badge {...defaultProps} variant="standard" />);
assert.strictEqual(findBadge(wrapper).hasClass(classes.badge), true);
assert.strictEqual(findBadge(wrapper).hasClass(classes.dot), false);
const { container } = render(<Badge {...defaultProps} variant="standard" />);
expect(findBadge(container)).to.have.class(classes.badge);
expect(findBadge(container)).to.not.have.class(classes.dot);
});

it('should not render badgeContent when variant="dot"', () => {
const wrapper = mount(<Badge {...defaultProps} variant="dot" />);
assert.strictEqual(findBadge(wrapper).text(), '');
assert.strictEqual(findBadge(wrapper).hasClass(classes.badge), true);
assert.strictEqual(findBadge(wrapper).hasClass(classes.dot), true);
const { container } = render(<Badge {...defaultProps} variant="dot" />);
expect(findBadge(container)).to.have.class(classes.badge);
expect(findBadge(container)).to.have.class(classes.dot);
expect(findBadge(container)).to.have.text('');
});
});

describe('prop: max', () => {
it('should default to 99', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={100} />);
assert.strictEqual(findBadge(wrapper).text(), '99+');
const { container } = render(<Badge {...defaultProps} badgeContent={100} />);
expect(findBadge(container)).to.have.text('99+');
});

it('should cap badgeContent', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={1000} max={999} />);
assert.strictEqual(findBadge(wrapper).text(), '999+');
const { container } = render(<Badge {...defaultProps} badgeContent={1000} max={999} />);
expect(findBadge(container)).to.have.text('999+');
});

it('should not cap if badgeContent and max are equal', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={1000} max={1000} />);
assert.strictEqual(findBadge(wrapper).text(), '1000');
const { container } = render(<Badge {...defaultProps} badgeContent={1000} max={1000} />);
expect(findBadge(container)).to.have.text('1000');
});

it('should not cap if badgeContent is lower than max', () => {
const wrapper = mount(<Badge {...defaultProps} badgeContent={50} max={1000} />);
assert.strictEqual(findBadge(wrapper).text(), '50');
const { container } = render(<Badge {...defaultProps} badgeContent={50} max={1000} />);
expect(findBadge(container)).to.have.text('50');
});
});
});