Skip to content

Commit 5fb3655

Browse files
acelayaacelaya
committed
Improve VisitsStats test with domains filter
1 parent 2a9eb3a commit 5fb3655

File tree

2 files changed

+88
-37
lines changed

2 files changed

+88
-37
lines changed

‎test/visits/VisitsStats.test.tsx‎

Lines changed: 61 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@ import { fromPartial } from '@total-typescript/shoehorn';
33
import { createMemoryHistory } from 'history';
44
import { Router } from 'react-router';
55
import type { ShlinkVisit } from '../../src/api-contract';
6+
import type { Domain } from '../../src/domains/data';
7+
import { DEFAULT_DOMAIN } from '../../src/domains/data';
68
import type { Settings } from '../../src/settings';
79
import { SettingsProvider } from '../../src/settings';
10+
import { FeaturesProvider } from '../../src/utils/features';
811
import { rangeOf } from '../../src/utils/helpers';
912
import { ChartDimensionsProvider } from '../../src/visits/charts/ChartDimensionsContext';
1013
import type { VisitsInfo } from '../../src/visits/reducers/types';
@@ -17,13 +20,22 @@ type SetUpOptions = {
1720
withDeletion?: boolean;
1821
activeRoute?: string;
1922
settings?: Partial<Settings>;
23+
domains?: Domain[];
24+
filterByDomainSupported?: boolean;
2025
};
2126

2227
describe('<VisitsStats />', () => {
2328
const visits = rangeOf(3, () => fromPartial<ShlinkVisit>({ date: '2020-01-01' }));
2429
const getVisitsMock = vi.fn();
2530
const exportCsv = vi.fn();
26-
const setUp = ({ visitsInfo = {}, activeRoute = '/by-time', withDeletion, settings = {} }: SetUpOptions = {}) => {
31+
const setUp = ({
32+
visitsInfo = {},
33+
activeRoute = '/by-time',
34+
withDeletion,
35+
settings = {},
36+
domains,
37+
filterByDomainSupported = false,
38+
}: SetUpOptions = {}) => {
2739
const history = createMemoryHistory();
2840
history.push(activeRoute);
2941

@@ -32,15 +44,24 @@ describe('<VisitsStats />', () => {
3244
...renderWithEvents(
3345
<Router location={history.location} navigator={history}>
3446
<SettingsProvider value={fromPartial(settings)}>
35-
<ChartDimensionsProvider value={{ width: 800, height: 300 }}>
36-
<VisitsStats
37-
getVisits={getVisitsMock}
38-
visitsInfo={fromPartial({ loading: false, errorData: null, progress: null, visits: [], ...visitsInfo })}
39-
cancelGetVisits={() => {}}
40-
exportCsv={exportCsv}
41-
deletion={withDeletion ? fromPartial({ visitsDeletion: {} }) : undefined}
42-
/>
43-
</ChartDimensionsProvider>
47+
<FeaturesProvider value={fromPartial({ filterVisitsByDomain: filterByDomainSupported })}>
48+
<ChartDimensionsProvider value={{ width: 800, height: 300 }}>
49+
<VisitsStats
50+
getVisits={getVisitsMock}
51+
visitsInfo={fromPartial({
52+
loading: false,
53+
errorData: null,
54+
progress: null,
55+
visits: [],
56+
...visitsInfo,
57+
})}
58+
cancelGetVisits={() => {}}
59+
exportCsv={exportCsv}
60+
deletion={withDeletion ? fromPartial({ visitsDeletion: {} }) : undefined}
61+
domains={domains}
62+
/>
63+
</ChartDimensionsProvider>
64+
</FeaturesProvider>
4465
</SettingsProvider>
4566
</Router>,
4667
),
@@ -160,6 +181,36 @@ describe('<VisitsStats />', () => {
160181
expectSearchContains(['startDate', 'endDate']);
161182
});
162183

184+
it.each([
185+
{ domains: undefined, filterByDomainSupported: false },
186+
{ domains: [], filterByDomainSupported: false },
187+
{ domains: undefined, filterByDomainSupported: true },
188+
{ domains: [], filterByDomainSupported: true },
189+
])('shows domains filtering control when domains are provided and the feature is supported', ({ domains, filterByDomainSupported }) => {
190+
setUp({ domains, filterByDomainSupported });
191+
192+
if (domains && filterByDomainSupported) {
193+
expect(screen.getByRole('button', { name: 'All domains' })).toBeInTheDocument();
194+
} else {
195+
expect(screen.queryByRole('button', { name: 'All domains' })).not.toBeInTheDocument();
196+
}
197+
});
198+
199+
it.each([
200+
{ selectedDomain: /^foo/, expectedFilter: DEFAULT_DOMAIN },
201+
{ selectedDomain: 'bar', expectedFilter: 'bar' },
202+
])('can change domain to filter by', async ({ selectedDomain, expectedFilter }) => {
203+
const { history, user } = setUp({
204+
domains: [fromPartial({ isDefault: true, domain: 'foo' }), fromPartial({ domain: 'bar' })],
205+
filterByDomainSupported: true,
206+
});
207+
208+
await user.click(screen.getByRole('button', { name: 'All domains' }));
209+
await user.click(await screen.findByRole('menuitem', { name: selectedDomain }));
210+
211+
expect(history.location.search).toContain(`domain=${expectedFilter}`);
212+
});
213+
163214
// FIXME Snapshots do not match when run in CI, because it generate some slightly off coordinates.
164215
// I Need to investigate why.
165216
it.skipIf(import.meta.env.CI).each([

‎test/visits/__snapshots__/VisitsStats.test.tsx.snap‎

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
1818
class="flex content-center gap-1"
1919
>
2020
<button
21-
aria-controls="«rgb»"
21+
aria-controls="«rjn»"
2222
aria-expanded="false"
2323
aria-label="Expand"
2424
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -42,7 +42,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
4242
class="relative inline-block"
4343
>
4444
<button
45-
aria-controls="«rgf»"
45+
aria-controls="«rjr»"
4646
aria-expanded="false"
4747
aria-haspopup="true"
4848
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -68,7 +68,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
6868
</div>
6969
<div
7070
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
71-
id="«rgb»"
71+
id="«rjn»"
7272
>
7373
<div
7474
class="recharts-wrapper select-none"
@@ -494,7 +494,7 @@ exports[`<VisitsStats /> > loads visits when mounted 1`] = `
494494
d="M65,5L795,265"
495495
fill="none"
496496
height="260"
497-
id="recharts-line-«rgi»"
497+
id="recharts-line-«rju»"
498498
stroke="#2078CF"
499499
stroke-dasharray="0px 774.9193725585938px"
500500
stroke-width="2"
@@ -570,7 +570,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
570570
class="flex content-center gap-1"
571571
>
572572
<button
573-
aria-controls="«rh5»"
573+
aria-controls="«rkh»"
574574
aria-expanded="false"
575575
aria-label="Expand"
576576
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -594,7 +594,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
594594
class="relative inline-block"
595595
>
596596
<button
597-
aria-controls="«rh9»"
597+
aria-controls="«rkl»"
598598
aria-expanded="false"
599599
aria-haspopup="true"
600600
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -620,7 +620,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
620620
</div>
621621
<div
622622
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
623-
id="«rh5»"
623+
id="«rkh»"
624624
>
625625
<div
626626
class="recharts-wrapper select-none"
@@ -1046,7 +1046,7 @@ exports[`<VisitsStats /> > loads visits when mounted 2`] = `
10461046
d="M65,5L795,265"
10471047
fill="none"
10481048
height="260"
1049-
id="recharts-line-«rhe»"
1049+
id="recharts-line-«rkq»"
10501050
stroke="#2078CF"
10511051
stroke-dasharray="0px 774.9193725585938px"
10521052
stroke-width="2"
@@ -1122,7 +1122,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
11221122
class="flex content-center gap-1"
11231123
>
11241124
<button
1125-
aria-controls="«ri1»"
1125+
aria-controls="«rld»"
11261126
aria-expanded="false"
11271127
aria-label="Expand"
11281128
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -1146,7 +1146,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
11461146
class="relative inline-block"
11471147
>
11481148
<button
1149-
aria-controls="«ri5»"
1149+
aria-controls="«rlh»"
11501150
aria-expanded="false"
11511151
aria-haspopup="true"
11521152
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -1172,7 +1172,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
11721172
</div>
11731173
<div
11741174
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
1175-
id="«ri1»"
1175+
id="«rld»"
11761176
>
11771177
<div
11781178
class="recharts-wrapper select-none"
@@ -1598,7 +1598,7 @@ exports[`<VisitsStats /> > loads visits when mounted 3`] = `
15981598
d="M65,5L795,265"
15991599
fill="none"
16001600
height="260"
1601-
id="recharts-line-«ri8»"
1601+
id="recharts-line-«rlk»"
16021602
stroke="#2078CF"
16031603
stroke-dasharray="0px 774.9193725585938px"
16041604
stroke-width="2"
@@ -1674,7 +1674,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
16741674
class="flex content-center gap-1"
16751675
>
16761676
<button
1677-
aria-controls="«rir»"
1677+
aria-controls="«rm7»"
16781678
aria-expanded="false"
16791679
aria-label="Expand"
16801680
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -1698,7 +1698,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
16981698
class="relative inline-block"
16991699
>
17001700
<button
1701-
aria-controls="«riv»"
1701+
aria-controls="«rmb»"
17021702
aria-expanded="false"
17031703
aria-haspopup="true"
17041704
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -1724,7 +1724,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
17241724
</div>
17251725
<div
17261726
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
1727-
id="«rir»"
1727+
id="«rm7»"
17281728
>
17291729
<div
17301730
class="recharts-wrapper select-none"
@@ -2150,7 +2150,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
21502150
d="M65,5L795,265"
21512151
fill="none"
21522152
height="260"
2153-
id="recharts-line-«rj2»"
2153+
id="recharts-line-«rme»"
21542154
stroke="#2078CF"
21552155
stroke-dasharray="0px 774.9193725585938px"
21562156
stroke-width="2"
@@ -2191,7 +2191,7 @@ exports[`<VisitsStats /> > loads visits when mounted 4`] = `
21912191
d="M65,5L795,265"
21922192
fill="none"
21932193
height="260"
2194-
id="recharts-line-«rj3»"
2194+
id="recharts-line-«rmf»"
21952195
stroke="#1DAA58"
21962196
stroke-dasharray="0px, 774.9193725585938px"
21972197
stroke-width="2"
@@ -2283,7 +2283,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
22832283
class="flex content-center gap-1"
22842284
>
22852285
<button
2286-
aria-controls="«rjm»"
2286+
aria-controls="«rn2»"
22872287
aria-expanded="false"
22882288
aria-label="Expand"
22892289
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -2307,7 +2307,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
23072307
class="relative inline-block"
23082308
>
23092309
<button
2310-
aria-controls="«rjq»"
2310+
aria-controls="«rn6»"
23112311
aria-expanded="false"
23122312
aria-haspopup="true"
23132313
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -2333,7 +2333,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
23332333
</div>
23342334
<div
23352335
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
2336-
id="«rjm»"
2336+
id="«rn2»"
23372337
>
23382338
<div
23392339
class="recharts-wrapper select-none"
@@ -2759,7 +2759,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
27592759
d="M65,5L795,265"
27602760
fill="none"
27612761
height="260"
2762-
id="recharts-line-«rjt»"
2762+
id="recharts-line-«rn9»"
27632763
stroke="#2078CF"
27642764
stroke-dasharray="0px 774.9193725585938px"
27652765
stroke-width="2"
@@ -2800,7 +2800,7 @@ exports[`<VisitsStats /> > loads visits when mounted 5`] = `
28002800
d="M65,5L795,265"
28012801
fill="none"
28022802
height="260"
2803-
id="recharts-line-«rju»"
2803+
id="recharts-line-«rna»"
28042804
stroke="#1DAA58"
28052805
stroke-dasharray="0px, 774.9193725585938px"
28062806
stroke-width="2"
@@ -2892,7 +2892,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
28922892
class="flex content-center gap-1"
28932893
>
28942894
<button
2895-
aria-controls="«rkh»"
2895+
aria-controls="«rnt»"
28962896
aria-expanded="false"
28972897
aria-label="Expand"
28982898
class="inline-flex rounded-md focus-ring text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm cursor-pointer"
@@ -2916,7 +2916,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
29162916
class="relative inline-block"
29172917
>
29182918
<button
2919-
aria-controls="«rkl»"
2919+
aria-controls="«ro1»"
29202920
aria-expanded="false"
29212921
aria-haspopup="true"
29222922
class="flex items-center rounded-md focus-ring justify-between cursor-pointer text-lm-brand dark:text-dm-brand highlight:text-lm-brand-dark dark:highlight:text-dm-brand-dark highlight:underline px-1.5 py-1 text-sm gap-x-1.5 [&]:p-0"
@@ -2942,7 +2942,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
29422942
</div>
29432943
<div
29442944
class="p-4 bg-lm-primary dark:bg-dm-primary first:rounded-t-md first:rounded-t-md last:rounded-b-md"
2945-
id="«rkh»"
2945+
id="«rnt»"
29462946
>
29472947
<div
29482948
class="recharts-wrapper select-none"
@@ -3368,7 +3368,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
33683368
d="M65,5L795,265"
33693369
fill="none"
33703370
height="260"
3371-
id="recharts-line-«rko»"
3371+
id="recharts-line-«ro4»"
33723372
stroke="#2078CF"
33733373
stroke-dasharray="0px 774.9193725585938px"
33743374
stroke-width="2"
@@ -3409,7 +3409,7 @@ exports[`<VisitsStats /> > loads visits when mounted 6`] = `
34093409
d="M65,5L795,265"
34103410
fill="none"
34113411
height="260"
3412-
id="recharts-line-«rkp»"
3412+
id="recharts-line-«ro5»"
34133413
stroke="#1DAA58"
34143414
stroke-dasharray="0px, 774.9193725585938px"
34153415
stroke-width="2"

0 commit comments

Comments
 (0)