Add latest changes from gitlab-org/gitlab@master

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);
+    });
+  });
+});