Merge branch 'issue-title-description-realtime' into 'master'

Render Description Realtime :tada:

Closes #25049 and #31355

See merge request !10865

7 files changed, 116 insertions, 43 deletions

diff --git a/spec/features/issues/award_spec.rb b/spec/features/issues/award_spec.rb
index 401e1ea2b89..08e3f99e29f 100644
--- a/spec/features/issues/award_spec.rb
+++ b/spec/features/issues/award_spec.rb
@@ -6,9 +6,12 @@ feature 'Issue awards', js: true, feature: true do
   let(:issue)     { create(:issue, project: project) }
 
   describe 'logged in' do
+    include WaitForVueResource
+
     before do
       login_as(user)
       visit namespace_project_issue_path(project.namespace, project, issue)
+      wait_for_vue_resource
     end
 
     it 'adds award to issue' do
@@ -38,8 +41,11 @@ feature 'Issue awards', js: true, feature: true do
   end
 
   describe 'logged out' do
+    include WaitForVueResource
+    
     before do
       visit namespace_project_issue_path(project.namespace, project, issue)
+      wait_for_vue_resource
     end
 
     it 'does not see award menu button' do
diff --git a/spec/features/task_lists_spec.rb b/spec/features/task_lists_spec.rb
index c33692fc4a9..8bd13caf2b0 100644
--- a/spec/features/task_lists_spec.rb
+++ b/spec/features/task_lists_spec.rb
@@ -62,12 +62,15 @@ feature 'Task Lists', feature: true do
     visit namespace_project_issue_path(project.namespace, project, issue)
   end
 
-  describe 'for Issues' do
-    describe 'multiple tasks' do
+  describe 'for Issues', feature: true do
+    describe 'multiple tasks', js: true do
+      include WaitForVueResource
+
       let!(:issue) { create(:issue, description: markdown, author: user, project: project) }
 
       it 'renders' do
         visit_issue(project, issue)
+        wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)
         expect(page).to have_selector('li.task-list-item', count: 6)
@@ -76,25 +79,24 @@ feature 'Task Lists', feature: true do
 
       it 'contains the required selectors' do
         visit_issue(project, issue)
+        wait_for_vue_resource
 
-        container = '.detail-page-description .description.js-task-list-container'
-
-        expect(page).to have_selector(container)
-        expect(page).to have_selector("#{container} .wiki .task-list .task-list-item .task-list-item-checkbox")
-        expect(page).to have_selector("#{container} .js-task-list-field")
-        expect(page).to have_selector('form.js-issuable-update')
+        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
         expect(page).to have_selector('a.btn-close')
       end
 
       it 'is only editable by author' do
         visit_issue(project, issue)
-        expect(page).to have_selector('.js-task-list-container')
+        wait_for_vue_resource
 
-        logout(:user)
+        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
 
+        logout(:user)
         login_as(user2)
         visit current_path
-        expect(page).not_to have_selector('.js-task-list-container')
+        wait_for_vue_resource
+
+        expect(page).to have_selector(".wiki .task-list .task-list-item .task-list-item-checkbox")
       end
 
       it 'provides a summary on Issues#index' do
@@ -103,11 +105,14 @@ feature 'Task Lists', feature: true do
       end
     end
 
-    describe 'single incomplete task' do
+    describe 'single incomplete task', js: true do
+      include WaitForVueResource
+
       let!(:issue) { create(:issue, description: singleIncompleteMarkdown, author: user, project: project) }
 
       it 'renders' do
         visit_issue(project, issue)
+        wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)
         expect(page).to have_selector('li.task-list-item', count: 1)
@@ -116,15 +121,18 @@ feature 'Task Lists', feature: true do
 
       it 'provides a summary on Issues#index' do
         visit namespace_project_issues_path(project.namespace, project)
+
         expect(page).to have_content("0 of 1 task completed")
       end
     end
 
-    describe 'single complete task' do
+    describe 'single complete task', js: true do
+      include WaitForVueResource
       let!(:issue) { create(:issue, description: singleCompleteMarkdown, author: user, project: project) }
 
       it 'renders' do
         visit_issue(project, issue)
+        wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)
         expect(page).to have_selector('li.task-list-item', count: 1)
@@ -133,6 +141,7 @@ feature 'Task Lists', feature: true do
 
       it 'provides a summary on Issues#index' do
         visit namespace_project_issues_path(project.namespace, project)
+
         expect(page).to have_content("1 of 1 task completed")
       end
     end
diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/issue_title_description_spec.js
new file mode 100644
index 00000000000..1ec4fe58b08
--- /dev/null
+++ b/spec/javascripts/issue_show/issue_title_description_spec.js
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import $ from 'jquery';
+import '~/render_math';
+import '~/render_gfm';
+import issueTitleDescription from '~/issue_show/issue_title_description.vue';
+import issueShowData from './mock_data';
+
+window.$ = $;
+
+const issueShowInterceptor = data => (request, next) => {
+  next(request.respondWith(JSON.stringify(data), {
+    status: 200,
+    headers: {
+      'POLL-INTERVAL': 1,
+    },
+  }));
+};
+
+describe('Issue Title', () => {
+  document.body.innerHTML = '<span id="task_status"></span>';
+
+  let IssueTitleDescriptionComponent;
+
+  beforeEach(() => {
+    IssueTitleDescriptionComponent = Vue.extend(issueTitleDescription);
+  });
+
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
+  });
+
+  it('should render a title/description and update title/description on update', (done) => {
+    Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
+
+    const issueShowComponent = new IssueTitleDescriptionComponent({
+      propsData: {
+        canUpdateIssue: '.css-stuff',
+        endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
+      },
+    }).$mount();
+
+    setTimeout(() => {
+      expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
+      expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
+      expect(issueShowComponent.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
+      expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('this is a description');
+
+      Vue.http.interceptors.push(issueShowInterceptor(issueShowData.secondRequest));
+
+      setTimeout(() => {
+        expect(document.querySelector('title').innerText).toContain('2 (#1)');
+        expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
+        expect(issueShowComponent.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
+        expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42');
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/issue_title_spec.js b/spec/javascripts/issue_show/issue_title_spec.js
deleted file mode 100644
index 03edbf9f947..00000000000
--- a/spec/javascripts/issue_show/issue_title_spec.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from 'vue';
-import issueTitle from '~/issue_show/issue_title.vue';
-
-describe('Issue Title', () => {
-  let IssueTitleComponent;
-
-  beforeEach(() => {
-    IssueTitleComponent = Vue.extend(issueTitle);
-  });
-
-  it('should render a title', () => {
-    const component = new IssueTitleComponent({
-      propsData: {
-        initialTitle: 'wow',
-        endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
-      },
-    }).$mount();
-
-    expect(component.$el.classList).toContain('title');
-    expect(component.$el.innerHTML).toContain('wow');
-  });
-});
diff --git a/spec/javascripts/issue_show/mock_data.js b/spec/javascripts/issue_show/mock_data.js
new file mode 100644
index 00000000000..ad5a7b63470
--- /dev/null
+++ b/spec/javascripts/issue_show/mock_data.js
@@ -0,0 +1,26 @@
+export default {
+  initialRequest: {
+    title: '<p>this is a title</p>',
+    title_text: 'this is a title',
+    description: '<p>this is a description!</p>',
+    description_text: 'this is a description',
+    issue_number: 1,
+    task_status: '2 of 4 completed',
+  },
+  secondRequest: {
+    title: '<p>2</p>',
+    title_text: '2',
+    description: '<p>42</p>',
+    description_text: '42',
+    issue_number: 1,
+    task_status: '0 of 0 completed',
+  },
+  issueSpecRequest: {
+    title: '<p>this is a title</p>',
+    title_text: 'this is a title',
+    description: '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox">Task List Item</li>',
+    description_text: '- [ ] Task List Item',
+    issue_number: 1,
+    task_status: '0 of 1 completed',
+  },
+};
diff --git a/spec/javascripts/issue_spec.js b/spec/javascripts/issue_spec.js
index 0fd573eae3f..763f5ee9e50 100644
--- a/spec/javascripts/issue_spec.js
+++ b/spec/javascripts/issue_spec.js
@@ -81,12 +81,6 @@ describe('Issue', function() {
       this.issue = new Issue();
     });
 
-    it('modifies the Markdown field', function() {
-      spyOn(jQuery, 'ajax').and.stub();
-      $('input[type=checkbox]').attr('checked', true).trigger('change');
-      expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
-    });
-
     it('submits an ajax request on tasklist:changed', function() {
       spyOn(jQuery, 'ajax').and.callFake(function(req) {
         expect(req.type).toBe('PATCH');
diff --git a/spec/support/features/issuable_slash_commands_shared_examples.rb b/spec/support/features/issuable_slash_commands_shared_examples.rb
index 610decdcddb..595bb92f5c0 100644
--- a/spec/support/features/issuable_slash_commands_shared_examples.rb
+++ b/spec/support/features/issuable_slash_commands_shared_examples.rb
@@ -25,7 +25,7 @@ shared_examples 'issuable record that supports slash commands in its description
     wait_for_ajax
   end
 
-  describe "new #{issuable_type}" do
+  describe "new #{issuable_type}", js: true do
     context 'with commands in the description' do
       it "creates the #{issuable_type} and interpret commands accordingly" do
         visit public_send("new_namespace_project_#{issuable_type}_path", project.namespace, project, new_url_opts)
@@ -44,7 +44,7 @@ shared_examples 'issuable record that supports slash commands in its description
     end
   end
 
-  describe "note on #{issuable_type}" do
+  describe "note on #{issuable_type}", js: true do
     before do
       visit public_send("namespace_project_#{issuable_type}_path", project.namespace, project, issuable)
     end