mirror of
https://github.com/shlinkio/shlink-web-client.git
synced 2024-12-23 01:20:24 +03:00
Migrated App test to react testing library
This commit is contained in:
parent
e6f9003fb6
commit
9784cbb3ac
6 changed files with 53 additions and 69 deletions
|
@ -1,7 +1,7 @@
|
|||
import { useEffect, FC } from 'react';
|
||||
import { Route, Routes, useLocation } from 'react-router-dom';
|
||||
import classNames from 'classnames';
|
||||
import NotFound from '../common/NotFound';
|
||||
import { NotFound } from '../common/NotFound';
|
||||
import { ServersMap } from '../servers/data';
|
||||
import { Settings } from '../settings/reducers/settings';
|
||||
import { changeThemeInMarkup } from '../utils/theme';
|
||||
|
@ -17,7 +17,7 @@ interface AppProps {
|
|||
appUpdated: boolean;
|
||||
}
|
||||
|
||||
const App = (
|
||||
export const App = (
|
||||
MainHeader: FC,
|
||||
Home: FC,
|
||||
MenuLayout: FC,
|
||||
|
@ -65,5 +65,3 @@ const App = (
|
|||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import Bottle from 'bottlejs';
|
||||
import { appUpdateAvailable, resetAppUpdate } from '../reducers/appUpdates';
|
||||
import App from '../App';
|
||||
import { App } from '../App';
|
||||
import { ConnectDecorator } from '../../container/types';
|
||||
|
||||
const provideServices = (bottle: Bottle, connect: ConnectDecorator) => {
|
||||
|
|
|
@ -7,7 +7,7 @@ import { withSelectedServer } from '../servers/helpers/withSelectedServer';
|
|||
import { useSwipeable, useToggle } from '../utils/helpers/hooks';
|
||||
import { supportsDomainRedirects, supportsDomainVisits, supportsNonOrphanVisits } from '../utils/helpers/features';
|
||||
import { isReachableServer } from '../servers/data';
|
||||
import NotFound from './NotFound';
|
||||
import { NotFound } from './NotFound';
|
||||
import { AsideMenuProps } from './AsideMenu';
|
||||
import './MenuLayout.scss';
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@ import { SimpleCard } from '../utils/SimpleCard';
|
|||
|
||||
type NotFoundProps = PropsWithChildren<{ to?: string }>;
|
||||
|
||||
const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
||||
export const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
||||
<div className="home">
|
||||
<SimpleCard className="p-4">
|
||||
<h2>Oops! We could not find requested route.</h2>
|
||||
|
@ -17,5 +17,3 @@ const NotFound: FC<NotFoundProps> = ({ to = '/', children = 'Home' }) => (
|
|||
</SimpleCard>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default NotFound;
|
||||
|
|
|
@ -1,71 +1,61 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { Route, useLocation } from 'react-router-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Router } from 'react-router-dom';
|
||||
import { createMemoryHistory } from 'history';
|
||||
import { Mock } from 'ts-mockery';
|
||||
import { Settings } from '../../src/settings/reducers/settings';
|
||||
import appFactory from '../../src/app/App';
|
||||
import { AppUpdateBanner } from '../../src/common/AppUpdateBanner';
|
||||
|
||||
jest.mock('react-router-dom', () => ({
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useLocation: jest.fn().mockReturnValue({}),
|
||||
}));
|
||||
import { App as createApp } from '../../src/app/App';
|
||||
|
||||
describe('<App />', () => {
|
||||
let wrapper: ShallowWrapper;
|
||||
const MainHeader = () => null;
|
||||
const ShlinkVersions = () => null;
|
||||
const App = appFactory(
|
||||
MainHeader,
|
||||
() => null,
|
||||
() => null,
|
||||
() => null,
|
||||
() => null,
|
||||
() => null,
|
||||
() => null,
|
||||
ShlinkVersions,
|
||||
const App = createApp(
|
||||
() => <>MainHeader</>,
|
||||
() => <>Home</>,
|
||||
() => <>MenuLayout</>,
|
||||
() => <>CreateServer</>,
|
||||
() => <>EditServer</>,
|
||||
() => <>SettingsComp</>,
|
||||
() => <>ManageServers</>,
|
||||
() => <>ShlinkVersions</>,
|
||||
);
|
||||
const createWrapper = () => {
|
||||
wrapper = shallow(
|
||||
<App
|
||||
fetchServers={() => {}}
|
||||
servers={{}}
|
||||
settings={Mock.all<Settings>()}
|
||||
appUpdated={false}
|
||||
resetAppUpdate={() => {}}
|
||||
/>,
|
||||
);
|
||||
const setUp = (activeRoute = '/') => {
|
||||
const history = createMemoryHistory();
|
||||
history.push(activeRoute);
|
||||
|
||||
return wrapper;
|
||||
return render(
|
||||
<Router location={history.location} navigator={history}>
|
||||
<App
|
||||
fetchServers={() => {}}
|
||||
servers={{}}
|
||||
settings={Mock.all<Settings>()}
|
||||
appUpdated
|
||||
resetAppUpdate={() => {}}
|
||||
/>
|
||||
</Router>,
|
||||
);
|
||||
};
|
||||
|
||||
afterEach(jest.clearAllMocks);
|
||||
afterEach(() => wrapper?.unmount());
|
||||
|
||||
it('renders children components', () => {
|
||||
const wrapper = createWrapper();
|
||||
setUp();
|
||||
|
||||
expect(wrapper.find(MainHeader)).toHaveLength(1);
|
||||
expect(wrapper.find(ShlinkVersions)).toHaveLength(1);
|
||||
expect(wrapper.find(AppUpdateBanner)).toHaveLength(1);
|
||||
expect(screen.getByText('MainHeader')).toBeInTheDocument();
|
||||
expect(screen.getByText('ShlinkVersions')).toBeInTheDocument();
|
||||
expect(screen.getByText('This app has just been updated!')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders app main routes', () => {
|
||||
const wrapper = createWrapper();
|
||||
const routes = wrapper.find(Route);
|
||||
const expectedPaths = [
|
||||
undefined,
|
||||
'/settings/*',
|
||||
'/manage-servers',
|
||||
'/server/create',
|
||||
'/server/:serverId/edit',
|
||||
'/server/:serverId/*',
|
||||
];
|
||||
|
||||
expect.assertions(expectedPaths.length + 1);
|
||||
expect(routes).toHaveLength(expectedPaths.length + 1);
|
||||
expectedPaths.forEach((path, index) => {
|
||||
expect(routes.at(index).prop('path')).toEqual(path);
|
||||
});
|
||||
it.each([
|
||||
['/settings/foo', 'SettingsComp'],
|
||||
['/settings/bar', 'SettingsComp'],
|
||||
['/manage-servers', 'ManageServers'],
|
||||
['/server/create', 'CreateServer'],
|
||||
['/server/abc123/edit', 'EditServer'],
|
||||
['/server/def456/edit', 'EditServer'],
|
||||
['/server/abc123/foo', 'MenuLayout'],
|
||||
['/server/def456/bar', 'MenuLayout'],
|
||||
['/other', 'Oops! We could not find requested route.'],
|
||||
])('renders expected route', async (activeRoute, expectedComponent) => {
|
||||
setUp(activeRoute);
|
||||
expect(await screen.findByText(expectedComponent)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each([
|
||||
|
@ -73,11 +63,9 @@ describe('<App />', () => {
|
|||
['/bar', 'shlink-wrapper'],
|
||||
['/', 'shlink-wrapper d-flex d-md-block align-items-center'],
|
||||
])('renders expected classes on shlink-wrapper based on current pathname', (pathname, expectedClasses) => {
|
||||
(useLocation as any).mockReturnValue({ pathname });
|
||||
const { container } = setUp(pathname);
|
||||
const shlinkWrapper = container.querySelector('.shlink-wrapper');
|
||||
|
||||
const wrapper = createWrapper();
|
||||
const shlinkWrapper = wrapper.find('.shlink-wrapper');
|
||||
|
||||
expect(shlinkWrapper.prop('className')).toEqual(expectedClasses);
|
||||
expect(shlinkWrapper).toHaveAttribute('class', expectedClasses);
|
||||
});
|
||||
});
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import { Link } from 'react-router-dom';
|
||||
import NotFound from '../../src/common/NotFound';
|
||||
import { NotFound } from '../../src/common/NotFound';
|
||||
import { SimpleCard } from '../../src/utils/SimpleCard';
|
||||
|
||||
describe('<NotFound />', () => {
|
||||
|
|
Loading…
Reference in a new issue