diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-06-18 14:18:50 +0300 |
commit | 8c7f4e9d5f36cff46365a7f8c4b9c21578c1e781 (patch) | |
tree | a77e7fe7a93de11213032ed4ab1f33a3db51b738 /spec/frontend/operation_settings/components/metrics_settings_spec.js | |
parent | 00b35af3db1abfe813a778f643dad221aad51fca (diff) |
Add latest changes from gitlab-org/gitlab@13-1-stable-ee
Diffstat (limited to 'spec/frontend/operation_settings/components/metrics_settings_spec.js')
-rw-r--r-- | spec/frontend/operation_settings/components/metrics_settings_spec.js | 214 |
1 files changed, 214 insertions, 0 deletions
diff --git a/spec/frontend/operation_settings/components/metrics_settings_spec.js b/spec/frontend/operation_settings/components/metrics_settings_spec.js new file mode 100644 index 00000000000..398b61ec693 --- /dev/null +++ b/spec/frontend/operation_settings/components/metrics_settings_spec.js @@ -0,0 +1,214 @@ +import { mount, shallowMount } from '@vue/test-utils'; +import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput, GlFormSelect } from '@gitlab/ui'; +import { TEST_HOST } from 'helpers/test_constants'; +import MetricsSettings from '~/operation_settings/components/metrics_settings.vue'; + +import ExternalDashboard from '~/operation_settings/components/form_group/external_dashboard.vue'; +import DashboardTimezone from '~/operation_settings/components/form_group/dashboard_timezone.vue'; +import { timezones } from '~/monitoring/format_date'; +import store from '~/operation_settings/store'; +import axios from '~/lib/utils/axios_utils'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; +import createFlash from '~/flash'; + +jest.mock('~/lib/utils/url_utility'); +jest.mock('~/flash'); + +describe('operation settings external dashboard component', () => { + let wrapper; + + const operationsSettingsEndpoint = `${TEST_HOST}/mock/ops/settings/endpoint`; + const helpPage = `${TEST_HOST}/help/metrics/page/path`; + const externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`; + const dashboardTimezoneSetting = timezones.LOCAL; + + const mountComponent = (shallow = true) => { + const config = [ + MetricsSettings, + { + store: store({ + operationsSettingsEndpoint, + helpPage, + externalDashboardUrl, + dashboardTimezoneSetting, + }), + stubs: { + ExternalDashboard, + DashboardTimezone, + }, + }, + ]; + wrapper = shallow ? shallowMount(...config) : mount(...config); + }; + + beforeEach(() => { + jest.spyOn(axios, 'patch').mockImplementation(); + }); + + afterEach(() => { + if (wrapper.destroy) { + wrapper.destroy(); + } + axios.patch.mockReset(); + refreshCurrentPage.mockReset(); + createFlash.mockReset(); + }); + + it('renders header text', () => { + mountComponent(); + expect(wrapper.find('.js-section-header').text()).toBe('Metrics Dashboard'); + }); + + describe('expand/collapse button', () => { + it('renders as an expand button by default', () => { + const button = wrapper.find(GlDeprecatedButton); + + expect(button.text()).toBe('Expand'); + }); + }); + + describe('sub-header', () => { + let subHeader; + + beforeEach(() => { + mountComponent(); + subHeader = wrapper.find('.js-section-sub-header'); + }); + + it('renders descriptive text', () => { + expect(subHeader.text()).toContain('Manage Metrics Dashboard settings.'); + }); + + it('renders help page link', () => { + const link = subHeader.find(GlLink); + + expect(link.text()).toBe('Learn more'); + expect(link.attributes().href).toBe(helpPage); + }); + }); + + describe('form', () => { + 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(); + }); + }); + + describe('select field', () => { + let select; + + beforeEach(() => { + mountComponent(); + select = wrapper.find(DashboardTimezone).find(GlFormSelect); + }); + + it('defaults to externalDashboardUrl', () => { + expect(select.attributes('value')).toBe(dashboardTimezoneSetting); + }); + }); + }); + + describe('external dashboard', () => { + describe('input label', () => { + let formGroup; + + beforeEach(() => { + mountComponent(false); + formGroup = wrapper.find(ExternalDashboard).find(GlFormGroup); + }); + + it('uses label text', () => { + expect(formGroup.find('label').text()).toBe('External dashboard URL'); + }); + + it('uses description text', () => { + const description = formGroup.find('small'); + expect(description.text()).not.toBeFalsy(); + }); + }); + + 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'); + }); + }); + }); + + describe('submit button', () => { + const findSubmitButton = () => + wrapper.find('.settings-content form').find(GlDeprecatedButton); + + const endpointRequest = [ + operationsSettingsEndpoint, + { + project: { + metrics_setting_attributes: { + dashboard_timezone: dashboardTimezoneSetting, + external_dashboard_url: externalDashboardUrl, + }, + }, + }, + ]; + + it('renders button label', () => { + mountComponent(); + const submit = findSubmitButton(); + expect(submit.text()).toBe('Save Changes'); + }); + + it('submits form on click', () => { + mountComponent(false); + axios.patch.mockResolvedValue(); + findSubmitButton().trigger('click'); + + expect(axios.patch).toHaveBeenCalledWith(...endpointRequest); + + return wrapper.vm.$nextTick().then(() => expect(refreshCurrentPage).toHaveBeenCalled()); + }); + + it('creates flash banner on error', () => { + mountComponent(false); + const message = 'mockErrorMessage'; + axios.patch.mockRejectedValue({ response: { data: { message } } }); + findSubmitButton().trigger('click'); + + 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', + ), + ); + }); + }); + }); +}); |