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
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
import CleanupStatus from '~/packages_and_registries/container_registry/explorer/components/list_page/cleanup_status.vue';
import {
CLEANUP_TIMED_OUT_ERROR_MESSAGE,
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 findExtraInfoIcon = () => wrapper.findByTestId('extra-info');
const mountComponent = (propsData = { status: SCHEDULED_STATUS }) => {
wrapper = shallowMountExtended(CleanupStatus, {
propsData,
directives: {
GlTooltip: createMockDirective(),
},
});
};
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()).toBe(text);
},
);
describe('main icon', () => {
it('exists', () => {
mountComponent();
expect(findMainIcon().exists()).toBe(true);
});
it(`has the orange class when the status is ${UNFINISHED_STATUS}`, () => {
mountComponent({ status: UNFINISHED_STATUS });
expect(findMainIcon().classes('gl-text-orange-500')).toBe(true);
});
});
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 tooltip`, () => {
mountComponent({ status: UNFINISHED_STATUS });
const tooltip = getBinding(findExtraInfoIcon().element, 'gl-tooltip');
expect(tooltip.value.title).toBe(CLEANUP_TIMED_OUT_ERROR_MESSAGE);
});
});
});
|
