mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Merge pull request #658 from acelaya-forks/feature/rtl
Migrated CreateServer test to react testing library
This commit is contained in:
commit
876018390d
14 changed files with 106 additions and 100 deletions
|
@ -4,7 +4,7 @@ import { Button } from 'reactstrap';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { Result } from '../utils/Result';
|
import { Result } from '../utils/Result';
|
||||||
import { NoMenuLayout } from '../common/NoMenuLayout';
|
import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import { StateFlagTimeout, useGoBack, useToggle } from '../utils/helpers/hooks';
|
import { TimeoutToggle, useGoBack, useToggle } from '../utils/helpers/hooks';
|
||||||
import { ServerForm } from './helpers/ServerForm';
|
import { ServerForm } from './helpers/ServerForm';
|
||||||
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
||||||
import { ServerData, ServersMap, ServerWithId } from './data';
|
import { ServerData, ServersMap, ServerWithId } from './data';
|
||||||
|
@ -26,14 +26,14 @@ const ImportResult = ({ type }: { type: 'error' | 'success' }) => (
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useStateFlagTimeout: StateFlagTimeout) => (
|
export const CreateServer = (ImportServersBtn: FC<ImportServersBtnProps>, useTimeoutToggle: TimeoutToggle) => (
|
||||||
{ servers, createServer }: CreateServerProps,
|
{ servers, createServer }: CreateServerProps,
|
||||||
) => {
|
) => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const goBack = useGoBack();
|
const goBack = useGoBack();
|
||||||
const hasServers = !!Object.keys(servers).length;
|
const hasServers = !!Object.keys(servers).length;
|
||||||
const [serversImported, setServersImported] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
const [serversImported, setServersImported] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
|
||||||
const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
|
||||||
const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
|
const [isConfirmModalOpen, toggleConfirmModal] = useToggle();
|
||||||
const [serverData, setServerData] = useState<ServerData | undefined>();
|
const [serverData, setServerData] = useState<ServerData | undefined>();
|
||||||
const save = () => {
|
const save = () => {
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { NoMenuLayout } from '../common/NoMenuLayout';
|
||||||
import { SimpleCard } from '../utils/SimpleCard';
|
import { SimpleCard } from '../utils/SimpleCard';
|
||||||
import { SearchField } from '../utils/SearchField';
|
import { SearchField } from '../utils/SearchField';
|
||||||
import { Result } from '../utils/Result';
|
import { Result } from '../utils/Result';
|
||||||
import { StateFlagTimeout } from '../utils/helpers/hooks';
|
import { TimeoutToggle } from '../utils/helpers/hooks';
|
||||||
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
import { ImportServersBtnProps } from './helpers/ImportServersBtn';
|
||||||
import { ServersMap } from './data';
|
import { ServersMap } from './data';
|
||||||
import { ManageServersRowProps } from './ManageServersRow';
|
import { ManageServersRowProps } from './ManageServersRow';
|
||||||
|
@ -22,7 +22,7 @@ const SHOW_IMPORT_MSG_TIME = 4000;
|
||||||
export const ManageServers = (
|
export const ManageServers = (
|
||||||
serversExporter: ServersExporter,
|
serversExporter: ServersExporter,
|
||||||
ImportServersBtn: FC<ImportServersBtnProps>,
|
ImportServersBtn: FC<ImportServersBtnProps>,
|
||||||
useStateFlagTimeout: StateFlagTimeout,
|
useTimeoutToggle: TimeoutToggle,
|
||||||
ManageServersRow: FC<ManageServersRowProps>,
|
ManageServersRow: FC<ManageServersRowProps>,
|
||||||
): FC<ManageServersProps> => ({ servers }) => {
|
): FC<ManageServersProps> => ({ servers }) => {
|
||||||
const allServers = Object.values(servers);
|
const allServers = Object.values(servers);
|
||||||
|
@ -31,7 +31,7 @@ export const ManageServers = (
|
||||||
allServers.filter(({ name, url }) => `${name} ${url}`.match(searchTerm)),
|
allServers.filter(({ name, url }) => `${name} ${url}`.match(searchTerm)),
|
||||||
);
|
);
|
||||||
const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect);
|
const hasAutoConnect = serversList.some(({ autoConnect }) => !!autoConnect);
|
||||||
const [errorImporting, setErrorImporting] = useStateFlagTimeout(false, SHOW_IMPORT_MSG_TIME);
|
const [errorImporting, setErrorImporting] = useTimeoutToggle(false, SHOW_IMPORT_MSG_TIME);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setServersList(Object.values(servers));
|
setServersList(Object.values(servers));
|
||||||
|
|
|
@ -25,7 +25,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
||||||
ManageServers,
|
ManageServers,
|
||||||
'ServersExporter',
|
'ServersExporter',
|
||||||
'ImportServersBtn',
|
'ImportServersBtn',
|
||||||
'useStateFlagTimeout',
|
'useTimeoutToggle',
|
||||||
'ManageServersRow',
|
'ManageServersRow',
|
||||||
);
|
);
|
||||||
bottle.decorator('ManageServers', withoutSelectedServer);
|
bottle.decorator('ManageServers', withoutSelectedServer);
|
||||||
|
@ -36,7 +36,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
||||||
bottle.serviceFactory('ManageServersRowDropdown', ManageServersRowDropdown, 'DeleteServerModal');
|
bottle.serviceFactory('ManageServersRowDropdown', ManageServersRowDropdown, 'DeleteServerModal');
|
||||||
bottle.decorator('ManageServersRowDropdown', connect(null, ['setAutoConnect']));
|
bottle.decorator('ManageServersRowDropdown', connect(null, ['setAutoConnect']));
|
||||||
|
|
||||||
bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useStateFlagTimeout');
|
bottle.serviceFactory('CreateServer', CreateServer, 'ImportServersBtn', 'useTimeoutToggle');
|
||||||
bottle.decorator('CreateServer', withoutSelectedServer);
|
bottle.decorator('CreateServer', withoutSelectedServer);
|
||||||
bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServer', 'resetSelectedServer']));
|
bottle.decorator('CreateServer', connect(['selectedServer', 'servers'], ['createServer', 'resetSelectedServer']));
|
||||||
|
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { useEffect } from 'react';
|
||||||
import CopyToClipboard from 'react-copy-to-clipboard';
|
import CopyToClipboard from 'react-copy-to-clipboard';
|
||||||
import { Tooltip } from 'reactstrap';
|
import { Tooltip } from 'reactstrap';
|
||||||
import { ShortUrlCreation } from '../reducers/shortUrlCreation';
|
import { ShortUrlCreation } from '../reducers/shortUrlCreation';
|
||||||
import { StateFlagTimeout } from '../../utils/helpers/hooks';
|
import { TimeoutToggle } from '../../utils/helpers/hooks';
|
||||||
import { Result } from '../../utils/Result';
|
import { Result } from '../../utils/Result';
|
||||||
import './CreateShortUrlResult.scss';
|
import './CreateShortUrlResult.scss';
|
||||||
import { ShlinkApiError } from '../../api/ShlinkApiError';
|
import { ShlinkApiError } from '../../api/ShlinkApiError';
|
||||||
|
@ -16,10 +16,10 @@ export interface CreateShortUrlResultProps extends ShortUrlCreation {
|
||||||
canBeClosed?: boolean;
|
canBeClosed?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export const CreateShortUrlResult = (useStateFlagTimeout: StateFlagTimeout) => (
|
export const CreateShortUrlResult = (useTimeoutToggle: TimeoutToggle) => (
|
||||||
{ error, errorData, result, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
|
{ error, errorData, result, resetCreateShortUrl, canBeClosed = false }: CreateShortUrlResultProps,
|
||||||
) => {
|
) => {
|
||||||
const [showCopyTooltip, setShowCopyTooltip] = useStateFlagTimeout();
|
const [showCopyTooltip, setShowCopyTooltip] = useTimeoutToggle();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
resetCreateShortUrl();
|
resetCreateShortUrl();
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { FC, useEffect, useRef } from 'react';
|
||||||
import { isEmpty } from 'ramda';
|
import { isEmpty } from 'ramda';
|
||||||
import { ExternalLink } from 'react-external-link';
|
import { ExternalLink } from 'react-external-link';
|
||||||
import { ColorGenerator } from '../../utils/services/ColorGenerator';
|
import { ColorGenerator } from '../../utils/services/ColorGenerator';
|
||||||
import { StateFlagTimeout } from '../../utils/helpers/hooks';
|
import { TimeoutToggle } from '../../utils/helpers/hooks';
|
||||||
import { Tag } from '../../tags/helpers/Tag';
|
import { Tag } from '../../tags/helpers/Tag';
|
||||||
import { SelectedServer } from '../../servers/data';
|
import { SelectedServer } from '../../servers/data';
|
||||||
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
|
import { CopyToClipboardIcon } from '../../utils/CopyToClipboardIcon';
|
||||||
|
@ -21,10 +21,10 @@ export interface ShortUrlsRowProps {
|
||||||
export const ShortUrlsRow = (
|
export const ShortUrlsRow = (
|
||||||
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
|
ShortUrlsRowMenu: FC<ShortUrlsRowMenuProps>,
|
||||||
colorGenerator: ColorGenerator,
|
colorGenerator: ColorGenerator,
|
||||||
useStateFlagTimeout: StateFlagTimeout,
|
useTimeoutToggle: TimeoutToggle,
|
||||||
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
|
) => ({ shortUrl, selectedServer, onTagClick }: ShortUrlsRowProps) => {
|
||||||
const [copiedToClipboard, setCopiedToClipboard] = useStateFlagTimeout();
|
const [copiedToClipboard, setCopiedToClipboard] = useTimeoutToggle();
|
||||||
const [active, setActive] = useStateFlagTimeout(false, 500);
|
const [active, setActive] = useTimeoutToggle(false, 500);
|
||||||
const isFirstRun = useRef(true);
|
const isFirstRun = useRef(true);
|
||||||
|
|
||||||
const renderTags = (tags: string[]) => {
|
const renderTags = (tags: string[]) => {
|
||||||
|
|
|
@ -27,9 +27,9 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
||||||
));
|
));
|
||||||
|
|
||||||
bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
|
bottle.serviceFactory('ShortUrlsTable', ShortUrlsTable, 'ShortUrlsRow');
|
||||||
bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useStateFlagTimeout');
|
bottle.serviceFactory('ShortUrlsRow', ShortUrlsRow, 'ShortUrlsRowMenu', 'ColorGenerator', 'useTimeoutToggle');
|
||||||
bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
|
bottle.serviceFactory('ShortUrlsRowMenu', ShortUrlsRowMenu, 'DeleteShortUrlModal', 'QrCodeModal');
|
||||||
bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useStateFlagTimeout');
|
bottle.serviceFactory('CreateShortUrlResult', CreateShortUrlResult, 'useTimeoutToggle');
|
||||||
bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
|
bottle.serviceFactory('ShortUrlForm', ShortUrlForm, 'TagsSelector', 'DomainSelector');
|
||||||
|
|
||||||
bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult');
|
bottle.serviceFactory('CreateShortUrl', CreateShortUrl, 'ShortUrlForm', 'CreateShortUrlResult');
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import { FC, PropsWithChildren } from 'react';
|
import { FC, PropsWithChildren } from 'react';
|
||||||
import { InputType } from 'reactstrap/types/lib/Input';
|
import { InputType } from 'reactstrap/types/lib/Input';
|
||||||
import { LabeledFormGroup } from './LabeledFormGroup';
|
import { LabeledFormGroup } from './LabeledFormGroup';
|
||||||
|
import { useDomId } from '../helpers/hooks';
|
||||||
|
|
||||||
export type InputFormGroupProps = PropsWithChildren<{
|
export type InputFormGroupProps = PropsWithChildren<{
|
||||||
value: string;
|
value: string;
|
||||||
|
@ -14,15 +15,20 @@ export type InputFormGroupProps = PropsWithChildren<{
|
||||||
|
|
||||||
export const InputFormGroup: FC<InputFormGroupProps> = (
|
export const InputFormGroup: FC<InputFormGroupProps> = (
|
||||||
{ children, value, onChange, type, required, placeholder, className, labelClassName },
|
{ children, value, onChange, type, required, placeholder, className, labelClassName },
|
||||||
) => (
|
) => {
|
||||||
<LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName}>
|
const id = useDomId();
|
||||||
<input
|
|
||||||
className="form-control"
|
return (
|
||||||
type={type ?? 'text'}
|
<LabeledFormGroup label={<>{children}:</>} className={className ?? ''} labelClassName={labelClassName} id={id}>
|
||||||
value={value}
|
<input
|
||||||
required={required ?? true}
|
id={id}
|
||||||
placeholder={placeholder}
|
className="form-control"
|
||||||
onChange={(e) => onChange(e.target.value)}
|
type={type ?? 'text'}
|
||||||
/>
|
value={value}
|
||||||
</LabeledFormGroup>
|
required={required ?? true}
|
||||||
);
|
placeholder={placeholder}
|
||||||
|
onChange={(e) => onChange(e.target.value)}
|
||||||
|
/>
|
||||||
|
</LabeledFormGroup>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -5,14 +5,15 @@ type LabeledFormGroupProps = PropsWithChildren<{
|
||||||
noMargin?: boolean;
|
noMargin?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
labelClassName?: string;
|
labelClassName?: string;
|
||||||
|
id?: string;
|
||||||
}>;
|
}>;
|
||||||
|
|
||||||
/* eslint-disable jsx-a11y/label-has-associated-control */
|
/* eslint-disable jsx-a11y/label-has-associated-control */
|
||||||
export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
|
export const LabeledFormGroup: FC<LabeledFormGroupProps> = (
|
||||||
{ children, label, className = '', labelClassName = '', noMargin = false },
|
{ children, label, className = '', labelClassName = '', noMargin = false, id },
|
||||||
) => (
|
) => (
|
||||||
<div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
|
<div className={`${className} ${noMargin ? '' : 'mb-3'}`}>
|
||||||
<label className={`form-label ${labelClassName}`}>{label}</label>
|
<label className={`form-label ${labelClassName}`} htmlFor={id}>{label}</label>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,12 +6,12 @@ import { parseQuery, stringifyQuery } from './query';
|
||||||
|
|
||||||
const DEFAULT_DELAY = 2000;
|
const DEFAULT_DELAY = 2000;
|
||||||
|
|
||||||
export type StateFlagTimeout = (initialValue?: boolean, delay?: number) => [ boolean, () => void ];
|
export type TimeoutToggle = (initialValue?: boolean, delay?: number) => [boolean, () => void];
|
||||||
|
|
||||||
export const useStateFlagTimeout = (
|
export const useTimeoutToggle = (
|
||||||
setTimeout: (callback: Function, timeout: number) => number,
|
setTimeout: (callback: Function, timeout: number) => number,
|
||||||
clearTimeout: (timer: number) => void,
|
clearTimeout: (timer: number) => void,
|
||||||
): StateFlagTimeout => (initialValue = false, delay = DEFAULT_DELAY) => {
|
): TimeoutToggle => (initialValue = false, delay = DEFAULT_DELAY) => {
|
||||||
const [flag, setFlag] = useState<boolean>(initialValue);
|
const [flag, setFlag] = useState<boolean>(initialValue);
|
||||||
const timeout = useRef<number | undefined>(undefined);
|
const timeout = useRef<number | undefined>(undefined);
|
||||||
const callback = () => {
|
const callback = () => {
|
||||||
|
@ -31,7 +31,6 @@ type ToggleResult = [ boolean, () => void, () => void, () => void ];
|
||||||
|
|
||||||
export const useToggle = (initialValue = false): ToggleResult => {
|
export const useToggle = (initialValue = false): ToggleResult => {
|
||||||
const [flag, setFlag] = useState<boolean>(initialValue);
|
const [flag, setFlag] = useState<boolean>(initialValue);
|
||||||
|
|
||||||
return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
|
return [flag, () => setFlag(!flag), () => setFlag(true), () => setFlag(false)];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -80,7 +79,6 @@ export const useEffectExceptFirstTime = (callback: EffectCallback, deps: Depende
|
||||||
|
|
||||||
export const useGoBack = () => {
|
export const useGoBack = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return () => navigate(-1);
|
return () => navigate(-1);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import Bottle from 'bottlejs';
|
import Bottle from 'bottlejs';
|
||||||
import { useStateFlagTimeout } from '../helpers/hooks';
|
import { useTimeoutToggle } from '../helpers/hooks';
|
||||||
import { LocalStorage } from './LocalStorage';
|
import { LocalStorage } from './LocalStorage';
|
||||||
import { ColorGenerator } from './ColorGenerator';
|
import { ColorGenerator } from './ColorGenerator';
|
||||||
import { csvToJson, jsonToCsv } from '../helpers/csvjson';
|
import { csvToJson, jsonToCsv } from '../helpers/csvjson';
|
||||||
|
@ -14,7 +14,7 @@ const provideServices = (bottle: Bottle) => {
|
||||||
|
|
||||||
bottle.constant('setTimeout', global.setTimeout);
|
bottle.constant('setTimeout', global.setTimeout);
|
||||||
bottle.constant('clearTimeout', global.clearTimeout);
|
bottle.constant('clearTimeout', global.clearTimeout);
|
||||||
bottle.serviceFactory('useStateFlagTimeout', useStateFlagTimeout, 'setTimeout', 'clearTimeout');
|
bottle.serviceFactory('useTimeoutToggle', useTimeoutToggle, 'setTimeout', 'clearTimeout');
|
||||||
};
|
};
|
||||||
|
|
||||||
export default provideServices;
|
export default provideServices;
|
||||||
|
|
|
@ -1,83 +1,84 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import userEvent from '@testing-library/user-event';
|
||||||
|
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
import { CreateServer as createCreateServer } from '../../src/servers/CreateServer';
|
import { CreateServer as createCreateServer } from '../../src/servers/CreateServer';
|
||||||
import { ServerForm } from '../../src/servers/helpers/ServerForm';
|
|
||||||
import { ServerWithId } from '../../src/servers/data';
|
import { ServerWithId } from '../../src/servers/data';
|
||||||
import { DuplicatedServersModal } from '../../src/servers/helpers/DuplicatedServersModal';
|
|
||||||
|
|
||||||
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
|
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useNavigate: jest.fn() }));
|
||||||
|
|
||||||
describe('<CreateServer />', () => {
|
describe('<CreateServer />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
|
||||||
const ImportServersBtn = () => null;
|
|
||||||
const createServerMock = jest.fn();
|
const createServerMock = jest.fn();
|
||||||
const navigate = jest.fn();
|
const navigate = jest.fn();
|
||||||
const servers = { foo: Mock.all<ServerWithId>() };
|
const servers = { foo: Mock.of<ServerWithId>({ url: 'https://existing_url.com', apiKey: 'existing_api_key' }) };
|
||||||
const createWrapper = (serversImported = false, importFailed = false) => {
|
const setUp = (serversImported = false, importFailed = false) => {
|
||||||
(useNavigate as any).mockReturnValue(navigate);
|
(useNavigate as any).mockReturnValue(navigate);
|
||||||
|
|
||||||
const useStateFlagTimeout = jest.fn()
|
let callCount = 0;
|
||||||
.mockReturnValueOnce([serversImported, () => ''])
|
const useTimeoutToggle = jest.fn().mockImplementation(() => {
|
||||||
.mockReturnValueOnce([importFailed, () => ''])
|
const result = [callCount % 2 === 0 ? serversImported : importFailed, () => null];
|
||||||
.mockReturnValue([]);
|
callCount += 1;
|
||||||
const CreateServer = createCreateServer(ImportServersBtn, useStateFlagTimeout);
|
return result;
|
||||||
|
});
|
||||||
|
const CreateServer = createCreateServer(() => <>ImportServersBtn</>, useTimeoutToggle);
|
||||||
|
|
||||||
wrapper = shallow(<CreateServer createServer={createServerMock} servers={servers} />);
|
return {
|
||||||
|
user: userEvent.setup(),
|
||||||
return wrapper;
|
...render(<CreateServer createServer={createServerMock} servers={servers} />),
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
beforeEach(jest.clearAllMocks);
|
beforeEach(jest.clearAllMocks);
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders components', () => {
|
|
||||||
const wrapper = createWrapper();
|
|
||||||
|
|
||||||
expect(wrapper.find(ServerForm)).toHaveLength(1);
|
|
||||||
expect(wrapper.find('ImportResult')).toHaveLength(0);
|
|
||||||
});
|
|
||||||
|
|
||||||
it('shows success message when imported is true', () => {
|
it('shows success message when imported is true', () => {
|
||||||
const wrapper = createWrapper(true);
|
setUp(true);
|
||||||
const result = wrapper.find('ImportResult');
|
|
||||||
|
|
||||||
expect(result).toHaveLength(1);
|
expect(screen.getByText('Servers properly imported. You can now select one from the list :)')).toBeInTheDocument();
|
||||||
expect(result.prop('type')).toEqual('success');
|
expect(
|
||||||
|
screen.queryByText('The servers could not be imported. Make sure the format is correct.'),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows error message when import failed', () => {
|
it('shows error message when import failed', () => {
|
||||||
const wrapper = createWrapper(false, true);
|
setUp(false, true);
|
||||||
const result = wrapper.find('ImportResult');
|
|
||||||
|
|
||||||
expect(result).toHaveLength(1);
|
expect(
|
||||||
expect(result.prop('type')).toEqual('error');
|
screen.queryByText('Servers properly imported. You can now select one from the list :)'),
|
||||||
|
).not.toBeInTheDocument();
|
||||||
|
expect(screen.getByText('The servers could not be imported. Make sure the format is correct.')).toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('creates server data when form is submitted', () => {
|
it('creates server data when form is submitted', async () => {
|
||||||
const wrapper = createWrapper();
|
const { user } = setUp();
|
||||||
const form = wrapper.find(ServerForm);
|
|
||||||
|
|
||||||
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([]);
|
expect(createServerMock).not.toHaveBeenCalled();
|
||||||
form.simulate('submit', {});
|
|
||||||
expect(wrapper.find(DuplicatedServersModal).prop('duplicatedServers')).toEqual([{}]);
|
await user.type(screen.getByLabelText(/^Name/), 'the_name');
|
||||||
|
await user.type(screen.getByLabelText(/^URL/), 'https://the_url.com');
|
||||||
|
await user.type(screen.getByLabelText(/^API key/), 'the_api_key');
|
||||||
|
fireEvent.submit(screen.getByRole('form'));
|
||||||
|
|
||||||
|
expect(createServerMock).toHaveBeenCalledWith(expect.objectContaining({
|
||||||
|
name: 'the_name',
|
||||||
|
url: 'https://the_url.com',
|
||||||
|
apiKey: 'the_api_key',
|
||||||
|
}));
|
||||||
|
expect(navigate).toHaveBeenCalledWith(expect.stringMatching(/^\/server\//));
|
||||||
|
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('saves server and redirects on modal save', () => {
|
it('displays dialog when trying to create a duplicated server', async () => {
|
||||||
const wrapper = createWrapper();
|
const { user } = setUp();
|
||||||
|
|
||||||
wrapper.find(ServerForm).simulate('submit', {});
|
await user.type(screen.getByLabelText(/^Name/), 'the_name');
|
||||||
wrapper.find(DuplicatedServersModal).simulate('save');
|
await user.type(screen.getByLabelText(/^URL/), 'https://existing_url.com');
|
||||||
|
await user.type(screen.getByLabelText(/^API key/), 'existing_api_key');
|
||||||
|
fireEvent.submit(screen.getByRole('form'));
|
||||||
|
|
||||||
expect(createServerMock).toHaveBeenCalledTimes(1);
|
await waitFor(() => expect(screen.getByRole('dialog')).toBeInTheDocument());
|
||||||
expect(navigate).toHaveBeenCalledTimes(1);
|
await user.click(screen.getByRole('button', { name: 'Discard' }));
|
||||||
});
|
|
||||||
|
|
||||||
it('goes back on modal discard', () => {
|
|
||||||
const wrapper = createWrapper();
|
|
||||||
|
|
||||||
wrapper.find(DuplicatedServersModal).simulate('discard');
|
|
||||||
|
|
||||||
|
expect(createServerMock).not.toHaveBeenCalled();
|
||||||
expect(navigate).toHaveBeenCalledWith(-1);
|
expect(navigate).toHaveBeenCalledWith(-1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -12,8 +12,8 @@ describe('<ManageServers />', () => {
|
||||||
const serversExporter = Mock.of<ServersExporter>({ exportServers });
|
const serversExporter = Mock.of<ServersExporter>({ exportServers });
|
||||||
const ImportServersBtn = () => null;
|
const ImportServersBtn = () => null;
|
||||||
const ManageServersRow = () => null;
|
const ManageServersRow = () => null;
|
||||||
const useStateFlagTimeout = jest.fn().mockReturnValue([false, jest.fn()]);
|
const useTimeoutToggle = jest.fn().mockReturnValue([false, jest.fn()]);
|
||||||
const ManageServers = createManageServers(serversExporter, ImportServersBtn, useStateFlagTimeout, ManageServersRow);
|
const ManageServers = createManageServers(serversExporter, ImportServersBtn, useTimeoutToggle, ManageServersRow);
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
const createServerMock = (value: string, autoConnect = false) => Mock.of<ServerWithId>(
|
const createServerMock = (value: string, autoConnect = false) => Mock.of<ServerWithId>(
|
||||||
{ id: value, name: value, url: value, autoConnect },
|
{ id: value, name: value, url: value, autoConnect },
|
||||||
|
@ -82,7 +82,7 @@ describe('<ManageServers />', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows an error message if an error occurs while importing servers', () => {
|
it('shows an error message if an error occurs while importing servers', () => {
|
||||||
useStateFlagTimeout.mockReturnValue([true, jest.fn()]);
|
useTimeoutToggle.mockReturnValue([true, jest.fn()]);
|
||||||
|
|
||||||
const wrapper = createWrapper({ foo: createServerMock('foo') });
|
const wrapper = createWrapper({ foo: createServerMock('foo') });
|
||||||
const result = wrapper.find(Result);
|
const result = wrapper.find(Result);
|
||||||
|
|
|
@ -4,14 +4,14 @@ import { Tooltip } from 'reactstrap';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
|
import { CreateShortUrlResult as createResult } from '../../../src/short-urls/helpers/CreateShortUrlResult';
|
||||||
import { ShortUrl } from '../../../src/short-urls/data';
|
import { ShortUrl } from '../../../src/short-urls/data';
|
||||||
import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
|
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
|
||||||
import { Result } from '../../../src/utils/Result';
|
import { Result } from '../../../src/utils/Result';
|
||||||
|
|
||||||
describe('<CreateShortUrlResult />', () => {
|
describe('<CreateShortUrlResult />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
const copyToClipboard = jest.fn();
|
const copyToClipboard = jest.fn();
|
||||||
const useStateFlagTimeout = jest.fn(() => [false, copyToClipboard]) as StateFlagTimeout;
|
const useTimeoutToggle = jest.fn(() => [false, copyToClipboard]) as TimeoutToggle;
|
||||||
const CreateShortUrlResult = createResult(useStateFlagTimeout);
|
const CreateShortUrlResult = createResult(useTimeoutToggle);
|
||||||
const createWrapper = (result: ShortUrl | null = null, error = false) => {
|
const createWrapper = (result: ShortUrl | null = null, error = false) => {
|
||||||
wrapper = shallow(
|
wrapper = shallow(
|
||||||
<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />,
|
<CreateShortUrlResult resetCreateShortUrl={() => {}} result={result} error={error} saving={false} />,
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { formatISO } from 'date-fns';
|
||||||
import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
|
import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
|
||||||
import { Tag } from '../../../src/tags/helpers/Tag';
|
import { Tag } from '../../../src/tags/helpers/Tag';
|
||||||
import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
|
import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
|
||||||
import { StateFlagTimeout } from '../../../src/utils/helpers/hooks';
|
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
|
||||||
import { ShortUrl } from '../../../src/short-urls/data';
|
import { ShortUrl } from '../../../src/short-urls/data';
|
||||||
import { ReachableServer } from '../../../src/servers/data';
|
import { ReachableServer } from '../../../src/servers/data';
|
||||||
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
|
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
|
||||||
|
@ -17,8 +17,8 @@ describe('<ShortUrlsRow />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
let wrapper: ShallowWrapper;
|
||||||
const mockFunction = () => null;
|
const mockFunction = () => null;
|
||||||
const ShortUrlsRowMenu = mockFunction;
|
const ShortUrlsRowMenu = mockFunction;
|
||||||
const stateFlagTimeout = jest.fn(() => true);
|
const timeoutToggle = jest.fn(() => true);
|
||||||
const useStateFlagTimeout = jest.fn(() => [false, stateFlagTimeout]) as StateFlagTimeout;
|
const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
|
||||||
const colorGenerator = Mock.of<ColorGenerator>({
|
const colorGenerator = Mock.of<ColorGenerator>({
|
||||||
getColorForKey: jest.fn(),
|
getColorForKey: jest.fn(),
|
||||||
setColorForKey: jest.fn(),
|
setColorForKey: jest.fn(),
|
||||||
|
@ -38,7 +38,7 @@ describe('<ShortUrlsRow />', () => {
|
||||||
maxVisits: null,
|
maxVisits: null,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useStateFlagTimeout);
|
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle);
|
||||||
const createWrapper = (title?: string | null) => {
|
const createWrapper = (title?: string | null) => {
|
||||||
wrapper = shallow(
|
wrapper = shallow(
|
||||||
<ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title }} onTagClick={mockFunction} />,
|
<ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title }} onTagClick={mockFunction} />,
|
||||||
|
@ -129,8 +129,8 @@ describe('<ShortUrlsRow />', () => {
|
||||||
const menu = col.find(CopyToClipboardIcon);
|
const menu = col.find(CopyToClipboardIcon);
|
||||||
|
|
||||||
expect(menu).toHaveLength(1);
|
expect(menu).toHaveLength(1);
|
||||||
expect(stateFlagTimeout).not.toHaveBeenCalled();
|
expect(timeoutToggle).not.toHaveBeenCalled();
|
||||||
menu.simulate('copy');
|
menu.simulate('copy');
|
||||||
expect(stateFlagTimeout).toHaveBeenCalledTimes(1);
|
expect(timeoutToggle).toHaveBeenCalledTimes(1);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue