Add latest changes from gitlab-org/gitlab@master

2 files changed, 177 insertions, 0 deletions

diff --git a/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap b/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap
new file mode 100644
index 00000000000..36ec0badade
--- /dev/null
+++ b/spec/frontend/alerts_service_settings/components/__snapshots__/alerts_service_form_spec.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertsServiceForm with default values renders "authorization-key" input 1`] = `"<gl-form-input-stub id=\\"authorization-key\\" readonly=\\"true\\" value=\\"abcedfg123\\"></gl-form-input-stub>"`;
+
+exports[`AlertsServiceForm with default values renders "url" input 1`] = `"<gl-form-input-stub id=\\"url\\" readonly=\\"true\\" value=\\"https://gitlab.com/endpoint-url\\"></gl-form-input-stub>"`;
+
+exports[`AlertsServiceForm with default values renders toggle button 1`] = `"<toggle-button-stub id=\\"activated\\"></toggle-button-stub>"`;
+
+exports[`AlertsServiceForm with default values shows description and "Learn More" link 1`] = `"Each alert source must be authorized using the following URL and authorization key. <a href=\\"https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Learn more</a> about configuring this endpoint to receive alerts."`;
diff --git a/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js b/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js
new file mode 100644
index 00000000000..b7a008c78d0
--- /dev/null
+++ b/spec/frontend/alerts_service_settings/components/alerts_service_form_spec.js
@@ -0,0 +1,168 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import AlertsServiceForm from '~/alerts_service_settings/components/alerts_service_form.vue';
+import ToggleButton from '~/vue_shared/components/toggle_button.vue';
+import createFlash from '~/flash';
+
+jest.mock('~/flash');
+
+const defaultProps = {
+  initialAuthorizationKey: 'abcedfg123',
+  formPath: 'http://invalid',
+  url: 'https://gitlab.com/endpoint-url',
+  learnMoreUrl: 'https://docs.gitlab.com/ee/user/project/integrations/generic_alerts.md',
+  initialActivated: false,
+};
+
+describe('AlertsServiceForm', () => {
+  let wrapper;
+  let mockAxios;
+
+  const createComponent = (props = defaultProps, { methods } = {}) => {
+    wrapper = shallowMount(AlertsServiceForm, {
+      propsData: {
+        ...defaultProps,
+        ...props,
+      },
+      methods,
+    });
+  };
+
+  const findUrl = () => wrapper.find('#url');
+  const findAuthorizationKey = () => wrapper.find('#authorization-key');
+  const findDescription = () => wrapper.find('p');
+  const findActiveStatusIcon = val =>
+    document.querySelector(`.js-service-active-status[data-value=${val.toString()}]`);
+
+  beforeEach(() => {
+    mockAxios = new MockAdapter(axios);
+    setFixtures(`
+    <div>
+      <span class="js-service-active-status fa fa-circle" data-value="true"></span>
+      <span class="js-service-active-status fa fa-power-off" data-value="false"></span>
+    </div>`);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    mockAxios.restore();
+  });
+
+  describe('with default values', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('renders "url" input', () => {
+      expect(findUrl().html()).toMatchSnapshot();
+    });
+
+    it('renders "authorization-key" input', () => {
+      expect(findAuthorizationKey().html()).toMatchSnapshot();
+    });
+
+    it('renders toggle button', () => {
+      expect(wrapper.find(ToggleButton).html()).toMatchSnapshot();
+    });
+
+    it('shows description and "Learn More" link', () => {
+      expect(findDescription().element.innerHTML).toMatchSnapshot();
+    });
+  });
+
+  describe('reset key', () => {
+    it('triggers resetKey method', () => {
+      const resetKey = jest.fn();
+      const methods = { resetKey };
+      createComponent(defaultProps, { methods });
+
+      wrapper.find(GlModal).vm.$emit('ok');
+
+      expect(resetKey).toHaveBeenCalled();
+    });
+
+    it('updates the authorization key on success', () => {
+      const formPath = 'some/path';
+      mockAxios.onPut(formPath, { service: { token: '' } }).replyOnce(200, { token: 'newToken' });
+
+      createComponent({ formPath });
+
+      return wrapper.vm.resetKey().then(() => {
+        expect(findAuthorizationKey().attributes('value')).toBe('newToken');
+      });
+    });
+
+    it('shows flash message on error', () => {
+      const formPath = 'some/path';
+      mockAxios.onPut(formPath).replyOnce(404);
+
+      createComponent({ formPath });
+
+      return wrapper.vm.resetKey().then(() => {
+        expect(findAuthorizationKey().attributes('value')).toBe(
+          defaultProps.initialAuthorizationKey,
+        );
+        expect(createFlash).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('activate toggle', () => {
+    it('triggers toggleActivated method', () => {
+      const toggleActivated = jest.fn();
+      const methods = { toggleActivated };
+      createComponent(defaultProps, { methods });
+
+      wrapper.find(ToggleButton).vm.$emit('change', true);
+
+      expect(toggleActivated).toHaveBeenCalled();
+    });
+
+    describe('successfully completes', () => {
+      describe.each`
+        initialActivated | value
+        ${false}         | ${true}
+        ${true}          | ${false}
+      `(
+        'when initialActivated=$initialActivated and value=$value',
+        ({ initialActivated, value }) => {
+          beforeEach(() => {
+            const formPath = 'some/path';
+            mockAxios
+              .onPut(formPath, { service: { active: value } })
+              .replyOnce(200, { active: value });
+            createComponent({ initialActivated, formPath });
+
+            return wrapper.vm.toggleActivated(value);
+          });
+
+          it(`updates toggle button value to ${value}`, () => {
+            expect(wrapper.find(ToggleButton).props('value')).toBe(value);
+          });
+
+          it('updates visible status icons', () => {
+            expect(findActiveStatusIcon(!value)).toHaveClass('d-none');
+            expect(findActiveStatusIcon(value)).not.toHaveClass('d-none');
+          });
+        },
+      );
+    });
+
+    describe('error is encountered', () => {
+      beforeEach(() => {
+        const formPath = 'some/path';
+        mockAxios.onPut(formPath).replyOnce(500);
+      });
+
+      it('restores previous value', () => {
+        createComponent({ initialActivated: false });
+
+        return wrapper.vm.toggleActivated(true).then(() => {
+          expect(wrapper.find(ToggleButton).props('value')).toBe(false);
+        });
+      });
+    });
+  });
+});