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
|
import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import Vue from 'vue';
import Vuex from 'vuex';
import waitForPromises from 'helpers/wait_for_promises';
import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
import { dashboardGitResponse } from '../mock_data';
Vue.use(Vuex);
describe('duplicate dashboard modal', () => {
let wrapper;
let mockDashboards;
let mockSelectedDashboard;
let duplicateDashboardAction;
let okEvent;
function createComponent() {
const store = new Vuex.Store({
modules: {
monitoringDashboard: {
namespaced: true,
actions: {
duplicateSystemDashboard: duplicateDashboardAction,
},
getters: {
allDashboards: () => mockDashboards,
selectedDashboard: () => mockSelectedDashboard,
},
},
},
});
return shallowMount(DuplicateDashboardModal, {
propsData: {
defaultBranch: 'main',
modalId: 'id',
},
store,
});
}
const findAlert = () => wrapper.findComponent(GlAlert);
const findModal = () => wrapper.findComponent(GlModal);
const findDuplicateDashboardForm = () => wrapper.findComponent(DuplicateDashboardForm);
beforeEach(() => {
mockDashboards = dashboardGitResponse;
[mockSelectedDashboard] = dashboardGitResponse;
duplicateDashboardAction = jest.fn().mockResolvedValue();
okEvent = {
preventDefault: jest.fn(),
};
wrapper = createComponent();
wrapper.vm.$refs.duplicateDashboardModal.hide = jest.fn();
});
it('contains a form to duplicate a dashboard', () => {
expect(findDuplicateDashboardForm().exists()).toBe(true);
});
it('saves a new dashboard', async () => {
findModal().vm.$emit('ok', okEvent);
await waitForPromises();
expect(okEvent.preventDefault).toHaveBeenCalled();
expect(wrapper.emitted('dashboardDuplicated')).toHaveLength(1);
expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).toHaveBeenCalled();
expect(findAlert().exists()).toBe(false);
});
it('handles error when a new dashboard is not saved', async () => {
const errMsg = 'An error occurred';
duplicateDashboardAction.mockRejectedValueOnce(errMsg);
findModal().vm.$emit('ok', okEvent);
await waitForPromises();
expect(okEvent.preventDefault).toHaveBeenCalled();
expect(findAlert().exists()).toBe(true);
expect(findAlert().text()).toBe(errMsg);
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
expect(wrapper.vm.$refs.duplicateDashboardModal.hide).not.toHaveBeenCalled();
});
it('updates the form on changes', () => {
const formVals = {
dashboard: 'common_metrics.yml',
commitMessage: 'A commit message',
};
findModal().findComponent(DuplicateDashboardForm).vm.$emit('change', formVals);
// Binding's second argument contains the modal id
expect(wrapper.vm.form).toEqual(formVals);
});
});
|
