forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-03-14 11:33:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrated DeleteShortUrlModal test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-07-15 22:00:30 +02:00
parent 065c908153
commit 6236d36372
1 changed files with 26 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
test/short-urls/helpers/DeleteShortUrlModal.test.tsx
View File

@@ -1,87 +1,75 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { identity } from 'ramda';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal'; import { DeleteShortUrlModal } from '../../../src/short-urls/helpers/DeleteShortUrlModal';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion'; import { ShortUrlDeletion } from '../../../src/short-urls/reducers/shortUrlDeletion';
import { ProblemDetailsError } from '../../../src/api/types'; import { ProblemDetailsError } from '../../../src/api/types';
import { Result } from '../../../src/utils/Result'; import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<DeleteShortUrlModal />', () => { describe('<DeleteShortUrlModal />', () => {
let wrapper: ShallowWrapper;
const shortUrl = Mock.of<ShortUrl>({ const shortUrl = Mock.of<ShortUrl>({
tags: [], tags: [],
shortCode: 'abc123', shortCode: 'abc123',
longUrl: 'https://long-domain.com/foo/bar', longUrl: 'https://long-domain.com/foo/bar',
}); });
const deleteShortUrl = jest.fn(async () => Promise.resolve()); const deleteShortUrl = jest.fn(async () => Promise.resolve());
const createWrapper = (shortUrlDeletion: Partial<ShortUrlDeletion>) => { const setUp = (shortUrlDeletion: Partial<ShortUrlDeletion>) => renderWithEvents(
wrapper = shallow( <DeleteShortUrlModal
<DeleteShortUrlModal isOpen
isOpen shortUrl={shortUrl}
shortUrl={shortUrl} shortUrlDeletion={Mock.of<ShortUrlDeletion>(shortUrlDeletion)}
shortUrlDeletion={Mock.of<ShortUrlDeletion>(shortUrlDeletion)} deleteShortUrl={deleteShortUrl}
toggle={() => {}} toggle={() => {}}
deleteShortUrl={deleteShortUrl} resetDeleteShortUrl={() => {}}
resetDeleteShortUrl={() => {}} />,
/>, );
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it('shows generic error when non-threshold error occurs', () => { it('shows generic error when non-threshold error occurs', () => {
const wrapper = createWrapper({ setUp({
loading: false, loading: false,
error: true, error: true,
shortCode: 'abc123', shortCode: 'abc123',
errorData: Mock.of<ProblemDetailsError>({ type: 'OTHER_ERROR' }), errorData: Mock.of<ProblemDetailsError>({ type: 'OTHER_ERROR' }),
}); });
const error = wrapper.find(Result).filterWhere((result) => result.prop('type') === 'error'); expect(screen.getByText('Something went wrong while deleting the URL :(')).toBeInTheDocument();
expect(error).toHaveLength(1);
expect(error.html()).toContain('Something went wrong while deleting the URL :(');
}); });
it('disables submit button when loading', () => { it('disables submit button when loading', () => {
const wrapper = createWrapper({ setUp({
loading: true, loading: true,
error: false, error: false,
shortCode: 'abc123', shortCode: 'abc123',
}); });
const submit = wrapper.find('.btn-danger'); expect(screen.getByRole('button', { name: 'Deleting...' })).toHaveAttribute('disabled');
expect(submit).toHaveLength(1);
expect(submit.prop('disabled')).toEqual(true);
expect(submit.html()).toContain('Deleting...');
}); });
it('enables submit button when proper short code is provided', () => { it('enables submit button when proper short code is provided', async () => {
const shortCode = 'abc123'; const shortCode = 'abc123';
const wrapper = createWrapper({ const { user } = setUp({
loading: false, loading: false,
error: false, error: false,
shortCode, shortCode,
}); });
const getDeleteBtn = () => screen.getByRole('button', { name: 'Delete' });
expect(wrapper.find('.btn-danger').prop('disabled')).toEqual(true); expect(getDeleteBtn()).toHaveAttribute('disabled');
wrapper.find('.form-control').simulate('change', { target: { value: shortCode } }); await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
expect(wrapper.find('.btn-danger').prop('disabled')).toEqual(false); expect(getDeleteBtn()).not.toHaveAttribute('disabled');
}); });
it('tries to delete short URL when form is submit', () => { it('tries to delete short URL when form is submit', async () => {
const shortCode = 'abc123'; const shortCode = 'abc123';
const wrapper = createWrapper({ const { user } = setUp({
loading: false, loading: false,
error: false, error: false,
shortCode, shortCode,
}); });
expect(deleteShortUrl).not.toHaveBeenCalled(); expect(deleteShortUrl).not.toHaveBeenCalled();
wrapper.find('form').simulate('submit', { preventDefault: identity }); await user.type(screen.getByPlaceholderText(/^Insert the short code/), shortCode);
await user.click(screen.getByRole('button', { name: 'Delete' }));
expect(deleteShortUrl).toHaveBeenCalledTimes(1); expect(deleteShortUrl).toHaveBeenCalledTimes(1);
}); });
}); });