test async nature of issue show

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 TITLE REALTIME ERROR', err);
+          console.error('ISSUE SHOW REALTIME ERROR', err);
         } else {
           throw new Error(err);
         }

spec/features/task_lists_spec.rb

@@ -70,7 +70,6 @@ feature 'Task Lists', feature: true do
 
       it 'renders' do
         visit_issue(project, issue)
-
         wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)
@@ -80,11 +79,10 @@ 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'
 
-        wait_for_vue_resource
-
         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")
@@ -94,16 +92,13 @@ feature 'Task Lists', feature: true do
 
       it 'is only editable by author' do
         visit_issue(project, issue)
-
         wait_for_vue_resource
 
         expect(page).to have_selector('.js-task-list-container')
 
         logout(:user)
-
         login_as(user2)
         visit current_path
-
         wait_for_vue_resource
         expect(page).not_to have_selector('.js-task-list-container')
       end
@@ -119,7 +114,6 @@ feature 'Task Lists', feature: true do
 
       it 'renders' do
         visit_issue(project, issue)
-
         wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)
@@ -138,7 +132,6 @@ feature 'Task Lists', feature: true do
 
       it 'renders' do
         visit_issue(project, issue)
-
         wait_for_vue_resource
 
         expect(page).to have_selector('ul.task-list',      count: 1)

spec/javascripts/issue_show/issue_title_description_spec.js

@@ -1,22 +1,49 @@
 import Vue from 'vue';
+import $ from 'jquery';
+import '~/render_math';
+import '~/render_gfm';
 import issueTitle from '~/issue_show/issue_title_description.vue';
+import issueShowData from './mock_data';
+
+window.$ = $;
+
+const issueShowInterceptor = (request, next) => {
+  console.log(issueShowData);
+  next(request.respondWith(JSON.stringify(issueShowData), {
+    status: 200,
+  }));
+};
 
 describe('Issue Title', () => {
-  let IssueTitleComponent;
+  const comps = {
+    IssueTitleComponent: {},
+  };
 
   beforeEach(() => {
-    IssueTitleComponent = Vue.extend(issueTitle);
+    comps.IssueTitleComponent = Vue.extend(issueTitle);
+    Vue.http.interceptors.push(issueShowInterceptor);
   });
 
-  it('should render a title', () => {
+  afterEach(() => {
-    const component = new IssueTitleComponent({
+    Vue.http.interceptors = _.without(
+      Vue.http.interceptors, issueShowInterceptor,
+    );
+  });
+
+  it('should render a title', (done) => {
+    const issueShowComponent = new comps.IssueTitleComponent({
       propsData: {
-        initialTitle: 'wow',
+        candescription: '.css-stuff',
         endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
       },
     }).$mount();
 
-    expect(component.$el.classList).toContain('title');
+    // need setTimeout because actual setTimeout in code :P
-    expect(component.$el.innerHTML).toContain('wow');
+    setTimeout(() => {
+      expect(issueShowComponent.$el.querySelector('.title').innerHTML)
+        .toContain('this is a title');
+      done();
+    }, 300);
+    // 300 is just three times the Vue comps setTimeout to ensure pass
   });
 });

spec/javascripts/issue_show/mock_data.js

@@ -0,0 +1,5 @@
+export default {
+  title: '<p>this is a title</p>',
+  description: '<p>this is a description!</p>',
+  description_text: 'this is a description',
+};