mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Migrated ManageServersRowDropdown test to react testing library
This commit is contained in:
parent
1bd8636c19
commit
49e1f82b03
2 changed files with 37 additions and 61 deletions
|
@ -39,7 +39,7 @@ export const ManageServersRowDropdown = (
|
|||
<DropdownItem tag={Link} to={`${serverUrl}/edit`}>
|
||||
<FontAwesomeIcon icon={editIcon} fixedWidth /> Edit server
|
||||
</DropdownItem>
|
||||
<DropdownItem onClick={() => setAutoConnect(server, !server.autoConnect)}>
|
||||
<DropdownItem onClick={() => setAutoConnect(server, !isAutoConnect)}>
|
||||
<FontAwesomeIcon icon={autoConnectIcon} fixedWidth /> {isAutoConnect ? 'Do not a' : 'A'}uto-connect
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue