1 files changed, 65 insertions, 13 deletions

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..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,29 +22,80 @@ describe('FormUrlMaskItem', () => {
     });
   };
 
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
   const findMaskItemKey = () => wrapper.findByTestId('mask-item-key');
   const findMaskItemValue = () => wrapper.findByTestId('mask-item-value');
   const findRemoveButton = () => wrapper.findComponent(GlButton);
 
   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.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.findComponent(GlFormInput).attributes('name')).toBe(
-        'hook[url_variables][][value]',
-      );
+      expect(valueInput.attributes()).toMatchObject({
+        label: FormUrlMaskItem.i18n.valueLabel,
+        state: 'true',
+      });
+      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('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', () => {