mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Migrated ShortUrlVisitsHeader test to react testing library
This commit is contained in:
parent
6bd628712e
commit
84435714f5
2 changed files with 25 additions and 26 deletions
|
@ -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>}
|
||||||
|
|
|
@ -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(),
|
||||||
|
...render(
|
||||||
<ShortUrlVisitsHeader shortUrlDetail={shortUrlDetail} shortUrlVisits={shortUrlVisits} goBack={goBack} />,
|
<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);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue