Add latest changes from gitlab-org/gitlab@master

2 files changed, 120 insertions, 7 deletions

diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js
index 76812097748..93f468af1e3 100644
--- a/spec/frontend/webhooks/components/form_url_app_spec.js
+++ b/spec/frontend/webhooks/components/form_url_app_spec.js
@@ -1,10 +1,14 @@
 import { nextTick } from 'vue';
-import { GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+import { GlFormGroup, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+import { scrollToElement } from '~/lib/utils/common_utils';
 
 import FormUrlApp from '~/webhooks/components/form_url_app.vue';
 import FormUrlMaskItem from '~/webhooks/components/form_url_mask_item.vue';
 
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+
+jest.mock('~/lib/utils/common_utils');
 
 describe('FormUrlApp', () => {
   let wrapper;
@@ -26,8 +30,11 @@ describe('FormUrlApp', () => {
   const findAllUrlMaskItems = () => wrapper.findAllComponents(FormUrlMaskItem);
   const findAddItem = () => wrapper.findComponent(GlLink);
   const findFormUrl = () => wrapper.findByTestId('form-url');
+  const findFormUrlGroup = () => wrapper.findAllComponents(GlFormGroup).at(0);
   const findFormUrlPreview = () => wrapper.findByTestId('form-url-preview');
   const findUrlMaskSection = () => wrapper.findByTestId('url-mask-section');
+  const findFormEl = () => document.querySelector('.js-webhook-form');
+  const submitForm = () => findFormEl().dispatchEvent(new Event('submit'));
 
   describe('template', () => {
     it('renders radio buttons for URL masking', () => {
@@ -152,5 +159,82 @@ describe('FormUrlApp', () => {
         });
       });
     });
+
+    describe('validations', () => {
+      const inputRequiredText = FormUrlApp.i18n.inputRequired;
+
+      beforeEach(() => {
+        setHTMLFixture('<form class="js-webhook-form"></form>');
+      });
+
+      afterEach(() => {
+        resetHTMLFixture();
+      });
+
+      it.each`
+        url                       | state        | scrollToElementCalls
+        ${null}                   | ${undefined} | ${1}
+        ${''}                     | ${undefined} | ${1}
+        ${'https://example.com/'} | ${'true'}    | ${0}
+      `('when URL is `$url`, state is `$state`', async ({ url, state, scrollToElementCalls }) => {
+        createComponent({
+          props: { initialUrl: url },
+        });
+
+        submitForm();
+        await nextTick();
+
+        expect(findFormUrlGroup().attributes('state')).toBe(state);
+        expect(scrollToElement).toHaveBeenCalledTimes(scrollToElementCalls);
+        expect(findFormUrlGroup().attributes('invalid-feedback')).toBe(inputRequiredText);
+      });
+
+      it.each`
+        key      | value      | keyInvalidFeedback   | valueInvalidFeedback | scrollToElementCalls
+        ${null}  | ${null}    | ${inputRequiredText} | ${inputRequiredText} | ${1}
+        ${null}  | ${'value'} | ${inputRequiredText} | ${null}              | ${1}
+        ${'key'} | ${null}    | ${null}              | ${inputRequiredText} | ${1}
+        ${'key'} | ${'value'} | ${null}              | ${null}              | ${0}
+      `(
+        'when key is `$key` and value is `$value`',
+        async ({ key, value, keyInvalidFeedback, valueInvalidFeedback, scrollToElementCalls }) => {
+          createComponent({
+            props: { initialUrl: 'url' },
+          });
+          findRadioGroup().vm.$emit('input', true);
+          await nextTick();
+
+          const maskItem = findAllUrlMaskItems().at(0);
+          const mockInput = { index: 0, key, value };
+          maskItem.vm.$emit('input', mockInput);
+
+          submitForm();
+          await nextTick();
+
+          expect(maskItem.props('keyInvalidFeedback')).toBe(keyInvalidFeedback);
+          expect(maskItem.props('valueInvalidFeedback')).toBe(valueInvalidFeedback);
+          expect(scrollToElement).toHaveBeenCalledTimes(scrollToElementCalls);
+        },
+      );
+
+      describe('when initialUrlVariables is passed', () => {
+        it('does not validate empty values', async () => {
+          const initialUrlVariables = [{ key: 'key' }];
+
+          createComponent({
+            props: { initialUrl: 'url', initialUrlVariables },
+          });
+
+          submitForm();
+          await nextTick();
+
+          const maskItem = findAllUrlMaskItems().at(0);
+
+          expect(maskItem.props('keyInvalidFeedback')).toBeNull();
+          expect(maskItem.props('valueInvalidFeedback')).toBeNull();
+          expect(scrollToElement).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });
diff --git a/spec/frontend/webhooks/components/form_url_mask_item_spec.js b/spec/frontend/webhooks/components/form_url_mask_item_spec.js
index a6323928d22..06c743749a6 100644
--- a/spec/frontend/webhooks/components/form_url_mask_item_spec.js
+++ b/spec/frontend/webhooks/components/form_url_mask_item_spec.js
@@ -14,6 +14,7 @@ describe('FormUrlMaskItem', () => {
   const mockKey = 'key';
   const mockValue = 'value';
   const mockInput = 'input';
+  const mockFeedback = 'feedback';
 
   const createComponent = ({ props } = {}) => {
     wrapper = shallowMountExtended(FormUrlMaskItem, {
@@ -21,10 +22,6 @@ describe('FormUrlMaskItem', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findMaskItemKey = () => wrapper.findByTestId('mask-item-key');
   const findMaskItemValue = () => wrapper.findByTestId('mask-item-value');
   const findRemoveButton = () => wrapper.findComponent(GlButton);
@@ -34,14 +31,20 @@ describe('FormUrlMaskItem', () => {
       createComponent({ props: { itemKey: mockKey, itemValue: mockValue } });
 
       const keyInput = findMaskItemKey();
-      expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel);
+      expect(keyInput.attributes()).toMatchObject({
+        label: FormUrlMaskItem.i18n.keyLabel,
+        state: 'true',
+      });
       expect(keyInput.findComponent(GlFormInput).attributes()).toMatchObject({
         name: 'hook[url_variables][][key]',
         value: mockKey,
       });
 
       const valueInput = findMaskItemValue();
-      expect(valueInput.attributes('label')).toBe(FormUrlMaskItem.i18n.valueLabel);
+      expect(valueInput.attributes()).toMatchObject({
+        label: FormUrlMaskItem.i18n.valueLabel,
+        state: 'true',
+      });
       expect(valueInput.findComponent(GlFormInput).attributes()).toMatchObject({
         name: 'hook[url_variables][][value]',
         value: mockValue,
@@ -69,6 +72,32 @@ describe('FormUrlMaskItem', () => {
       });
     });
 
+    describe('when keyInvalidFeedback is passed', () => {
+      beforeEach(() => {
+        createComponent({
+          props: { keyInvalidFeedback: mockFeedback },
+        });
+      });
+
+      it('sets validation message on key', () => {
+        expect(findMaskItemKey().attributes('invalid-feedback')).toBe(mockFeedback);
+        expect(findMaskItemKey().attributes('state')).toBeUndefined();
+      });
+    });
+
+    describe('when valueInvalidFeedback is passed', () => {
+      beforeEach(() => {
+        createComponent({
+          props: { valueInvalidFeedback: mockFeedback },
+        });
+      });
+
+      it('sets validation message on value', () => {
+        expect(findMaskItemValue().attributes('invalid-feedback')).toBe(mockFeedback);
+        expect(findMaskItemValue().attributes('state')).toBeUndefined();
+      });
+    });
+
     describe('on key input', () => {
       beforeEach(async () => {
         createComponent({ props: { itemKey: mockKey, itemValue: mockValue } });