1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { nextTick } from 'vue';
import { GlSkeletonLoader, GlAlert } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import Skeleton from '~/observability/components/skeleton/index.vue';
import DashboardsSkeleton from '~/observability/components/skeleton/dashboards.vue';
import ExploreSkeleton from '~/observability/components/skeleton/explore.vue';
import ManageSkeleton from '~/observability/components/skeleton/manage.vue';
import { SKELETON_VARIANTS_BY_ROUTE, DEFAULT_TIMERS } from '~/observability/constants';
describe('Skeleton component', () => {
let wrapper;
const SKELETON_VARIANTS = Object.values(SKELETON_VARIANTS_BY_ROUTE);
const findContentWrapper = () => wrapper.findByTestId('observability-wrapper');
const findExploreSkeleton = () => wrapper.findComponent(ExploreSkeleton);
const findDashboardsSkeleton = () => wrapper.findComponent(DashboardsSkeleton);
const findManageSkeleton = () => wrapper.findComponent(ManageSkeleton);
const findAlert = () => wrapper.findComponent(GlAlert);
const mountComponent = ({ ...props } = {}) => {
wrapper = shallowMountExtended(Skeleton, {
propsData: props,
});
};
describe('on mount', () => {
beforeEach(() => {
mountComponent({ variant: 'explore' });
});
describe('loading timers', () => {
it('show Skeleton if content is not loaded within CONTENT_WAIT_MS', async () => {
expect(findExploreSkeleton().exists()).toBe(false);
expect(findContentWrapper().isVisible()).toBe(false);
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
await nextTick();
expect(findExploreSkeleton().exists()).toBe(true);
expect(findContentWrapper().isVisible()).toBe(false);
});
it('does not show the skeleton if content has loaded within CONTENT_WAIT_MS', async () => {
expect(findExploreSkeleton().exists()).toBe(false);
expect(findContentWrapper().isVisible()).toBe(false);
wrapper.vm.onContentLoaded();
await nextTick();
expect(findContentWrapper().isVisible()).toBe(true);
expect(findExploreSkeleton().exists()).toBe(false);
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
await nextTick();
expect(findContentWrapper().isVisible()).toBe(true);
expect(findExploreSkeleton().exists()).toBe(false);
});
});
describe('error timeout', () => {
it('shows the error dialog if content has not loaded within TIMEOUT_MS', async () => {
expect(findAlert().exists()).toBe(false);
jest.advanceTimersByTime(DEFAULT_TIMERS.TIMEOUT_MS);
await nextTick();
expect(findAlert().exists()).toBe(true);
expect(findContentWrapper().isVisible()).toBe(false);
});
it('does not show the error dialog if content has loaded within TIMEOUT_MS', async () => {
wrapper.vm.onContentLoaded();
jest.advanceTimersByTime(DEFAULT_TIMERS.TIMEOUT_MS);
await nextTick();
expect(findAlert().exists()).toBe(false);
expect(findContentWrapper().isVisible()).toBe(true);
});
});
});
describe('skeleton variant', () => {
it.each`
skeletonType | condition | variant
${'dashboards'} | ${'variant is dashboards'} | ${SKELETON_VARIANTS[0]}
${'explore'} | ${'variant is explore'} | ${SKELETON_VARIANTS[1]}
${'manage'} | ${'variant is manage'} | ${SKELETON_VARIANTS[2]}
${'default'} | ${'variant is not manage, dashboards or explore'} | ${'unknown'}
`('should render $skeletonType skeleton if $condition', async ({ skeletonType, variant }) => {
mountComponent({ variant });
jest.advanceTimersByTime(DEFAULT_TIMERS.CONTENT_WAIT_MS);
await nextTick();
const showsDefaultSkeleton = !SKELETON_VARIANTS.includes(variant);
expect(findDashboardsSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[0]);
expect(findExploreSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[1]);
expect(findManageSkeleton().exists()).toBe(skeletonType === SKELETON_VARIANTS[2]);
expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(showsDefaultSkeleton);
});
});
describe('on destroy', () => {
it('should clear init timer and timeout timer', () => {
jest.spyOn(global, 'clearTimeout');
mountComponent();
wrapper.destroy();
expect(clearTimeout).toHaveBeenCalledTimes(2);
expect(clearTimeout.mock.calls).toEqual([
[wrapper.vm.loadingTimeout], // First call
[wrapper.vm.errorTimeout], // Second call
]);
});
});
});
|
