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 CreateShortUrlResult test to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-07-06 18:30:33 +02:00
parent edef36bae8
commit 1a20065053
2 changed files with 16 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/short-urls/helpers/CreateShortUrlResult.tsx
View file

@ -43,7 +43,7 @@ export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
return ( return (
<Result type="success" className="mt-3"> <Result type="success" className="mt-3">
{canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />} {canBeClosed && <FontAwesomeIcon icon={closeIcon} className="float-end pointer" onClick={resetCreateShortUrl} />}
<b>Great!</b> The short URL is <b>{shortUrl}</b> <span><b>Great!</b> The short URL is <b>{shortUrl}</b></span>
<CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}> <CopyToClipboard text={shortUrl} onCopy={setShowCopyTooltip}>
<button <button

45
test/short-urls/helpers/CreateShortUrlResult.test.tsx
View file

@ -1,56 +1,41 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { render, screen } from '@testing-library/react';
import CopyToClipboard from 'react-copy-to-clipboard'; import userEvent from '@testing-library/user-event';
import { Tooltip } from 'reactstrap';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult'; import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
import { TimeoutToggle } from '../../../src/utils/helpers/hooks'; import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
import { Result } from '../../../src/utils/Result';
describe('<CreateShortUrlResult />', () => { describe('<CreateShortUrlResult />', () => {
let wrapper: ShallowWrapper;
const copyToClipboard = jest.fn(); const copyToClipboard = jest.fn();
const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle; const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
const CreateShortUrlResult = createResult(useTimeoutToggle); const CreateShortUrlResult = createResult(useTimeoutToggle);
const createWrapper = (result: ShortUrl | null = null, error = false) => { const setUp = (result: ShortUrl | null = null, error = false) => ({
wrapper = shallow( user: userEvent.setup(),
<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />, ...render(<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />),
); });
return wrapper;
};
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders an error when error is true', () => { it('renders an error when error is true', () => {
const wrapper = createWrapper(Mock.all<ShortUrl>(), true); setUp(Mock.all<ShortUrl>(), true);
const errorCard = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(screen.getByText('An error occurred while creating the URL :(')).toBeInTheDocument();
expect(errorCard).toHaveLength(1);
expect(errorCard.html()).toContain('An error occurred while creating the URL :(');
}); });
it('renders nothing when no result is provided', () => { it('renders nothing when no result is provided', () => {
const wrapper = createWrapper(); const { container } = setUp();
expect(container.firstChild).toBeNull();
expect(wrapper.html()).toBeNull();
}); });
it('renders a result message when result is provided', () => { it('renders a result message when result is provided', () => {
const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' })); setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
expect(screen.getByText(/The short URL is/)).toHaveTextContent('Great! The short URL is https://doma.in/abc123');
expect(wrapper.html()).toContain('<b>Great!</b> The short URL is <b>https://doma.in/abc123</b>');
expect(wrapper.find(CopyToClipboard)).toHaveLength(1);
expect(wrapper.find(Tooltip)).toHaveLength(1);
}); });
it('Invokes tooltip timeout when copy to clipboard button is clicked', () => { it('Invokes tooltip timeout when copy to clipboard button is clicked', async () => {
const wrapper = createWrapper(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' })); const { user } = setUp(Mock.of<ShortUrl>({ shortUrl: 'https://doma.in/abc123' }));
const copyBtn = wrapper.find(CopyToClipboard);
expect(copyToClipboard).not.toHaveBeenCalled(); expect(copyToClipboard).not.toHaveBeenCalled();
copyBtn.simulate('copy'); await user.click(screen.getByRole('button'));
expect(copyToClipboard).toHaveBeenCalledTimes(1); expect(copyToClipboard).toHaveBeenCalledTimes(1);
}); });
}); });