mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-11 02:37:22 +03:00
Code Issues Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/servers/ManageServersRowDropdown.tsx
View file

@ -39,7 +39,7 @@ export const ManageServersRowDropdown = (
<DropdownItem tag={Link} to={`${serverUrl}/edit`}> <DropdownItem tag={Link} to={`${serverUrl}/edit`}>
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server <FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
</DropdownItem> </DropdownItem>
<DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}> <DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect <FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
</DropdownItem> </DropdownItem>
<DropdownItem divider /> <DropdownItem divider />

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 { Mock } from 'ts-mockery';
import { DropdownItem } from 'reactstrap'; import { MemoryRouter } from 'react-router-dom';
import { ServerWithId } from '../../src/servers/data'; import { ServerWithId } from '../../src/servers/data';
import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown'; import { ManageServersRowDropdown as createManageServersRowDropdown } from '../../src/servers/ManageServersRowDropdown';
describe('<ManageServersRowDropdown />', () => { describe('<ManageServersRowDropdown />', () => {
const DeleteServerModal = () => null; const ManageServersRowDropdown = createManageServersRowDropdown(
const ManageServersRowDropdown = createManageServersRowDropdown(DeleteServerModal); ({ isOpen }) => <span>DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'}</span>,
);
const setAutoConnect = jest.fn(); const setAutoConnect = jest.fn();
let wrapper: ShallowWrapper; const setUp = (autoConnect = false) => {
const createWrapper = (autoConnect = false) => {
const server = Mock.of<ServerWithId>({ id: 'abc123', autoConnect }); const server = Mock.of<ServerWithId>({ id: 'abc123', autoConnect });
return {
wrapper = shallow(<ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />); user: userEvent.setup(),
...render(
return wrapper; <MemoryRouter>
<ManageServersRowDropdown setAutoConnect={setAutoConnect} server={server} />
</MemoryRouter>,
),
};
}; };
afterEach(jest.clearAllMocks); afterEach(jest.clearAllMocks);
it('renders expected amount of dropdown items', () => { it('renders expected amount of dropdown items', async () => {
const wrapper = createWrapper(); const { user } = setUp();
const items = wrapper.find(DropdownItem);
expect(items).toHaveLength(5); expect(screen.queryByRole('menu')).not.toBeInTheDocument();
expect(items.find('[divider]')).toHaveLength(1); await user.click(screen.getByRole('button'));
expect(items.at(0).prop('to')).toEqual('/server/abc123'); expect(screen.getByRole('menu')).toBeInTheDocument();
expect(items.at(1).prop('to')).toEqual('/server/abc123/edit');
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', () => { it('allows toggling auto-connect', async () => {
const wrapper = createWrapper(); const { user } = setUp();
expect(setAutoConnect).not.toHaveBeenCalled(); 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); expect(setAutoConnect).toHaveBeenCalledWith(expect.objectContaining({ id: 'abc123' }), true);
}); });
it('renders a modal', () => { it('renders deletion modal', async () => {
const wrapper = createWrapper(); const { user } = setUp();
const modal = wrapper.find(DeleteServerModal);
expect(modal).toHaveLength(1); expect(screen.queryByText('DeleteServerModal [OPEN]')).not.toBeInTheDocument();
expect(modal.prop('redirectHome')).toEqual(false); expect(screen.getByText('DeleteServerModal [CLOSED]')).toBeInTheDocument();
expect(modal.prop('server')).toEqual(expect.objectContaining({ id: 'abc123' }));
expect(modal.prop('isOpen')).toEqual(false);
});
it('allows toggling the modal', () => { await user.click(screen.getByRole('button'));
const wrapper = createWrapper(); await user.click(screen.getByRole('menuitem', { name: 'Remove server' }));
const modalToggle = wrapper.find(DropdownItem).last();
expect(wrapper.find(DeleteServerModal).prop('isOpen')).toEqual(false); expect(screen.getByText('DeleteServerModal [OPEN]')).toBeInTheDocument();
expect(screen.queryByText('DeleteServerModal [CLOSED]')).not.toBeInTheDocument();
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);
}); });
}); });