Migrate frontend markdown tests to Jestwinh-markdown-jest

(cherry picked from commit df66c1f9ebad9c7838b84e6468a2ef00b2a8c7a8)

6 files changed, 77 insertions, 78 deletions

diff --git a/changelogs/unreleased/refactor-58828-migrate-markdown-spec-to-jest.yml b/changelogs/unreleased/refactor-58828-migrate-markdown-spec-to-jest.yml
new file mode 100644
index 00000000000..52de349426e
--- /dev/null
+++ b/changelogs/unreleased/refactor-58828-migrate-markdown-spec-to-jest.yml
@@ -0,0 +1,5 @@
+---
+title: 'Migrated markdown tests to Jest'
+merge_request: 27779
+author: Martin Hobert
+type: other
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/frontend/vue_shared/components/markdown/field_spec.js
index 02d73e1849a..d9d14e7bba7 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/field_spec.js
@@ -1,6 +1,8 @@
 import $ from 'jquery';
 import Vue from 'vue';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+import { mount } from '@vue/test-utils';
+import '~/behaviors/markdown/render_gfm';
 
 function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
   expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
@@ -10,18 +12,20 @@ function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
 
 describe('Markdown field component', () => {
   let vm;
-
-  beforeEach(done => {
-    vm = new Vue({
-      components: {
-        fieldComponent,
-      },
-      data() {
-        return {
-          text: 'testing\n123',
-        };
-      },
-      template: `
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = mount(
+      {
+        components: {
+          fieldComponent,
+        },
+        data() {
+          return {
+            text: 'testing\n123',
+          };
+        },
+        template: `
         <field-component
           markdown-preview-path="/preview"
           markdown-docs-path="/docs"
@@ -32,9 +36,26 @@ describe('Markdown field component', () => {
           </textarea>
         </field-component>
       `,
-    }).$mount();
+      },
+      {
+        mocks: {
+          $http: {
+            post: () =>
+              Promise.resolve({
+                json() {
+                  return {
+                    body: '<p>markdown preview</p>',
+                  };
+                },
+              }),
+          },
+        },
+      },
+    );
+
+    ({ vm } = wrapper);
 
-    Vue.nextTick(done);
+    return Vue.nextTick();
   });
 
   describe('mounted', () => {
@@ -47,74 +68,59 @@ describe('Markdown field component', () => {
       let writeLink;
 
       beforeEach(() => {
-        spyOn(Vue.http, 'post').and.callFake(
-          () =>
-            new Promise(resolve => {
-              setTimeout(() => {
-                resolve({
-                  json() {
-                    return {
-                      body: '<p>markdown preview</p>',
-                    };
-                  },
-                });
-              });
-            }),
-        );
-
         previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
         writeLink = vm.$el.querySelector('.nav-links .js-write-link');
       });
 
-      it('sets preview link as active', done => {
+      it('sets preview link as active', () => {
         previewLink.click();
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(previewLink.parentNode.classList.contains('active')).toBeTruthy();
-
-          done();
         });
       });
 
-      it('shows preview loading text', done => {
+      it('shows preview loading text', () => {
         previewLink.click();
 
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
-            'Loading…',
-          );
+        const holder = vm.$el.querySelector('.md-preview-holder');
 
-          done();
+        return Vue.nextTick().then(() => {
+          expect(holder.textContent.trim()).toContain('Loading…');
         });
       });
 
-      it('renders markdown preview', done => {
+      it('renders markdown preview', () => {
         previewLink.click();
 
-        setTimeout(() => {
+        // wait for request to complete
+        jest.runAllTicks();
+
+        return Vue.nextTick().then(() => {
           expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(
             '<p>markdown preview</p>',
           );
-
-          done();
         });
       });
 
-      it('renders GFM with jQuery', done => {
-        spyOn($.fn, 'renderGFM');
+      it('renders GFM with jQuery', () => {
+        jest.spyOn($.fn, 'renderGFM').mockImplementation(() => {});
 
         previewLink.click();
 
-        setTimeout(() => {
-          expect($.fn.renderGFM).toHaveBeenCalled();
+        // wait for request to complete
+        jest.runAllTicks();
 
-          done();
-        }, 0);
+        return Vue.nextTick()
+          .then(() => Vue.nextTick())
+          .then(() => {
+            expect($.fn.renderGFM).toHaveBeenCalled();
+          });
       });
 
-      it('clicking already active write or preview link does nothing', done => {
+      it('clicking already active write or preview link does nothing', () => {
         writeLink.click();
-        Vue.nextTick()
+        return Vue.nextTick()
           .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
           .then(() => writeLink.click())
           .then(() => Vue.nextTick())
@@ -124,49 +130,41 @@ describe('Markdown field component', () => {
           .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
           .then(() => previewLink.click())
           .then(() => Vue.nextTick())
-          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
-          .then(done)
-          .catch(done.fail);
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm));
       });
     });
 
     describe('markdown buttons', () => {
-      it('converts single words', done => {
+      it('converts single words', () => {
         const textarea = vm.$el.querySelector('textarea');
 
         textarea.setSelectionRange(0, 7);
         vm.$el.querySelector('.js-md').click();
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(textarea.value).toContain('**testing**');
-
-          done();
         });
       });
 
-      it('converts a line', done => {
+      it('converts a line', () => {
         const textarea = vm.$el.querySelector('textarea');
 
         textarea.setSelectionRange(0, 0);
         vm.$el.querySelectorAll('.js-md')[5].click();
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(textarea.value).toContain('*  testing');
-
-          done();
         });
       });
 
-      it('converts multiple lines', done => {
+      it('converts multiple lines', () => {
         const textarea = vm.$el.querySelector('textarea');
 
         textarea.setSelectionRange(0, 50);
         vm.$el.querySelectorAll('.js-md')[5].click();
 
-        Vue.nextTick(() => {
+        return Vue.nextTick().then(() => {
           expect(textarea.value).toContain('* testing\n* 123');
-
-          done();
         });
       });
     });
diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/frontend/vue_shared/components/markdown/header_spec.js
index af92e5f5ae2..cc1931d306b 100644
--- a/spec/javascripts/vue_shared/components/markdown/header_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/header_spec.js
@@ -53,7 +53,7 @@ describe('Markdown field header component', () => {
   });
 
   it('emits toggle markdown event when clicking preview', () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
     vm.$el.querySelector('.js-preview-link').click();
 
@@ -65,7 +65,7 @@ describe('Markdown field header component', () => {
   });
 
   it('does not emit toggle markdown event when triggered from another form', () => {
-    spyOn(vm, '$emit');
+    jest.spyOn(vm, '$emit').mockImplementation(() => {});
 
     $(document).triggerHandler('markdown-preview:show', [
       $(
@@ -76,17 +76,13 @@ describe('Markdown field header component', () => {
     expect(vm.$emit).not.toHaveBeenCalled();
   });
 
-  it('blurs preview link after click', done => {
+  it('blurs preview link after click', () => {
     const link = vm.$el.querySelector('li:nth-child(2) button');
-    spyOn(HTMLElement.prototype, 'blur');
+    jest.spyOn(HTMLElement.prototype, 'blur').mockImplementation(() => {});
 
     link.click();
 
-    setTimeout(() => {
-      expect(link.blur).toHaveBeenCalled();
-
-      done();
-    });
+    expect(link.blur).toHaveBeenCalled();
   });
 
   it('renders markdown table template', () => {
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
index ea74cb9eb21..99d7705cddf 100644
--- a/spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js
@@ -92,7 +92,7 @@ describe('Suggestion Diff component', () => {
   describe('applySuggestion', () => {
     it('emits apply event when applySuggestion is called', () => {
       const callback = () => {};
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
       vm.applySuggestion(callback);
 
       expect(vm.$emit).toHaveBeenCalledWith('apply', { suggestionId: vm.suggestion.id, callback });
diff --git a/spec/javascripts/vue_shared/components/markdown/suggestions_spec.js b/spec/frontend/vue_shared/components/markdown/suggestions_spec.js
index b7de40b4831..0c403459237 100644
--- a/spec/javascripts/vue_shared/components/markdown/suggestions_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/suggestions_spec.js
@@ -59,7 +59,7 @@ describe('Suggestion component', () => {
 
     diffTable = vm.generateDiff(0).$mount().$el;
 
-    spyOn(vm, 'renderSuggestions');
+    jest.spyOn(vm, 'renderSuggestions').mockImplementation(() => {});
     vm.renderSuggestions();
     Vue.nextTick(done);
   });
diff --git a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
index e6c7abd9d3b..f1917a8f09a 100644
--- a/spec/javascripts/vue_shared/components/markdown/toolbar_spec.js
+++ b/spec/frontend/vue_shared/components/markdown/toolbar_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import toolbar from '~/vue_shared/components/markdown/toolbar.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('toolbar', () => {
   let vm;