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

Migrated ManageServersRowDropdown test to react testing library

Browse Source
This commit is contained in:
Alejandro Celaya
2022-06-04 10:20:24 +02:00
parent 1bd8636c19
commit 49e1f82b03
2 changed files with 37 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
test/servers/ManageServersRowDropdown.test.tsx
View File

@@ -1,84 +1,60 @@
import { shallow, ShallowWrapper } from 'enzyme';
import userEvent from '@testing-library/user-event';
import { render, screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { DropdownItem } from 'reactstrap';
import { MemoryRouter } from 'react-router-dom';
import { ServerWithId } from '../../src/servers/data';
import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
describe('<ManageServersRowDropdown />', () => {
const DeleteServerModal = () => null;
const ManageServersRowDropdown = createManageServersRowDropdown(DeleteServerModal);
const ManageServersRowDropdown = createManageServersRowDropdown(
({ isOpen }) => <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>,
);
const setAutoConnect = jest.fn();
let wrapper: ShallowWrapper;
const createWrapper = (autoConnect = false) => {
const setUp = (autoConnect = false) => {
const server = Mock.of<ServerWithId>({ id: 'abc123', autoConnect });
wrapper = shallow(<ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />);
return wrapper;
return {
user: userEvent.setup(),
...render(
<MemoryRouter>
<ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />
</MemoryRouter>,
),
};
};
afterEach(jest.clearAllMocks);
it('renders expected amount of dropdown items', () => {
const wrapper = createWrapper();
const items = wrapper.find(DropdownItem);
it('renders expected amount of dropdown items', async () => {
const { user } = setUp();
expect(items).toHaveLength(5);
expect(items.find('[divider]')).toHaveLength(1);
expect(items.at(0).prop('to')).toEqual('/server/abc123');
expect(items.at(1).prop('to')).toEqual('/server/abc123/edit');
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
await user.click(screen.getByRole('button'));
expect(screen.getByRole('menu')).toBeInTheDocument();
expect(screen.getAllByRole('menuitem')).toHaveLength(4);
expect(screen.getByRole('menuitem', { name: 'Connect' })).toHaveAttribute('href', '/server/abc123');
expect(screen.getByRole('menuitem', { name: 'Edit server' })).toHaveAttribute('href', '/server/abc123/edit');
});
it('allows toggling auto-connect', () => {
const wrapper = createWrapper();
it('allows toggling auto-connect', async () => {
const { user } = setUp();
expect(setAutoConnect).not.toHaveBeenCalled();
wrapper.find(DropdownItem).at(2).simulate('click');
await user.click(screen.getByRole('button'));
await user.click(screen.getByRole('menuitem', { name: 'Auto-connect' }));
expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true);
});
it('renders a modal', () => {
const wrapper = createWrapper();
const modal = wrapper.find(DeleteServerModal);
it('renders deletion modal', async () => {
const { user } = setUp();
expect(modal).toHaveLength(1);
expect(modal.prop('redirectHome')).toEqual(false);
expect(modal.prop('server')).toEqual(expect.objectContaining({ id: 'abc123' }));
expect(modal.prop('isOpen')).toEqual(false);
});
expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument();
expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument();
it('allows toggling the modal', () => {
const wrapper = createWrapper();
const modalToggle = wrapper.find(DropdownItem).last();
await user.click(screen.getByRole('button'));
await user.click(screen.getByRole('menuitem', { name: 'Remove server' }));
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
modalToggle.simulate('click');
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(true);
(wrapper.find(DeleteServerModal).prop('toggle') as Function)();
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false);
});
it('can be toggled', () => {
const wrapper = createWrapper();
expect(wrapper.prop('isOpen')).toEqual(false);
(wrapper.prop('toggle') as Function)();
expect(wrapper.prop('isOpen')).toEqual(true);
(wrapper.prop('toggle') as Function)();
expect(wrapper.prop('isOpen')).toEqual(false);
});
it.each([
[true, 'Do not auto-connect'],
[false, 'Auto-connect'],
])('shows different auto-connect toggle text depending on current server status', (autoConnect, expectedText) => {
const wrapper = createWrapper(autoConnect);
const item = wrapper.find(DropdownItem).at(2);
expect(item.html()).toContain(expectedText);
expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
expect(screen.queryByText('DeleteServerModal [CLOSED]')).not.toBeInTheDocument();
});
});