Merge branch 'fix-epic-tasklist' into 'master'

Fix tasklist for epics

Closes #4021

See merge request gitlab-org/gitlab-ee!3435

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

@@ -16,6 +16,10 @@ export default {
       required: true,
       type: String,
     },
+    updateEndpoint: {
+      required: true,
+      type: String,
+    },
     canUpdate: {
       required: true,
       type: Boolean,
@@ -262,6 +266,8 @@ export default {
         :description-text="state.descriptionText"
         :updated-at="state.updatedAt"
         :task-status="state.taskStatus"
+        :issuable-type="issuableType"
+        :update-url="updateEndpoint"
       />
       <edited-component
         v-if="hasUpdated"

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

@@ -22,6 +22,16 @@
         required: false,
         default: '',
       },
+      issuableType: {
+        type: String,
+        required: false,
+        default: 'issue',
+      },
+      updateUrl: {
+        type: String,
+        required: false,
+        default: null,
+      },
     },
     data() {
       return {
@@ -48,7 +58,7 @@
         if (this.canUpdate) {
           // eslint-disable-next-line no-new
           new TaskList({
-            dataType: 'issue',
+            dataType: this.issuableType,
             fieldName: 'description',
             selector: '.detail-page-description',
           });
@@ -95,7 +105,9 @@
     <textarea
       class="hidden js-task-list-field"
       v-if="descriptionText"
-      v-model="descriptionText">
+      v-model="descriptionText"
+      :data-update-url="updateUrl"
+    >
     </textarea>
   </div>
 </template>

app/helpers/issuables_helper.rb

@@ -213,6 +213,7 @@ module IssuablesHelper
   def issuable_initial_data(issuable)
     data = {
       endpoint: issuable_path(issuable),
+      updateEndpoint: "#{issuable_path(issuable)}.json",
       canUpdate: can?(current_user, :"update_#{issuable.to_ability_name}", issuable),
       canDestroy: can?(current_user, :"destroy_#{issuable.to_ability_name}", issuable),
       canAdmin: can?(current_user, :"admin_#{issuable.to_ability_name}", issuable),

changelogs/unreleased-ee/fix-epic-tasklist.yml

+---
+title: Fix tasklist for epics
+merge_request:
+author:
+type: fixed

ee/app/assets/javascripts/epics/epic_show/components/epic_show_app.vue

@@ -12,6 +12,10 @@
         type: String,
         required: true,
       },
+      updateEndpoint: {
+        type: String,
+        required: true,
+      },
       canUpdate: {
         required: true,
         type: Boolean,
@@ -111,7 +115,9 @@
           :can-update="canUpdate"
           :can-destroy="canDestroy"
           :endpoint="endpoint"
+          :update-endpoint="updateEndpoint"
           :issuable-ref="issuableRef"
+          issuable-type="epic"
           :initial-title-html="initialTitleHtml"
           :initial-title-text="initialTitleText"
           :initial-description-html="initialDescriptionHtml"

spec/ee/spec/features/epics/update_epic_spec.rb

@@ -3,7 +3,16 @@ require 'spec_helper'
 feature 'Update Epic', :js do
   let(:user) { create(:user) }
   let(:group) { create(:group, :public) }
-  let(:epic) { create(:epic, group: group) }
+
+  let(:markdown) do
+    <<-MARKDOWN.strip_heredoc
+    This is a task list:
+
+    - [ ] Incomplete entry 1
+    MARKDOWN
+  end
+
+  let(:epic) { create(:epic, group: group, description: markdown) }
 
   before do
     stub_licensed_features(epics: true)
@@ -51,6 +60,16 @@ feature 'Update Epic', :js do
       expect(page).not_to have_selector('.uploading-container .button-attach-file')
     end
 
+    it 'updates the tasklist' do
+      expect(page).to have_selector('ul.task-list',      count: 1)
+      expect(page).to have_selector('li.task-list-item', count: 1)
+      expect(page).to have_selector('ul input[checked]', count: 0)
+
+      find('.task-list .task-list-item', text: 'Incomplete entry 1').find('input').click
+
+      expect(page).to have_selector('ul input[checked]', count: 1)
+    end
+
     # Autocomplete is disabled for epics until #4084 is resolved
     describe 'autocomplete disabled' do
       it 'does not open atwho container' do

spec/helpers/issuables_helper_spec.rb

@@ -174,6 +174,7 @@ describe IssuablesHelper do
 
       expected_data = {
         'endpoint' => "/#{@project.full_path}/issues/#{issue.iid}",
+        'updateEndpoint' => "/#{@project.full_path}/issues/#{issue.iid}.json",
         'canUpdate' => true,
         'canDestroy' => true,
         'canAdmin' => true,
@@ -198,6 +199,7 @@ describe IssuablesHelper do
 
       expected_data = {
         'endpoint' => "/groups/#{@group.full_path}/-/epics/#{epic.iid}",
+        'updateEndpoint' => "/groups/#{@group.full_path}/-/epics/#{epic.iid}.json",
         'issueLinksEndpoint' => "/groups/#{@group.full_path}/-/epics/#{epic.iid}/issues",
         'canUpdate' => true,
         'canDestroy' => true,

spec/javascripts/epics/epic_show/components/epic_show_app_spec.js

@@ -34,6 +34,7 @@ describe('EpicShowApp', () => {
       canUpdate,
       canDestroy,
       endpoint,
+      updateEndpoint,
       initialTitleHtml,
       initialTitleText,
       startDate,
@@ -59,6 +60,7 @@ describe('EpicShowApp', () => {
       canUpdate,
       canDestroy,
       endpoint,
+      updateEndpoint,
       issuableRef: '',
       initialTitleHtml,
       initialTitleText,

spec/javascripts/epics/epic_show/mock_data.js

 export const contentProps = {
   endpoint: '',
+  updateEndpoint: gl.TEST_HOST,
   canAdmin: true,
   canUpdate: true,
   canDestroy: true,

spec/javascripts/issue_show/components/app_spec.js

@@ -35,11 +35,12 @@ describe('Issuable output', () => {
         canUpdate: true,
         canDestroy: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
+        updateEndpoint: gl.TEST_HOST,
         issuableRef: '#1',
         initialTitleHtml: '',
         initialTitleText: '',
-        initialDescriptionHtml: '',
-        initialDescriptionText: '',
+        initialDescriptionHtml: 'test',
+        initialDescriptionText: 'test',
         markdownPreviewPath: '/',
         markdownDocsPath: '/',
         projectNamespace: '/',

spec/javascripts/issue_show/components/description_spec.js

 import Vue from 'vue';
 import descriptionComponent from '~/issue_show/components/description.vue';
+import * as taskList from '~/task_list';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('Description component', () => {
   let vm;
+  let DescriptionComponent;
+  const props = {
+    canUpdate: true,
+    descriptionHtml: 'test',
+    descriptionText: 'test',
+    updatedAt: new Date().toString(),
+    taskStatus: '',
+    updateUrl: gl.TEST_HOST,
+  };
 
   beforeEach(() => {
-    const Component = Vue.extend(descriptionComponent);
+    DescriptionComponent = Vue.extend(descriptionComponent);
 
     if (!document.querySelector('.issuable-meta')) {
       const metaData = document.createElement('div');
@@ -15,15 +26,11 @@ describe('Description component', () => {
       document.body.appendChild(metaData);
     }
 
-    vm = new Component({
-      propsData: {
-        canUpdate: true,
-        descriptionHtml: 'test',
-        descriptionText: 'test',
-        updatedAt: new Date().toString(),
-        taskStatus: '',
-      },
-    }).$mount();
+    vm = mountComponent(DescriptionComponent, props);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
   });
 
   it('animates description changes', (done) => {
@@ -44,34 +51,46 @@ describe('Description component', () => {
     });
   });
 
-  // TODO: gl.TaskList no longer exists. rewrite these tests once we have a way to rewire ES modules
-
-  // it('re-inits the TaskList when description changed', (done) => {
-  //   spyOn(gl, 'TaskList');
-  //   vm.descriptionHtml = 'changed';
-  //
-  //   setTimeout(() => {
-  //     expect(
-  //       gl.TaskList,
-  //     ).toHaveBeenCalled();
-  //
-  //     done();
-  //   });
-  // });
-
-  // it('does not re-init the TaskList when canUpdate is false', (done) => {
-  //   spyOn(gl, 'TaskList');
-  //   vm.canUpdate = false;
-  //   vm.descriptionHtml = 'changed';
-  //
-  //   setTimeout(() => {
-  //     expect(
-  //       gl.TaskList,
-  //     ).not.toHaveBeenCalled();
-  //
-  //     done();
-  //   });
-  // });
+  describe('TaskList', () => {
+    beforeEach(() => {
+      vm = mountComponent(DescriptionComponent, Object.assign({}, props, {
+        issuableType: 'issuableType',
+      }));
+      spyOn(taskList, 'default');
+    });
+
+    it('re-inits the TaskList when description changed', (done) => {
+      vm.descriptionHtml = 'changed';
+
+      setTimeout(() => {
+        expect(taskList.default).toHaveBeenCalled();
+        done();
+      });
+    });
+
+    it('does not re-init the TaskList when canUpdate is false', (done) => {
+      vm.canUpdate = false;
+      vm.descriptionHtml = 'changed';
+
+      setTimeout(() => {
+        expect(taskList.default).not.toHaveBeenCalled();
+        done();
+      });
+    });
+
+    it('calls with issuableType dataType', (done) => {
+      vm.descriptionHtml = 'changed';
+
+      setTimeout(() => {
+        expect(taskList.default).toHaveBeenCalledWith({
+          dataType: 'issuableType',
+          fieldName: 'description',
+          selector: '.detail-page-description',
+        });
+        done();
+      });
+    });
+  });
 
   describe('taskStatus', () => {
     it('adds full taskStatus', (done) => {
@@ -126,4 +145,8 @@ describe('Description component', () => {
       });
     });
   });
+
+  it('sets data-update-url', () => {
+    expect(vm.$el.querySelector('textarea').dataset.updateUrl).toEqual(gl.TEST_HOST);
+  });
 });