Add missing specs.

app/assets/javascripts/issue_show/components/description.vue

 <script>
 import $ from 'jquery';
-import createFlash from '~/flash';
+import { __ } from '~/locale';
 import animateMixin from '../mixins/animate';
 import TaskList from '../../task_list';
 import recaptchaModalImplementor from '../../vue_shared/mixins/recaptcha_modal_implementor';
@@ -91,8 +91,10 @@ export default {
     },
 
     taskListUpdateError() {
-      createFlash(
-        'Someone edited this issue at the same time you did and we updated the issue description.',
+      window.Flash(
+        __(
+          'Someone edited this issue at the same time you did and we updated the issue description.',
+        ),
       );
 
       this.$emit('taskListUpdateFailed');

app/assets/javascripts/task_list.js

@@ -9,8 +9,9 @@ export default class TaskList {
     this.dataType = options.dataType;
     this.fieldName = options.fieldName;
     this.lockVersion = options.lockVersion;
-    this.onSuccess = options.onSuccess || (() => {});
     this.taskListContainerSelector = `${this.selector} .js-task-list-container`;
+    this.updateHandler = this.update.bind(this);
+    this.onSuccess = options.onSuccess || (() => {});
     this.onError =
       options.onError ||
       function showFlash(e) {
@@ -27,10 +28,10 @@ export default class TaskList {
   }
 
   init() {
-    // Prevent duplicate event bindings
-    this.disable();
+    this.disable(); // Prevent duplicate event bindings
+
     $(this.taskListContainerSelector).taskList('enable');
-    $(document).on('tasklist:changed', this.taskListContainerSelector, this.update.bind(this));
+    $(document).on('tasklist:changed', this.taskListContainerSelector, this.updateHandler);
   }
 
   getTaskListTarget(e = {}) {

locale/gitlab.pot

@@ -6527,6 +6527,9 @@ msgstr ""
 msgid "Snippets"
 msgstr ""
 
+msgid "Someone edited this issue at the same time you did and we updated the issue description."
+msgstr ""
+
 msgid "Something went wrong on our end"
 msgstr ""
 

spec/javascripts/issue_show/components/app_spec.js

@@ -469,5 +469,18 @@ describe('Issuable output', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('should show error message if store update fails', done => {
+      spyOn(vm.service, 'getData').and.returnValue(Promise.reject());
+      spyOn(window, 'Flash');
+      vm.issuableType = 'merge request';
+
+      vm.updateStoreState()
+        .then(() => {
+          expect(window.Flash).toHaveBeenCalledWith(`Error updating ${vm.issuableType}`);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 });

spec/javascripts/issue_show/components/description_spec.js

@@ -187,4 +187,18 @@ describe('Description component', () => {
   it('sets data-update-url', () => {
     expect(vm.$el.querySelector('textarea').dataset.updateUrl).toEqual(gl.TEST_HOST);
   });
+
+  describe('taskListUpdateError', () => {
+    it('should create flash notification and emit an event to parent', () => {
+      const msg =
+        'Someone edited this issue at the same time you did and we updated the issue description.';
+      spyOn(window, 'Flash');
+      spyOn(vm, '$emit');
+
+      vm.taskListUpdateError();
+
+      expect(window.Flash).toHaveBeenCalledWith(msg);
+      expect(vm.$emit).toHaveBeenCalledWith('taskListUpdateFailed');
+    });
+  });
 });

spec/javascripts/task_list_spec.js

+import $ from 'jquery';
+import TaskList from '~/task_list';
+import axios from '~/lib/utils/axios_utils';
+
+describe('TaskList', () => {
+  let taskList;
+  let currentTarget;
+  const taskListOptions = {
+    selector: '.task-list',
+    dataType: 'issue',
+    fieldName: 'description',
+    lockVersion: 2,
+  };
+  const createTaskList = () => new TaskList(taskListOptions);
+
+  beforeEach(() => {
+    setFixtures(`
+      <div class="task-list">
+        <div class="js-task-list-container"></div>
+      </div>
+    `);
+
+    currentTarget = $('<div></div>');
+    taskList = createTaskList();
+  });
+
+  it('should call init when the class constructed', () => {
+    spyOn(TaskList.prototype, 'init').and.callThrough();
+    spyOn(TaskList.prototype, 'disable');
+    spyOn($.prototype, 'taskList');
+    spyOn($.prototype, 'on');
+
+    taskList = createTaskList();
+    const $taskListEl = $(taskList.taskListContainerSelector);
+
+    expect(taskList.init).toHaveBeenCalled();
+    expect(taskList.disable).toHaveBeenCalled();
+    expect($taskListEl.taskList).toHaveBeenCalledWith('enable');
+    expect($(document).on).toHaveBeenCalledWith(
+      'tasklist:changed',
+      taskList.taskListContainerSelector,
+      taskList.updateHandler,
+    );
+  });
+
+  describe('getTaskListTarget', () => {
+    it('should return currentTarget from event object if exists', () => {
+      const $target = taskList.getTaskListTarget({ currentTarget });
+
+      expect($target).toEqual(currentTarget);
+    });
+
+    // it('should return element of the taskListContainerSelector', () => {
+    //   const $target = taskList.getTaskListTarget();
+
+    //   expect($target).toEqual($(taskList.taskListContainerSelector));
+    // });
+  });
+
+  describe('disableTaskListItems', () => {
+    it('should call taskList method with disable param', () => {
+      spyOn($.prototype, 'taskList');
+
+      taskList.disableTaskListItems({ currentTarget });
+
+      expect(currentTarget.taskList).toHaveBeenCalledWith('disable');
+    });
+  });
+
+  describe('enableTaskListItems', () => {
+    it('should call taskList method with enable param', () => {
+      spyOn($.prototype, 'taskList');
+
+      taskList.enableTaskListItems({ currentTarget });
+
+      expect(currentTarget.taskList).toHaveBeenCalledWith('enable');
+    });
+  });
+
+  describe('disable', () => {
+    it('should disable task list items and off document event', () => {
+      spyOn(taskList, 'disableTaskListItems');
+      spyOn($.prototype, 'off');
+
+      taskList.disable();
+
+      expect(taskList.disableTaskListItems).toHaveBeenCalled();
+      expect($(document).off).toHaveBeenCalledWith(
+        'tasklist:changed',
+        taskList.taskListContainerSelector,
+      );
+    });
+  });
+
+  describe('update', () => {
+    it('should disable task list items and make a patch request then enable them again', done => {
+      const response = { data: { lock_version: 3 } };
+      spyOn(taskList, 'enableTaskListItems');
+      spyOn(taskList, 'disableTaskListItems');
+      spyOn(taskList, 'onSuccess');
+      spyOn(axios, 'patch').and.returnValue(Promise.resolve(response));
+
+      const value = 'hello world';
+      const endpoint = '/foo';
+      const target = $(`<input data-update-url="${endpoint}" value="${value}" />`);
+      const detail = {
+        index: 2,
+        checked: true,
+        lineNumber: 8,
+        lineSource: '- [ ] check item',
+      };
+      const event = { target, detail };
+      const patchData = {
+        [taskListOptions.dataType]: {
+          [taskListOptions.fieldName]: value,
+          lock_version: taskListOptions.lockVersion,
+          update_task: {
+            index: detail.index,
+            checked: detail.checked,
+            line_number: detail.lineNumber,
+            line_source: detail.lineSource,
+          },
+        },
+      };
+
+      taskList
+        .update(event)
+        .then(() => {
+          expect(taskList.disableTaskListItems).toHaveBeenCalledWith(event);
+          expect(axios.patch).toHaveBeenCalledWith(endpoint, patchData);
+          expect(taskList.enableTaskListItems).toHaveBeenCalledWith(event);
+          expect(taskList.onSuccess).toHaveBeenCalledWith(response.data);
+          expect(taskList.lockVersion).toEqual(response.data.lock_version);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
+  it('should handle request error and enable task list items', done => {
+    const response = { data: { error: 1 } };
+    spyOn(taskList, 'enableTaskListItems');
+    spyOn(taskList, 'onError');
+    spyOn(axios, 'patch').and.returnValue(Promise.reject({ response })); // eslint-disable-line prefer-promise-reject-errors
+
+    const event = { detail: {} };
+    taskList
+      .update(event)
+      .then(() => {
+        expect(taskList.enableTaskListItems).toHaveBeenCalledWith(event);
+        expect(taskList.onError).toHaveBeenCalledWith(response.data);
+      })
+      .then(done)
+      .catch(done.fail);
+  });
+});