diff --git a/src/servers/ManageServersRowDropdown.tsx b/src/servers/ManageServersRowDropdown.tsx
index 51863d58..f0da17a5 100644
--- a/src/servers/ManageServersRowDropdown.tsx
+++ b/src/servers/ManageServersRowDropdown.tsx
@@ -39,7 +39,7 @@ export const ManageServersRowDropdown = (
Edit server
- setAutoConnect(server, !server.autoConnect)}>
+ setAutoConnect(server, !isAutoConnect)}>
{isAutoConnect ? 'Do not a' : 'A'}uto-connect
diff --git a/test/servers/ManageServersRowDropdown.test.tsx b/test/servers/ManageServersRowDropdown.test.tsx
index 95470a2a..98ad07ca 100644
--- a/test/servers/ManageServersRowDropdown.test.tsx
+++ b/test/servers/ManageServersRowDropdown.test.tsx
@@ -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('', () => {
- const DeleteServerModal = () => null;
- const ManageServersRowDropdown = createManageServersRowDropdown(DeleteServerModal);
+ const ManageServersRowDropdown = createManageServersRowDropdown(
+ ({ isOpen }) => DeleteServerModal {isOpen ? '[OPEN]' : '[CLOSED]'},
+ );
const setAutoConnect = jest.fn();
- let wrapper: ShallowWrapper;
- const createWrapper = (autoConnect = false) => {
+ const setUp = (autoConnect = false) => {
const server = Mock.of({ id: 'abc123', autoConnect });
-
- wrapper = shallow();
-
- return wrapper;
+ return {
+ user: userEvent.setup(),
+ ...render(
+
+
+ ,
+ ),
+ };
};
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();
});
});