Added progress bar to visits page when loading a lot of visits

test/visits/VisitsStats.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { identity } from 'ramda';
-import { Card } from 'reactstrap';
+import { Card, Progress } from 'reactstrap';
 import createVisitStats from '../../src/visits/VisitsStats';
 import Message from '../../src/utils/Message';
 import GraphCard from '../../src/visits/GraphCard';
@@ -35,17 +35,22 @@ describe('<VisitStats />', () => {
   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 when loading large amounts of visits', () => {
-    const wrapper = createComponent({ loading: true, loadingLarge: true, visits: [] });
+  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', () => {

test/visits/reducers/shortUrlVisits.test.js

@@ -6,6 +6,7 @@ import reducer, {
   GET_SHORT_URL_VISITS,
   GET_SHORT_URL_VISITS_LARGE,
   GET_SHORT_URL_VISITS_CANCEL,
+  GET_SHORT_URL_VISITS_PROGRESS_CHANGED,
 } from '../../../src/visits/reducers/shortUrlVisits';
 import { CREATE_VISIT } from '../../../src/visits/reducers/visitCreation';
 
@@ -66,6 +67,12 @@ describe('shortUrlVisitsReducer', () => {
 
       expect(visits).toEqual(expectedVisits);
     });
+
+    it('returns new progress on GET_SHORT_URL_VISITS_PROGRESS_CHANGED', () => {
+      const state = reducer({}, { type: GET_SHORT_URL_VISITS_PROGRESS_CHANGED, progress: 85 });
+
+      expect(state).toEqual({ progress: 85 });
+    });
   });
 
   describe('getShortUrlVisits', () => {
@@ -127,7 +134,7 @@ describe('shortUrlVisitsReducer', () => {
       await getShortUrlVisits(() => ShlinkApiClient)('abc123')(dispatchMock, getState);
 
       expect(ShlinkApiClient.getShortUrlVisits).toHaveBeenCalledTimes(expectedRequests);
-      expect(dispatchMock).toHaveBeenNthCalledWith(2, expect.objectContaining({
+      expect(dispatchMock).toHaveBeenNthCalledWith(3, expect.objectContaining({
         visits: [{}, {}, {}, {}, {}, {}],
       }));
     });

test/visits/reducers/tagVisits.test.js

@@ -6,6 +6,7 @@ import reducer, {
   GET_TAG_VISITS,
   GET_TAG_VISITS_LARGE,
   GET_TAG_VISITS_CANCEL,
+  GET_TAG_VISITS_PROGRESS_CHANGED,
 } from '../../../src/visits/reducers/tagVisits';
 import { CREATE_VISIT } from '../../../src/visits/reducers/visitCreation';
 
@@ -66,6 +67,12 @@ describe('tagVisitsReducer', () => {
 
       expect(visits).toEqual(expectedVisits);
     });
+
+    it('returns new progress on GET_TAG_VISITS_PROGRESS_CHANGED', () => {
+      const state = reducer({}, { type: GET_TAG_VISITS_PROGRESS_CHANGED, progress: 85 });
+
+      expect(state).toEqual({ progress: 85 });
+    });
   });
 
   describe('getTagVisits', () => {