From 9784cbb3ac860b9d0f75d78e4e39b97a916e4efc Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Tue, 3 May 2022 17:36:34 +0200 Subject: [PATCH] Migrated App test to react testing library --- src/app/App.tsx | 6 +- src/app/services/provideServices.ts | 2 +- src/common/MenuLayout.tsx | 2 +- src/common/NotFound.tsx | 4 +- test/app/App.test.tsx | 106 ++++++++++++---------------- test/common/NotFound.test.tsx | 2 +- 6 files changed, 53 insertions(+), 69 deletions(-) diff --git a/src/app/App.tsx b/src/app/App.tsx index 7f5aed1b..457a50d7 100644 --- a/src/app/App.tsx +++ b/src/app/App.tsx @@ -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 = ( ); }; - -export default App; diff --git a/src/app/services/provideServices.ts b/src/app/services/provideServices.ts index c26e3cda..a69d6cbc 100644 --- a/src/app/services/provideServices.ts +++ b/src/app/services/provideServices.ts @@ -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) => { diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 99e0de49..b555143f 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -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'; diff --git a/src/common/NotFound.tsx b/src/common/NotFound.tsx index 750c8c9d..76926d5d 100644 --- a/src/common/NotFound.tsx +++ b/src/common/NotFound.tsx @@ -4,7 +4,7 @@ import { SimpleCard } from '../utils/SimpleCard'; type NotFoundProps = PropsWithChildren<{ to?: string }>; -const NotFound: FC = ({ to = '/', children = 'Home' }) => ( +export const NotFound: FC = ({ to = '/', children = 'Home' }) => (

Oops! We could not find requested route.

@@ -17,5 +17,3 @@ const NotFound: FC = ({ to = '/', children = 'Home' }) => (
); - -export default NotFound; diff --git a/test/app/App.test.tsx b/test/app/App.test.tsx index ce03225a..a286c61f 100644 --- a/test/app/App.test.tsx +++ b/test/app/App.test.tsx @@ -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('', () => { - 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( - {}} - servers={{}} - settings={Mock.all()} - appUpdated={false} - resetAppUpdate={() => {}} - />, - ); + const setUp = (activeRoute = '/') => { + const history = createMemoryHistory(); + history.push(activeRoute); - return wrapper; + return render( + + {}} + servers={{}} + settings={Mock.all()} + appUpdated + resetAppUpdate={() => {}} + /> + , + ); }; 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('', () => { ['/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); }); }); diff --git a/test/common/NotFound.test.tsx b/test/common/NotFound.test.tsx index e20a7512..95cd4272 100644 --- a/test/common/NotFound.test.tsx +++ b/test/common/NotFound.test.tsx @@ -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('', () => {