Add specs for edit modal behaviour

ee/app/assets/javascripts/issues/show/components/incidents/metrics_image.vue

@@ -179,6 +179,7 @@ export default {
       :action-primary="updateActionPrimaryProps"
       :action-cancel="{ text: $options.i18n.modalCancel }"
       :visible="editModalVisible"
+      data-testid="metric-image-edit-modal"
       @hidden="resetEditFields"
       @primary.prevent="onUpdate"
     >
@@ -191,7 +192,11 @@ export default {
       </template>
 
       <gl-form-group :label="__('Text (optional)')" label-for="upload-text-input">
-        <gl-form-input id="upload-text-input" v-model="modalUrlText" />
+        <gl-form-input
+          id="upload-text-input"
+          v-model="modalUrlText"
+          data-testid="metric-image-text-field"
+        />
       </gl-form-group>
 
       <gl-form-group
@@ -199,7 +204,11 @@ export default {
         label-for="upload-url-input"
         :description="s__('Incidents|Must start with http or https')"
       >
-        <gl-form-input id="upload-url-input" v-model="modalUrl" />
+        <gl-form-input
+          id="upload-url-input"
+          v-model="modalUrl"
+          data-testid="metric-image-url-field"
+        />
       </gl-form-group>
     </gl-modal>
 

ee/spec/frontend/issues/show/components/incidents/__snapshots__/metrics_image_spec.js.snap

@@ -26,6 +26,7 @@ exports[`Metrics upload item render the metrics image component 1`] = `
   <gl-modal-stub
     actioncancel="[object Object]"
     actionprimary="[object Object]"
+    data-testid="metric-image-edit-modal"
     dismisslabel="Close"
     modalclass=""
     modalid="edit-metric-modal"
@@ -40,6 +41,7 @@ exports[`Metrics upload item render the metrics image component 1`] = `
       optionaltext="(optional)"
     >
       <gl-form-input-stub
+        data-testid="metric-image-text-field"
         id="upload-text-input"
       />
     </gl-form-group-stub>
@@ -52,6 +54,7 @@ exports[`Metrics upload item render the metrics image component 1`] = `
       optionaltext="(optional)"
     >
       <gl-form-input-stub
+        data-testid="metric-image-url-field"
         id="upload-url-input"
       />
     </gl-form-group-stub>

ee/spec/frontend/issues/show/components/incidents/metrics_image_spec.js

@@ -51,11 +51,18 @@ describe('Metrics upload item', () => {
   const findCollapseButton = () => wrapper.find('[data-testid="collapse-button"]');
   const findMetricImageBody = () => wrapper.find('[data-testid="metric-image-body"]');
   const findModal = () => wrapper.findComponent(GlModal);
+  const findEditModal = () => wrapper.find('[data-testid="metric-image-edit-modal"]');
   const findDeleteButton = () => wrapper.find('[data-testid="delete-button"]');
+  const findEditButton = () => wrapper.find('[data-testid="edit-button"]');
+  const findImageTextInput = () => wrapper.find('[data-testid="metric-image-text-field"]');
+  const findImageUrlInput = () => wrapper.find('[data-testid="metric-image-url-field"]');
 
   const closeModal = () => findModal().vm.$emit('hidden');
   const submitModal = () => findModal().vm.$emit('primary', mockEvent);
   const deleteImage = () => findDeleteButton().vm.$emit('click');
+  const closeEditModal = () => findEditModal().vm.$emit('hidden');
+  const submitEditModal = () => findEditModal().vm.$emit('primary', mockEvent);
+  const editImage = () => findEditButton().vm.$emit('click');
 
   it('render the metrics image component', () => {
     mountComponent({}, shallowMount);
@@ -106,7 +113,7 @@ describe('Metrics upload item', () => {
   });
 
   describe('delete functionality', () => {
-    it('should open the modal when clicked', async () => {
+    it('should open the delete modal when clicked', async () => {
       mountComponent({ stubs: { GlModal: true } });
 
       deleteImage();
@@ -155,4 +162,69 @@ describe('Metrics upload item', () => {
       });
     });
   });
+
+  describe('edit functionality', () => {
+    it('should open the delete modal when clicked', async () => {
+      mountComponent({ stubs: { GlModal: true } });
+
+      editImage();
+
+      await waitForPromises();
+
+      expect(findEditModal().attributes('visible')).toBe('true');
+    });
+
+    describe('when the modal is open', () => {
+      beforeEach(() => {
+        mountComponent({
+          data() {
+            return { editModalVisible: true };
+          },
+          propsData: { urlText: 'test' },
+          stubs: { GlModal: true },
+        });
+      });
+
+      it('should close the modal when cancelled', async () => {
+        closeEditModal();
+
+        await waitForPromises();
+
+        expect(findEditModal().attributes('visible')).toBeFalsy();
+      });
+
+      it('should delete the image when selected', async () => {
+        const dispatchSpy = jest.spyOn(store, 'dispatch').mockImplementation(jest.fn());
+
+        submitEditModal();
+
+        await waitForPromises();
+
+        expect(dispatchSpy).toHaveBeenCalledWith('updateImage', {
+          imageId: defaultProps.id,
+          url: null,
+          urlText: 'test',
+        });
+      });
+
+      it('should clear edits when the modal is closed', async () => {
+        await findImageTextInput().setValue('test value');
+        await findImageUrlInput().setValue('http://www.gitlab.com');
+
+        expect(findImageTextInput().element.value).toBe('test value');
+        expect(findImageUrlInput().element.value).toBe('http://www.gitlab.com');
+
+        closeEditModal();
+
+        await waitForPromises();
+
+        editImage();
+
+        await waitForPromises();
+
+        expect(findImageTextInput().element.value).toBe('test');
+        expect(findImageUrlInput().element.value).toBe('');
+      });
+    });
+  });
 });