mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Merge pull request #652 from acelaya-forks/feature/and-moar-rtl
Feature/and moar rtl
This commit is contained in:
commit
7bbc7250dd
5 changed files with 75 additions and 87 deletions
|
@ -38,7 +38,7 @@ export const EditDomainRedirectsModal: FC<EditDomainRedirectsModalProps> = (
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal isOpen={isOpen} toggle={toggle} centered>
|
<Modal isOpen={isOpen} toggle={toggle} centered>
|
||||||
<form onSubmit={handleSubmit}>
|
<form name="domainRedirectsModal" onSubmit={handleSubmit}>
|
||||||
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
|
<ModalHeader toggle={toggle}>Edit redirects for <b>{domain.domain}</b></ModalHeader>
|
||||||
<ModalBody>
|
<ModalBody>
|
||||||
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
|
<FormGroup value={baseUrlRedirect} onChange={setBaseUrlRedirect}>
|
||||||
|
|
|
@ -10,7 +10,7 @@ export interface ServersDropdownProps {
|
||||||
selectedServer: SelectedServer;
|
selectedServer: SelectedServer;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
export const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
||||||
const serversList = values(servers);
|
const serversList = values(servers);
|
||||||
|
|
||||||
const renderServers = () => {
|
const renderServers = () => {
|
||||||
|
@ -46,5 +46,3 @@ const ServersDropdown = ({ servers, selectedServer }: ServersDropdownProps) => {
|
||||||
</UncontrolledDropdown>
|
</UncontrolledDropdown>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default ServersDropdown;
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import Bottle from 'bottlejs';
|
import Bottle from 'bottlejs';
|
||||||
import CreateServer from '../CreateServer';
|
import CreateServer from '../CreateServer';
|
||||||
import ServersDropdown from '../ServersDropdown';
|
import { ServersDropdown } from '../ServersDropdown';
|
||||||
import DeleteServerModal from '../DeleteServerModal';
|
import DeleteServerModal from '../DeleteServerModal';
|
||||||
import DeleteServerButton from '../DeleteServerButton';
|
import DeleteServerButton from '../DeleteServerButton';
|
||||||
import { EditServer } from '../EditServer';
|
import { EditServer } from '../EditServer';
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { Button, ModalHeader } from 'reactstrap';
|
|
||||||
import { ShlinkDomain } from '../../../src/api/types';
|
import { ShlinkDomain } from '../../../src/api/types';
|
||||||
import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
|
import { EditDomainRedirectsModal } from '../../../src/domains/helpers/EditDomainRedirectsModal';
|
||||||
import { InfoTooltip } from '../../../src/utils/InfoTooltip';
|
|
||||||
|
|
||||||
describe('<EditDomainRedirectsModal />', () => {
|
describe('<EditDomainRedirectsModal />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
|
||||||
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
|
const editDomainRedirects = jest.fn().mockResolvedValue(undefined);
|
||||||
const toggle = jest.fn();
|
const toggle = jest.fn();
|
||||||
const domain = Mock.of<ShlinkDomain>({
|
const domain = Mock.of<ShlinkDomain>({
|
||||||
|
@ -15,81 +13,67 @@ describe('<EditDomainRedirectsModal />', () => {
|
||||||
baseUrlRedirect: 'baz',
|
baseUrlRedirect: 'baz',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const setUp = () => ({
|
||||||
beforeEach(() => {
|
user: userEvent.setup(),
|
||||||
wrapper = shallow(
|
...render(
|
||||||
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
|
<EditDomainRedirectsModal domain={domain} isOpen toggle={toggle} editDomainRedirects={editDomainRedirects} />,
|
||||||
);
|
),
|
||||||
});
|
});
|
||||||
|
|
||||||
afterEach(jest.clearAllMocks);
|
afterEach(jest.clearAllMocks);
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders domain in header', () => {
|
it('renders domain in header', () => {
|
||||||
const header = wrapper.find(ModalHeader);
|
setUp();
|
||||||
|
expect(screen.getByRole('heading')).toHaveTextContent('Edit redirects for foo.com');
|
||||||
expect(header.html()).toContain('foo.com');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('expected amount of form groups and tooltips', () => {
|
it('has different handlers to toggle the modal', async () => {
|
||||||
const formGroups = wrapper.find('FormGroup');
|
const { user } = setUp();
|
||||||
const tooltips = wrapper.find(InfoTooltip);
|
|
||||||
|
|
||||||
expect(formGroups).toHaveLength(3);
|
|
||||||
expect(tooltips).toHaveLength(3);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('has different handlers to toggle the modal', () => {
|
|
||||||
expect(toggle).not.toHaveBeenCalled();
|
expect(toggle).not.toHaveBeenCalled();
|
||||||
|
await user.click(screen.getByLabelText('Close'));
|
||||||
(wrapper.prop('toggle') as Function)();
|
await user.click(screen.getByRole('button', { name: 'Cancel' }));
|
||||||
(wrapper.find(ModalHeader).prop('toggle') as Function)();
|
expect(toggle).toHaveBeenCalledTimes(2);
|
||||||
wrapper.find(Button).first().simulate('click');
|
|
||||||
|
|
||||||
expect(toggle).toHaveBeenCalledTimes(3);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('saves expected values when form is submitted', () => {
|
it('saves expected values when form is submitted', async () => {
|
||||||
const formGroups = wrapper.find('FormGroup');
|
const { user } = setUp();
|
||||||
|
// TODO Using fire event because userEvent.click on the Submit button does not submit the form
|
||||||
|
const submitForm = () => fireEvent.submit(screen.getByRole('form'));
|
||||||
|
|
||||||
expect(editDomainRedirects).not.toHaveBeenCalled();
|
expect(editDomainRedirects).not.toHaveBeenCalled();
|
||||||
|
submitForm();
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: 'baz',
|
baseUrlRedirect: 'baz',
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(0).simulate('change', 'new_base_url');
|
await user.clear(screen.getByDisplayValue('baz'));
|
||||||
formGroups.at(2).simulate('change', 'new_invalid_short_url');
|
await user.type(screen.getAllByPlaceholderText('No redirect')[0], 'new_base_url');
|
||||||
|
await user.type(screen.getAllByPlaceholderText('No redirect')[2], 'new_invalid_short_url');
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
submitForm();
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
baseUrlRedirect: 'new_base_url',
|
baseUrlRedirect: 'new_base_url',
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: 'new_invalid_short_url',
|
invalidShortUrlRedirect: 'new_invalid_short_url',
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(1).simulate('change', 'new_regular_404');
|
await user.type(screen.getAllByPlaceholderText('No redirect')[1], 'new_regular_404');
|
||||||
formGroups.at(2).simulate('change', '');
|
await user.clear(screen.getByDisplayValue('new_invalid_short_url'));
|
||||||
|
submitForm();
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: 'new_base_url',
|
baseUrlRedirect: 'new_base_url',
|
||||||
regular404Redirect: 'new_regular_404',
|
regular404Redirect: 'new_regular_404',
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
|
|
||||||
formGroups.at(0).simulate('change', '');
|
await Promise.all(screen.getAllByPlaceholderText('No redirect').map((element) => user.clear(element)));
|
||||||
formGroups.at(1).simulate('change', '');
|
submitForm();
|
||||||
formGroups.at(2).simulate('change', '');
|
await waitFor(() => expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
||||||
|
|
||||||
wrapper.find('form').simulate('submit', { preventDefault: jest.fn() });
|
|
||||||
expect(editDomainRedirects).toHaveBeenCalledWith('foo.com', {
|
|
||||||
baseUrlRedirect: null,
|
baseUrlRedirect: null,
|
||||||
regular404Redirect: null,
|
regular404Redirect: null,
|
||||||
invalidShortUrlRedirect: null,
|
invalidShortUrlRedirect: null,
|
||||||
});
|
}));
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,44 +1,50 @@
|
||||||
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import userEvent from '@testing-library/user-event';
|
||||||
import { values } from 'ramda';
|
import { values } from 'ramda';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
import { DropdownItem, DropdownToggle } from 'reactstrap';
|
import { ServersDropdown } from '../../src/servers/ServersDropdown';
|
||||||
import ServersDropdown from '../../src/servers/ServersDropdown';
|
import { ServersMap, ServerWithId } from '../../src/servers/data';
|
||||||
import { ServerWithId } from '../../src/servers/data';
|
|
||||||
|
|
||||||
describe('<ServersDropdown />', () => {
|
describe('<ServersDropdown />', () => {
|
||||||
let wrapped: ShallowWrapper;
|
const fallbackServers: ServersMap = {
|
||||||
const servers = {
|
|
||||||
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
|
'1a': Mock.of<ServerWithId>({ name: 'foo', id: '1a' }),
|
||||||
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
|
'2b': Mock.of<ServerWithId>({ name: 'bar', id: '2b' }),
|
||||||
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
|
'3c': Mock.of<ServerWithId>({ name: 'baz', id: '3c' }),
|
||||||
};
|
};
|
||||||
|
const setUp = (servers: ServersMap = fallbackServers) => ({
|
||||||
beforeEach(() => {
|
user: userEvent.setup(),
|
||||||
wrapped = shallow(<ServersDropdown servers={servers} selectedServer={null} />);
|
...render(<MemoryRouter><ServersDropdown servers={servers} selectedServer={null} /></MemoryRouter>),
|
||||||
});
|
|
||||||
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);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows only create link when no servers exist yet', () => {
|
it('contains the list of servers and the "mange servers" button', async () => {
|
||||||
wrapped = shallow(
|
const { user } = setUp();
|
||||||
<ServersDropdown servers={{}} selectedServer={null} />,
|
|
||||||
);
|
|
||||||
const item = wrapped.find(DropdownItem);
|
|
||||||
|
|
||||||
expect(item).toHaveLength(1);
|
await user.click(screen.getByText('Servers'));
|
||||||
expect(item.prop('to')).toEqual('/server/create');
|
const items = screen.getAllByRole('menuitem');
|
||||||
expect(item.find('span').text()).toContain('Add a server');
|
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');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue