summaryrefslogtreecommitdiff
path: root/spec/frontend/operation_settings/components/external_dashboard_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/operation_settings/components/external_dashboard_spec.js')
-rw-r--r--spec/frontend/operation_settings/components/external_dashboard_spec.js168
1 files changed, 0 insertions, 168 deletions
diff --git a/spec/frontend/operation_settings/components/external_dashboard_spec.js b/spec/frontend/operation_settings/components/external_dashboard_spec.js
deleted file mode 100644
index 19214d1d954..00000000000
--- a/spec/frontend/operation_settings/components/external_dashboard_spec.js
+++ /dev/null
@@ -1,168 +0,0 @@
-import { mount, shallowMount } from '@vue/test-utils';
-import { GlDeprecatedButton, GlLink, GlFormGroup, GlFormInput } from '@gitlab/ui';
-import { TEST_HOST } from 'helpers/test_constants';
-import ExternalDashboard from '~/operation_settings/components/external_dashboard.vue';
-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 externalDashboardUrl = `http://mock-external-domain.com/external/dashboard/url`;
- const externalDashboardHelpPagePath = `${TEST_HOST}/help/page/path`;
- const mountComponent = (shallow = true) => {
- const config = [
- ExternalDashboard,
- {
- store: store({
- operationsSettingsEndpoint,
- externalDashboardUrl,
- externalDashboardHelpPagePath,
- }),
- },
- ];
- 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('External 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(
- 'Add a button to the metrics dashboard linking directly to your existing external dashboards.',
- );
- });
-
- it('renders help page link', () => {
- const link = subHeader.find(GlLink);
-
- expect(link.text()).toBe('Learn more');
- expect(link.attributes().href).toBe(externalDashboardHelpPagePath);
- });
- });
-
- describe('form', () => {
- describe('input label', () => {
- let formGroup;
-
- beforeEach(() => {
- mountComponent();
- formGroup = wrapper.find(GlFormGroup);
- });
-
- it('uses label text', () => {
- expect(formGroup.attributes().label).toBe('Full dashboard URL');
- });
-
- it('uses description text', () => {
- expect(formGroup.attributes().description).toBe(
- 'Enter the URL of the dashboard you want to link to',
- );
- });
- });
-
- describe('input field', () => {
- let input;
-
- beforeEach(() => {
- mountComponent();
- input = wrapper.find(GlFormInput);
- });
-
- it('defaults to externalDashboardUrl', () => {
- 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: {
- 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',
- ),
- );
- });
- });
- });
-});