Finished TS migration

test/visits/VisitsStats.test.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { Card, Progress } from 'reactstrap';
+import { Mock } from 'ts-mockery';
+import VisitStats from '../../src/visits/VisitsStats';
+import Message from '../../src/utils/Message';
+import GraphCard from '../../src/visits/helpers/GraphCard';
+import SortableBarGraph from '../../src/visits/helpers/SortableBarGraph';
+import DateRangeRow from '../../src/utils/DateRangeRow';
+import { Visit, VisitsInfo } from '../../src/visits/types';
+
+describe('<VisitStats />', () => {
+  const visits = [ Mock.all<Visit>(), Mock.all<Visit>(), Mock.all<Visit>() ];
+
+  let wrapper: ShallowWrapper;
+  const getVisitsMock = jest.fn();
+
+  const createComponent = (visitsInfo: Partial<VisitsInfo>) => {
+    wrapper = shallow(
+      <VisitStats
+        getVisits={getVisitsMock}
+        visitsInfo={Mock.of<VisitsInfo>(visitsInfo)}
+        cancelGetVisits={() => {}}
+        matchMedia={() => Mock.of<MediaQueryList>({ matches: false })}
+      />,
+    );
+
+    return wrapper;
+  };
+
+  afterEach(() => wrapper?.unmount());
+
+  it('renders a preloader when visits are loading', () => {
+    const wrapper = createComponent({ loading: true, visits: [] });
+    const loadingMessage = wrapper.find(Message);
+    const progress = wrapper.find(Progress);
+
+    expect(loadingMessage).toHaveLength(1);
+    expect(loadingMessage.html()).toContain('Loading...');
+    expect(progress).toHaveLength(0);
+  });
+
+  it('renders a warning and progress bar when loading large amounts of visits', () => {
+    const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [], progress: 25 });
+    const loadingMessage = wrapper.find(Message);
+    const progress = wrapper.find(Progress);
+
+    expect(loadingMessage).toHaveLength(1);
+    expect(loadingMessage.html()).toContain('This is going to take a while... :S');
+    expect(progress).toHaveLength(1);
+    expect(progress.prop('value')).toEqual(25);
+  });
+
+  it('renders an error message when visits could not be loaded', () => {
+    const wrapper = createComponent({ loading: false, error: true, visits: [] });
+    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: [] });
+    const message = wrapper.find(Message);
+
+    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);
+    const sortableBarGraphs = wrapper.find(SortableBarGraph);
+
+    expect(graphs.length + sortableBarGraphs.length).toEqual(5);
+  });
+
+  it('reloads visits when selected dates change', () => {
+    const wrapper = createComponent({ loading: false, error: false, visits });
+    const dateRange = wrapper.find(DateRangeRow);
+
+    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');
+
+    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');
+  });
+
+  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);
+    expect(typeof extraHeaderContent).toEqual('function');
+  });
+});