mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 17:40:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated ShortUrlVisitsHeader test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-06-11 08:53:48 +02:00
parent 6bd628712e
commit 84435714f5
2 changed files with 25 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/visits/ShortUrlVisitsHeader.tsx
View file

@ -35,7 +35,7 @@ export const ShortUrlVisitsHeader = ({ shortUrlDetail, shortUrlVisits, goBack }:
<VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}> <VisitsHeader title={visitsStatsTitle} goBack={goBack} visits={visits} shortUrl={shortUrl}>
<hr /> <hr />
<div>Created: {renderDate()}</div> <div>Created: {renderDate()}</div>
<div> <div className="long-url-container">
{`${title ? 'Title' : 'Long URL'}: `} {`${title ? 'Title' : 'Long URL'}: `}
{loading && <small>Loading...</small>} {loading && <small>Loading...</small>}
{!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>} {!loading && <ExternalLink href={longLink}>{title ?? longLink}</ExternalLink>}

49
test/visits/ShortUrlVisitsHeader.test.tsx
View file

@ -1,20 +1,19 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen, waitFor } from '@testing-library/react';
import { ExternalLink } from 'react-external-link'; import userEvent from '@testing-library/user-event';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { formatDistance, parseISO } from 'date-fns';
import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader'; import { ShortUrlVisitsHeader } from '../../src/visits/ShortUrlVisitsHeader';
import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail'; import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits'; import { ShortUrlVisits } from '../../src/visits/reducers/shortUrlVisits';
import { Time } from '../../src/utils/Time';
describe('<ShortUrlVisitsHeader />', () => { describe('<ShortUrlVisitsHeader />', () => {
let wrapper: ShallowWrapper; const dateCreated = '2018-01-01T10:00:00+00:00';
const dateCreated = '2018-01-01T10:00:00+01:00';
const longUrl = 'https://foo.bar/bar/foo'; const longUrl = 'https://foo.bar/bar/foo';
const shortUrlVisits = Mock.of<ShortUrlVisits>({ const shortUrlVisits = Mock.of<ShortUrlVisits>({
visits: [{}, {}, {}], visits: [{}, {}, {}],
}); });
const goBack = jest.fn(); const goBack = jest.fn();
const createWrapper = (title?: string | null) => { const setUp = (title?: string | null) => {
const shortUrlDetail = Mock.of<ShortUrlDetail>({ const shortUrlDetail = Mock.of<ShortUrlDetail>({
shortUrl: { shortUrl: {
shortUrl: 'https://doma.in/abc123', shortUrl: 'https://doma.in/abc123',
@ -24,32 +23,32 @@ describe('<ShortUrlVisitsHeader />', () => {
}, },
loading: false, loading: false,
}); });
return {
wrapper = shallow( user: userEvent.setup(),
<ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />, ...render(
); <ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />,
),
return wrapper; };
}; };
beforeEach(() => createWrapper()); it('shows when the URL was created', async () => {
afterEach(() => wrapper.unmount()); const { user } = setUp();
const dateElement = screen.getByText(`${formatDistance(new Date(), parseISO(dateCreated))} ago`);
it('shows when the URL was created', () => { expect(dateElement).toBeInTheDocument();
const time = wrapper.find(Time).first(); expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
await user.hover(dateElement);
expect(time.prop('date')).toEqual(dateCreated); await waitFor(() => expect(screen.getByRole('tooltip')).toHaveTextContent('2018-01-01 10:00'));
}); });
it.each([ it.each([
[null, longUrl], [null, `Long URL: ${longUrl}`],
[undefined, longUrl], [undefined, `Long URL: ${longUrl}`],
['My cool title', 'My cool title'], ['My cool title', 'Title: My cool title'],
])('shows the long URL and title', (title, expectedContent) => { ])('shows the long URL and title', (title, expectedContent) => {
const wrapper = createWrapper(title); const { container } = setUp(title);
const longUrlLink = wrapper.find(ExternalLink).last();
expect(longUrlLink.prop('href')).toEqual(longUrl); expect(container.querySelector('.long-url-container')).toHaveTextContent(expectedContent);
expect(longUrlLink.prop('children')).toEqual(expectedContent); expect(screen.getByRole('link', { name: title ?? longUrl })).toHaveAttribute('href', longUrl);
}); });
}); });