issue_spec - getting closer

spec/javascripts/issue_show/issue_title_description_spec.js

@@ -11,14 +11,12 @@ const issueShowInterceptor = data => (request, next) => {
   next(request.respondWith(JSON.stringify(data), {
     status: 200,
     headers: {
-      'POLL-INTERVAL': 1,
+      'POLL-INTERVAL': 10,
     },
   }));
 };
 
 describe('Issue Title', () => {
-  document.body.innerHTML = '<span id="task_status"></span>';
-
   const comps = {
     IssueTitleComponent: {},
   };
@@ -57,7 +55,7 @@ describe('Issue Title', () => {
         expect(issueShowComponent.$el.querySelector('.js-task-list-field').innerText).toContain('42');
 
         done();
-      }, 10);
+      }, 20);
     }, 10);
     // 10ms is just long enough for the update hook to fire
   });

spec/javascripts/issue_show/mock_data.js

@@ -15,4 +15,12 @@ export default {
     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',
+  },
 };

spec/javascripts/issue_spec.js

 /* eslint-disable space-before-function-paren, one-var, one-var-declaration-per-line, no-use-before-define, comma-dangle, max-len */
 import Issue from '~/issue';
+import Vue from 'vue';
+import '~/render_math';
+import '~/render_gfm';
+import IssueTitle from '~/issue_show/issue_title_description.vue';
+import issueShowData from './issue_show/mock_data';
 
 require('~/lib/utils/text_utility');
 
@@ -75,16 +80,53 @@ describe('Issue', function() {
     expect($btnReopen).toHaveText('Reopen issue');
   }
 
-  describe('task lists', function() {
+  fdescribe('task lists', function() {
+    const issueShowInterceptor = data => (request, next) => {
+      next(request.respondWith(JSON.stringify(data), {
+        status: 200,
+      }));
+    };
+
     beforeEach(function() {
       loadFixtures('issues/issue-with-task-list.html.raw');
       this.issue = new Issue();
+      Vue.http.interceptors.push(issueShowInterceptor(issueShowData.issueSpecRequest));
+    });
+
+    afterEach(function() {
+      Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
     });
 
-    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('modifies the Markdown field', function(done) {
+      // gotta actually render it for jquery to find elements
+      const vm = new Vue({
+        el: document.querySelector('.issue-title-entrypoint'),
+        components: {
+          IssueTitle,
+        },
+        render: createElement => createElement(IssueTitle, {
+          props: {
+            candescription: '.js-task-list-container',
+            endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
+          },
+        }),
+      });
+
+      setTimeout(() => {
+        spyOn(jQuery, 'ajax').and.stub();
+
+        const description = '<li class="task-list-item enabled"><input type="checkbox" class="task-list-item-checkbox"> Task List Item</li>';
+
+        expect(document.querySelector('title').innerText).toContain('this is a title (#1)');
+        expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
+        expect(vm.$el.querySelector('.wiki').innerHTML).toContain(description);
+        expect(vm.$el.querySelector('.js-task-list-field').value).toContain('- [ ] Task List Item');
+
+        // somehow the dom does not have a closest `.js-task-list.field` to the `.task-list-item-checkbox`
+        $('input[type=checkbox]').attr('checked', true).trigger('change');
+        expect($('.js-task-list-field').val()).toBe('- [x] Task List Item');
+        done();
+      }, 10);
     });
 
     it('submits an ajax request on tasklist:changed', function() {