handle tasks and fix some specs

app/assets/javascripts/issue_show/issue_title_description.vue

@@ -20,7 +20,7 @@ export default {
       errorCallback: (err) => {
         if (process.env.NODE_ENV !== 'production') {
           // eslint-disable-next-line no-console
-          console.error('ISSUE SHOW REALTIME ERROR', err);
+          console.error('ISSUE SHOW REALTIME ERROR', err, err.stack);
         } else {
           throw new Error(err);
         }
@@ -29,7 +29,7 @@ export default {
 
     return {
       poll,
-      data: {},
+      apiData: {},
       current: true,
       timeoutId: null,
       title: '<span></span>',
@@ -43,29 +43,41 @@ export default {
   },
   methods: {
     renderResponse(res) {
-      const data = JSON.parse(res.body);
-      this.data = data;
-      this.issueIID = this.data.issue_number;
-      this.triggerAnimation(data);
+      this.apiData = JSON.parse(res.body);
+      this.issueIID = this.apiData.issue_number;
+      this.triggerAnimation();
     },
     updateTaskHTML() {
-      this.taskStatus = this.data.task_status;
-      document.querySelector('#task_status').innerText = this.taskStatus;
+      const tasks = document.querySelector('#task_status_short');
+      const zeroTasks = this.apiData.task_status.includes('0 of 0');
+
+      if (tasks && !zeroTasks) {
+        tasks.innerText = this.apiData.task_status;
+      } else if (this.apiData.task_status.includes('0 of 0')) {
+        $('#task_status_short').remove();
+      } else if (!tasks && !zeroTasks) {
+        $('.issuable-header').append(`
+          <span id="task_status_short" class="hidden-md hidden-lg">${this.apiData.task_status}</span>
+        `);
+      }
     },
     elementsToVisualize(noTitleChange, noDescriptionChange) {
       const elementStack = [];
 
       if (!noTitleChange) {
-        this.titleText = this.data.title_text;
+        this.titleText = this.apiData.title_text;
         elementStack.push(this.$el.querySelector('.title'));
       }
 
       if (!noDescriptionChange) {
         // only change to true when we need to bind TaskLists the html of description
         this.descriptionChange = true;
+        this.updateTaskHTML();
+
         if (this.description !== '<span></span>') {
           this.previousDescription = this.description;
         }
+
         elementStack.push(this.$el.querySelector('.wiki'));
       }
 
@@ -100,10 +112,8 @@ export default {
       // always reset to false before checking the change
       this.descriptionChange = false;
 
-      const { title, description } = this.data;
-      this.descriptionText = this.data.description_text;
-
-      this.updateTaskHTML();
+      const { title, description } = this.apiData;
+      this.descriptionText = this.apiData.description_text;
 
       const noTitleChange = this.title === title;
       const noDescriptionChange = this.description === description;

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

spec/support/features/issuable_slash_commands_shared_examples.rb

@@ -3,6 +3,7 @@
 
 shared_examples 'issuable record that supports slash commands in its description and notes' do |issuable_type|
   include SlashCommandsHelpers
+  include WaitForVueResource
 
   let(:master) { create(:user) }
   let(:assignee) { create(:user, username: 'bob') }
@@ -18,6 +19,7 @@ shared_examples 'issuable record that supports slash commands in its description
     project.team << [assignee, :developer]
     project.team << [guest, :guest]
     login_with(master)
+    wait_for_vue_resource
   end
 
   after do