2020-01-08 07:07:59 -05:00
|
|
|
import { mount, shallowMount } from '@vue/test-utils';
|
2020-08-11 14:10:06 -04:00
|
|
|
import { GlButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui';
|
2019-12-09 07:07:58 -05:00
|
|
|
import { TEST_HOST } from 'helpers/test_constants';
|
2020-05-28 14:08:37 -04:00
|
|
|
import MetricsSettings from '~/operation_settings/components/metrics_settings.vue';
|
2020-06-11 23:08:22 -04:00
|
|
|
|
2020-05-28 14:08:37 -04:00
|
|
|
import ExternalDashboard from '~/operation_settings/components/form_group/external_dashboard.vue';
|
2020-06-11 23:08:22 -04:00
|
|
|
import DashboardTimezone from '~/operation_settings/components/form_group/dashboard_timezone.vue';
|
|
|
|
import { timezones } from '~/monitoring/format_date';
|
2019-06-04 13:55:52 -04:00
|
|
|
import store from '~/operation_settings/store';
|
|
|
|
import axios from '~/lib/utils/axios_utils';
|
|
|
|
import { refreshCurrentPage } from '~/lib/utils/url_utility';
|
2020-08-20 05:09:55 -04:00
|
|
|
import { deprecatedCreateFlash as createFlash } from '~/flash';
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
jest.mock('~/lib/utils/url_utility');
|
|
|
|
jest.mock('~/flash');
|
|
|
|
|
2019-05-07 10:47:09 -04:00
|
|
|
describe('operation settings external dashboard component', () => {
|
|
|
|
let wrapper;
|
2020-05-28 14:08:37 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`;
|
2020-05-28 14:08:37 -04:00
|
|
|
const helpPage = `${TEST_HOST}/help/metrics/page/path`;
|
2019-06-04 13:55:52 -04:00
|
|
|
const externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`;
|
2020-06-11 23:08:22 -04:00
|
|
|
const dashboardTimezoneSetting = timezones.LOCAL;
|
2020-05-28 14:08:37 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
const mountComponent = (shallow = true) => {
|
|
|
|
const config = [
|
2020-05-28 14:08:37 -04:00
|
|
|
MetricsSettings,
|
2019-06-04 13:55:52 -04:00
|
|
|
{
|
|
|
|
store: store({
|
|
|
|
operationsSettingsEndpoint,
|
2020-05-28 14:08:37 -04:00
|
|
|
helpPage,
|
2019-06-04 13:55:52 -04:00
|
|
|
externalDashboardUrl,
|
2020-06-11 23:08:22 -04:00
|
|
|
dashboardTimezoneSetting,
|
2019-06-04 13:55:52 -04:00
|
|
|
}),
|
2020-05-28 14:08:37 -04:00
|
|
|
stubs: {
|
|
|
|
ExternalDashboard,
|
2020-06-11 23:08:22 -04:00
|
|
|
DashboardTimezone,
|
2020-05-28 14:08:37 -04:00
|
|
|
},
|
2019-05-07 10:47:09 -04:00
|
|
|
},
|
2019-06-04 13:55:52 -04:00
|
|
|
];
|
|
|
|
wrapper = shallow ? shallowMount(...config) : mount(...config);
|
|
|
|
};
|
|
|
|
|
2019-07-17 13:47:39 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
jest.spyOn(axios, 'patch').mockImplementation();
|
|
|
|
});
|
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
afterEach(() => {
|
|
|
|
if (wrapper.destroy) {
|
|
|
|
wrapper.destroy();
|
|
|
|
}
|
|
|
|
axios.patch.mockReset();
|
|
|
|
refreshCurrentPage.mockReset();
|
|
|
|
createFlash.mockReset();
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders header text', () => {
|
2019-06-04 13:55:52 -04:00
|
|
|
mountComponent();
|
2020-07-21 23:09:40 -04:00
|
|
|
expect(wrapper.find('.js-section-header').text()).toBe('Metrics dashboard');
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
|
2019-06-04 02:09:06 -04:00
|
|
|
describe('expand/collapse button', () => {
|
|
|
|
it('renders as an expand button by default', () => {
|
2020-08-11 14:10:06 -04:00
|
|
|
const button = wrapper.find(GlButton);
|
2019-06-04 02:09:06 -04:00
|
|
|
|
|
|
|
expect(button.text()).toBe('Expand');
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2019-05-07 10:47:09 -04:00
|
|
|
describe('sub-header', () => {
|
|
|
|
let subHeader;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
2019-06-04 13:55:52 -04:00
|
|
|
mountComponent();
|
2019-05-07 10:47:09 -04:00
|
|
|
subHeader = wrapper.find('.js-section-sub-header');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('renders descriptive text', () => {
|
2020-05-28 14:08:37 -04:00
|
|
|
expect(subHeader.text()).toContain('Manage Metrics Dashboard settings.');
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
|
|
|
|
it('renders help page link', () => {
|
|
|
|
const link = subHeader.find(GlLink);
|
|
|
|
|
|
|
|
expect(link.text()).toBe('Learn more');
|
2020-05-28 14:08:37 -04:00
|
|
|
expect(link.attributes().href).toBe(helpPage);
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('form', () => {
|
2020-06-11 23:08:22 -04:00
|
|
|
describe('dashboard timezone', () => {
|
|
|
|
describe('field label', () => {
|
|
|
|
let formGroup;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent(false);
|
|
|
|
formGroup = wrapper.find(DashboardTimezone).find(GlFormGroup);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('uses label text', () => {
|
|
|
|
expect(formGroup.find('label').text()).toBe('Dashboard timezone');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('uses description text', () => {
|
|
|
|
const description = formGroup.find('small');
|
|
|
|
expect(description.text()).not.toBeFalsy();
|
|
|
|
});
|
2019-06-04 13:55:52 -04:00
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
describe('select field', () => {
|
|
|
|
let select;
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent();
|
|
|
|
select = wrapper.find(DashboardTimezone).find(GlFormSelect);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('defaults to externalDashboardUrl', () => {
|
|
|
|
expect(select.attributes('value')).toBe(dashboardTimezoneSetting);
|
|
|
|
});
|
2019-06-04 13:55:52 -04:00
|
|
|
});
|
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
describe('external dashboard', () => {
|
|
|
|
describe('input label', () => {
|
|
|
|
let formGroup;
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent(false);
|
|
|
|
formGroup = wrapper.find(ExternalDashboard).find(GlFormGroup);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('uses label text', () => {
|
|
|
|
expect(formGroup.find('label').text()).toBe('External dashboard URL');
|
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
it('uses description text', () => {
|
|
|
|
const description = formGroup.find('small');
|
2020-06-15 20:08:33 -04:00
|
|
|
expect(description.text()).not.toBeFalsy();
|
2020-06-11 23:08:22 -04:00
|
|
|
});
|
2019-06-04 13:55:52 -04:00
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2020-06-11 23:08:22 -04:00
|
|
|
describe('input field', () => {
|
|
|
|
let input;
|
|
|
|
|
|
|
|
beforeEach(() => {
|
|
|
|
mountComponent();
|
|
|
|
input = wrapper.find(ExternalDashboard).find(GlFormInput);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('defaults to externalDashboardUrl', () => {
|
|
|
|
expect(input.attributes().value).toBeTruthy();
|
|
|
|
expect(input.attributes().value).toBe(externalDashboardUrl);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('uses a placeholder', () => {
|
|
|
|
expect(input.attributes().placeholder).toBe('https://my-org.gitlab.io/my-dashboards');
|
|
|
|
});
|
2019-06-04 13:55:52 -04:00
|
|
|
});
|
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
describe('submit button', () => {
|
2020-08-11 14:10:06 -04:00
|
|
|
const findSubmitButton = () => wrapper.find('.settings-content form').find(GlButton);
|
2019-06-04 16:07:36 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
const endpointRequest = [
|
|
|
|
operationsSettingsEndpoint,
|
|
|
|
{
|
|
|
|
project: {
|
|
|
|
metrics_setting_attributes: {
|
2020-06-11 23:08:22 -04:00
|
|
|
dashboard_timezone: dashboardTimezoneSetting,
|
2019-06-04 13:55:52 -04:00
|
|
|
external_dashboard_url: externalDashboardUrl,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
it('renders button label', () => {
|
|
|
|
mountComponent();
|
2019-06-04 16:07:36 -04:00
|
|
|
const submit = findSubmitButton();
|
2019-06-04 13:55:52 -04:00
|
|
|
expect(submit.text()).toBe('Save Changes');
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
it('submits form on click', () => {
|
|
|
|
mountComponent(false);
|
|
|
|
axios.patch.mockResolvedValue();
|
2019-06-04 16:07:36 -04:00
|
|
|
findSubmitButton().trigger('click');
|
2019-06-04 13:55:52 -04:00
|
|
|
|
|
|
|
expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
return wrapper.vm.$nextTick().then(() => expect(refreshCurrentPage).toHaveBeenCalled());
|
|
|
|
});
|
2019-05-07 10:47:09 -04:00
|
|
|
|
2019-06-04 13:55:52 -04:00
|
|
|
it('creates flash banner on error', () => {
|
|
|
|
mountComponent(false);
|
|
|
|
const message = 'mockErrorMessage';
|
|
|
|
axios.patch.mockRejectedValue({ response: { data: { message } } });
|
2019-06-04 16:07:36 -04:00
|
|
|
findSubmitButton().trigger('click');
|
2019-06-04 13:55:52 -04:00
|
|
|
|
|
|
|
expect(axios.patch).toHaveBeenCalledWith(...endpointRequest);
|
|
|
|
|
|
|
|
return wrapper.vm
|
|
|
|
.$nextTick()
|
|
|
|
.then(jest.runAllTicks)
|
|
|
|
.then(() =>
|
|
|
|
expect(createFlash).toHaveBeenCalledWith(
|
|
|
|
`There was an error saving your changes. ${message}`,
|
|
|
|
'alert',
|
|
|
|
),
|
|
|
|
);
|
2019-05-07 10:47:09 -04:00
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|