Migrated ShortUrlsRowMenu test to react testing library

This commit is contained in:
Alejandro Celaya 2022-07-15 22:11:13 +02:00
parent 6236d36372
commit 90a643761a

View file

@ -1,58 +1,35 @@
import { shallow, ShallowWrapper } from 'enzyme'; import { screen } from '@testing-library/react';
import { DropdownItem } from 'reactstrap';
import { Mock } from 'ts-mockery'; import { Mock } from 'ts-mockery';
import { MemoryRouter } from 'react-router-dom';
import { ShortUrlsRowMenu as createShortUrlsRowMenu } from '../../../src/short-urls/helpers/ShortUrlsRowMenu'; import { ShortUrlsRowMenu as createShortUrlsRowMenu } from '../../../src/short-urls/helpers/ShortUrlsRowMenu';
import { ReachableServer } from '../../../src/servers/data'; import { ReachableServer } from '../../../src/servers/data';
import { ShortUrl } from '../../../src/short-urls/data'; import { ShortUrl } from '../../../src/short-urls/data';
import { DropdownBtnMenu } from '../../../src/utils/DropdownBtnMenu'; import { renderWithEvents } from '../../__helpers__/setUpTest';
describe('<ShortUrlsRowMenu />', () => { describe('<ShortUrlsRowMenu />', () => {
let wrapper: ShallowWrapper; const ShortUrlsRowMenu = createShortUrlsRowMenu(() => <i>DeleteShortUrlModal</i>, () => <i>QrCodeModal</i>);
const DeleteShortUrlModal = () => null;
const QrCodeModal = () => null;
const selectedServer = Mock.of<ReachableServer>({ id: 'abc123' }); const selectedServer = Mock.of<ReachableServer>({ id: 'abc123' });
const shortUrl = Mock.of<ShortUrl>({ const shortUrl = Mock.of<ShortUrl>({
shortCode: 'abc123', shortCode: 'abc123',
shortUrl: 'https://doma.in/abc123', shortUrl: 'https://doma.in/abc123',
}); });
const createWrapper = () => { const setUp = () => renderWithEvents(
const ShortUrlsRowMenu = createShortUrlsRowMenu(DeleteShortUrlModal, QrCodeModal); <MemoryRouter>
<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />
wrapper = shallow(<ShortUrlsRowMenu selectedServer={selectedServer} shortUrl={shortUrl} />); </MemoryRouter>,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it('renders modal windows', () => { it('renders modal windows', () => {
const wrapper = createWrapper(); setUp();
const deleteShortUrlModal = wrapper.find(DeleteShortUrlModal);
const qrCodeModal = wrapper.find(QrCodeModal);
expect(deleteShortUrlModal).toHaveLength(1); expect(screen.getByText('DeleteShortUrlModal')).toBeInTheDocument();
expect(qrCodeModal).toHaveLength(1); expect(screen.getByText('QrCodeModal')).toBeInTheDocument();
}); });
it('renders correct amount of menu items', () => { it('renders correct amount of menu items', async () => {
const wrapper = createWrapper(); const { user } = setUp();
const items = wrapper.find(DropdownItem);
expect(items).toHaveLength(5); await user.click(screen.getByRole('button'));
expect(items.find('[divider]')).toHaveLength(1); expect(screen.getAllByRole('menuitem')).toHaveLength(4);
});
describe('toggles state when toggling modals or the dropdown', () => {
const assert = (modalComponent: Function) => {
const wrapper = createWrapper();
expect(wrapper.find(modalComponent).prop('isOpen')).toEqual(false);
(wrapper.find(modalComponent).prop('toggle') as Function)();
expect(wrapper.find(modalComponent).prop('isOpen')).toEqual(true);
};
it('DeleteShortUrlModal', () => assert(DeleteShortUrlModal));
it('QrCodeModal', () => assert(QrCodeModal));
it('ShortUrlRowMenu', () => assert(DropdownBtnMenu));
}); });
}); });