Merge remote-tracking branch 'upstream/master' into 27377-preload-pipeline-entity27377-preload-pipeline-entity

* upstream/master: (2534 commits)
  Update VERSION to 9.3.0-pre
  Update CHANGELOG.md for 9.2.0
  removes unnecessary redundacy in usage ping doc
  Respect the typo as rubocop said
  Add a test to ensure this works on MySQL
  Change pipelines schedules help page path
  change domain to hostname in usage ping doc
  Fixes broken MySQL migration for retried
  Show password field mask while editing service settings
  Add notes for supported schedulers and cloud providers
  Move environment monitoring to environments doc
  Add docs for change of Cache/Artifact restore order"
  Avoid resource intensive login checks if password is not provided
  Change translation for 'coding' by 'desarrollo' for Spanish
  Add to docs: issues multiple assignees
  rename "Add emoji" and "Award emoji" to "Add reaction" where appropriate
  Add project and group notification settings info
  32570 Fix border-bottom for project activity tab
  Add users endpoint to frontend API class
  Rename users on mysql
  ...

4 files changed, 252 insertions, 0 deletions

diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js
new file mode 100644
index 00000000000..ee456869c53
--- /dev/null
+++ b/spec/javascripts/issue_show/components/app_spec.js
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import '~/render_math';
+import '~/render_gfm';
+import issuableApp from '~/issue_show/components/app.vue';
+import issueShowData from '../mock_data';
+
+const issueShowInterceptor = data => (request, next) => {
+  next(request.respondWith(JSON.stringify(data), {
+    status: 200,
+    headers: {
+      'POLL-INTERVAL': 1,
+    },
+  }));
+};
+
+describe('Issuable output', () => {
+  document.body.innerHTML = '<span id="task_status"></span>';
+
+  let vm;
+
+  beforeEach(() => {
+    const IssuableDescriptionComponent = Vue.extend(issuableApp);
+    Vue.http.interceptors.push(issueShowInterceptor(issueShowData.initialRequest));
+
+    vm = new IssuableDescriptionComponent({
+      propsData: {
+        canUpdate: true,
+        endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
+        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(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(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
new file mode 100644
index 00000000000..6683d581bc5
--- /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',
+    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',
+    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',
+    task_status: '0 of 1 completed',
+    updated_at: new Date().toString(),
+  },
+};