Delete description diff in notes

- Frontend tests in ee/spec
- Fix linting error

app/assets/javascripts/notes/stores/actions.js

@@ -509,7 +509,6 @@ export const fetchDescriptionVersion = (_, { endpoint, startingVersion }) => {
 export const setCurrentDiscussionId = ({ commit }, discussionId) =>
   commit(types.SET_CURRENT_DISCUSSION_ID, discussionId);
 
-
 export const softDeleteDescriptionVersion = (_, { endpoint, startingVersion }) => {
   let requestUrl = endpoint;
 
@@ -520,8 +519,9 @@ export const softDeleteDescriptionVersion = (_, { endpoint, startingVersion }) =
   return axios
     .delete(requestUrl)
     .then(res => res.data)
-    .catch(() => {
+    .catch(e => {
       Flash(__('Something went wrong while deleting description changes. Please try again.'));
+      return Promise.reject(e);
     });
 };
 

app/assets/stylesheets/pages/notes.scss

@@ -318,7 +318,7 @@ $note-form-margin-left: 72px;
           top: 18px;
           right: 0;
         }
-        
+
         pre {
           max-height: $dropdown-max-height-lg;
           white-space: pre-wrap;

ee/spec/frontend/vue_shared/components/notes/system_note_spec.js

+import { mount } from '@vue/test-utils';
+import axios from '~/lib/utils/axios_utils';
+import MockAdapter from 'axios-mock-adapter';
+import IssueSystemNote from '~/vue_shared/components/notes/system_note.vue';
+import createStore from '~/notes/stores';
+import waitForPromises from 'helpers/wait_for_promises';
+
+describe('system note component', () => {
+  let wrapper;
+  let props;
+  let mock;
+
+  const diffData = '<span class="idiff">Description</span><span class="idiff addition">Diff</span>';
+
+  function mockFetchDiff() {
+    mock.onGet('/path/to/diff').replyOnce(200, diffData);
+  }
+
+  function mockDeleteDiff() {
+    mock.onDelete('/path/to/diff/1').replyOnce(200);
+  }
+
+  beforeEach(() => {
+    props = {
+      note: {
+        id: '1424',
+        author: {
+          id: 1,
+          name: 'Root',
+          username: 'root',
+          state: 'active',
+          avatar_url: 'path',
+          path: '/root',
+        },
+        note_html: '<p dir="auto">closed</p>',
+        system_note_icon_name: 'status_closed',
+        created_at: '2017-08-02T10:51:58.559Z',
+        description_version_id: 1,
+        description_diff_path: 'path/to/diff',
+        delete_description_version_path: 'path/to/diff/1',
+        can_delete_description_version: true,
+        description_version_deleted: false,
+      },
+    };
+
+    const store = createStore();
+    store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
+
+    mock = new MockAdapter(axios);
+
+    wrapper = mount(IssueSystemNote, {
+      store,
+      propsData: props,
+      provide: {
+        glFeatures: { saveDescriptionVersions: true, descriptionDiffs: true },
+      },
+    });
+  });
+
+  afterEach(() => {
+    mock.restore();
+    wrapper.destroy();
+  });
+
+  it('should display button to toggle description diff, description version does not display', () => {
+    const button = wrapper.find('.note-headline-light .btn-blank');
+    expect(button.exists()).toBe(true);
+    expect(button.text()).toContain('Compare with previous version');
+    expect(wrapper.find('.description-version').exists()).toBe(false);
+  });
+
+  it('click on button to toggle description diff displays description diff with delete icon button', done => {
+    mockFetchDiff();
+    expect(wrapper.find('.description-version').exists()).toBe(false);
+
+    const button = wrapper.find('.note-headline-light .btn-blank');
+    button.trigger('click');
+    return wrapper.vm
+      .$nextTick()
+      .then(() => waitForPromises())
+      .then(() => {
+        expect(wrapper.find('.description-version').exists()).toBe(true);
+        expect(wrapper.find('.description-version').html()).toContain(diffData);
+        expect(
+          wrapper
+            .find('.description-version button.delete-description-history svg.ic-remove')
+            .exists(),
+        ).toBe(true);
+        done();
+      });
+  });
+
+  it('click on delete icon button deletes description diff', done => {
+    mockFetchDiff();
+    mockDeleteDiff();
+    wrapper.find('.note-headline-light .btn-blank').trigger('click');
+    return wrapper.vm
+      .$nextTick()
+      .then(() => waitForPromises())
+      .then(() => {
+        const button = wrapper.find('.description-version button.delete-description-history');
+        button.trigger('click');
+      })
+      .then(() => waitForPromises())
+      .then(() => {
+        expect(wrapper.find('.description-version').text()).toContain('Deleted');
+        done();
+      });
+  });
+});

spec/frontend/vue_shared/components/notes/system_note_spec.js

-import Vue from 'vue';
 import { mount } from '@vue/test-utils';
-import axios from '~/lib/utils/axios_utils';
-import MockAdapter from 'axios-mock-adapter';
 import IssueSystemNote from '~/vue_shared/components/notes/system_note.vue';
 import createStore from '~/notes/stores';
 import initMRPopovers from '~/mr_popover/index';
@@ -11,7 +8,6 @@ jest.mock('~/mr_popover/index', () => jest.fn());
 describe('system note component', () => {
   let vm;
   let props;
-  let mock;
 
   beforeEach(() => {
     props = {
@@ -28,30 +24,19 @@ describe('system note component', () => {
         note_html: '<p dir="auto">closed</p>',
         system_note_icon_name: 'status_closed',
         created_at: '2017-08-02T10:51:58.559Z',
-        description_version_id: 1,
-        description_diff_path: 'path/to/diff',
-        delete_description_version_path: 'path/to/diff/1',
-        can_delete_description_version: true,
-        description_version_deleted: false,
       },
     };
 
     const store = createStore();
     store.dispatch('setTargetNoteHash', `note_${props.note.id}`);
 
-    mock = new MockAdapter(axios);
-
     vm = mount(IssueSystemNote, {
       store,
       propsData: props,
-      provide: {
-        glFeatures: { saveDescriptionVersions: true, descriptionDiffs: true },
-      },
     });
   });
 
   afterEach(() => {
-    mock.restore();
     vm.destroy();
   });
 
@@ -77,42 +62,4 @@ describe('system note component', () => {
   it('should initMRPopovers onMount', () => {
     expect(initMRPopovers).toHaveBeenCalled();
   });
-
-  it('should display button to toggle description diff, description version does not display', () => {
-    const button = vm.find('.note-headline-light .btn-blank');
-    expect(button).toExist();
-    expect(button.text()).toContain('Compare with previous version');
-    expect(vm.find('.description-version').exists()).toBe(false);
-  });
-
-  it('click on button to toggle description diff displays description diff with delete icon button', done => {
-    const diffData =
-      '<span class="idiff">Description</span><span class="idiff addition">Diff</span>';
-    mock.onGet(`/path/to/diff/1`).replyOnce(200, {
-      data: diffData,
-    });
-
-    const button = vm.find('.note-headline-light .btn-blank');
-    button.trigger('click');
-    Vue.nextTick(() => {
-      expect(vm.find('.description-version').exists()).toBe(true);
-      expect(vm.find('.description-version').html()).toContain(diffData);
-      expect(
-        vm.find('.description-version button.delete-description-history svg.s16').exists(),
-      ).toBe(true);
-
-      done();
-    });
-  });
-
-  it('click on delete icon button deletes description diff', done => {
-    vm.find('.note-headline-light .btn-blank').trigger('click');
-    Vue.nextTick(() => {
-      const button = vm.find('.description-version button.delete-description-history');
-      button.trigger('click');
-      expect(vm.find('.description-version').text()).toContain('Deleted');
-
-      done();
-    });
-  });
 });