mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 17:40:23 +03:00
Migrated EditShortUrl test to react testing library
This commit is contained in:
parent
efa07f0368
commit
59fd58b824
4 changed files with 79 additions and 102 deletions
|
@ -5,7 +5,7 @@ import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { ExternalLink } from 'react-external-link';
|
import { ExternalLink } from 'react-external-link';
|
||||||
import { useLocation, useParams } from 'react-router-dom';
|
import { useLocation, useParams } from 'react-router-dom';
|
||||||
import { SelectedServer } from '../servers/data';
|
import { SelectedServer } from '../servers/data';
|
||||||
import { Settings, ShortUrlCreationSettings } from '../settings/reducers/settings';
|
import { Settings } from '../settings/reducers/settings';
|
||||||
import { OptionalString } from '../utils/utils';
|
import { OptionalString } from '../utils/utils';
|
||||||
import { parseQuery } from '../utils/helpers/query';
|
import { parseQuery } from '../utils/helpers/query';
|
||||||
import { Message } from '../utils/Message';
|
import { Message } from '../utils/Message';
|
||||||
|
@ -14,8 +14,9 @@ import { ShlinkApiError } from '../api/ShlinkApiError';
|
||||||
import { useGoBack, useToggle } from '../utils/helpers/hooks';
|
import { useGoBack, useToggle } from '../utils/helpers/hooks';
|
||||||
import { ShortUrlFormProps } from './ShortUrlForm';
|
import { ShortUrlFormProps } from './ShortUrlForm';
|
||||||
import { ShortUrlDetail } from './reducers/shortUrlDetail';
|
import { ShortUrlDetail } from './reducers/shortUrlDetail';
|
||||||
import { EditShortUrlData, ShortUrl, ShortUrlData } from './data';
|
import { EditShortUrlData } from './data';
|
||||||
import { ShortUrlEdition } from './reducers/shortUrlEdition';
|
import { ShortUrlEdition } from './reducers/shortUrlEdition';
|
||||||
|
import { shortUrlDataFromShortUrl } from './helpers';
|
||||||
|
|
||||||
interface EditShortUrlConnectProps {
|
interface EditShortUrlConnectProps {
|
||||||
settings: Settings;
|
settings: Settings;
|
||||||
|
@ -26,27 +27,6 @@ interface EditShortUrlConnectProps {
|
||||||
editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
|
editShortUrl: (shortUrl: string, domain: OptionalString, data: EditShortUrlData) => Promise<void>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const getInitialState = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
|
|
||||||
const validateUrl = settings?.validateUrls ?? false;
|
|
||||||
|
|
||||||
if (!shortUrl) {
|
|
||||||
return { longUrl: '', validateUrl };
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
longUrl: shortUrl.longUrl,
|
|
||||||
tags: shortUrl.tags,
|
|
||||||
title: shortUrl.title ?? undefined,
|
|
||||||
domain: shortUrl.domain ?? undefined,
|
|
||||||
validSince: shortUrl.meta.validSince ?? undefined,
|
|
||||||
validUntil: shortUrl.meta.validUntil ?? undefined,
|
|
||||||
maxVisits: shortUrl.meta.maxVisits ?? undefined,
|
|
||||||
crawlable: shortUrl.crawlable,
|
|
||||||
forwardQuery: shortUrl.forwardQuery,
|
|
||||||
validateUrl,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
|
export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
|
||||||
settings: { shortUrlCreation: shortUrlCreationSettings },
|
settings: { shortUrlCreation: shortUrlCreationSettings },
|
||||||
selectedServer,
|
selectedServer,
|
||||||
|
@ -62,7 +42,7 @@ export const EditShortUrl = (ShortUrlForm: FC<ShortUrlFormProps>) => ({
|
||||||
const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
|
const { saving, error: savingError, errorData: savingErrorData } = shortUrlEdition;
|
||||||
const { domain } = parseQuery<{ domain?: string }>(search);
|
const { domain } = parseQuery<{ domain?: string }>(search);
|
||||||
const initialState = useMemo(
|
const initialState = useMemo(
|
||||||
() => getInitialState(shortUrl, shortUrlCreationSettings),
|
() => shortUrlDataFromShortUrl(shortUrl, shortUrlCreationSettings),
|
||||||
[shortUrl, shortUrlCreationSettings],
|
[shortUrl, shortUrlCreationSettings],
|
||||||
);
|
);
|
||||||
const [savingSucceeded,, isSuccessful, isNotSuccessful] = useToggle();
|
const [savingSucceeded,, isSuccessful, isNotSuccessful] = useToggle();
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import { isNil } from 'ramda';
|
import { isNil } from 'ramda';
|
||||||
import { ShortUrl } from '../data';
|
import { ShortUrl, ShortUrlData } from '../data';
|
||||||
import { OptionalString } from '../../utils/utils';
|
import { OptionalString } from '../../utils/utils';
|
||||||
import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
|
import { DEFAULT_DOMAIN } from '../../visits/reducers/domainVisits';
|
||||||
|
import { ShortUrlCreationSettings } from '../../settings/reducers/settings';
|
||||||
|
|
||||||
export const shortUrlMatches = (shortUrl: ShortUrl, shortCode: string, domain: OptionalString): boolean => {
|
export const shortUrlMatches = (shortUrl: ShortUrl, shortCode: string, domain: OptionalString): boolean => {
|
||||||
if (isNil(domain)) {
|
if (isNil(domain)) {
|
||||||
|
@ -18,3 +19,24 @@ export const domainMatches = (shortUrl: ShortUrl, domain: string): boolean => {
|
||||||
|
|
||||||
return shortUrl.domain === domain;
|
return shortUrl.domain === domain;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const shortUrlDataFromShortUrl = (shortUrl?: ShortUrl, settings?: ShortUrlCreationSettings): ShortUrlData => {
|
||||||
|
const validateUrl = settings?.validateUrls ?? false;
|
||||||
|
|
||||||
|
if (!shortUrl) {
|
||||||
|
return { longUrl: '', validateUrl };
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
longUrl: shortUrl.longUrl,
|
||||||
|
tags: shortUrl.tags,
|
||||||
|
title: shortUrl.title ?? undefined,
|
||||||
|
domain: shortUrl.domain ?? undefined,
|
||||||
|
validSince: shortUrl.meta.validSince ?? undefined,
|
||||||
|
validUntil: shortUrl.meta.validUntil ?? undefined,
|
||||||
|
maxVisits: shortUrl.meta.maxVisits ?? undefined,
|
||||||
|
crawlable: shortUrl.crawlable,
|
||||||
|
forwardQuery: shortUrl.forwardQuery,
|
||||||
|
validateUrl,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
|
@ -1,107 +1,54 @@
|
||||||
import { shallow, ShallowWrapper } from 'enzyme';
|
import { render, screen } from '@testing-library/react';
|
||||||
|
import { MemoryRouter } from 'react-router-dom';
|
||||||
import { Mock } from 'ts-mockery';
|
import { Mock } from 'ts-mockery';
|
||||||
import { useLocation, useParams } from 'react-router-dom';
|
|
||||||
import { EditShortUrl as createEditShortUrl } from '../../src/short-urls/EditShortUrl';
|
import { EditShortUrl as createEditShortUrl } from '../../src/short-urls/EditShortUrl';
|
||||||
import { Settings } from '../../src/settings/reducers/settings';
|
import { Settings } from '../../src/settings/reducers/settings';
|
||||||
import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
|
import { ShortUrlDetail } from '../../src/short-urls/reducers/shortUrlDetail';
|
||||||
import { ShortUrlEdition } from '../../src/short-urls/reducers/shortUrlEdition';
|
import { ShortUrlEdition } from '../../src/short-urls/reducers/shortUrlEdition';
|
||||||
import { ShlinkApiError } from '../../src/api/ShlinkApiError';
|
|
||||||
import { ShortUrl } from '../../src/short-urls/data';
|
import { ShortUrl } from '../../src/short-urls/data';
|
||||||
|
|
||||||
jest.mock('react-router-dom', () => ({
|
|
||||||
...jest.requireActual('react-router-dom'),
|
|
||||||
useNavigate: jest.fn().mockReturnValue(jest.fn()),
|
|
||||||
useParams: jest.fn().mockReturnValue({}),
|
|
||||||
useLocation: jest.fn().mockReturnValue({}),
|
|
||||||
}));
|
|
||||||
|
|
||||||
describe('<EditShortUrl />', () => {
|
describe('<EditShortUrl />', () => {
|
||||||
let wrapper: ShallowWrapper;
|
|
||||||
const ShortUrlForm = () => null;
|
|
||||||
const getShortUrlDetail = jest.fn();
|
|
||||||
const editShortUrl = jest.fn(async () => Promise.resolve());
|
|
||||||
const shortUrlCreation = { validateUrls: true };
|
const shortUrlCreation = { validateUrls: true };
|
||||||
const EditShortUrl = createEditShortUrl(ShortUrlForm);
|
const EditShortUrl = createEditShortUrl(() => <span>ShortUrlForm</span>);
|
||||||
const createWrapper = (detail: Partial<ShortUrlDetail> = {}, edition: Partial<ShortUrlEdition> = {}) => {
|
const setUp = (detail: Partial<ShortUrlDetail> = {}, edition: Partial<ShortUrlEdition> = {}) => render(
|
||||||
(useParams as any).mockReturnValue({ shortCode: 'the_base_url' });
|
<MemoryRouter>
|
||||||
(useLocation as any).mockReturnValue({ search: '' });
|
|
||||||
|
|
||||||
wrapper = shallow(
|
|
||||||
<EditShortUrl
|
<EditShortUrl
|
||||||
settings={Mock.of<Settings>({ shortUrlCreation })}
|
settings={Mock.of<Settings>({ shortUrlCreation })}
|
||||||
selectedServer={null}
|
selectedServer={null}
|
||||||
shortUrlDetail={Mock.of<ShortUrlDetail>(detail)}
|
shortUrlDetail={Mock.of<ShortUrlDetail>(detail)}
|
||||||
shortUrlEdition={Mock.of<ShortUrlEdition>(edition)}
|
shortUrlEdition={Mock.of<ShortUrlEdition>(edition)}
|
||||||
getShortUrlDetail={getShortUrlDetail}
|
getShortUrlDetail={jest.fn()}
|
||||||
editShortUrl={editShortUrl}
|
editShortUrl={jest.fn(async () => Promise.resolve())}
|
||||||
/>,
|
/>
|
||||||
);
|
</MemoryRouter>,
|
||||||
|
);
|
||||||
return wrapper;
|
|
||||||
};
|
|
||||||
|
|
||||||
beforeEach(jest.clearAllMocks);
|
|
||||||
afterEach(() => wrapper?.unmount());
|
|
||||||
|
|
||||||
it('renders loading message while loading detail', () => {
|
it('renders loading message while loading detail', () => {
|
||||||
const wrapper = createWrapper({ loading: true });
|
setUp({ loading: true });
|
||||||
|
|
||||||
expect(wrapper.prop('loading')).toEqual(true);
|
expect(screen.getByText('Loading...')).toBeInTheDocument();
|
||||||
|
expect(screen.queryByText('ShortUrlForm')).not.toBeInTheDocument();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('renders error when loading detail fails', () => {
|
it('renders error when loading detail fails', () => {
|
||||||
const wrapper = createWrapper({ error: true });
|
setUp({ error: true });
|
||||||
const form = wrapper.find(ShortUrlForm);
|
|
||||||
const apiError = wrapper.find(ShlinkApiError);
|
|
||||||
|
|
||||||
expect(form).toHaveLength(0);
|
expect(screen.getByText('An error occurred while loading short URL detail :(')).toBeInTheDocument();
|
||||||
expect(apiError).toHaveLength(1);
|
expect(screen.queryByText('ShortUrlForm')).not.toBeInTheDocument();
|
||||||
expect(apiError.prop('fallbackMessage')).toEqual('An error occurred while loading short URL detail :(');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it.each([
|
it('renders form when detail properly loads', () => {
|
||||||
[undefined, { longUrl: '', validateUrl: true }, true],
|
setUp({ shortUrl: Mock.of<ShortUrl>({ meta: {} }) });
|
||||||
[
|
|
||||||
Mock.of<ShortUrl>({ meta: {} }),
|
|
||||||
{
|
|
||||||
longUrl: undefined,
|
|
||||||
tags: undefined,
|
|
||||||
title: undefined,
|
|
||||||
domain: undefined,
|
|
||||||
validSince: undefined,
|
|
||||||
validUntil: undefined,
|
|
||||||
maxVisits: undefined,
|
|
||||||
validateUrl: true,
|
|
||||||
},
|
|
||||||
false,
|
|
||||||
],
|
|
||||||
])('renders form when detail properly loads', (shortUrl, expectedInitialState, saving) => {
|
|
||||||
const wrapper = createWrapper({ shortUrl }, { saving });
|
|
||||||
const form = wrapper.find(ShortUrlForm);
|
|
||||||
const apiError = wrapper.find(ShlinkApiError);
|
|
||||||
|
|
||||||
expect(form).toHaveLength(1);
|
expect(screen.getByText('ShortUrlForm')).toBeInTheDocument();
|
||||||
expect(apiError).toHaveLength(0);
|
expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
|
||||||
expect(form.prop('initialState')).toEqual(expectedInitialState);
|
expect(screen.queryByText('An error occurred while loading short URL detail :(')).not.toBeInTheDocument();
|
||||||
expect(form.prop('saving')).toEqual(saving);
|
|
||||||
expect(editShortUrl).not.toHaveBeenCalled();
|
|
||||||
|
|
||||||
form.simulate('save', {});
|
|
||||||
|
|
||||||
if (shortUrl) {
|
|
||||||
expect(editShortUrl).toHaveBeenCalledWith(shortUrl.shortCode, shortUrl.domain, {});
|
|
||||||
} else {
|
|
||||||
expect(editShortUrl).not.toHaveBeenCalled();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('shows error when saving data has failed', () => {
|
it('shows error when saving data has failed', () => {
|
||||||
const wrapper = createWrapper({}, { error: true });
|
setUp({}, { error: true });
|
||||||
const form = wrapper.find(ShortUrlForm);
|
|
||||||
const apiError = wrapper.find(ShlinkApiError);
|
|
||||||
|
|
||||||
expect(form).toHaveLength(1);
|
expect(screen.getByText('An error occurred while updating short URL :(')).toBeInTheDocument();
|
||||||
expect(apiError).toHaveLength(1);
|
expect(screen.getByText('ShortUrlForm')).toBeInTheDocument();
|
||||||
expect(apiError.prop('fallbackMessage')).toEqual('An error occurred while updating short URL :(');
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
28
test/short-urls/helpers/index.test.ts
Normal file
28
test/short-urls/helpers/index.test.ts
Normal file
|
@ -0,0 +1,28 @@
|
||||||
|
import { Mock } from 'ts-mockery';
|
||||||
|
import { ShortUrl } from '../../../src/short-urls/data';
|
||||||
|
import { shortUrlDataFromShortUrl } from '../../../src/short-urls/helpers';
|
||||||
|
|
||||||
|
describe('helpers', () => {
|
||||||
|
describe('shortUrlDataFromShortUrl', () => {
|
||||||
|
it.each([
|
||||||
|
[undefined, { validateUrls: true }, { longUrl: '', validateUrl: true }],
|
||||||
|
[undefined, undefined, { longUrl: '', validateUrl: false }],
|
||||||
|
[
|
||||||
|
Mock.of<ShortUrl>({ meta: {} }),
|
||||||
|
{ validateUrls: false },
|
||||||
|
{
|
||||||
|
longUrl: undefined,
|
||||||
|
tags: undefined,
|
||||||
|
title: undefined,
|
||||||
|
domain: undefined,
|
||||||
|
validSince: undefined,
|
||||||
|
validUntil: undefined,
|
||||||
|
maxVisits: undefined,
|
||||||
|
validateUrl: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
])('returns expected data', (shortUrl, settings, expectedInitialState) => {
|
||||||
|
expect(shortUrlDataFromShortUrl(shortUrl, settings)).toEqual(expectedInitialState);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in a new issue