1 files changed, 67 insertions, 0 deletions
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();
+    });
+  });
+});