From 63f26d0089ef2489a189a4814ec4e6f18fd1b1f2 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Fri, 6 May 2022 18:54:00 +0200 Subject: [PATCH] Migrated MenuLayout test to react testing library --- src/common/MenuLayout.tsx | 4 +- src/common/services/provideServices.ts | 2 +- test/common/MenuLayout.test.tsx | 121 ++++++++++++++----------- 3 files changed, 72 insertions(+), 55 deletions(-) diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index b555143f..03de8768 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -16,7 +16,7 @@ interface MenuLayoutProps { sidebarNotPresent: Function; } -const MenuLayout = ( +export const MenuLayout = ( TagsList: FC, ShortUrlsList: FC, AsideMenu: FC, @@ -86,5 +86,3 @@ const MenuLayout = ( ); }, ServerError); - -export default MenuLayout; diff --git a/src/common/services/provideServices.ts b/src/common/services/provideServices.ts index e242f875..dd955dc8 100644 --- a/src/common/services/provideServices.ts +++ b/src/common/services/provideServices.ts @@ -3,7 +3,7 @@ import Bottle from 'bottlejs'; import ScrollToTop from '../ScrollToTop'; import { MainHeader } from '../MainHeader'; import { Home } from '../Home'; -import MenuLayout from '../MenuLayout'; +import { MenuLayout } from '../MenuLayout'; import AsideMenu from '../AsideMenu'; import { ErrorHandler } from '../ErrorHandler'; import ShlinkVersionsContainer from '../ShlinkVersionsContainer'; diff --git a/test/common/MenuLayout.test.tsx b/test/common/MenuLayout.test.tsx index 425a242c..7fefe3fc 100644 --- a/test/common/MenuLayout.test.tsx +++ b/test/common/MenuLayout.test.tsx @@ -1,70 +1,89 @@ -import { shallow, ShallowWrapper } from 'enzyme'; -import { Route, useParams } from 'react-router-dom'; +import { render, screen } from '@testing-library/react'; +import { Router, useParams } from 'react-router-dom'; +import { createMemoryHistory } from 'history'; import { Mock } from 'ts-mockery'; -import createMenuLayout from '../../src/common/MenuLayout'; +import { MenuLayout as createMenuLayout } from '../../src/common/MenuLayout'; import { NonReachableServer, NotFoundServer, ReachableServer, SelectedServer } from '../../src/servers/data'; -import { NoMenuLayout } from '../../src/common/NoMenuLayout'; import { SemVer } from '../../src/utils/helpers/version'; -jest.mock('react-router-dom', () => ({ - ...jest.requireActual('react-router-dom'), - useParams: jest.fn().mockReturnValue({}), - useLocation: jest.fn().mockReturnValue({}), -})); +jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useParams: jest.fn() })); describe('', () => { - const ServerError = jest.fn(); - const C = jest.fn(); - const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, C, C, ServerError, C, C, C); - let wrapper: ShallowWrapper; - const createWrapper = (selectedServer: SelectedServer) => { - (useParams as any).mockReturnValue({ serverId: 'abc123' }); + const MenuLayout = createMenuLayout( + () => <>TagsList, + () => <>ShortUrlsList, + () => <>AsideMenu, + () => <>CreateShortUrl, + () => <>ShortUrlVisits, + () => <>TagVisits, + () => <>DomainVisits, + () => <>OrphanVisits, + () => <>NonOrphanVisits, + () => <>ServerError, + () => <>Overview, + () => <>EditShortUrl, + () => <>ManageDomains, + ); + const setUp = (selectedServer: SelectedServer, currentPath = '/') => { + const history = createMemoryHistory(); + history.push(currentPath); - wrapper = shallow( - , + return render( + + + , ); - - return wrapper; }; + beforeEach(() => { + (useParams as any).mockReturnValue({ serverId: 'abc123' }); + }); + afterEach(jest.clearAllMocks); - afterEach(() => wrapper?.unmount()); - it.each([ - [null, NoMenuLayout], - [Mock.of({ serverNotFound: true }), ServerError], - ])('returns error when server is not found', (selectedServer, ExpectedComp) => { - const wrapper = createWrapper(selectedServer); - const comp = wrapper.find(ExpectedComp); + it('shows loading indicator while loading server', () => { + setUp(null); - expect(comp).toHaveLength(1); - }); - - it('returns error if server is not reachable', () => { - const wrapper = createWrapper(Mock.of()).dive(); - const serverError = wrapper.find(ServerError); - - expect(serverError).toHaveLength(1); + expect(screen.getByText('Loading...')).toBeInTheDocument(); + expect(screen.queryByText('ServerError')).not.toBeInTheDocument(); }); it.each([ - ['2.6.0' as SemVer, 10], - ['2.7.0' as SemVer, 10], - ['2.8.0' as SemVer, 11], - ['2.10.0' as SemVer, 11], - ['3.0.0' as SemVer, 12], - ['3.1.0' as SemVer, 13], - ])('has expected amount of routes based on selected server\'s version', (version, expectedAmountOfRoutes) => { - const selectedServer = Mock.of({ version }); - const wrapper = createWrapper(selectedServer).dive(); - const routes = wrapper.find(Route); + [Mock.of({ serverNotFound: true })], + [Mock.of({ serverNotReachable: true })], + ])('shows error for non reachable servers', (selectedServer) => { + setUp(selectedServer); - expect(routes).toHaveLength(expectedAmountOfRoutes); - expect(routes.findWhere((element) => element.prop('index'))).toHaveLength(1); + expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + expect(screen.getByText('ServerError')).toBeInTheDocument(); }); + + it.each([ + ['3.0.0' as SemVer, '/overview', 'Overview'], + ['3.0.0' as SemVer, '/list-short-urls/1', 'ShortUrlsList'], + ['3.0.0' as SemVer, '/create-short-url', 'CreateShortUrl'], + ['3.0.0' as SemVer, '/short-code/abc123/visits/foo', 'ShortUrlVisits'], + ['3.0.0' as SemVer, '/short-code/abc123/edit', 'EditShortUrl'], + ['3.0.0' as SemVer, '/tag/foo/visits/foo', 'TagVisits'], + ['3.0.0' as SemVer, '/orphan-visits/foo', 'OrphanVisits'], + ['3.0.0' as SemVer, '/manage-tags', 'TagsList'], + ['3.0.0' as SemVer, '/not-found', 'Oops! We could not find requested route.'], + ['3.0.0' as SemVer, '/domain/domain.com/visits/foo', 'Oops! We could not find requested route.'], + ['3.1.0' as SemVer, '/domain/domain.com/visits/foo', 'DomainVisits'], + ['2.10.0' as SemVer, '/non-orphan-visits/foo', 'Oops! We could not find requested route.'], + ['3.0.0' as SemVer, '/non-orphan-visits/foo', 'NonOrphanVisits'], + ['2.7.0' as SemVer, '/manage-domains', 'Oops! We could not find requested route.'], + ['2.8.0' as SemVer, '/manage-domains', 'ManageDomains'], + ])( + 'renders expected component based on location and server version', + (version, currentPath, expectedContent) => { + setUp(Mock.of({ version }), currentPath); + expect(screen.getByText(expectedContent)).toBeInTheDocument(); + }, + ); });