diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx index e9ddec8b..6b22a17c 100644 --- a/src/servers/Overview.tsx +++ b/src/servers/Overview.tsx @@ -13,7 +13,6 @@ import { ShlinkShortUrlsListParams } from '../api/types'; import { supportsNonOrphanVisits } from '../utils/helpers/features'; import { getServerId, SelectedServer } from './data'; import { HighlightCard } from './helpers/HighlightCard'; -import { ForServerVersionProps } from './helpers/ForServerVersion'; interface OverviewConnectProps { shortUrlsList: ShortUrlsListState; @@ -28,7 +27,6 @@ interface OverviewConnectProps { export const Overview = ( ShortUrlsTable: FC, CreateShortUrl: FC, - ForServerVersion: FC, ) => boundToMercureHub(({ shortUrlsList, listShortUrls, @@ -61,12 +59,7 @@ export const Overview = (
- - {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)} - - - Shlink 2.6 is needed - + {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)}
diff --git a/src/servers/services/provideServices.ts b/src/servers/services/provideServices.ts index 52c114ec..61c37cb1 100644 --- a/src/servers/services/provideServices.ts +++ b/src/servers/services/provideServices.ts @@ -61,7 +61,7 @@ const provideServices = (bottle: Bottle, connect: ConnectDecorator) => { bottle.serviceFactory('ServerError', ServerError, 'DeleteServerButton'); bottle.decorator('ServerError', connect(['servers', 'selectedServer'])); - bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl', 'ForServerVersion'); + bottle.serviceFactory('Overview', Overview, 'ShortUrlsTable', 'CreateShortUrl'); bottle.decorator('Overview', connect( ['shortUrlsList', 'tagsList', 'selectedServer', 'mercureInfo', 'visitsOverview'], ['listShortUrls', 'listTags', 'createNewVisits', 'loadMercureInfo', 'loadVisitsOverview'], diff --git a/test/servers/Overview.test.tsx b/test/servers/Overview.test.tsx index 28008507..2cf05347 100644 --- a/test/servers/Overview.test.tsx +++ b/test/servers/Overview.test.tsx @@ -1,7 +1,6 @@ -import { FC, PropsWithChildren } from 'react'; -import { mount, ReactWrapper } from 'enzyme'; +import { render, screen } from '@testing-library/react'; import { Mock } from 'ts-mockery'; -import { Link, MemoryRouter } from 'react-router-dom'; +import { MemoryRouter } from 'react-router-dom'; import { ShortUrlsList as ShortUrlsListState } from '../../src/short-urls/reducers/shortUrlsList'; import { Overview as overviewCreator } from '../../src/servers/Overview'; import { TagsList } from '../../src/tags/reducers/tagsList'; @@ -9,79 +8,73 @@ import { VisitsOverview } from '../../src/visits/reducers/visitsOverview'; import { MercureInfo } from '../../src/mercure/reducers/mercureInfo'; import { ReachableServer } from '../../src/servers/data'; import { prettify } from '../../src/utils/helpers/numbers'; -import { HighlightCard } from '../../src/servers/helpers/HighlightCard'; describe('', () => { - let wrapper: ReactWrapper; - const ShortUrlsTable = () => null; - const CreateShortUrl = () => null; - const ForServerVersion: FC> = ({ children }) => <>{children}; + const ShortUrlsTable = () => <>ShortUrlsTable; + const CreateShortUrl = () => <>CreateShortUrl; const listShortUrls = jest.fn(); const listTags = jest.fn(); const loadVisitsOverview = jest.fn(); - const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl, ForServerVersion); + const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl); const shortUrls = { pagination: { totalItems: 83710 }, }; const serverId = '123'; - const createWrapper = (loading = false) => { - wrapper = mount( - - ({ loading, shortUrls })} - tagsList={Mock.of({ loading, tags: ['foo', 'bar', 'baz'] })} - visitsOverview={Mock.of({ loading, visitsCount: 3456, orphanVisitsCount: 28 })} - selectedServer={Mock.of({ id: serverId })} - createNewVisits={jest.fn()} - loadMercureInfo={jest.fn()} - mercureInfo={Mock.all()} - /> - , - ); - - return wrapper; - }; - - afterEach(() => wrapper?.unmount()); + const setUp = (loading = false) => render( + + ({ loading, shortUrls })} + tagsList={Mock.of({ loading, tags: ['foo', 'bar', 'baz'] })} + visitsOverview={Mock.of({ loading, visitsCount: 3456, orphanVisitsCount: 28 })} + selectedServer={Mock.of({ id: serverId })} + createNewVisits={jest.fn()} + loadMercureInfo={jest.fn()} + mercureInfo={Mock.all()} + /> + , + ); it('displays loading messages when still loading', () => { - const wrapper = createWrapper(true); - const cards = wrapper.find(HighlightCard); - - expect(cards).toHaveLength(4); - cards.forEach((card) => expect(card.html()).toContain('Loading...')); + setUp(true); + expect(screen.getAllByText('Loading...')).toHaveLength(4); }); it('displays amounts in cards after finishing loading', () => { - const wrapper = createWrapper(); - const cards = wrapper.find(HighlightCard); + setUp(); - expect(cards).toHaveLength(4); - expect(cards.at(0).html()).toContain(prettify(3456)); - expect(cards.at(1).html()).toContain(prettify(28)); - expect(cards.at(2).html()).toContain(prettify(83710)); - expect(cards.at(3).html()).toContain(prettify(3)); + const headingElements = screen.getAllByRole('heading'); + + expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + expect(headingElements[0]).toHaveTextContent('Visits'); + expect(headingElements[1]).toHaveTextContent(prettify(3456)); + expect(headingElements[2]).toHaveTextContent('Orphan visits'); + expect(headingElements[3]).toHaveTextContent(prettify(28)); + expect(headingElements[4]).toHaveTextContent('Short URLs'); + expect(headingElements[5]).toHaveTextContent(prettify(83710)); + expect(headingElements[6]).toHaveTextContent('Tags'); + expect(headingElements[7]).toHaveTextContent(prettify(3)); }); - it('nests complex components', () => { - const wrapper = createWrapper(); + it('nests injected components', () => { + setUp(); - expect(wrapper.find(CreateShortUrl)).toHaveLength(1); - expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); + expect(screen.queryByText('ShortUrlsTable')).toBeInTheDocument(); + expect(screen.queryByText('CreateShortUrl')).toBeInTheDocument(); }); it('displays links to other sections', () => { - const wrapper = createWrapper(); - const links = wrapper.find(Link); + setUp(); + + const links = screen.getAllByRole('link'); expect(links).toHaveLength(5); - expect(links.at(0).prop('to')).toEqual(`/server/${serverId}/orphan-visits`); - expect(links.at(1).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`); - expect(links.at(2).prop('to')).toEqual(`/server/${serverId}/manage-tags`); - expect(links.at(3).prop('to')).toEqual(`/server/${serverId}/create-short-url`); - expect(links.at(4).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`); + expect(links[0]).toHaveAttribute('href', `/server/${serverId}/orphan-visits`); + expect(links[1]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`); + expect(links[2]).toHaveAttribute('href', `/server/${serverId}/manage-tags`); + expect(links[3]).toHaveAttribute('href', `/server/${serverId}/create-short-url`); + expect(links[4]).toHaveAttribute('href', `/server/${serverId}/list-short-urls/1`); }); });