112 lines
3.2 KiB
JavaScript
112 lines
3.2 KiB
JavaScript
|
import { shallowMount } from '@vue/test-utils';
|
||
|
import { GlAlert, GlLoadingIcon, GlModal } from '@gitlab/ui';
|
||
|
|
||
|
import waitForPromises from 'helpers/wait_for_promises';
|
||
|
|
||
|
import DuplicateDashboardModal from '~/monitoring/components/duplicate_dashboard_modal.vue';
|
||
|
import DuplicateDashboardForm from '~/monitoring/components/duplicate_dashboard_form.vue';
|
||
|
|
||
|
import { dashboardGitResponse } from '../mock_data';
|
||
|
|
||
|
describe('duplicate dashboard modal', () => {
|
||
|
let wrapper;
|
||
|
let mockDashboards;
|
||
|
let mockSelectedDashboard;
|
||
|
let duplicateDashboardAction;
|
||
|
let okEvent;
|
||
|
|
||
|
function createComponent(opts = {}) {
|
||
|
const storeOpts = {
|
||
|
methods: {
|
||
|
duplicateSystemDashboard: jest.fn(),
|
||
|
},
|
||
|
computed: {
|
||
|
allDashboards: () => mockDashboards,
|
||
|
selectedDashboard: () => mockSelectedDashboard,
|
||
|
},
|
||
|
};
|
||
|
|
||
|
return shallowMount(DuplicateDashboardModal, {
|
||
|
propsData: {
|
||
|
defaultBranch: 'master',
|
||
|
modalId: 'id',
|
||
|
},
|
||
|
sync: false,
|
||
|
...storeOpts,
|
||
|
...opts,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
const findAlert = () => wrapper.find(GlAlert);
|
||
|
const findModal = () => wrapper.find(GlModal);
|
||
|
const findDuplicateDashboardForm = () => wrapper.find(DuplicateDashboardForm);
|
||
|
|
||
|
beforeEach(() => {
|
||
|
mockDashboards = dashboardGitResponse;
|
||
|
[mockSelectedDashboard] = dashboardGitResponse;
|
||
|
|
||
|
duplicateDashboardAction = jest.fn().mockResolvedValue();
|
||
|
|
||
|
okEvent = {
|
||
|
preventDefault: jest.fn(),
|
||
|
};
|
||
|
|
||
|
wrapper = createComponent({
|
||
|
methods: {
|
||
|
// Mock vuex actions
|
||
|
duplicateSystemDashboard: duplicateDashboardAction,
|
||
|
},
|
||
|
});
|
||
|
|
||
|
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', () => {
|
||
|
findModal().vm.$emit('ok', okEvent);
|
||
|
|
||
|
return waitForPromises().then(() => {
|
||
|
expect(okEvent.preventDefault).toHaveBeenCalled();
|
||
|
expect(wrapper.emitted().dashboardDuplicated).toBeTruthy();
|
||
|
expect(wrapper.emitted().dashboardDuplicated[0]).toEqual([dashboardGitResponse[0]]);
|
||
|
expect(wrapper.find(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', () => {
|
||
|
const errMsg = 'An error occurred';
|
||
|
|
||
|
duplicateDashboardAction.mockRejectedValueOnce(errMsg);
|
||
|
findModal().vm.$emit('ok', okEvent);
|
||
|
|
||
|
return waitForPromises().then(() => {
|
||
|
expect(okEvent.preventDefault).toHaveBeenCalled();
|
||
|
|
||
|
expect(findAlert().exists()).toBe(true);
|
||
|
expect(findAlert().text()).toBe(errMsg);
|
||
|
|
||
|
expect(wrapper.find(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()
|
||
|
.find(DuplicateDashboardForm)
|
||
|
.vm.$emit('change', formVals);
|
||
|
|
||
|
// Binding's second argument contains the modal id
|
||
|
expect(wrapper.vm.form).toEqual(formVals);
|
||
|
});
|
||
|
});
|