mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Migrated TagCard test to react testing library
This commit is contained in:
parent
1d60db25bd
commit
56150e8707
3 changed files with 50 additions and 55 deletions
|
@ -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
|
||||||
|
|
|
@ -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 && (
|
||||||
|
|
|
@ -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') => ({
|
||||||
|
user: userEvent.setup(),
|
||||||
|
...render(
|
||||||
|
<MemoryRouter>
|
||||||
<TagCard
|
<TagCard
|
||||||
tag={{ tag, visits: 23257, shortUrls: 48 }}
|
tag={{ tag, visits: 23257, shortUrls: 48 }}
|
||||||
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
|
selectedServer={Mock.of<ReachableServer>({ id: '1' })}
|
||||||
displayed
|
displayed
|
||||||
toggle={() => {}}
|
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');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue