mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-09 01:37:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

Migrated ServersDropdown to react testing library

Browse source
This commit is contained in:
Alejandro Celaya 2022-05-17 22:31:02 +02:00
parent e53f90fc5c
commit 63433864d3
3 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/servers/ServersDropdown.tsx
View file

@ -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) => {
</UncontrolledDropdown>
);
};
export default ServersDropdown;

2
src/servers/services/provideServices.ts
View file

@ -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';

68
test/servers/ServersDropdown.test.tsx
View file

@ -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('<ServersDropdown />', () => {
let wrapped: ShallowWrapper;
const servers = {
const fallbackServers: ServersMap = {
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
};
beforeEach(() => {
wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
});
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(<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>),
});
it('shows only create link when no servers exist yet', () => {
wrapped = shallow(
<ServersDropdown servers={{}} selectedServer={null} />,
);
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');
});
});