mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 09:30:31 +03:00
Merge pull request #679 from acelaya-forks/feature/testing-lib
Feature/testing lib
This commit is contained in:
Alejandro Celaya
GitHub
commit
edef36bae8
3 changed files with 90 additions and 92 deletions
|
|
@ -118,7 +118,7 @@ export const ShortUrlForm = (
|
|||
const showBehaviorCard = showCrawlableControl || showForwardQueryControl;
|
||||
|
||||
return (
|
||||
<form className="short-url-form" onSubmit={submit}>
|
||||
<form name="shortUrlForm" className="short-url-form" onSubmit={submit}>
|
||||
{isBasicMode && basicComponents}
|
||||
{!isBasicMode && (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,67 +1,67 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { UserEvent } from '@testing-library/user-event/dist/types/setup';
|
||||
import { formatISO } from 'date-fns';
|
||||
import { identity } from 'ramda';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { Input } from 'reactstrap';
|
||||
import { ShortUrlForm as createShortUrlForm, Mode } from '../../src/short-urls/ShortUrlForm';
|
||||
import { DateInput } from '../../src/utils/DateInput';
|
||||
import { ShortUrlData } from '../../src/short-urls/data';
|
||||
import { ReachableServer, SelectedServer } from '../../src/servers/data';
|
||||
import { SimpleCard } from '../../src/utils/SimpleCard';
|
||||
import { parseDate } from '../../src/utils/helpers/date';
|
||||
import { OptionalString } from '../../src/utils/utils';
|
||||
|
||||
describe('<ShortUrlForm />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const TagsSelector = () => null;
|
||||
const DomainSelector = () => null;
|
||||
const createShortUrl = jest.fn(async () => Promise.resolve());
|
||||
const createWrapper = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => {
|
||||
const ShortUrlForm = createShortUrlForm(TagsSelector, DomainSelector);
|
||||
|
||||
wrapper = shallow(
|
||||
const ShortUrlForm = createShortUrlForm(() => <span>TagsSelector</span>, () => <span>DomainSelector</span>);
|
||||
const setUp = (selectedServer: SelectedServer = null, mode: Mode = 'create', title?: OptionalString) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<ShortUrlForm
|
||||
selectedServer={selectedServer}
|
||||
mode={mode}
|
||||
saving={false}
|
||||
initialState={Mock.of<ShortUrlData>({ validateUrl: true, findIfExists: false, title })}
|
||||
initialState={{ validateUrl: true, findIfExists: false, title, longUrl: '' }}
|
||||
onSave={createShortUrl}
|
||||
/>,
|
||||
);
|
||||
),
|
||||
});
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
afterEach(() => wrapper.unmount());
|
||||
afterEach(jest.clearAllMocks);
|
||||
|
||||
it('saves short URL with data set in form controls', () => {
|
||||
const wrapper = createWrapper();
|
||||
it.each([
|
||||
[
|
||||
async (user: UserEvent) => {
|
||||
await user.type(screen.getByPlaceholderText('Custom slug'), 'my-slug');
|
||||
},
|
||||
{ customSlug: 'my-slug' },
|
||||
],
|
||||
[
|
||||
async (user: UserEvent) => {
|
||||
await user.type(screen.getByPlaceholderText('Short code length'), '15');
|
||||
},
|
||||
{ shortCodeLength: '15' },
|
||||
],
|
||||
])('saves short URL with data set in form controls', async (extraFields, extraExpectedValues) => {
|
||||
const { user } = setUp();
|
||||
const validSince = parseDate('2017-01-01', 'yyyy-MM-dd');
|
||||
const validUntil = parseDate('2017-01-06', 'yyyy-MM-dd');
|
||||
|
||||
wrapper.find(Input).first().simulate('change', { target: { value: 'https://long-domain.com/foo/bar' } });
|
||||
wrapper.find('TagsSelector').simulate('change', ['tag_foo', 'tag_bar']);
|
||||
wrapper.find('#customSlug').simulate('change', { target: { value: 'my-slug' } });
|
||||
wrapper.find(DomainSelector).simulate('change', 'example.com');
|
||||
wrapper.find('#maxVisits').simulate('change', { target: { value: '20' } });
|
||||
wrapper.find('#shortCodeLength').simulate('change', { target: { value: 15 } });
|
||||
wrapper.find(DateInput).at(0).simulate('change', validSince);
|
||||
wrapper.find(DateInput).at(1).simulate('change', validUntil);
|
||||
wrapper.find('form').simulate('submit', { preventDefault: identity });
|
||||
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);
|
||||
|
||||
expect(createShortUrl).toHaveBeenCalledTimes(1);
|
||||
expect(createShortUrl).not.toHaveBeenCalled();
|
||||
await user.click(screen.getByRole('button', { name: 'Save' }));
|
||||
expect(createShortUrl).toHaveBeenCalledWith({
|
||||
longUrl: 'https://long-domain.com/foo/bar',
|
||||
tags: ['tag_foo', 'tag_bar'],
|
||||
customSlug: 'my-slug',
|
||||
domain: 'example.com',
|
||||
title: 'the title',
|
||||
validSince: formatISO(validSince),
|
||||
validUntil: formatISO(validUntil),
|
||||
maxVisits: 20,
|
||||
findIfExists: false,
|
||||
shortCodeLength: 15,
|
||||
validateUrl: true,
|
||||
...extraExpectedValues,
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -71,29 +71,30 @@ describe('<ShortUrlForm />', () => {
|
|||
])(
|
||||
'renders expected amount of cards based on server capabilities and mode',
|
||||
(mode, expectedAmountOfCards) => {
|
||||
const wrapper = createWrapper(null, mode);
|
||||
const cards = wrapper.find(SimpleCard);
|
||||
setUp(null, mode);
|
||||
const cards = screen.queryAllByRole('heading');
|
||||
|
||||
expect(cards).toHaveLength(expectedAmountOfCards);
|
||||
},
|
||||
);
|
||||
|
||||
it.each([
|
||||
[null, 'new title', 'new title'],
|
||||
[undefined, 'new title', 'new title'],
|
||||
['', 'new title', 'new title'],
|
||||
[null, '', undefined],
|
||||
[null, null, undefined],
|
||||
['', '', undefined],
|
||||
[undefined, undefined, undefined],
|
||||
['old title', null, null],
|
||||
['old title', undefined, null],
|
||||
['old title', '', null],
|
||||
])('sends expected title based on original and new values', (originalTitle, newTitle, expectedSentTitle) => {
|
||||
const wrapper = createWrapper(Mock.of<ReachableServer>({ version: '2.6.0' }), 'create', originalTitle);
|
||||
[null, true, 'new title'],
|
||||
[undefined, true, 'new title'],
|
||||
['', true, 'new title'],
|
||||
[null, false, undefined],
|
||||
['', false, undefined],
|
||||
['old title', false, null],
|
||||
])('sends expected title based on original and new values', async (originalTitle, withNewTitle, expectedSentTitle) => {
|
||||
const { user } = setUp(Mock.of<ReachableServer>({ version: '2.6.0' }), 'create', originalTitle);
|
||||
|
||||
wrapper.find('#title').simulate('change', { target: { value: newTitle } });
|
||||
wrapper.find('form').simulate('submit', { preventDefault: identity });
|
||||
await user.type(screen.getByPlaceholderText('URL to be shortened'), 'https://long-domain.com/foo/bar');
|
||||
if (withNewTitle) {
|
||||
await user.type(screen.getByPlaceholderText('Title'), 'new title');
|
||||
} else {
|
||||
await user.clear(screen.getByPlaceholderText('Title'));
|
||||
}
|
||||
await user.click(screen.getByRole('button', { name: 'Save' }));
|
||||
|
||||
expect(createShortUrl).toHaveBeenCalledWith(expect.objectContaining({
|
||||
title: expectedSentTitle,
|
||||
|
|
|
|||
|
|
@ -1,71 +1,68 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { ShortUrlsTable as shortUrlsTableCreator } from '../../src/short-urls/ShortUrlsTable';
|
||||
import { ShortUrlsList } from '../../src/short-urls/reducers/shortUrlsList';
|
||||
import { ReachableServer, SelectedServer } from '../../src/servers/data';
|
||||
import { ShortUrlsOrderableFields, SHORT_URLS_ORDERABLE_FIELDS } from '../../src/short-urls/data';
|
||||
|
||||
describe('<ShortUrlsTable />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const shortUrlsList = Mock.all<ShortUrlsList>();
|
||||
const orderByColumn = jest.fn();
|
||||
const ShortUrlsRow = () => null;
|
||||
const ShortUrlsTable = shortUrlsTableCreator(ShortUrlsRow);
|
||||
|
||||
const createWrapper = (server: SelectedServer = null) => {
|
||||
wrapper = shallow(
|
||||
const ShortUrlsTable = shortUrlsTableCreator(() => <span>ShortUrlsRow</span>);
|
||||
const setUp = (server: SelectedServer = null) => ({
|
||||
user: userEvent.setup(),
|
||||
...render(
|
||||
<ShortUrlsTable shortUrlsList={shortUrlsList} selectedServer={server} orderByColumn={() => orderByColumn} />,
|
||||
);
|
||||
|
||||
return wrapper;
|
||||
};
|
||||
|
||||
beforeEach(() => createWrapper());
|
||||
afterEach(jest.resetAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('should render inner table by default', () => {
|
||||
expect(wrapper.find('table')).toHaveLength(1);
|
||||
),
|
||||
});
|
||||
|
||||
it('should render table header by default', () => {
|
||||
expect(wrapper.find('table').find('thead')).toHaveLength(1);
|
||||
afterEach(jest.resetAllMocks);
|
||||
|
||||
it('should render inner table by default', () => {
|
||||
setUp();
|
||||
expect(screen.getByRole('table')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render row groups by default', () => {
|
||||
setUp();
|
||||
expect(screen.getAllByRole('rowgroup')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('should render 6 table header cells by default', () => {
|
||||
expect(wrapper.find('table').find('thead').find('tr').find('th')).toHaveLength(6);
|
||||
setUp();
|
||||
expect(screen.getAllByRole('columnheader')).toHaveLength(6);
|
||||
});
|
||||
|
||||
it('should render 6 table header cells without order by icon by default', () => {
|
||||
const thElements = wrapper.find('table').find('thead').find('tr').find('th');
|
||||
|
||||
thElements.forEach((thElement) => {
|
||||
expect(thElement.find(FontAwesomeIcon)).toHaveLength(0);
|
||||
});
|
||||
it('should render table header cells without "order by" icon by default', () => {
|
||||
setUp();
|
||||
expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render table header cells with conditional order by icon', () => {
|
||||
const getThElementForSortableField = (orderableField: string) => wrapper.find('table')
|
||||
.find('thead')
|
||||
.find('tr')
|
||||
.find('th')
|
||||
.filterWhere((e) => e.text().includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]));
|
||||
setUp();
|
||||
|
||||
const getThElementForSortableField = (orderableField: string) => screen.getAllByRole('columnheader').find(
|
||||
({ innerHTML }) => innerHTML.includes(SHORT_URLS_ORDERABLE_FIELDS[orderableField as ShortUrlsOrderableFields]),
|
||||
);
|
||||
const sortableFields = Object.keys(SHORT_URLS_ORDERABLE_FIELDS).filter((sortableField) => sortableField !== 'title');
|
||||
|
||||
expect.assertions(sortableFields.length);
|
||||
expect.assertions(sortableFields.length * 2);
|
||||
sortableFields.forEach((sortableField) => {
|
||||
getThElementForSortableField(sortableField).simulate('click');
|
||||
const element = getThElementForSortableField(sortableField);
|
||||
|
||||
expect(element).toBeDefined();
|
||||
element && fireEvent.click(element);
|
||||
expect(orderByColumn).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
it('should render composed title column', () => {
|
||||
const wrapper = createWrapper(Mock.of<ReachableServer>({ version: '2.0.0' }));
|
||||
const composedColumn = wrapper.find('table').find('th').at(2);
|
||||
const text = composedColumn.text();
|
||||
setUp(Mock.of<ReachableServer>({ version: '2.0.0' }));
|
||||
|
||||
expect(text).toContain('Title');
|
||||
expect(text).toContain('Long URL');
|
||||
const { innerHTML } = screen.getAllByRole('columnheader')[2];
|
||||
|
||||
expect(innerHTML).toContain('Title');
|
||||
expect(innerHTML).toContain('Long URL');
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue