From 8fbe6bb17d4b086bd561e25e675184917ff59ac5 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sat, 5 Feb 2022 13:37:49 +0100 Subject: [PATCH] Added changes to load orphan visits and fixed tests --- src/api/services/ShlinkApiClient.ts | 4 ++ src/common/MenuLayout.tsx | 3 +- src/container/types.ts | 1 + src/reducers/index.ts | 2 + src/servers/Overview.tsx | 7 +-- src/servers/helpers/HighlightCard.tsx | 4 +- test/api/services/ShlinkApiClient.test.ts | 14 ++++++ test/common/MenuLayout.test.tsx | 5 ++- test/servers/Overview.test.tsx | 50 +++++++++++---------- test/servers/helpers/HighlightCard.test.tsx | 7 ++- 10 files changed, 63 insertions(+), 34 deletions(-) diff --git a/src/api/services/ShlinkApiClient.ts b/src/api/services/ShlinkApiClient.ts index 4cada88b..6efea6d8 100644 --- a/src/api/services/ShlinkApiClient.ts +++ b/src/api/services/ShlinkApiClient.ts @@ -60,6 +60,10 @@ export default class ShlinkApiClient { this.performRequest<{ visits: ShlinkVisits }>('/visits/orphan', 'GET', query) .then(({ data }) => data.visits); + public readonly getNonOrphanVisits = async (query?: Omit): Promise => + this.performRequest<{ visits: ShlinkVisits }>('/visits/non-orphan', 'GET', query) + .then(({ data }) => data.visits); + public readonly getVisitsOverview = async (): Promise => this.performRequest<{ visits: ShlinkVisitsOverview }>('/visits', 'GET') .then(({ data }) => data.visits); diff --git a/src/common/MenuLayout.tsx b/src/common/MenuLayout.tsx index 15c372d5..2c1c146e 100644 --- a/src/common/MenuLayout.tsx +++ b/src/common/MenuLayout.tsx @@ -19,6 +19,7 @@ const MenuLayout = ( ShortUrlVisits: FC, TagVisits: FC, OrphanVisits: FC, + NonOrphanVisits: FC, ServerError: FC, Overview: FC, EditShortUrl: FC, @@ -56,7 +57,7 @@ const MenuLayout = ( {addOrphanVisitsRoute && } - {addNonOrphanVisitsRoute && 'Non orphan'} />} + {addNonOrphanVisitsRoute && } {addManageDomainsRoute && } ({ shortUrlVisits: shortUrlVisitsReducer, tagVisits: tagVisitsReducer, orphanVisits: orphanVisitsReducer, + nonOrphanVisits: nonOrphanVisitsReducer, shortUrlDetail: shortUrlDetailReducer, tagsList: tagsListReducer, tagDelete: tagDeleteReducer, diff --git a/src/servers/Overview.tsx b/src/servers/Overview.tsx index ebb45e27..0605fc40 100644 --- a/src/servers/Overview.tsx +++ b/src/servers/Overview.tsx @@ -56,15 +56,12 @@ export const Overview = ( <>
- + {loadingVisits ? 'Loading...' : prettify(visitsCount)}
- + {loadingVisits ? 'Loading...' : prettify(orphanVisitsCount ?? 0)} diff --git a/src/servers/helpers/HighlightCard.tsx b/src/servers/helpers/HighlightCard.tsx index e46782a7..bf0fc408 100644 --- a/src/servers/helpers/HighlightCard.tsx +++ b/src/servers/helpers/HighlightCard.tsx @@ -7,10 +7,10 @@ import './HighlightCard.scss'; export interface HighlightCardProps { title: string; - link?: string; + link?: string | false; } -const buildExtraProps = (link?: string) => !link ? {} : { tag: Link, to: link }; +const buildExtraProps = (link?: string | false) => !link ? {} : { tag: Link, to: link }; export const HighlightCard: FC = ({ children, title, link }) => ( diff --git a/test/api/services/ShlinkApiClient.test.ts b/test/api/services/ShlinkApiClient.test.ts index 9ce5af41..b25a3837 100644 --- a/test/api/services/ShlinkApiClient.test.ts +++ b/test/api/services/ShlinkApiClient.test.ts @@ -313,6 +313,20 @@ describe('ShlinkApiClient', () => { }); }); + describe('getNonOrphanVisits', () => { + it('returns non-orphan visits', async () => { + const expectedData: Visit[] = []; + const resp = { visits: expectedData }; + const axiosSpy = createAxiosMock({ data: resp }); + const { getNonOrphanVisits } = new ShlinkApiClient(axiosSpy, '', ''); + + const result = await getNonOrphanVisits(); + + expect(axiosSpy).toHaveBeenCalled(); + expect(result).toEqual(expectedData); + }); + }); + describe('editDomainRedirects', () => { it('returns the redirects', async () => { const resp = { baseUrlRedirect: null, regular404Redirect: 'foo', invalidShortUrlRedirect: 'bar' }; diff --git a/test/common/MenuLayout.test.tsx b/test/common/MenuLayout.test.tsx index 4ac16296..ba5ad007 100644 --- a/test/common/MenuLayout.test.tsx +++ b/test/common/MenuLayout.test.tsx @@ -11,7 +11,7 @@ import { SemVer } from '../../src/utils/helpers/version'; describe('', () => { const ServerError = jest.fn(); const C = jest.fn(); - const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, ServerError, C, C, C); + const MenuLayout = createMenuLayout(C, C, C, C, C, C, C, C, ServerError, C, C, C); let wrapper: ShallowWrapper; const createWrapper = (selectedServer: SelectedServer) => { wrapper = shallow( @@ -52,6 +52,9 @@ describe('', () => { [ '2.5.0' as SemVer, 8 ], [ '2.6.0' as SemVer, 9 ], [ '2.7.0' as SemVer, 9 ], + [ '2.8.0' as SemVer, 10 ], + [ '2.10.0' as SemVer, 10 ], + [ '3.0.0' as SemVer, 11 ], ])('has expected amount of routes based on selected server\'s version', (version, expectedAmountOfRoutes) => { const selectedServer = Mock.of({ version }); const wrapper = createWrapper(selectedServer).dive(); diff --git a/test/servers/Overview.test.tsx b/test/servers/Overview.test.tsx index 14cc85b1..1e8f9322 100644 --- a/test/servers/Overview.test.tsx +++ b/test/servers/Overview.test.tsx @@ -1,8 +1,7 @@ import { FC } from 'react'; -import { shallow, ShallowWrapper } from 'enzyme'; +import { mount, ReactWrapper } from 'enzyme'; import { Mock } from 'ts-mockery'; -import { CardText } from 'reactstrap'; -import { Link } from 'react-router-dom'; +import { Link, 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'; @@ -10,9 +9,10 @@ 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: ShallowWrapper; + let wrapper: ReactWrapper; const ShortUrlsTable = () => null; const CreateShortUrl = () => null; const ForServerVersion: FC = ({ children }) => <>{children}; @@ -25,20 +25,22 @@ describe('', () => { }; const serverId = '123'; const createWrapper = (loading = false) => { - wrapper = shallow( - ({ 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()} - />, - ).dive(); // Dive is needed as this component is wrapped in a HOC + 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; }; @@ -47,7 +49,7 @@ describe('', () => { it('displays loading messages when still loading', () => { const wrapper = createWrapper(true); - const cards = wrapper.find(CardText); + const cards = wrapper.find(HighlightCard); expect(cards).toHaveLength(4); cards.forEach((card) => expect(card.html()).toContain('Loading...')); @@ -55,7 +57,7 @@ describe('', () => { it('displays amounts in cards after finishing loading', () => { const wrapper = createWrapper(); - const cards = wrapper.find(CardText); + const cards = wrapper.find(HighlightCard); expect(cards).toHaveLength(4); expect(cards.at(0).html()).toContain(prettify(3456)); @@ -75,8 +77,10 @@ describe('', () => { const wrapper = createWrapper(); const links = wrapper.find(Link); - expect(links).toHaveLength(2); - expect(links.at(0).prop('to')).toEqual(`/server/${serverId}/create-short-url`); - expect(links.at(1).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`); + expect(links).toHaveLength(4); + expect(links.at(0).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`); + expect(links.at(1).prop('to')).toEqual(`/server/${serverId}/manage-tags`); + expect(links.at(2).prop('to')).toEqual(`/server/${serverId}/create-short-url`); + expect(links.at(3).prop('to')).toEqual(`/server/${serverId}/list-short-urls/1`); }); }); diff --git a/test/servers/helpers/HighlightCard.test.tsx b/test/servers/helpers/HighlightCard.test.tsx index 94426bb2..e365f31e 100644 --- a/test/servers/helpers/HighlightCard.test.tsx +++ b/test/servers/helpers/HighlightCard.test.tsx @@ -15,8 +15,11 @@ describe('', () => { afterEach(() => wrapper?.unmount()); - it('renders expected components', () => { - const wrapper = createWrapper({ title: 'foo' }); + it.each([ + [ undefined ], + [ false ], + ])('renders expected components', (link) => { + const wrapper = createWrapper({ title: 'foo', link: link as undefined | false }); expect(wrapper.find(Card)).toHaveLength(1); expect(wrapper.find(CardTitle)).toHaveLength(1);