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
128
129
130
131
132
133
|
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, expirationPolicy: { next_run_at: '2063-04-08T01:44:03Z' } });
expect(findExtraInfoIcon().exists()).toBe(visible);
},
);
it(`when the status is ${UNFINISHED_STATUS} & expirationPolicy does not exist the extra icon is not visible`, () => {
mountComponent({
status: UNFINISHED_STATUS,
});
expect(findExtraInfoIcon().exists()).toBe(false);
});
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_at: '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,
expirationPolicy: { 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);
});
});
});
|
