Add latest changes from gitlab-org/gitlab@master

2 files changed, 56 insertions, 19 deletions

diff --git a/spec/frontend/webhooks/components/form_url_app_spec.js b/spec/frontend/webhooks/components/form_url_app_spec.js
index 16e0a3f549e..76812097748 100644
--- a/spec/frontend/webhooks/components/form_url_app_spec.js
+++ b/spec/frontend/webhooks/components/form_url_app_spec.js
@@ -60,8 +60,10 @@ describe('FormUrlApp', () => {
         expect(findAllUrlMaskItems()).toHaveLength(1);
 
         const firstItem = findAllUrlMaskItems().at(0);
-        expect(firstItem.props('itemKey')).toBeNull();
-        expect(firstItem.props('itemValue')).toBeNull();
+        expect(firstItem.props()).toMatchObject({
+          itemKey: null,
+          itemValue: null,
+        });
       });
     });
 
@@ -90,12 +92,18 @@ describe('FormUrlApp', () => {
         expect(findAllUrlMaskItems()).toHaveLength(2);
 
         const firstItem = findAllUrlMaskItems().at(0);
-        expect(firstItem.props('itemKey')).toBe(mockItem1.key);
-        expect(firstItem.props('itemValue')).toBe(mockItem1.value);
+        expect(firstItem.props()).toMatchObject({
+          itemKey: mockItem1.key,
+          itemValue: mockItem1.value,
+          isEditing: true,
+        });
 
         const secondItem = findAllUrlMaskItems().at(1);
-        expect(secondItem.props('itemKey')).toBe(mockItem2.key);
-        expect(secondItem.props('itemValue')).toBe(mockItem2.value);
+        expect(secondItem.props()).toMatchObject({
+          itemKey: mockItem2.key,
+          itemValue: mockItem2.value,
+          isEditing: true,
+        });
       });
 
       describe('on mask item input', () => {
@@ -106,8 +114,10 @@ describe('FormUrlApp', () => {
           firstItem.vm.$emit('input', mockInput);
           await nextTick();
 
-          expect(firstItem.props('itemKey')).toBe(mockInput.key);
-          expect(firstItem.props('itemValue')).toBe(mockInput.value);
+          expect(firstItem.props()).toMatchObject({
+            itemKey: mockInput.key,
+            itemValue: mockInput.value,
+          });
         });
       });
 
@@ -119,8 +129,10 @@ describe('FormUrlApp', () => {
           expect(findAllUrlMaskItems()).toHaveLength(3);
 
           const lastItem = findAllUrlMaskItems().at(-1);
-          expect(lastItem.props('itemKey')).toBeNull();
-          expect(lastItem.props('itemValue')).toBeNull();
+          expect(lastItem.props()).toMatchObject({
+            itemKey: null,
+            itemValue: null,
+          });
         });
       });
 
@@ -133,8 +145,10 @@ describe('FormUrlApp', () => {
           expect(findAllUrlMaskItems()).toHaveLength(1);
 
           const newFirstItem = findAllUrlMaskItems().at(0);
-          expect(newFirstItem.props('itemKey')).toBe(mockItem2.key);
-          expect(newFirstItem.props('itemValue')).toBe(mockItem2.value);
+          expect(newFirstItem.props()).toMatchObject({
+            itemKey: mockItem2.key,
+            itemValue: mockItem2.value,
+          });
         });
       });
     });
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 ab028ef2997..a6323928d22 100644
--- a/spec/frontend/webhooks/components/form_url_mask_item_spec.js
+++ b/spec/frontend/webhooks/components/form_url_mask_item_spec.js
@@ -31,19 +31,42 @@ describe('FormUrlMaskItem', () => {
 
   describe('template', () => {
     it('renders input for key and value', () => {
-      createComponent();
+      createComponent({ props: { itemKey: mockKey, itemValue: mockValue } });
 
       const keyInput = findMaskItemKey();
       expect(keyInput.attributes('label')).toBe(FormUrlMaskItem.i18n.keyLabel);
-      expect(keyInput.findComponent(GlFormInput).attributes('name')).toBe(
-        'hook[url_variables][][key]',
-      );
+      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.findComponent(GlFormInput).attributes('name')).toBe(
-        'hook[url_variables][][value]',
-      );
+      expect(valueInput.findComponent(GlFormInput).attributes()).toMatchObject({
+        name: 'hook[url_variables][][value]',
+        value: mockValue,
+      });
+    });
+
+    describe('when isEditing is true', () => {
+      beforeEach(() => {
+        createComponent({ props: { isEditing: true } });
+      });
+
+      it('renders disabled key and value', () => {
+        expect(findMaskItemKey().findComponent(GlFormInput).attributes('disabled')).toBe('true');
+        expect(findMaskItemValue().findComponent(GlFormInput).attributes('disabled')).toBe('true');
+      });
+
+      it('renders disabled remove button', () => {
+        expect(findRemoveButton().attributes('disabled')).toBe('true');
+      });
+
+      it('displays ************ as input value', () => {
+        expect(findMaskItemValue().findComponent(GlFormInput).attributes('value')).toBe(
+          '************',
+        );
+      });
     });
 
     describe('on key input', () => {