Migrated TagCard test to react testing library

This commit is contained in:
Alejandro Celaya 2022-05-28 12:16:17 +02:00
parent 1d60db25bd
commit 56150e8707
3 changed files with 50 additions and 55 deletions

View file

@ -40,10 +40,16 @@ export const TagCard = (
return ( return (
<Card className="tag-card"> <Card className="tag-card">
<CardHeader className="tag-card__header"> <CardHeader className="tag-card__header">
<Button color="link" size="sm" className="tag-card__btn tag-card__btn--last" onClick={toggleDelete}> <Button
aria-label="Delete tag"
color="link"
size="sm"
className="tag-card__btn tag-card__btn--last"
onClick={toggleDelete}
>
<FontAwesomeIcon icon={deleteIcon} /> <FontAwesomeIcon icon={deleteIcon} />
</Button> </Button>
<Button color="link" size="sm" className="tag-card__btn" onClick={toggleEdit}> <Button aria-label="Edit tag" color="link" size="sm" className="tag-card__btn" onClick={toggleEdit}>
<FontAwesomeIcon icon={editIcon} /> <FontAwesomeIcon icon={editIcon} />
</Button> </Button>
<h5 <h5

View file

@ -22,9 +22,7 @@ export const DeleteTagConfirmModal = (
return ( return (
<Modal toggle={toggle} isOpen={isOpen} centered> <Modal toggle={toggle} isOpen={isOpen} centered>
<ModalHeader toggle={toggle}> <ModalHeader toggle={toggle} className="text-danger">Delete tag</ModalHeader>
<span className="text-danger">Delete tag</span>
</ModalHeader>
<ModalBody> <ModalBody>
Are you sure you want to delete tag <b>{tag}</b>? Are you sure you want to delete tag <b>{tag}</b>?
{error && ( {error && (

View file

@ -1,69 +1,60 @@
import { shallow, ShallowWrapper } from 'enzyme'; import userEvent from '@testing-library/user-event';
import { Link } from 'react-router-dom'; import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { TagCard as createTagCard } from '../../src/tags/TagCard'; import { TagCard as createTagCard } from '../../src/tags/TagCard';
import { TagBullet } from '../../src/tags/helpers/TagBullet';
import { ColorGenerator } from '../../src/utils/services/ColorGenerator'; import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
import { ReachableServer } from '../../src/servers/data'; import { ReachableServer } from '../../src/servers/data';
describe('<TagCard />', () => { describe('<TagCard />', () => {
let wrapper: ShallowWrapper; const TagCard = createTagCard(
const DeleteTagConfirmModal = jest.fn(); ({ isOpen }) => <span>DeleteTagConfirmModal {isOpen ? '[Open]' : '[Closed]'}</span>,
const EditTagModal = jest.fn(); ({ isOpen }) => <span>EditTagModal {isOpen ? '[Open]' : '[Closed]'}</span>,
const TagCard = createTagCard(DeleteTagConfirmModal, EditTagModal, Mock.all<ColorGenerator>()); Mock.of<ColorGenerator>({ getColorForKey: () => '' }),
const createWrapper = (tag = 'ssr') => { );
wrapper = shallow( const setUp = (tag = 'ssr') => ({
<TagCard user: userEvent.setup(),
tag={{ tag, visits: 23257, shortUrls: 48 }} ...render(
selectedServer={Mock.of<ReachableServer>({ id: '1' })} <MemoryRouter>
displayed <TagCard
toggle={() => {}} tag={{ tag, visits: 23257, shortUrls: 48 }}
/>, selectedServer={Mock.of<ReachableServer>({ id: '1' })}
); displayed
toggle={() => {}}
/>
</MemoryRouter>,
),
});
return wrapper;
};
beforeEach(() => createWrapper());
afterEach(() => wrapper.unmount());
afterEach(jest.resetAllMocks); afterEach(jest.resetAllMocks);
it.each([ it.each([
['ssr', '/server/1/list-short-urls/1?tags=ssr'], ['ssr', '/server/1/list-short-urls/1?tags=ssr', '/server/1/tag/ssr/visits'],
['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo'], ['ssr-&-foo', '/server/1/list-short-urls/1?tags=ssr-%26-foo', '/server/1/tag/ssr-&-foo/visits'],
])('shows a TagBullet and a link to the list filtering by the tag', (tag, expectedLink) => { ])('shows expected links for provided tags', (tag, shortUrlsLink, visitsLink) => {
const wrapper = createWrapper(tag); setUp(tag);
const links = wrapper.find(Link);
const bullet = wrapper.find(TagBullet);
expect(links.at(0).prop('to')).toEqual(expectedLink); expect(screen.getByText('48').parentNode).toHaveAttribute('href', shortUrlsLink);
expect(bullet.prop('tag')).toEqual(tag); expect(screen.getByText('23,257').parentNode).toHaveAttribute('href', visitsLink);
}); });
it('displays delete modal when delete btn is clicked', () => { it('displays delete modal when delete btn is clicked', async () => {
const delBtn = wrapper.find('.tag-card__btn').at(0); const { user } = setUp();
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false); expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Open]');
delBtn.simulate('click'); expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Closed]');
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true); await user.click(screen.getByLabelText('Delete tag'));
expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('[Open]');
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('[Closed]');
}); });
it('displays edit modal when edit btn is clicked', () => { it('displays edit modal when edit btn is clicked', async () => {
const editBtn = wrapper.find('.tag-card__btn').at(1); const { user } = setUp();
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false); expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Open]');
editBtn.simulate('click'); expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Closed]');
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true); await user.click(screen.getByLabelText('Edit tag'));
}); expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('[Open]');
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('[Closed]');
it('shows expected tag stats', () => {
const links = wrapper.find(Link);
expect(links).toHaveLength(2);
expect(links.at(0).prop('to')).toEqual('/server/1/list-short-urls/1?tags=ssr');
expect(links.at(0).text()).toContain('48');
expect(links.at(1).prop('to')).toEqual('/server/1/tag/ssr/visits');
expect(links.at(1).text()).toContain('23,257');
}); });
}); });