diff --git a/test/servers/Overview.test.tsx b/test/servers/Overview.test.tsx new file mode 100644 index 00000000..a92a2044 --- /dev/null +++ b/test/servers/Overview.test.tsx @@ -0,0 +1,79 @@ +import { shallow, ShallowWrapper } from 'enzyme'; +import { Mock } from 'ts-mockery'; +import { CardText } from 'reactstrap'; +import { Link } 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'; +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'; + +describe('', () => { + let wrapper: ShallowWrapper; + const ShortUrlsTable = () => null; + const CreateShortUrl = () => null; + const listShortUrls = jest.fn(); + const listTags = jest.fn(); + const loadVisitsOverview = jest.fn(); + const Overview = overviewCreator(ShortUrlsTable, CreateShortUrl); + const shortUrls = { + pagination: { totalItems: 83710 }, + }; + 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 })} + 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 + + return wrapper; + }; + + afterEach(() => wrapper?.unmount()); + + test('cards display loading messages when still loading', () => { + const wrapper = createWrapper(true); + const cards = wrapper.find(CardText); + + expect(cards).toHaveLength(3); + cards.forEach((card) => expect(card.html()).toContain('Loading...')); + }); + + test('amounts are displayed in cards after finishing loading', () => { + const wrapper = createWrapper(); + const cards = wrapper.find(CardText); + + expect(cards).toHaveLength(3); + expect(cards.at(0).html()).toContain(prettify(3456)); + expect(cards.at(1).html()).toContain(prettify(83710)); + expect(cards.at(2).html()).toContain(prettify(3)); + }); + + test('nests complex components', () => { + const wrapper = createWrapper(); + + expect(wrapper.find(CreateShortUrl)).toHaveLength(1); + expect(wrapper.find(ShortUrlsTable)).toHaveLength(1); + }); + + test('links to other sections are displayed', () => { + 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`); + }); +});