2022-07-10 00:03:21 +03:00
|
|
|
import { screen } from '@testing-library/react';
|
2023-02-18 12:40:37 +03:00
|
|
|
import type { UserEvent } from '@testing-library/user-event/setup/setup';
|
2023-04-13 22:48:29 +03:00
|
|
|
import { fromPartial } from '@total-typescript/shoehorn';
|
2021-06-25 20:52:50 +03:00
|
|
|
import { formatISO } from 'date-fns';
|
2023-08-02 10:01:44 +03:00
|
|
|
import type { Mode } from '../../src/short-urls/ShortUrlForm';
|
|
|
|
import { ShortUrlForm as createShortUrlForm } from '../../src/short-urls/ShortUrlForm';
|
|
|
|
import { parseDate } from '../../src/utils/dates/helpers/date';
|
2023-08-04 12:16:01 +03:00
|
|
|
import { FeaturesProvider } from '../../src/utils/features';
|
2022-07-10 20:44:49 +03:00
|
|
|
import { renderWithEvents } from '../__helpers__/setUpTest';
|
2021-03-19 21:11:27 +03:00
|
|
|
|
|
|
|
describe('<ShortUrlForm />', () => {
|
2023-05-27 12:57:26 +03:00
|
|
|
const createShortUrl = vi.fn(async () => Promise.resolve());
|
2022-07-05 21:30:23 +03:00
|
|
|
const ShortUrlForm = createShortUrlForm(() => <span>TagsSelector</span>, () => <span>DomainSelector</span>);
|
2023-08-06 18:19:59 +03:00
|
|
|
const setUp = (withDeviceLongUrls = false, mode: Mode = 'create', title?: string | null) =>
|
2022-07-10 00:03:21 +03:00
|
|
|
renderWithEvents(
|
2023-08-04 12:16:01 +03:00
|
|
|
<FeaturesProvider value={fromPartial({ deviceLongUrls: withDeviceLongUrls })}>
|
|
|
|
<ShortUrlForm
|
|
|
|
mode={mode}
|
|
|
|
saving={false}
|
|
|
|
initialState={{ validateUrl: true, findIfExists: false, title, longUrl: '' }}
|
|
|
|
onSave={createShortUrl}
|
|
|
|
/>
|
|
|
|
</FeaturesProvider>,
|
2022-07-10 00:03:21 +03:00
|
|
|
);
|
2021-03-27 20:39:55 +03:00
|
|
|
|
2022-07-05 21:30:23 +03:00
|
|
|
it.each([
|
|
|
|
[
|
|
|
|
async (user: UserEvent) => {
|
|
|
|
await user.type(screen.getByPlaceholderText('Custom slug'), 'my-slug');
|
|
|
|
},
|
|
|
|
{ customSlug: 'my-slug' },
|
2023-08-04 12:16:01 +03:00
|
|
|
false,
|
2022-07-05 21:30:23 +03:00
|
|
|
],
|
|
|
|
[
|
|
|
|
async (user: UserEvent) => {
|
|
|
|
await user.type(screen.getByPlaceholderText('Short code length'), '15');
|
|
|
|
},
|
|
|
|
{ shortCodeLength: '15' },
|
2023-08-04 12:16:01 +03:00
|
|
|
false,
|
2022-07-05 21:30:23 +03:00
|
|
|
],
|
2023-03-13 11:05:54 +03:00
|
|
|
[
|
|
|
|
async (user: UserEvent) => {
|
|
|
|
await user.type(screen.getByPlaceholderText('Android-specific redirection'), 'https://android.com');
|
|
|
|
await user.type(screen.getByPlaceholderText('iOS-specific redirection'), 'https://ios.com');
|
|
|
|
},
|
|
|
|
{
|
|
|
|
deviceLongUrls: {
|
|
|
|
android: 'https://android.com',
|
|
|
|
ios: 'https://ios.com',
|
|
|
|
},
|
|
|
|
},
|
2023-08-04 12:16:01 +03:00
|
|
|
true,
|
2023-03-13 11:05:54 +03:00
|
|
|
],
|
2023-08-04 12:16:01 +03:00
|
|
|
])('saves short URL with data set in form controls', async (extraFields, extraExpectedValues, withDeviceLongUrls) => {
|
|
|
|
const { user } = setUp(withDeviceLongUrls);
|
2021-06-25 20:52:50 +03:00
|
|
|
const validSince = parseDate('2017-01-01', 'yyyy-MM-dd');
|
|
|
|
const validUntil = parseDate('2017-01-06', 'yyyy-MM-dd');
|
2021-03-19 21:11:27 +03:00
|
|
|
|
2022-07-05 21:30:23 +03:00
|
|
|
await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
|
|
|
|
await user.type(screen.getByPlaceholderText('Title'), 'the title');
|
|
|
|
await user.type(screen.getByPlaceholderText('Maximum number of visits allowed'), '20');
|
|
|
|
await user.type(screen.getByPlaceholderText('Enabled since...'), '2017-01-01');
|
|
|
|
await user.type(screen.getByPlaceholderText('Enabled until...'), '2017-01-06');
|
|
|
|
await extraFields(user);
|
2021-03-19 21:11:27 +03:00
|
|
|
|
2022-07-05 21:30:23 +03:00
|
|
|
expect(createShortUrl).not.toHaveBeenCalled();
|
|
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
2021-03-19 21:11:27 +03:00
|
|
|
expect(createShortUrl).toHaveBeenCalledWith({
|
|
|
|
longUrl: 'https://long-domain.com/foo/bar',
|
2022-07-05 21:30:23 +03:00
|
|
|
title: 'the title',
|
2021-06-24 21:13:06 +03:00
|
|
|
validSince: formatISO(validSince),
|
|
|
|
validUntil: formatISO(validUntil),
|
2021-03-27 11:49:47 +03:00
|
|
|
maxVisits: 20,
|
2021-03-19 21:11:27 +03:00
|
|
|
findIfExists: false,
|
|
|
|
validateUrl: true,
|
2022-07-05 21:30:23 +03:00
|
|
|
...extraExpectedValues,
|
2021-03-19 21:11:27 +03:00
|
|
|
});
|
|
|
|
});
|
2021-03-27 20:39:55 +03:00
|
|
|
|
|
|
|
it.each([
|
2022-12-23 23:06:59 +03:00
|
|
|
['create' as Mode, 5],
|
2022-05-01 12:00:46 +03:00
|
|
|
['create-basic' as Mode, 0],
|
2021-03-27 20:39:55 +03:00
|
|
|
])(
|
|
|
|
'renders expected amount of cards based on server capabilities and mode',
|
2022-05-01 12:00:46 +03:00
|
|
|
(mode, expectedAmountOfCards) => {
|
2023-08-04 12:16:01 +03:00
|
|
|
setUp(false, mode);
|
2022-07-05 21:30:23 +03:00
|
|
|
const cards = screen.queryAllByRole('heading');
|
2021-03-27 20:39:55 +03:00
|
|
|
|
|
|
|
expect(cards).toHaveLength(expectedAmountOfCards);
|
|
|
|
},
|
|
|
|
);
|
2021-10-17 13:35:11 +03:00
|
|
|
|
|
|
|
it.each([
|
2022-07-05 21:30:23 +03:00
|
|
|
[null, true, 'new title'],
|
|
|
|
[undefined, true, 'new title'],
|
|
|
|
['', true, 'new title'],
|
2023-03-13 11:05:54 +03:00
|
|
|
['old title', true, 'new title'],
|
|
|
|
[null, false, null],
|
|
|
|
['', false, ''],
|
|
|
|
[undefined, false, undefined],
|
2022-07-05 21:30:23 +03:00
|
|
|
['old title', false, null],
|
|
|
|
])('sends expected title based on original and new values', async (originalTitle, withNewTitle, expectedSentTitle) => {
|
2023-08-04 12:16:01 +03:00
|
|
|
const { user } = setUp(false, 'create', originalTitle);
|
2021-10-17 13:35:11 +03:00
|
|
|
|
2022-07-05 21:30:23 +03:00
|
|
|
await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
|
2023-03-13 11:05:54 +03:00
|
|
|
await user.clear(screen.getByPlaceholderText('Title'));
|
2022-07-05 21:30:23 +03:00
|
|
|
if (withNewTitle) {
|
|
|
|
await user.type(screen.getByPlaceholderText('Title'), 'new title');
|
|
|
|
}
|
|
|
|
await user.click(screen.getByRole('button', { name: 'Save' }));
|
2021-10-17 13:35:11 +03:00
|
|
|
|
|
|
|
expect(createShortUrl).toHaveBeenCalledWith(expect.objectContaining({
|
|
|
|
title: expectedSentTitle,
|
|
|
|
}));
|
|
|
|
});
|
2023-03-13 11:05:54 +03:00
|
|
|
|
2023-08-04 12:16:01 +03:00
|
|
|
it('shows device-specific long URLs only when supported', () => {
|
|
|
|
setUp(true);
|
2023-03-13 11:05:54 +03:00
|
|
|
|
2023-08-04 12:16:01 +03:00
|
|
|
const placeholders = ['Android-specific redirection', 'iOS-specific redirection', 'Desktop-specific redirection'];
|
|
|
|
placeholders.forEach((placeholder) => expect(screen.getByPlaceholderText(placeholder)).toBeInTheDocument());
|
2023-03-13 11:05:54 +03:00
|
|
|
});
|
2021-03-19 21:11:27 +03:00
|
|
|
});
|