diff options
Diffstat (limited to 'spec/frontend')
3 files changed, 42 insertions, 49 deletions
diff --git a/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap b/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap index fa517ba935d..5800b160efe 100644 --- a/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap +++ b/spec/frontend/alert_settings/__snapshots__/alert_settings_form_spec.js.snap @@ -2,27 +2,27 @@ exports[`AlertsSettingsForm with default values renders the initial template 1`] = ` "<div> - <!----> <integrations-list-stub integrations=\\"[object Object],[object Object]\\"></integrations-list-stub> <gl-form-stub> - <h5 class=\\"gl-font-lg\\">Add new integrations</h5> - <gl-form-group-stub label-for=\\"integrations\\"> - <div data-testid=\\"alert-settings-description\\" class=\\"gl-mt-5\\"> - <p> - <gl-sprintf-stub message=\\"You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.\\"></gl-sprintf-stub> - </p> - <p> - <gl-sprintf-stub message=\\"Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.\\"></gl-sprintf-stub> - </p> - </div> - <gl-form-select-stub options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-200\\"><gl-sprintf-stub message=\\"Learn more about our %{linkStart}upcoming integrations%{linkEnd}\\"></gl-sprintf-stub></span> + <h5 class=\\"gl-font-lg gl-my-5\\">Add new integrations</h5> + <!----> + <div data-testid=\\"alert-settings-description\\"> + <p> + <gl-sprintf-stub message=\\"You must provide this URL and authorization key to authorize an external service to send alerts to GitLab. You can provide this URL and key to multiple services. After configuring an external service, alerts from your service will display on the GitLab %{linkStart}Alerts%{linkEnd} page.\\"></gl-sprintf-stub> + </p> + <p> + <gl-sprintf-stub message=\\"Review your external service's documentation to learn where to provide this information to your external service, and the %{linkStart}GitLab documentation%{linkEnd} to learn more about configuring your endpoint.\\"></gl-sprintf-stub> + </p> + </div> + <gl-form-group-stub label-for=\\"integration-type\\" label=\\"Integration\\"> + <gl-form-select-stub id=\\"integration-type\\" options=\\"[object Object],[object Object],[object Object]\\" data-testid=\\"alert-settings-select\\" value=\\"generic\\"></gl-form-select-stub> <span class=\\"gl-text-gray-500\\"><gl-sprintf-stub message=\\"Learn more about our improvements for %{linkStart}integrations%{linkEnd}\\"></gl-sprintf-stub></span> </gl-form-group-stub> <gl-form-group-stub label=\\"Active\\" label-for=\\"activated\\"> <toggle-button-stub id=\\"activated\\"></toggle-button-stub> </gl-form-group-stub> <!----> <gl-form-group-stub label=\\"Webhook URL\\" label-for=\\"url\\"> - <gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-200\\"> + <gl-form-input-group-stub value=\\"/alerts/notify.json\\" predefinedoptions=\\"[object Object]\\" id=\\"url\\" readonly=\\"\\"></gl-form-input-group-stub> <span class=\\"gl-text-gray-500\\"> </span> </gl-form-group-stub> diff --git a/spec/frontend/alert_settings/alert_settings_form_spec.js b/spec/frontend/alert_settings/alert_settings_form_spec.js index fc8988a807f..6e1ea31ed6a 100644 --- a/spec/frontend/alert_settings/alert_settings_form_spec.js +++ b/spec/frontend/alert_settings/alert_settings_form_spec.js @@ -1,10 +1,12 @@ -import axios from 'axios'; -import MockAdapter from 'axios-mock-adapter'; import { shallowMount } from '@vue/test-utils'; import { GlModal, GlAlert } from '@gitlab/ui'; import AlertsSettingsForm from '~/alerts_settings/components/alerts_settings_form.vue'; import IntegrationsList from '~/alerts_settings/components/alerts_integrations_list.vue'; import ToggleButton from '~/vue_shared/components/toggle_button.vue'; +import { i18n } from '~/alerts_settings/constants'; +import service from '~/alerts_settings/services'; + +jest.mock('~/alerts_settings/services'); const PROMETHEUS_URL = '/prometheus/alerts/notify.json'; const GENERIC_URL = '/alerts/notify.json'; @@ -14,7 +16,6 @@ const ACTIVATED = false; describe('AlertsSettingsForm', () => { let wrapper; - let mockAxios; const createComponent = ({ methods } = {}, data) => { wrapper = shallowMount(AlertsSettingsForm, { @@ -54,7 +55,6 @@ describe('AlertsSettingsForm', () => { const findApiUrl = () => wrapper.find('#api-url'); beforeEach(() => { - mockAxios = new MockAdapter(axios); setFixtures(` <div> <span class="js-service-active-status fa fa-circle" data-value="true"></span> @@ -64,7 +64,6 @@ describe('AlertsSettingsForm', () => { afterEach(() => { wrapper.destroy(); - mockAxios.restore(); }); describe('with default values', () => { @@ -105,8 +104,7 @@ describe('AlertsSettingsForm', () => { }); it('shows a alert message on error', () => { - const formPath = 'some/path'; - mockAxios.onPut(formPath).replyOnce(404); + service.updateGenericKey.mockRejectedValueOnce({}); createComponent(); @@ -128,8 +126,7 @@ describe('AlertsSettingsForm', () => { describe('error is encountered', () => { it('restores previous value', () => { - const formPath = 'some/path'; - mockAxios.onPut(formPath).replyOnce(500); + service.updateGenericKey.mockRejectedValueOnce({}); createComponent(); return wrapper.vm.resetKey().then(() => { expect(wrapper.find(ToggleButton).props('value')).toBe(false); @@ -199,18 +196,34 @@ describe('AlertsSettingsForm', () => { }); describe('alert service is toggled', () => { - it('should show a error alert if failed', () => { - const formPath = 'some/path'; + describe('error handling', () => { const toggleService = true; - mockAxios.onPut(formPath).replyOnce(422, { - errors: 'Error message to display', - }); - createComponent(); + it('should show generic error', async () => { + service.updateGenericActive.mockRejectedValueOnce({}); - return wrapper.vm.toggleActivated(toggleService).then(() => { + createComponent(); + + await wrapper.vm.toggleActivated(toggleService); expect(wrapper.vm.active).toBe(false); expect(wrapper.find(GlAlert).attributes('variant')).toBe('danger'); + expect(wrapper.find(GlAlert).text()).toBe(i18n.errorMsg); + }); + + it('should show first field specific error when available', async () => { + const err1 = "can't be blank"; + const err2 = 'is not a valid URL'; + const key = 'api_url'; + service.updateGenericActive.mockRejectedValueOnce({ + response: { data: { errors: { [key]: [err1, err2] } } }, + }); + + createComponent(); + + await wrapper.vm.toggleActivated(toggleService); + + expect(wrapper.find(GlAlert).text()).toContain(i18n.errorMsg); + expect(wrapper.find(GlAlert).text()).toContain(`${key} ${err1}`); }); }); }); diff --git a/spec/frontend/snippet/snippet_edit_spec.js b/spec/frontend/snippet/snippet_edit_spec.js deleted file mode 100644 index 0a07adb0e22..00000000000 --- a/spec/frontend/snippet/snippet_edit_spec.js +++ /dev/null @@ -1,20 +0,0 @@ -import '~/snippet/snippet_edit'; -import { triggerDOMEvent } from 'jest/helpers/dom_events_helper'; -import { SnippetEditInit } from '~/snippets'; - -jest.mock('~/snippets'); -jest.mock('~/gl_form'); - -describe('Snippet edit form initialization', () => { - beforeEach(() => { - setFixtures('<div class="snippet-form"></div>'); - }); - - it('correctly initializes Vue Snippet Edit form', () => { - SnippetEditInit.mockClear(); - - triggerDOMEvent('DOMContentLoaded'); - - expect(SnippetEditInit).toHaveBeenCalled(); - }); -}); |