Added more tests covering how real-time visits are filtered out based on date intervals

CHANGELOG.md

@@ -20,7 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 * *Nothing*
 
 ### Fixed
-* *Nothing*
+* [#252](https://github.com/shlinkio/shlink-web-client/issues/252) Fixed visits coming from mercure being added in real time, even when selected date interval does not match tha visit's date.
 
 
 ## [3.3.2] - 2021-10-17

src/utils/helpers/date.ts

@@ -25,10 +25,6 @@ export const parseDate = (date: string, format: string) => parse(date, format, n
 const parseISO = (date: DateOrString): Date => isDateObject(date) ? date : stdParseISO(date);
 
 export const isBetween = (date: DateOrString, start?: DateOrString, end?: DateOrString): boolean => {
-  if (!start && !end) {
-    return true;
-  }
-
   if (!start && end) {
     return isBefore(parseISO(date), parseISO(end));
   }
@@ -41,5 +37,5 @@ export const isBetween = (date: DateOrString, start?: DateOrString, end?: DateOr
     return isWithinInterval(parseISO(date), { start: parseISO(start), end: parseISO(end) });
   }
 
-  return false;
+  return true;
 };

src/visits/reducers/tagVisits.ts

@@ -5,9 +5,9 @@ import { ShlinkApiClientBuilder } from '../../api/services/ShlinkApiClientBuilde
 import { GetState } from '../../container/types';
 import { ShlinkVisitsParams } from '../../api/types';
 import { ApiErrorAction } from '../../api/types/actions';
+import { isBetween } from '../../utils/helpers/date';
 import { getVisitsWithLoader } from './common';
 import { CREATE_VISITS, CreateVisitsAction } from './visitCreation';
-import { isBetween } from '../../utils/helpers/date';
 
 /* eslint-disable padding-line-between-statements */
 export const GET_TAG_VISITS_START = 'shlink/tagVisits/GET_TAG_VISITS_START';

test/visits/reducers/orphanVisits.test.ts

@@ -1,4 +1,5 @@
 import { Mock } from 'ts-mockery';
+import { addDays, subDays } from 'date-fns';
 import reducer, {
   getOrphanVisits,
   cancelGetOrphanVisits,
@@ -15,8 +16,10 @@ import { Visit, VisitsInfo } from '../../../src/visits/types';
 import { ShlinkVisits } from '../../../src/api/types';
 import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
 import { ShlinkState } from '../../../src/container/types';
+import { formatIsoDate } from '../../../src/utils/helpers/date';
 
 describe('orphanVisitsReducer', () => {
+  const now = new Date();
   const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
 
   describe('reducer', () => {
@@ -64,15 +67,48 @@ describe('orphanVisitsReducer', () => {
       expect(visits).toEqual(actionVisits);
     });
 
-    it('prepends new visits on CREATE_VISIT', () => {
+    it.each([
-      const prevState = buildState({ visits: visitsMocks });
+      [{}, visitsMocks.length + 2 ],
+      [
+        Mock.of<VisitsInfo>({
+          query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<VisitsInfo>({
+          query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<VisitsInfo>({
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
+          },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<VisitsInfo>({
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
+          },
+        }),
+        visitsMocks.length + 2,
+      ],
+    ])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
+      const prevState = buildState({ ...state, visits: visitsMocks });
+      const visit = Mock.of<Visit>({ date: formatIsoDate(now) ?? undefined });
 
       const { visits } = reducer(
         prevState,
-        { type: CREATE_VISITS, createdVisits: [{ visit: {} }, { visit: {} }] } as any,
+        { type: CREATE_VISITS, createdVisits: [{ visit }, { visit }] } as any,
       );
 
-      expect(visits).toEqual([{}, {}, ...visitsMocks ]);
+      expect(visits).toHaveLength(expectedVisits);
     });
 
     it('returns new progress on GET_ORPHAN_VISITS_PROGRESS_CHANGED', () => {

test/visits/reducers/shortUrlVisits.test.ts

@@ -1,4 +1,5 @@
 import { Mock } from 'ts-mockery';
+import { addDays, subDays } from 'date-fns';
 import reducer, {
   getShortUrlVisits,
   cancelGetShortUrlVisits,
@@ -16,8 +17,10 @@ import { Visit } from '../../../src/visits/types';
 import { ShlinkVisits } from '../../../src/api/types';
 import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
 import { ShlinkState } from '../../../src/container/types';
+import { formatIsoDate } from '../../../src/utils/helpers/date';
 
 describe('shortUrlVisitsReducer', () => {
+  const now = new Date();
   const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
 
   describe('reducer', () => {
@@ -66,8 +69,52 @@ describe('shortUrlVisitsReducer', () => {
     });
 
     it.each([
-      [{ shortCode: 'abc123' }, [{}, ...visitsMocks ]],
+      [{ shortCode: 'abc123' }, visitsMocks.length + 1 ],
-      [{ shortCode: 'def456' }, visitsMocks ],
+      [{ shortCode: 'def456' }, visitsMocks.length ],
+      [
+        Mock.of<ShortUrlVisits>({
+          shortCode: 'abc123',
+          query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<ShortUrlVisits>({
+          shortCode: 'abc123',
+          query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<ShortUrlVisits>({
+          shortCode: 'abc123',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
+          },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<ShortUrlVisits>({
+          shortCode: 'abc123',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
+          },
+        }),
+        visitsMocks.length + 1,
+      ],
+      [
+        Mock.of<ShortUrlVisits>({
+          shortCode: 'def456',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
+          },
+        }),
+        visitsMocks.length,
+      ],
     ])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
       const shortUrl = {
         shortCode: 'abc123',
@@ -77,9 +124,12 @@ describe('shortUrlVisitsReducer', () => {
         visits: visitsMocks,
       });
 
-      const { visits } = reducer(prevState, { type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: {} }] } as any);
+      const { visits } = reducer(
+        prevState,
+        { type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: { date: formatIsoDate(now) ?? undefined } }] } as any,
+      );
 
-      expect(visits).toEqual(expectedVisits);
+      expect(visits).toHaveLength(expectedVisits);
     });
 
     it('returns new progress on GET_SHORT_URL_VISITS_PROGRESS_CHANGED', () => {

test/visits/reducers/tagVisits.test.ts

@@ -1,4 +1,5 @@
 import { Mock } from 'ts-mockery';
+import { addDays, subDays } from 'date-fns';
 import reducer, {
   getTagVisits,
   cancelGetTagVisits,
@@ -16,8 +17,10 @@ import { Visit } from '../../../src/visits/types';
 import { ShlinkVisits } from '../../../src/api/types';
 import ShlinkApiClient from '../../../src/api/services/ShlinkApiClient';
 import { ShlinkState } from '../../../src/container/types';
+import { formatIsoDate } from '../../../src/utils/helpers/date';
 
 describe('tagVisitsReducer', () => {
+  const now = new Date();
   const visitsMocks = rangeOf(2, () => Mock.all<Visit>());
 
   describe('reducer', () => {
@@ -66,8 +69,52 @@ describe('tagVisitsReducer', () => {
     });
 
     it.each([
-      [{ tag: 'foo' }, [{}, ...visitsMocks ]],
+      [{ tag: 'foo' }, visitsMocks.length + 1 ],
-      [{ tag: 'bar' }, visitsMocks ],
+      [{ tag: 'bar' }, visitsMocks.length ],
+      [
+        Mock.of<TagVisits>({
+          tag: 'foo',
+          query: { endDate: formatIsoDate(subDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<TagVisits>({
+          tag: 'foo',
+          query: { startDate: formatIsoDate(addDays(now, 1)) ?? undefined },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<TagVisits>({
+          tag: 'foo',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(subDays(now, 2)) ?? undefined,
+          },
+        }),
+        visitsMocks.length,
+      ],
+      [
+        Mock.of<TagVisits>({
+          tag: 'foo',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
+          },
+        }),
+        visitsMocks.length + 1,
+      ],
+      [
+        Mock.of<TagVisits>({
+          tag: 'bar',
+          query: {
+            startDate: formatIsoDate(subDays(now, 5)) ?? undefined,
+            endDate: formatIsoDate(addDays(now, 3)) ?? undefined,
+          },
+        }),
+        visitsMocks.length,
+      ],
     ])('prepends new visits on CREATE_VISIT', (state, expectedVisits) => {
       const shortUrl = {
         tags: [ 'foo', 'baz' ],
@@ -77,9 +124,12 @@ describe('tagVisitsReducer', () => {
         visits: visitsMocks,
       });
 
-      const { visits } = reducer(prevState, { type: CREATE_VISITS, createdVisits: [{ shortUrl, visit: {} }] } as any);
+      const { visits } = reducer(prevState, {
+        type: CREATE_VISITS,
+        createdVisits: [{ shortUrl, visit: { date: formatIsoDate(now) ?? undefined } }],
+      } as any);
 
-      expect(visits).toEqual(expectedVisits);
+      expect(visits).toHaveLength(expectedVisits);
     });
 
     it('returns new progress on GET_TAG_VISITS_PROGRESS_CHANGED', () => {