diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-13 12:09:29 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-07-13 12:09:29 +0300 |
commit | 778ea71394b9bc20b614f766fbb90ddd7ef0cfe9 (patch) | |
tree | eab01c4cbca68ea98ab86bf54a526aadaf2ab208 /spec/frontend/incidents_settings/components | |
parent | 69eacec239225fedaf27a177eee9a9070e0c68fb (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/incidents_settings/components')
4 files changed, 279 insertions, 0 deletions
diff --git a/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap new file mode 100644 index 00000000000..dd3589e2951 --- /dev/null +++ b/spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Alert integration settings form default state should match the default snapshot 1`] = ` +<div> + <p> + <gl-sprintf-stub + message="Action to take when receiving an alert. %{docsLink}" + /> + </p> + + <form> + <gl-form-group-stub + class="gl-pl-0" + > + <gl-form-checkbox-stub + checked="true" + data-qa-selector="create_issue_checkbox" + > + <span> + Create an issue. Issues are created for each alert triggered. + </span> + </gl-form-checkbox-stub> + </gl-form-group-stub> + + <gl-form-group-stub + class="col-8 col-md-9 gl-px-6" + label-for="alert-integration-settings-issue-template" + label-size="sm" + > + <label + class="gl-display-inline-flex" + for="alert-integration-settings-issue-template" + > + + Issue template (optional) + + <gl-link-stub + href="/help/user/project/description_templates#creating-issue-templates" + target="_blank" + > + <gl-icon-stub + name="question" + size="12" + /> + </gl-link-stub> + </label> + + <gl-new-dropdown-stub + block="true" + category="tertiary" + data-qa-selector="incident_templates_dropdown" + headertext="" + id="alert-integration-settings-issue-template" + size="medium" + text="selecte_tmpl" + variant="default" + > + <gl-new-dropdown-item-stub + avatarurl="" + data-qa-selector="incident_templates_item" + iconcolor="" + iconname="" + iconrightname="" + ischeckitem="true" + secondarytext="" + > + + No template selected + + </gl-new-dropdown-item-stub> + </gl-new-dropdown-stub> + </gl-form-group-stub> + + <gl-form-group-stub + class="gl-pl-0 gl-mb-5" + > + <gl-form-checkbox-stub> + <span> + Send a separate email notification to Developers. + </span> + </gl-form-checkbox-stub> + </gl-form-group-stub> + + <gl-button-stub + category="tertiary" + class="js-no-auto-disable" + data-qa-selector="save_changes_button" + icon="" + size="medium" + type="submit" + variant="success" + > + + Save changes + + </gl-button-stub> + </form> +</div> +`; diff --git a/spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap b/spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap new file mode 100644 index 00000000000..d5d927eb63e --- /dev/null +++ b/spec/frontend/incidents_settings/components/__snapshots__/incidents_settings_tabs_spec.js.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`IncidentsSettingTabs should render the component 1`] = ` +<section + class="settings no-animate qa-incident-management-settings" + data-qa-selector="incidents_settings_content" + id="incident-management-settings" +> + <div + class="settings-header" + > + <h3 + class="h4" + > + + Incidents + + </h3> + + <gl-button-stub + category="tertiary" + class="js-settings-toggle" + icon="" + size="medium" + variant="default" + > + Expand + </gl-button-stub> + + <p> + + Set up integrations with external tools to help better manage incidents. + + </p> + </div> + + <div + class="settings-content" + > + <gl-tabs-stub + theme="indigo" + > + <gl-tab-stub + title="Alert integration" + > + <alertssettingsform-stub + class="gl-pt-3" + data-testid="AlertsSettingsForm-tab" + /> + </gl-tab-stub> + <!----> + <!----> + </gl-tabs-stub> + </div> +</section> +`; diff --git a/spec/frontend/incidents_settings/components/alerts_form_spec.js b/spec/frontend/incidents_settings/components/alerts_form_spec.js new file mode 100644 index 00000000000..2a27347e40e --- /dev/null +++ b/spec/frontend/incidents_settings/components/alerts_form_spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; +import AlertsSettingsForm from '~/incidents_settings/components/alerts_form.vue'; +import { ERROR_MSG } from '~/incidents_settings/constants'; +import createFlash from '~/flash'; +import { refreshCurrentPage } from '~/lib/utils/url_utility'; +import waitForPromises from 'helpers/wait_for_promises'; + +jest.mock('~/flash'); +jest.mock('~/lib/utils/url_utility'); + +describe('Alert integration settings form', () => { + let wrapper; + + const findForm = () => wrapper.find({ ref: 'settingsForm' }); + + beforeEach(() => { + wrapper = shallowMount(AlertsSettingsForm, { + provide: { + operationsSettingsEndpoint: 'operations/endpoint', + alertSettings: { + issueTemplateKey: 'selecte_tmpl', + createIssue: true, + sendEmail: false, + templates: [], + }, + }, + }); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + describe('default state', () => { + it('should match the default snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + }); + + describe('form', () => { + let mock; + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + mock.restore(); + }); + + it('should refresh the page on successful submit', () => { + mock.onPatch().reply(200); + findForm().trigger('submit'); + return waitForPromises().then(() => { + expect(refreshCurrentPage).toHaveBeenCalled(); + }); + }); + + it('should display a flah message on unsuccessful submit', () => { + mock.onPatch().reply(400); + findForm().trigger('submit'); + return waitForPromises().then(() => { + expect(createFlash).toHaveBeenCalledWith(expect.stringContaining(ERROR_MSG), 'alert'); + }); + }); + }); +}); diff --git a/spec/frontend/incidents_settings/components/incidents_settings_tabs_spec.js b/spec/frontend/incidents_settings/components/incidents_settings_tabs_spec.js new file mode 100644 index 00000000000..c56b9ed2a69 --- /dev/null +++ b/spec/frontend/incidents_settings/components/incidents_settings_tabs_spec.js @@ -0,0 +1,53 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlTab } from '@gitlab/ui'; +import IncidentsSettingTabs from '~/incidents_settings/components/incidents_settings_tabs.vue'; + +describe('IncidentsSettingTabs', () => { + let wrapper; + + beforeEach(() => { + wrapper = shallowMount(IncidentsSettingTabs); + }); + + afterEach(() => { + if (wrapper) { + wrapper.destroy(); + } + }); + + const findToggleButton = () => wrapper.find({ ref: 'toggleBtn' }); + const findSectionHeader = () => wrapper.find({ ref: 'sectionHeader' }); + + const findIntegrationTabs = () => wrapper.findAll(GlTab); + it('renders header text', () => { + expect(findSectionHeader().text()).toBe('Incidents'); + }); + + describe('expand/collapse button', () => { + it('renders as an expand button by default', () => { + expect(findToggleButton().text()).toBe('Expand'); + }); + }); + + it('should render the component', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('should render the tab for each active integration', () => { + const activeTabs = wrapper.vm.$options.tabs.filter(tab => tab.active); + expect(findIntegrationTabs().length).toBe(activeTabs.length); + activeTabs.forEach((tab, index) => { + expect( + findIntegrationTabs() + .at(index) + .attributes('title'), + ).toBe(tab.title); + expect( + findIntegrationTabs() + .at(index) + .find(`[data-testid="${tab.component}-tab"]`) + .exists(), + ).toBe(true); + }); + }); +}); |