Migrated more common components to TS

This commit is contained in:
Alejandro Celaya
2020-08-28 20:05:01 +02:00
parent dcf72e6818
commit a96539129d
10 changed files with 105 additions and 86 deletions

View File

@@ -1,32 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import ShlinkVersions from '../../src/common/ShlinkVersions';
describe('<ShlinkVersions />', () => {
let wrapper;
const createWrapper = (props) => {
wrapper = shallow(<ShlinkVersions {...props} />);
return wrapper;
};
afterEach(() => wrapper && wrapper.unmount());
it.each([
[ '1.2.3', 'foo', 'v1.2.3', 'foo' ],
[ 'foo', '1.2.3', 'latest', '1.2.3' ],
[ 'latest', 'latest', 'latest', 'latest' ],
[ '5.5.0', '0.2.8', 'v5.5.0', '0.2.8' ],
[ 'not-semver', 'something', 'latest', 'something' ],
])('displays expected versions', (clientVersion, printableVersion, expectedClientVersion, expectedServerVersion) => {
const wrapper = createWrapper({ clientVersion, selectedServer: { printableVersion } });
const links = wrapper.find('VersionLink');
const clientLink = links.at(0);
const serverLink = links.at(1);
expect(clientLink.prop('project')).toEqual('shlink-web-client');
expect(clientLink.prop('version')).toEqual(expectedClientVersion);
expect(serverLink.prop('project')).toEqual('shlink');
expect(serverLink.prop('version')).toEqual(expectedServerVersion);
});
});

View File

@@ -0,0 +1,49 @@
import React from 'react';
import { shallow, ShallowWrapper } from 'enzyme';
import { Mock } from 'ts-mockery';
import ShlinkVersions, { ShlinkVersionsProps } from '../../src/common/ShlinkVersions';
import { NonReachableServer, NotFoundServer, ReachableServer } from '../../src/servers/data';
describe('<ShlinkVersions />', () => {
let wrapper: ShallowWrapper;
const createWrapper = (props: ShlinkVersionsProps) => {
wrapper = shallow(<ShlinkVersions {...props} />);
return wrapper;
};
afterEach(() => wrapper?.unmount());
it.each([
[ '1.2.3', Mock.of<ReachableServer>({ printableVersion: 'foo' }), 'v1.2.3', 'foo' ],
[ 'foo', Mock.of<ReachableServer>({ printableVersion: '1.2.3' }), 'latest', '1.2.3' ],
[ 'latest', Mock.of<ReachableServer>({ printableVersion: 'latest' }), 'latest', 'latest' ],
[ '5.5.0', Mock.of<ReachableServer>({ printableVersion: '0.2.8' }), 'v5.5.0', '0.2.8' ],
[ 'not-semver', Mock.of<ReachableServer>({ printableVersion: 'something' }), 'latest', 'something' ],
])(
'displays expected versions when selected server is reachable',
(clientVersion, selectedServer, expectedClientVersion, expectedServerVersion) => {
const wrapper = createWrapper({ clientVersion, selectedServer });
const links = wrapper.find('VersionLink');
const serverLink = links.at(0);
const clientLink = links.at(1);
expect(serverLink.prop('project')).toEqual('shlink');
expect(serverLink.prop('version')).toEqual(expectedServerVersion);
expect(clientLink.prop('project')).toEqual('shlink-web-client');
expect(clientLink.prop('version')).toEqual(expectedClientVersion);
},
);
it.each([
[ '1.2.3', null ],
[ '1.2.3', Mock.of<NotFoundServer>({ serverNotFound: true }) ],
[ '1.2.3', Mock.of<NonReachableServer>({ serverNotReachable: true }) ],
])('displays only client version when selected server is not reachable', (clientVersion, selectedServer) => {
const wrapper = createWrapper({ clientVersion, selectedServer });
const links = wrapper.find('VersionLink');
expect(links).toHaveLength(1);
expect(links.at(0).prop('project')).toEqual('shlink-web-client');
});
});

View File

@@ -1,29 +1,30 @@
import React from 'react';
import { shallow } from 'enzyme';
import { shallow, ShallowWrapper } from 'enzyme';
import { identity } from 'ramda';
import { PaginationItem } from 'reactstrap';
import SimplePaginator from '../../src/common/SimplePaginator';
import { ELLIPSIS } from '../../src/utils/helpers/pagination';
describe('<SimplePaginator />', () => {
let wrapper;
const createWrapper = (pagesCount, currentPage = 1) => {
let wrapper: ShallowWrapper;
const createWrapper = (pagesCount: number, currentPage = 1) => {
// @ts-expect-error
wrapper = shallow(<SimplePaginator pagesCount={pagesCount} currentPage={currentPage} setCurrentPage={identity} />);
return wrapper;
};
afterEach(() => wrapper && wrapper.unmount());
afterEach(() => wrapper?.unmount());
it.each([ -3, -2, 0, 1 ])('renders empty when the amount of pages is smaller than 2', (pagesCount) => {
expect(createWrapper(pagesCount).text()).toEqual('');
});
describe('ELLIPSIS are rendered where expected', () => {
const getItemsForPages = (pagesCount, currentPage) => {
const getItemsForPages = (pagesCount: number, currentPage: number) => {
const paginator = createWrapper(pagesCount, currentPage);
const items = paginator.find(PaginationItem);
const itemsWithEllipsis = items.filterWhere((item) => item.key() && item.key().includes(ELLIPSIS));
const itemsWithEllipsis = items.filterWhere((item) => item?.key()?.includes(ELLIPSIS));
return { items, itemsWithEllipsis };
};