diff --git a/src/servers/ServersDropdown.tsx b/src/servers/ServersDropdown.tsx
index cf619228..e549471a 100644
--- a/src/servers/ServersDropdown.tsx
+++ b/src/servers/ServersDropdown.tsx
@@ -10,7 +10,7 @@ export interface ServersDropdownProps {
selectedServer: SelectedServer;
}
-const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
+export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
const serversList = values(servers);
const renderServers = () => {
@@ -46,5 +46,3 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
);
};
-
-export default ServersDropdown;
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts
index fcb04a46..9f177cb6 100644
--- a/src/servers/services/provideServices.ts
+++ b/src/servers/services/provideServices.ts
@@ -1,6 +1,6 @@
import Bottle from 'bottlejs';
import CreateServer from '../CreateServer';
-import ServersDropdown from '../ServersDropdown';
+import { ServersDropdown } from '../ServersDropdown';
import DeleteServerModal from '../DeleteServerModal';
import DeleteServerButton from '../DeleteServerButton';
import { EditServer } from '../EditServer';
diff --git a/test/servers/ServersDropdown.test.tsx b/test/servers/ServersDropdown.test.tsx
index eab1eca2..19e8e616 100644
--- a/test/servers/ServersDropdown.test.tsx
+++ b/test/servers/ServersDropdown.test.tsx
@@ -1,44 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import { values } from 'ramda';
import { Mock } from 'ts-mockery';
-import { shallow, ShallowWrapper } from 'enzyme';
-import { DropdownItem, DropdownToggle } from 'reactstrap';
-import ServersDropdown from '../../src/servers/ServersDropdown';
-import { ServerWithId } from '../../src/servers/data';
+import { MemoryRouter } from 'react-router-dom';
+import { ServersDropdown } from '../../src/servers/ServersDropdown';
+import { ServersMap, ServerWithId } from '../../src/servers/data';
describe('', () => {
- let wrapped: ShallowWrapper;
- const servers = {
+ const fallbackServers: ServersMap = {
'1a': Mock.of({ name: 'foo', id: '1a' }),
'2b': Mock.of({ name: 'bar', id: '2b' }),
'3c': Mock.of({ name: 'baz', id: '3c' }),
};
-
- beforeEach(() => {
- wrapped = shallow();
- });
- afterEach(() => wrapped.unmount());
-
- it('contains the list of servers, the divider, the create button and the export button', () =>
- expect(wrapped.find(DropdownItem)).toHaveLength(values(servers).length + 2));
-
- it('contains a toggle with proper title', () =>
- expect(wrapped.find(DropdownToggle)).toHaveLength(1));
-
- it('contains a button to export servers', () => {
- const items = wrapped.find(DropdownItem);
-
- expect(items.filter('[divider]')).toHaveLength(1);
- expect(items.filterWhere((item) => item.prop('to') === '/manage-servers')).toHaveLength(1);
+ const setUp = (servers: ServersMap = fallbackServers) => ({
+ user: userEvent.setup(),
+ ...render(),
});
- it('shows only create link when no servers exist yet', () => {
- wrapped = shallow(
- ,
- );
- const item = wrapped.find(DropdownItem);
+ it('contains the list of servers and the "mange servers" button', async () => {
+ const { user } = setUp();
- expect(item).toHaveLength(1);
- expect(item.prop('to')).toEqual('/server/create');
- expect(item.find('span').text()).toContain('Add a server');
+ await user.click(screen.getByText('Servers'));
+ const items = screen.getAllByRole('menuitem');
+ expect(items).toHaveLength(values(fallbackServers).length + 1);
+ expect(items[0]).toHaveTextContent('foo');
+ expect(items[1]).toHaveTextContent('bar');
+ expect(items[2]).toHaveTextContent('baz');
+ expect(items[3]).toHaveTextContent('Manage servers');
+ });
+
+ it('contains a toggle with proper text', () => {
+ setUp();
+ expect(screen.getByRole('link')).toHaveTextContent('Servers');
+ });
+
+ it('contains a button to manage servers', async () => {
+ const { user } = setUp();
+
+ await user.click(screen.getByText('Servers'));
+ expect(screen.getByRole('menuitem', { name: 'Manage servers' })).toHaveAttribute('href', '/manage-servers');
+ });
+
+ it('shows only create link when no servers exist yet', async () => {
+ const { user } = setUp({});
+
+ await user.click(screen.getByText('Servers'));
+ expect(screen.getByRole('menuitem')).toHaveTextContent('Add a server');
});
});