Add latest changes from gitlab-org/gitlab@master

3 files changed, 163 insertions, 32 deletions

diff --git a/spec/frontend/integrations/edit/components/integration_form_spec.js b/spec/frontend/integrations/edit/components/integration_form_spec.js
index 383dfb36aa5..2d74fe0a7d8 100644
--- a/spec/frontend/integrations/edit/components/integration_form_spec.js
+++ b/spec/frontend/integrations/edit/components/integration_form_spec.js
@@ -507,30 +507,21 @@ describe('IntegrationForm', () => {
       const dummyHelp = 'Foo Help';
 
       it.each`
-        integration                    | flagIsOn | helpHtml     | sections                   | shouldShowSections | shouldShowHelp
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${undefined} | ${[mockSectionConnection]} | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${false} | ${dummyHelp} | ${[mockSectionConnection]} | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${INTEGRATION_FORM_TYPE_SLACK} | ${true}  | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${true}
-        ${'foo'}                       | ${false} | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${'foo'}                       | ${false} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${'foo'}                       | ${false} | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${false} | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${true}  | ${''}        | ${[]}                      | ${false}           | ${false}
-        ${'foo'}                       | ${true}  | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
-        ${'foo'}                       | ${true}  | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
-        ${'foo'}                       | ${true}  | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
+        integration                    | helpHtml     | sections                   | shouldShowSections | shouldShowHelp
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${''}        | ${[]}                      | ${false}           | ${false}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
+        ${INTEGRATION_FORM_TYPE_SLACK} | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${true}
+        ${'foo'}                       | ${''}        | ${[]}                      | ${false}           | ${false}
+        ${'foo'}                       | ${dummyHelp} | ${[]}                      | ${false}           | ${true}
+        ${'foo'}                       | ${undefined} | ${[mockSectionConnection]} | ${true}            | ${false}
+        ${'foo'}                       | ${dummyHelp} | ${[mockSectionConnection]} | ${true}            | ${false}
       `(
-        '$sections sections, and "$helpHtml" helpHtml when the FF is "$flagIsOn" for "$integration" integration',
-        ({ integration, flagIsOn, helpHtml, sections, shouldShowSections, shouldShowHelp }) => {
+        '$sections sections, and "$helpHtml" helpHtml for "$integration" integration',
+        ({ integration, helpHtml, sections, shouldShowSections, shouldShowHelp }) => {
           createComponent({
             provide: {
               helpHtml,
-              glFeatures: { integrationSlackAppNotifications: flagIsOn },
             },
             customStateProps: {
               sections,
@@ -553,20 +544,15 @@ describe('IntegrationForm', () => {
       ${false}    | ${true}                  | ${'When having only the fields without a section'}
     `('$description', ({ hasSections, hasFieldsWithoutSections }) => {
       it.each`
-        prefix        | integration                    | shouldUpgradeSlack | flagIsOn | shouldShowAlert
-        ${'does'}     | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${true}  | ${true}
-        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${false}           | ${true}  | ${false}
-        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${false} | ${false}
-        ${'does not'} | ${'foo'}                       | ${true}            | ${true}  | ${false}
-        ${'does not'} | ${'foo'}                       | ${false}           | ${true}  | ${false}
-        ${'does not'} | ${'foo'}                       | ${true}            | ${false} | ${false}
+        prefix        | integration                    | shouldUpgradeSlack | shouldShowAlert
+        ${'does'}     | ${INTEGRATION_FORM_TYPE_SLACK} | ${true}            | ${true}
+        ${'does not'} | ${INTEGRATION_FORM_TYPE_SLACK} | ${false}           | ${false}
+        ${'does not'} | ${'foo'}                       | ${true}            | ${false}
+        ${'does not'} | ${'foo'}                       | ${false}           | ${false}
       `(
-        '$prefix render the upgrade warning when we are in "$integration" integration with the flag "$flagIsOn" and Slack-needs-upgrade is "$shouldUpgradeSlack" and have sections',
-        ({ integration, shouldUpgradeSlack, flagIsOn, shouldShowAlert }) => {
+        '$prefix render the upgrade warning when we are in "$integration" integration with Slack-needs-upgrade is "$shouldUpgradeSlack" and have sections',
+        ({ integration, shouldUpgradeSlack, shouldShowAlert }) => {
           createComponent({
-            provide: {
-              glFeatures: { integrationSlackAppNotifications: flagIsOn },
-            },
             customStateProps: {
               shouldUpgradeSlack,
               type: integration,
diff --git a/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js b/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js
new file mode 100644
index 00000000000..62f0439a13f
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/sections/apple_app_store_spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+
+import IntegrationSectionAppleAppStore from '~/integrations/edit/components/sections/apple_app_store.vue';
+import UploadDropzoneField from '~/integrations/edit/components/upload_dropzone_field.vue';
+import { createStore } from '~/integrations/edit/store';
+
+describe('IntegrationSectionAppleAppStore', () => {
+  let wrapper;
+
+  const createComponent = (componentFields) => {
+    const store = createStore({
+      customState: { ...componentFields },
+    });
+    wrapper = shallowMount(IntegrationSectionAppleAppStore, {
+      store,
+    });
+  };
+
+  const componentFields = (fileName = '') => {
+    return {
+      fields: [
+        {
+          name: 'app_store_private_key_file_name',
+          value: fileName,
+        },
+      ],
+    };
+  };
+
+  const findUploadDropzoneField = () => wrapper.findComponent(UploadDropzoneField);
+
+  describe('computed properties', () => {
+    it('renders UploadDropzoneField with default values', () => {
+      createComponent(componentFields());
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'The Apple App Store Connect Private Key (.p8)',
+        helpText: '',
+      });
+    });
+
+    it('renders UploadDropzoneField with custom values for an attached file', () => {
+      createComponent(componentFields('fileName.txt'));
+
+      const field = findUploadDropzoneField();
+
+      expect(field.exists()).toBe(true);
+      expect(field.props()).toMatchObject({
+        label: 'Upload a new Apple App Store Connect Private Key (replace fileName.txt)',
+        helpText: 'Leave empty to use your current Private Key.',
+      });
+    });
+  });
+});
diff --git a/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js b/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js
new file mode 100644
index 00000000000..36e20db0022
--- /dev/null
+++ b/spec/frontend/integrations/edit/components/upload_dropzone_field_spec.js
@@ -0,0 +1,88 @@
+import { mount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import { nextTick } from 'vue';
+
+import UploadDropzoneField from '~/integrations/edit/components/upload_dropzone_field.vue';
+import UploadDropzone from '~/vue_shared/components/upload_dropzone/upload_dropzone.vue';
+import { mockField } from '../mock_data';
+
+describe('UploadDropzoneField', () => {
+  let wrapper;
+
+  const contentsInputName = 'service[app_store_private_key]';
+  const fileNameInputName = 'service[app_store_private_key_file_name]';
+
+  const createComponent = (props) => {
+    wrapper = mount(UploadDropzoneField, {
+      propsData: {
+        ...mockField,
+        ...props,
+        name: contentsInputName,
+        label: 'Input Label',
+        fileInputName: fileNameInputName,
+      },
+    });
+  };
+
+  const findGlAlert = () => wrapper.findComponent(GlAlert);
+  const findUploadDropzone = () => wrapper.findComponent(UploadDropzone);
+  const findFileContentsHiddenInput = () => wrapper.find(`input[name="${contentsInputName}"]`);
+  const findFileNameHiddenInput = () => wrapper.find(`input[name="${fileNameInputName}"]`);
+
+  describe('template', () => {
+    it('adds the expected file inputFieldName', () => {
+      createComponent();
+
+      expect(findUploadDropzone().props('inputFieldName')).toBe('service[dropzone_file_name]');
+    });
+
+    it('adds a disabled, hidden text input for the file contents', () => {
+      createComponent();
+
+      expect(findFileContentsHiddenInput().attributes('name')).toBe(contentsInputName);
+      expect(findFileContentsHiddenInput().attributes('disabled')).toBeDefined();
+    });
+
+    it('adds a disabled, hidden text input for the file name', () => {
+      createComponent();
+
+      expect(findFileNameHiddenInput().attributes('name')).toBe(fileNameInputName);
+      expect(findFileNameHiddenInput().attributes('disabled')).toBeDefined();
+    });
+  });
+
+  describe('clearError', () => {
+    it('clears uploadError when called', async () => {
+      createComponent();
+
+      expect(findGlAlert().exists()).toBe(false);
+
+      findUploadDropzone().vm.$emit('error');
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(
+        'Error: You are trying to upload something other than an allowed file.',
+      );
+
+      findGlAlert().vm.$emit('dismiss');
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(false);
+    });
+  });
+
+  describe('onError', () => {
+    it('assigns uploadError to the supplied custom message', async () => {
+      const message = 'test error message';
+      createComponent({ errorMessage: message });
+
+      findUploadDropzone().vm.$emit('error');
+
+      await nextTick();
+
+      expect(findGlAlert().exists()).toBe(true);
+      expect(findGlAlert().text()).toBe(message);
+    });
+  });
+});