2018-09-08 14:28:40 +03:00
|
|
|
import React from 'react';
|
|
|
|
import { shallow } from 'enzyme';
|
|
|
|
import { identity } from 'ramda';
|
|
|
|
import { Card } from 'reactstrap';
|
2018-12-18 16:32:02 +03:00
|
|
|
import createShortUrlVisits from '../../src/visits/ShortUrlVisits';
|
2020-03-08 13:16:57 +03:00
|
|
|
import Message from '../../src/utils/Message';
|
2018-10-19 20:04:22 +03:00
|
|
|
import GraphCard from '../../src/visits/GraphCard';
|
2018-10-29 01:04:52 +03:00
|
|
|
import SortableBarGraph from '../../src/visits/SortableBarGraph';
|
2020-01-14 22:12:30 +03:00
|
|
|
import DateRangeRow from '../../src/utils/DateRangeRow';
|
2018-09-08 14:28:40 +03:00
|
|
|
|
|
|
|
describe('<ShortUrlVisits />', () => {
|
|
|
|
let wrapper;
|
2019-03-04 20:14:45 +03:00
|
|
|
const processStatsFromVisits = () => (
|
|
|
|
{ os: {}, browsers: {}, referrers: {}, countries: {}, cities: {}, citiesForMap: {} }
|
|
|
|
);
|
2019-04-19 13:41:59 +03:00
|
|
|
const getShortUrlVisitsMock = jest.fn();
|
2018-09-08 14:28:40 +03:00
|
|
|
const match = {
|
|
|
|
params: { shortCode: 'abc123' },
|
|
|
|
};
|
2020-02-08 11:07:55 +03:00
|
|
|
const location = { search: '' };
|
2018-09-08 14:28:40 +03:00
|
|
|
|
|
|
|
const createComponent = (shortUrlVisits) => {
|
2020-04-10 12:59:53 +03:00
|
|
|
const ShortUrlVisits = createShortUrlVisits({ processStatsFromVisits, normalizeVisits: identity }, () => '');
|
2018-12-18 16:32:02 +03:00
|
|
|
|
2018-09-08 14:28:40 +03:00
|
|
|
wrapper = shallow(
|
2018-12-18 16:32:02 +03:00
|
|
|
<ShortUrlVisits
|
2018-09-08 14:28:40 +03:00
|
|
|
getShortUrlDetail={identity}
|
|
|
|
getShortUrlVisits={getShortUrlVisitsMock}
|
|
|
|
match={match}
|
2020-02-08 11:07:55 +03:00
|
|
|
location={location}
|
2018-09-08 14:28:40 +03:00
|
|
|
shortUrlVisits={shortUrlVisits}
|
|
|
|
shortUrlDetail={{}}
|
2019-03-08 21:40:43 +03:00
|
|
|
cancelGetShortUrlVisits={identity}
|
2020-04-04 13:09:17 +03:00
|
|
|
matchMedia={() => ({ matches: false })}
|
2018-09-08 14:28:40 +03:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
|
|
|
|
return wrapper;
|
|
|
|
};
|
|
|
|
|
2020-04-07 23:33:41 +03:00
|
|
|
afterEach(() => wrapper && wrapper.unmount());
|
2018-09-08 14:28:40 +03:00
|
|
|
|
2019-03-04 21:21:46 +03:00
|
|
|
it('renders a preloader when visits are loading', () => {
|
2020-04-04 11:36:34 +03:00
|
|
|
const wrapper = createComponent({ loading: true, visits: [] });
|
2020-03-08 13:16:57 +03:00
|
|
|
const loadingMessage = wrapper.find(Message);
|
2018-09-08 14:28:40 +03:00
|
|
|
|
|
|
|
expect(loadingMessage).toHaveLength(1);
|
|
|
|
expect(loadingMessage.html()).toContain('Loading...');
|
|
|
|
});
|
|
|
|
|
2019-03-04 21:21:46 +03:00
|
|
|
it('renders a warning when loading large amounts of visits', () => {
|
2020-04-04 11:36:34 +03:00
|
|
|
const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] });
|
2020-03-08 13:16:57 +03:00
|
|
|
const loadingMessage = wrapper.find(Message);
|
2019-03-04 21:21:46 +03:00
|
|
|
|
|
|
|
expect(loadingMessage).toHaveLength(1);
|
|
|
|
expect(loadingMessage.html()).toContain('This is going to take a while... :S');
|
|
|
|
});
|
|
|
|
|
2018-09-08 14:28:40 +03:00
|
|
|
it('renders an error message when visits could not be loaded', () => {
|
2020-04-04 11:36:34 +03:00
|
|
|
const wrapper = createComponent({ loading: false, error: true, visits: [] });
|
2018-09-08 14:28:40 +03:00
|
|
|
const errorMessage = wrapper.find(Card);
|
|
|
|
|
|
|
|
expect(errorMessage).toHaveLength(1);
|
|
|
|
expect(errorMessage.html()).toContain('An error occurred while loading visits :(');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders a message when visits are loaded but the list is empty', () => {
|
|
|
|
const wrapper = createComponent({ loading: false, error: false, visits: [] });
|
2020-03-08 13:16:57 +03:00
|
|
|
const message = wrapper.find(Message);
|
2018-09-08 14:28:40 +03:00
|
|
|
|
|
|
|
expect(message).toHaveLength(1);
|
|
|
|
expect(message.html()).toContain('There are no visits matching current filter :(');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders all graphics when visits are properly loaded', () => {
|
|
|
|
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
|
|
|
const graphs = wrapper.find(GraphCard);
|
2018-10-29 01:04:52 +03:00
|
|
|
const sortableBarGraphs = wrapper.find(SortableBarGraph);
|
2018-09-08 14:28:40 +03:00
|
|
|
|
2019-04-19 13:54:56 +03:00
|
|
|
expect(graphs.length + sortableBarGraphs.length).toEqual(5);
|
2018-09-08 14:28:40 +03:00
|
|
|
});
|
|
|
|
|
|
|
|
it('reloads visits when selected dates change', () => {
|
|
|
|
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
2020-01-14 22:12:30 +03:00
|
|
|
const dateRange = wrapper.find(DateRangeRow);
|
2018-09-08 14:28:40 +03:00
|
|
|
|
2020-01-14 22:12:30 +03:00
|
|
|
dateRange.simulate('startDateChange', '2016-01-01T00:00:00+01:00');
|
|
|
|
dateRange.simulate('endDateChange', '2016-01-02T00:00:00+01:00');
|
|
|
|
dateRange.simulate('endDateChange', '2016-01-03T00:00:00+01:00');
|
2018-09-08 14:28:40 +03:00
|
|
|
|
2020-04-07 23:33:41 +03:00
|
|
|
expect(wrapper.find(DateRangeRow).prop('startDate')).toEqual('2016-01-01T00:00:00+01:00');
|
|
|
|
expect(wrapper.find(DateRangeRow).prop('endDate')).toEqual('2016-01-03T00:00:00+01:00');
|
2018-09-08 14:28:40 +03:00
|
|
|
});
|
2019-01-09 22:11:22 +03:00
|
|
|
|
|
|
|
it('holds the map button content generator on cities graph extraHeaderContent', () => {
|
|
|
|
const wrapper = createComponent({ loading: false, error: false, visits: [{}, {}, {}] });
|
|
|
|
const citiesGraph = wrapper.find(SortableBarGraph).find('[title="Cities"]');
|
|
|
|
const extraHeaderContent = citiesGraph.prop('extraHeaderContent');
|
|
|
|
|
|
|
|
expect(extraHeaderContent).toHaveLength(1);
|
2019-03-10 15:05:20 +03:00
|
|
|
expect(typeof extraHeaderContent).toEqual('function');
|
2019-01-09 22:11:22 +03:00
|
|
|
});
|
2018-09-08 14:28:40 +03:00
|
|
|
});
|