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
|
import { GlIcon, GlLink, GlPopover, GlSprintf } from '@gitlab/ui';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import { helpPagePath } from '~/helpers/help_page_helper';
import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue';
import {
CLEANUP_STATUS_SCHEDULED,
CLEANUP_STATUS_ONGOING,
CLEANUP_STATUS_UNFINISHED,
UNFINISHED_STATUS,
UNSCHEDULED_STATUS,
SCHEDULED_STATUS,
ONGOING_STATUS,
} from '~/packages_and_registries/container_registry/explorer/constants';
describe('cleanup_status', () => {
let wrapper;
const findMainIcon = () => wrapper.findByTestId('main-icon');
const findMainIconName = () => wrapper.findByTestId('main-icon').find(GlIcon);
const findExtraInfoIcon = () => wrapper.findByTestId('extra-info');
const findPopover = () => wrapper.findComponent(GlPopover);
const cleanupPolicyHelpPage = helpPagePath(
'user/packages/container_registry/reduce_container_registry_storage.html',
{ anchor: 'how-the-cleanup-policy-works' },
);
const mountComponent = (propsData = { status: SCHEDULED_STATUS }) => {
wrapper = shallowMountExtended(CleanupStatus, {
propsData,
stubs: {
GlLink,
GlPopover,
GlSprintf,
},
});
};
afterEach(() => {
wrapper.destroy();
});
it.each`
status | visible | text
${UNFINISHED_STATUS} | ${true} | ${CLEANUP_STATUS_UNFINISHED}
${SCHEDULED_STATUS} | ${true} | ${CLEANUP_STATUS_SCHEDULED}
${ONGOING_STATUS} | ${true} | ${CLEANUP_STATUS_ONGOING}
${UNSCHEDULED_STATUS} | ${false} | ${''}
`(
'when the status is $status is $visible that the component is mounted and has the correct text',
({ status, visible, text }) => {
mountComponent({ status });
expect(findMainIcon().exists()).toBe(visible);
expect(wrapper.text()).toContain(text);
},
);
describe('main icon', () => {
it('exists', () => {
mountComponent();
expect(findMainIcon().exists()).toBe(true);
});
it.each`
status | visible | iconName
${UNFINISHED_STATUS} | ${true} | ${'expire'}
${SCHEDULED_STATUS} | ${true} | ${'clock'}
${ONGOING_STATUS} | ${true} | ${'clock'}
${UNSCHEDULED_STATUS} | ${false} | ${''}
`('matches "$iconName" when the status is "$status"', ({ status, visible, iconName }) => {
mountComponent({ status });
expect(findMainIcon().exists()).toBe(visible);
if (visible) {
const actualIcon = findMainIconName();
expect(actualIcon.exists()).toBe(true);
expect(actualIcon.props('name')).toBe(iconName);
}
});
});
describe('extra info icon', () => {
it.each`
status | visible
${UNFINISHED_STATUS} | ${true}
${SCHEDULED_STATUS} | ${false}
${ONGOING_STATUS} | ${false}
`(
'when the status is $status is $visible that the extra icon is visible',
({ status, visible }) => {
mountComponent({ status });
expect(findExtraInfoIcon().exists()).toBe(visible);
},
);
it(`has a popover with a learn more link and a time frame for the next run`, () => {
jest.spyOn(Date, 'now').mockImplementation(() => new Date('2063-04-04T00:42:00Z').getTime());
mountComponent({
status: UNFINISHED_STATUS,
expirationPolicy: { next_run: '2063-04-08T01:44:03Z' },
});
expect(findPopover().exists()).toBe(true);
expect(findPopover().text()).toContain('The cleanup will continue within 4 days. Learn more');
expect(findPopover().findComponent(GlLink).exists()).toBe(true);
expect(findPopover().findComponent(GlLink).attributes('href')).toBe(cleanupPolicyHelpPage);
});
it('id matches popover target attribute', () => {
mountComponent({
status: UNFINISHED_STATUS,
next_run_at: '2063-04-08T01:44:03Z',
});
const id = findExtraInfoIcon().attributes('id');
expect(id).toMatch(/status-info-[0-9]+/);
expect(findPopover().props('target')).toEqual(id);
});
});
});
|
