mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 17:57:26 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated SimpleCard test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-02 10:01:29 +02:00
parent 8b091a7b23
commit 66d8a32f49
2 changed files with 14 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/utils/SimpleCard.tsx
View file

@ -8,7 +8,7 @@ interface SimpleCardProps extends Omit<CardProps, 'title'> {
export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => ( export const SimpleCard = ({ title, children, bodyClassName, ...rest }: SimpleCardProps) => (
<Card {...rest}> <Card {...rest}>
{title && <CardHeader>{title}</CardHeader>} {title && <CardHeader role="heading">{title}</CardHeader>}
<CardBody className={bodyClassName}>{children}</CardBody> <CardBody className={bodyClassName}>{children}</CardBody>
</Card> </Card>
); );

32
test/utils/SimpleCard.test.tsx
View file

@ -1,30 +1,24 @@
import { shallow } from 'enzyme'; import { render, screen } from '@testing-library/react';
import { Card, CardBody, CardHeader } from 'reactstrap';
import { SimpleCard } from '../../src/utils/SimpleCard'; import { SimpleCard } from '../../src/utils/SimpleCard';
describe('<SimpleCard />', () => { describe('<SimpleCard />', () => {
it.each([ it('does not render title if not provided', () => {
[{}, 0], render(<SimpleCard />);
[{ title: 'Cool title' }, 1], expect(screen.queryByRole('heading')).not.toBeInTheDocument();
])('renders header only if title is provided', (props, expectedAmountOfHeaders) => { });
const wrapper = shallow(<SimpleCard {...props} />);
expect(wrapper.find(CardHeader)).toHaveLength(expectedAmountOfHeaders); it('renders provided title', () => {
render(<SimpleCard title="Cool title" />);
expect(screen.getByRole('heading')).toHaveTextContent('Cool title');
}); });
it('renders children inside body', () => { it('renders children inside body', () => {
const wrapper = shallow(<SimpleCard>Hello world</SimpleCard>); render(<SimpleCard>Hello world</SimpleCard>);
const body = wrapper.find(CardBody); expect(screen.getByText('Hello world')).toBeInTheDocument();
expect(body).toHaveLength(1);
expect(body.html()).toContain('Hello world');
}); });
it('passes extra props to nested card', () => { it.each(['primary', 'danger', 'warning'])('passes extra props to nested card', (color) => {
const wrapper = shallow(<SimpleCard className="foo" color="primary">Hello world</SimpleCard>); const { container } = render(<SimpleCard className="foo" color={color}>Hello world</SimpleCard>);
const card = wrapper.find(Card); expect(container.firstChild).toHaveAttribute('class', `foo card bg-${color}`);
expect(card.prop('className')).toEqual('foo');
expect(card.prop('color')).toEqual('primary');
}); });
}); });