mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2025-01-10 18:27:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #687 from acelaya-forks/feature/testing-lib

Browse source 
Feature/testing lib
This commit is contained in:
Alejandro Celaya 2022-07-17 08:42:52 +02:00 committed by GitHub
commit cc77af6142
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 140 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
test/mocks/WindowMock.ts → test/__mocks__/Window.mock.ts
View file

2
test/common/services/ImageDownloader.test.ts
View file

@ -1,7 +1,7 @@
import { Mock } from 'ts-mockery';
import { AxiosInstance } from 'axios';
import { ImageDownloader } from '../../../src/common/services/ImageDownloader';
import { windowMock } from '../../mocks/WindowMock';
import { windowMock } from '../../__mocks__/Window.mock';
describe('ImageDownloader', () => {
const get = jest.fn();

2
test/common/services/ReportExporter.test.ts
View file

@ -1,6 +1,6 @@
import { ReportExporter } from '../../../src/common/services/ReportExporter';
import { NormalizedVisit } from '../../../src/visits/types';
import { windowMock } from '../../mocks/WindowMock';
import { windowMock } from '../../__mocks__/Window.mock';
import { ExportableShortUrl } from '../../../src/short-urls/data';
describe('ReportExporter', () => {

2
test/servers/services/ServersExporter.test.ts
View file

@ -1,7 +1,7 @@
import { Mock } from 'ts-mockery';
import ServersExporter from '../../../src/servers/services/ServersExporter';
import { LocalStorage } from '../../../src/utils/services/LocalStorage';
import { appendChild, removeChild, windowMock } from '../../mocks/WindowMock';
import { appendChild, removeChild, windowMock } from '../../__mocks__/Window.mock';
describe('ServersExporter', () => {
const storageMock = Mock.of<LocalStorage>({

134
test/short-urls/helpers/ShortUrlsRow.test.tsx
View file

@ -1,35 +1,25 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { assoc, toString } from 'ramda';
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { ExternalLink } from 'react-external-link';
import { formatISO } from 'date-fns';
import { ShortUrlsRow as createShortUrlsRow } from '../../../src/short-urls/helpers/ShortUrlsRow';
import { Tag } from '../../../src/tags/helpers/Tag';
import { ColorGenerator } from '../../../src/utils/services/ColorGenerator';
import { TimeoutToggle } from '../../../src/utils/helpers/hooks';
import { ShortUrl } from '../../../src/short-urls/data';
import { ReachableServer } from '../../../src/servers/data';
import { CopyToClipboardIcon } from '../../../src/utils/CopyToClipboardIcon';
import { Time } from '../../../src/utils/Time';
import { parseDate } from '../../../src/utils/helpers/date';
import { renderWithEvents } from '../../__helpers__/setUpTest';
import { OptionalString } from '../../../src/utils/utils';
import { colorGeneratorMock } from '../../utils/services/__mocks__/ColorGenerator.mock';
describe('<ShortUrlsRow />', () => {
let wrapper: ShallowWrapper;
const mockFunction = () => null;
const ShortUrlsRowMenu = mockFunction;
const timeoutToggle = jest.fn(() => true);
const useTimeoutToggle = jest.fn(() => [false, timeoutToggle]) as TimeoutToggle;
const colorGenerator = Mock.of<ColorGenerator>({
getColorForKey: jest.fn(),
setColorForKey: jest.fn(),
});
const server = Mock.of<ReachableServer>({ url: 'https://doma.in' });
const shortUrl: ShortUrl = {
shortCode: 'abc123',
shortUrl: 'http://doma.in/abc123',
longUrl: 'http://foo.com/bar',
shortUrl: 'https://doma.in/abc123',
longUrl: 'https://foo.com/bar',
dateCreated: formatISO(parseDate('2018-05-23 18:30:41', 'yyyy-MM-dd HH:mm:ss')),
tags: ['nodejs', 'reactjs'],
tags: [],
visitsCount: 45,
domain: null,
meta: {
@ -38,99 +28,73 @@ describe('<ShortUrlsRow />', () => {
maxVisits: null,
},
};
const ShortUrlsRow = createShortUrlsRow(ShortUrlsRowMenu, colorGenerator, useTimeoutToggle);
const createWrapper = (title?: string | null) => {
wrapper = shallow(
<ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title }} onTagClick={mockFunction} />,
);
return wrapper;
};
beforeEach(() => createWrapper());
afterEach(() => wrapper.unmount());
const ShortUrlsRow = createShortUrlsRow(() => <span>ShortUrlsRowMenu</span>, colorGeneratorMock, useTimeoutToggle);
const setUp = (title?: OptionalString, tags: string[] = []) => renderWithEvents(
<table>
<tbody>
<ShortUrlsRow selectedServer={server} shortUrl={{ ...shortUrl, title, tags }} onTagClick={() => null} />
</tbody>
</table>,
);
it.each([
[null, 6],
[undefined, 6],
['The title', 7],
])('renders expected amount of columns', (title, expectedAmount) => {
const wrapper = createWrapper(title);
const cols = wrapper.find('td');
expect(cols).toHaveLength(expectedAmount);
setUp(title);
expect(screen.getAllByRole('cell')).toHaveLength(expectedAmount);
});
it('renders date in first column', () => {
const col = wrapper.find('td').first();
const date = col.find(Time);
expect(date.html()).toContain('>2018-05-23 18:30</time>');
setUp();
expect(screen.getAllByRole('cell')[0]).toHaveTextContent('2018-05-23 18:30');
});
it('renders short URL in second row', () => {
const col = wrapper.find('td').at(1);
const link = col.find(ExternalLink);
it.each([
[1, shortUrl.shortUrl],
[2, shortUrl.longUrl],
])('renders expected links on corresponding columns', (colIndex, expectedLink) => {
setUp();
expect(link.prop('href')).toEqual(shortUrl.shortUrl);
const col = screen.getAllByRole('cell')[colIndex];
const link = col.querySelector('a');
expect(link).toHaveAttribute('href', expectedLink);
});
it('renders long URL in third row', () => {
const col = wrapper.find('td').at(2);
const link = col.find(ExternalLink);
it.each([
['My super cool title', 'My super cool title'],
[undefined, shortUrl.longUrl],
])('renders title when short URL has it', (title, expectedContent) => {
setUp(title);
expect(link.prop('href')).toEqual(shortUrl.longUrl);
const titleSharedCol = screen.getAllByRole('cell')[2];
expect(titleSharedCol.querySelector('a')).toHaveAttribute('href', shortUrl.longUrl);
expect(titleSharedCol).toHaveTextContent(expectedContent);
});
it('renders title when short URL has it', () => {
const wrapper = createWrapper('My super cool title');
const cols = wrapper.find('td');
const titleSharedCol = cols.at(2).find(ExternalLink);
const dedicatedShortUrlCol = cols.at(3).find(ExternalLink);
it.each([
[[], ['No tags']],
[['nodejs', 'reactjs'], ['nodejs', 'reactjs']],
])('renders list of tags in fourth row', (tags, expectedContents) => {
setUp(undefined, tags);
const cell = screen.getAllByRole('cell')[3];
expect(titleSharedCol).toHaveLength(1);
expect(dedicatedShortUrlCol).toHaveLength(1);
expect(titleSharedCol.prop('href')).toEqual(shortUrl.longUrl);
expect(dedicatedShortUrlCol.prop('href')).toEqual(shortUrl.longUrl);
expect(titleSharedCol.html()).toContain('My super cool title');
expect(dedicatedShortUrlCol.prop('children')).not.toBeDefined();
});
describe('renders list of tags in fourth row', () => {
it('with tags', () => {
const col = wrapper.find('td').at(3);
const tags = col.find(Tag);
expect(tags).toHaveLength(shortUrl.tags.length);
shortUrl.tags.forEach((tagValue, index) => {
const tag = tags.at(index);
expect(tag.prop('text')).toEqual(tagValue);
});
});
it('without tags', () => {
wrapper.setProps({ shortUrl: assoc('tags', [], shortUrl) });
const col = wrapper.find('td').at(3);
expect(col.text()).toContain('No tags');
});
expectedContents.forEach((content) => expect(cell).toHaveTextContent(content));
});
it('renders visits count in fifth row', () => {
const col = wrapper.find('td').at(4);
expect(col.html()).toContain(toString(shortUrl.visitsCount));
setUp();
expect(screen.getAllByRole('cell')[4]).toHaveTextContent(`${shortUrl.visitsCount}`);
});
it('updates state when copied to clipboard', () => {
const col = wrapper.find('td').at(1);
const menu = col.find(CopyToClipboardIcon);
it('updates state when copied to clipboard', async () => {
const { user } = setUp();
expect(menu).toHaveLength(1);
expect(timeoutToggle).not.toHaveBeenCalled();
menu.simulate('copy');
await user.click(screen.getByRole('img', { hidden: true }));
expect(timeoutToggle).toHaveBeenCalledTimes(1);
});
});

66
test/tags/TagsTable.test.tsx
View file

@ -1,24 +1,21 @@
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { shallow, ShallowWrapper } from 'enzyme';
import { useLocation } from 'react-router-dom';
import { TagsTable as createTagsTable } from '../../src/tags/TagsTable';
import { SelectedServer } from '../../src/servers/data';
import { rangeOf } from '../../src/utils/utils';
import { SimplePaginator } from '../../src/common/SimplePaginator';
import { NormalizedTag } from '../../src/tags/data';
import { renderWithEvents } from '../__helpers__/setUpTest';
jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useLocation: jest.fn() }));
describe('<TagsTable />', () => {
const TagsTableRow = () => null;
const orderByColumn = jest.fn();
const TagsTable = createTagsTable(TagsTableRow);
const TagsTable = createTagsTable(({ tag }) => <tr><td>TagsTableRow [{tag.tag}]</td></tr>);
const tags = (amount: number) => rangeOf(amount, (i) => `tag_${i}`);
let wrapper: ShallowWrapper;
const createWrapper = (sortedTags: string[] = [], search = '') => {
const setUp = (sortedTags: string[] = [], search = '') => {
(useLocation as any).mockReturnValue({ search });
wrapper = shallow(
return renderWithEvents(
<TagsTable
sortedTags={sortedTags.map((tag) => Mock.of<NormalizedTag>({ tag }))}
selectedServer={Mock.all<SelectedServer>()}
@ -26,20 +23,15 @@ describe('<TagsTable />', () => {
orderByColumn={() => orderByColumn}
/>,
);
return wrapper;
};
afterEach(jest.clearAllMocks);
afterEach(() => wrapper?.unmount());
it('renders empty result if there are no tags', () => {
const wrapper = createWrapper();
const regularRows = wrapper.find('tbody').find('tr');
const tagRows = wrapper.find(TagsTableRow);
setUp();
expect(regularRows).toHaveLength(1);
expect(tagRows).toHaveLength(0);
expect(screen.queryByText(/^TagsTableRow/)).not.toBeInTheDocument();
expect(screen.getByText('No results found')).toBeInTheDocument();
});
it.each([
@ -50,10 +42,10 @@ describe('<TagsTable />', () => {
[tags(30), 20],
[tags(100), 20],
])('renders as many rows as there are in current page', (filteredTags, expectedRows) => {
const wrapper = createWrapper(filteredTags);
const tagRows = wrapper.find(TagsTableRow);
setUp(filteredTags);
expect(tagRows).toHaveLength(expectedRows);
expect(screen.getAllByText(/^TagsTableRow/)).toHaveLength(expectedRows);
expect(screen.queryByText('No results found')).not.toBeInTheDocument();
});
it.each([
@ -64,10 +56,8 @@ describe('<TagsTable />', () => {
[tags(30), 1],
[tags(100), 1],
])('renders paginator if there are more than one page', (filteredTags, expectedPaginators) => {
const wrapper = createWrapper(filteredTags);
const paginator = wrapper.find(SimplePaginator);
expect(paginator).toHaveLength(expectedPaginators);
const { container } = setUp(filteredTags);
expect(container.querySelectorAll('.sticky-card-paginator')).toHaveLength(expectedPaginators);
});
it.each([
@ -78,30 +68,30 @@ describe('<TagsTable />', () => {
[5, 7, 80],
[6, 0, 0],
])('renders page from query if present', (page, expectedRows, offset) => {
const wrapper = createWrapper(tags(87), `page=${page}`);
const tagRows = wrapper.find(TagsTableRow);
setUp(tags(87), `page=${page}`);
const tagRows = screen.queryAllByText(/^TagsTableRow/);
expect(tagRows).toHaveLength(expectedRows);
tagRows.forEach((row, index) => {
expect(row.prop('tag')).toEqual(expect.objectContaining({ tag: `tag_${index + offset + 1}` }));
});
tagRows.forEach((row, index) => expect(row).toHaveTextContent(`[tag_${index + offset + 1}]`));
});
it('allows changing current page in paginator', () => {
const wrapper = createWrapper(tags(100));
it('allows changing current page in paginator', async () => {
const { user, container } = setUp(tags(100));
expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(1);
(wrapper.find(SimplePaginator).prop('setCurrentPage') as Function)(5);
expect(wrapper.find(SimplePaginator).prop('currentPage')).toEqual(5);
expect(container.querySelector('.active')).toHaveTextContent('1');
await user.click(screen.getByText('5'));
expect(container.querySelector('.active')).toHaveTextContent('5');
});
it('orders tags when column is clicked', () => {
const wrapper = createWrapper(tags(100));
it('orders tags when column is clicked', async () => {
const { user } = setUp(tags(100));
const headers = screen.getAllByRole('columnheader');
expect(orderByColumn).not.toHaveBeenCalled();
wrapper.find('thead').find('th').first().simulate('click');
wrapper.find('thead').find('th').at(2).simulate('click');
wrapper.find('thead').find('th').at(1).simulate('click');
await user.click(headers[0]);
await user.click(headers[2]);
await user.click(headers[1]);
expect(orderByColumn).toHaveBeenCalledTimes(3);
});
});

107
test/tags/TagsTableRow.test.tsx
View file

@ -1,75 +1,72 @@
import { shallow, ShallowWrapper } from 'enzyme';
import { screen } from '@testing-library/react';
import { Mock } from 'ts-mockery';
import { Link } from 'react-router-dom';
import { DropdownItem } from 'reactstrap';
import { MemoryRouter } from 'react-router-dom';
import { TagsTableRow as createTagsTableRow } from '../../src/tags/TagsTableRow';
import { ReachableServer } from '../../src/servers/data';
import { ColorGenerator } from '../../src/utils/services/ColorGenerator';
import { DropdownBtnMenu } from '../../src/utils/DropdownBtnMenu';
import { renderWithEvents } from '../__helpers__/setUpTest';
import { colorGeneratorMock } from '../utils/services/__mocks__/ColorGenerator.mock';
describe('<TagsTableRow />', () => {
const DeleteTagConfirmModal = () => null;
const EditTagModal = () => null;
const TagsTableRow = createTagsTableRow(DeleteTagConfirmModal, EditTagModal, Mock.all<ColorGenerator>());
let wrapper: ShallowWrapper;
const createWrapper = (tagStats?: { visits?: number; shortUrls?: number }) => {
wrapper = shallow(
<TagsTableRow
tag={{ tag: 'foo&bar', visits: tagStats?.visits ?? 0, shortUrls: tagStats?.shortUrls ?? 0 }}
selectedServer={Mock.of<ReachableServer>({ id: 'abc123' })}
/>,
);
return wrapper;
};
afterEach(() => wrapper?.unmount());
const TagsTableRow = createTagsTableRow(
({ isOpen }) => <td>DeleteTagConfirmModal {isOpen ? 'OPEN' : 'CLOSED'}</td>,
({ isOpen }) => <td>EditTagModal {isOpen ? 'OPEN' : 'CLOSED'}</td>,
colorGeneratorMock,
);
const setUp = (tagStats?: { visits?: number; shortUrls?: number }) => renderWithEvents(
<MemoryRouter>
<table>
<tbody>
<TagsTableRow
tag={{ tag: 'foo&bar', visits: tagStats?.visits ?? 0, shortUrls: tagStats?.shortUrls ?? 0 }}
selectedServer={Mock.of<ReachableServer>({ id: 'abc123' })}
/>
</tbody>
</table>
</MemoryRouter>,
);
it.each([
[undefined, '0', '0'],
[{ shortUrls: 10, visits: 3480 }, '10', '3,480'],
])('shows expected tag stats', (stats, expectedShortUrls, expectedVisits) => {
const wrapper = createWrapper(stats);
const links = wrapper.find(Link);
const shortUrlsLink = links.first();
const visitsLink = links.last();
setUp(stats);
expect(shortUrlsLink.prop('children')).toEqual(expectedShortUrls);
expect(shortUrlsLink.prop('to')).toEqual(`/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`);
expect(visitsLink.prop('children')).toEqual(expectedVisits);
expect(visitsLink.prop('to')).toEqual('/server/abc123/tag/foo&bar/visits');
const [shortUrlsLink, visitsLink] = screen.getAllByRole('link');
expect(shortUrlsLink).toHaveTextContent(expectedShortUrls);
expect(shortUrlsLink).toHaveAttribute(
'href',
`/server/abc123/list-short-urls/1?tags=${encodeURIComponent('foo&bar')}`,
);
expect(visitsLink).toHaveTextContent(expectedVisits);
expect(visitsLink).toHaveAttribute('href', '/server/abc123/tag/foo&bar/visits');
});
it('allows toggling dropdown menu', () => {
const wrapper = createWrapper();
it('allows toggling dropdown menu', async () => {
const { user } = setUp();
expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(false);
(wrapper.find(DropdownBtnMenu).prop('toggle') as Function)();
expect(wrapper.find(DropdownBtnMenu).prop('isOpen')).toEqual(true);
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
await user.click(screen.getByRole('button'));
expect(screen.queryByRole('menu')).toBeInTheDocument();
});
it('allows toggling modals through dropdown items', () => {
const wrapper = createWrapper();
const items = wrapper.find(DropdownItem);
it('allows toggling modals through dropdown items', async () => {
const { user } = setUp();
const clickItemOnIndex = async (index: 0 | 1) => {
await user.click(screen.getByRole('button'));
await user.click(screen.getAllByRole('menuitem')[index]);
};
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false);
items.first().simulate('click');
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true);
expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('CLOSED');
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('OPEN');
await clickItemOnIndex(0);
expect(screen.getByText(/^EditTagModal/)).toHaveTextContent('OPEN');
expect(screen.getByText(/^EditTagModal/)).not.toHaveTextContent('CLOSED');
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false);
items.last().simulate('click');
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true);
});
it('allows toggling modals through the modals themselves', () => {
const wrapper = createWrapper();
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(false);
(wrapper.find(EditTagModal).prop('toggle') as Function)();
expect(wrapper.find(EditTagModal).prop('isOpen')).toEqual(true);
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(false);
(wrapper.find(DeleteTagConfirmModal).prop('toggle') as Function)();
expect(wrapper.find(DeleteTagConfirmModal).prop('isOpen')).toEqual(true);
expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('CLOSED');
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('OPEN');
await clickItemOnIndex(1);
expect(screen.getByText(/^DeleteTagConfirmModal/)).toHaveTextContent('OPEN');
expect(screen.getByText(/^DeleteTagConfirmModal/)).not.toHaveTextContent('CLOSED');
});
});

8
test/utils/services/__mocks__/ColorGenerator.mock.ts Normal file
View file

@ -0,0 +1,8 @@
import { Mock } from 'ts-mockery';
import { ColorGenerator } from '../../../../src/utils/services/ColorGenerator';
export const colorGeneratorMock = Mock.of<ColorGenerator>({
getColorForKey: jest.fn(() => 'red'),
setColorForKey: jest.fn(),
isColorLightForKey: jest.fn(() => false),
});