Merge branch 'refactor-realtime-issue' into 'master'

Refactored issue tealtime elements

See merge request !11242

4 files changed, 192 insertions, 26 deletions

diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/components/app_spec.js
index 1ec4fe58b08..09bca2c3680 100644
--- a/spec/javascripts/issue_show/issue_title_description_spec.js
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -1,11 +1,8 @@
 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.$ = $;
+import issuableApp from '~/issue_show/components/app.vue';
+import issueShowData from '../mock_data';
 
 const issueShowInterceptor = data => (request, next) => {
   next(request.respondWith(JSON.stringify(data), {
@@ -16,42 +13,45 @@ const issueShowInterceptor = data => (request, next) => {
   }));
 };
 
-describe('Issue Title', () => {
+describe('Issuable output', () => {
   document.body.innerHTML = '<span id="task_status"></span>';
 
-  let IssueTitleDescriptionComponent;
+  let vm;
 
   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) => {
+    const IssuableDescriptionComponent = Vue.extend(issuableApp);
     Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
 
-    const issueShowComponent = new IssueTitleDescriptionComponent({
+    vm = new IssuableDescriptionComponent({
       propsData: {
-        canUpdateIssue: '.css-stuff',
+        canUpdate: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
+        issuableRef: '#1',
+        initialTitle: '',
+        initialDescriptionHtml: '',
+        initialDescriptionText: '',
       },
     }).$mount();
+  });
 
+  afterEach(() => {
+    Vue.http.interceptors = _.without(Vue.http.interceptors, issueShowInterceptor);
+  });
+
+  it('should render a title/description and update title/description on update', (done) => {
     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');
+      expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>this is a title</p>');
+      expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>this is a description!</p>');
+      expect(vm.$el.querySelector('.js-task-list-field').value).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');
+        expect(vm.$el.querySelector('.title').innerHTML).toContain('<p>2</p>');
+        expect(vm.$el.querySelector('.wiki').innerHTML).toContain('<p>42</p>');
+        expect(vm.$el.querySelector('.js-task-list-field').value).toContain('42');
 
         done();
       });
diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js
new file mode 100644
index 00000000000..408349cc42d
--- /dev/null
+++ b/spec/javascripts/issue_show/components/description_spec.js
@@ -0,0 +1,99 @@
+import Vue from 'vue';
+import descriptionComponent from '~/issue_show/components/description.vue';
+
+describe('Description component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(descriptionComponent);
+
+    if (!document.querySelector('.issuable-meta')) {
+      const metaData = document.createElement('div');
+      metaData.classList.add('issuable-meta');
+      metaData.innerHTML = '<span id="task_status"></span><span id="task_status_short"></span>';
+
+      document.body.appendChild(metaData);
+    }
+
+    vm = new Component({
+      propsData: {
+        canUpdate: true,
+        descriptionHtml: 'test',
+        descriptionText: 'test',
+        updatedAt: new Date().toString(),
+        taskStatus: '',
+      },
+    }).$mount();
+  });
+
+  it('animates description changes', (done) => {
+    vm.descriptionHtml = 'changed';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.wiki').classList.contains('issue-realtime-pre-pulse'),
+      ).toBeTruthy();
+
+      setTimeout(() => {
+        expect(
+          vm.$el.querySelector('.wiki').classList.contains('issue-realtime-trigger-pulse'),
+        ).toBeTruthy();
+
+        done();
+      });
+    });
+  });
+
+  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('taskStatus', () => {
+    it('adds full taskStatus', (done) => {
+      vm.taskStatus = '1 of 1';
+
+      setTimeout(() => {
+        expect(
+          document.querySelector('.issuable-meta #task_status').textContent.trim(),
+        ).toBe('1 of 1');
+
+        done();
+      });
+    });
+
+    it('adds short taskStatus', (done) => {
+      vm.taskStatus = '1 of 1';
+
+      setTimeout(() => {
+        expect(
+          document.querySelector('.issuable-meta #task_status_short').textContent.trim(),
+        ).toBe('1/1 task');
+
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/components/title_spec.js b/spec/javascripts/issue_show/components/title_spec.js
new file mode 100644
index 00000000000..2f953e7e92e
--- /dev/null
+++ b/spec/javascripts/issue_show/components/title_spec.js
@@ -0,0 +1,67 @@
+import Vue from 'vue';
+import titleComponent from '~/issue_show/components/title.vue';
+
+describe('Title component', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(titleComponent);
+    vm = new Component({
+      propsData: {
+        issuableRef: '#1',
+        titleHtml: 'Testing <img />',
+        titleText: 'Testing',
+      },
+    }).$mount();
+  });
+
+  it('renders title HTML', () => {
+    expect(
+      vm.$el.innerHTML.trim(),
+    ).toBe('Testing <img>');
+  });
+
+  it('updates page title when changing titleHtml', (done) => {
+    spyOn(vm, 'setPageTitle');
+    vm.titleHtml = 'test';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.setPageTitle,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  it('animates title changes', (done) => {
+    vm.titleHtml = 'test';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.classList.contains('issue-realtime-pre-pulse'),
+      ).toBeTruthy();
+
+      setTimeout(() => {
+        expect(
+          vm.$el.classList.contains('issue-realtime-trigger-pulse'),
+        ).toBeTruthy();
+
+        done();
+      });
+    });
+  });
+
+  it('updates page title after changing title', (done) => {
+    vm.titleHtml = 'changed';
+    vm.titleText = 'changed';
+
+    Vue.nextTick(() => {
+      expect(
+        document.querySelector('title').textContent.trim(),
+      ).toContain('changed');
+
+      done();
+    });
+  });
+});
diff --git a/spec/javascripts/issue_show/mock_data.js b/spec/javascripts/issue_show/mock_data.js
index ad5a7b63470..6683d581bc5 100644
--- a/spec/javascripts/issue_show/mock_data.js
+++ b/spec/javascripts/issue_show/mock_data.js
@@ -4,23 +4,23 @@ export default {
     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',
+    updated_at: new Date().toString(),
   },
   secondRequest: {
     title: '<p>2</p>',
     title_text: '2',
     description: '<p>42</p>',
     description_text: '42',
-    issue_number: 1,
     task_status: '0 of 0 completed',
+    updated_at: new Date().toString(),
   },
   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',
+    updated_at: new Date().toString(),
   },
 };