refactored field_spec from karma to jest

spec/javascripts/vue_shared/components/markdown/field_spec.js → spec/frontend/vue_shared/components/markdown/field_spec.js

-import $ from 'jquery';
-import '~/behaviors/markdown/render_gfm';
-import Vue from 'vue';
-import AxiosMockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
+import { mount, createLocalVue } from '@vue/test-utils';
 import fieldComponent from '~/vue_shared/components/markdown/field.vue';
 import { TEST_HOST } from 'spec/test_constants';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import $ from 'jquery';
 
-function assertMarkdownTabs(isWrite, writeLink, previewLink, vm) {
-  expect(writeLink.parentNode.classList.contains('active')).toEqual(isWrite);
-  expect(previewLink.parentNode.classList.contains('active')).toEqual(!isWrite);
-  expect(vm.$el.querySelector('.md-preview-holder').style.display).toEqual(isWrite ? 'none' : '');
+const markdownPreviewPath = `${TEST_HOST}/preview`;
+const markdownDocsPath = `${TEST_HOST}/docs`;
+
+function assertMarkdownTabs(isWrite, writeLink, previewLink, wrapper) {
+  expect(writeLink.element.parentNode.classList.contains('active')).toEqual(isWrite);
+  expect(previewLink.element.parentNode.classList.contains('active')).toEqual(!isWrite);
+  expect(wrapper.find('.md-preview-holder').element.style.display).toEqual(isWrite ? 'none' : '');
+}
+
+function createComponent() {
+  const wrapper = mount(fieldComponent, {
+    propsData: {
+      markdownDocsPath,
+      markdownPreviewPath,
+    },
+    slots: {
+      textarea: '<textarea>testing\n123</textarea>',
+    },
+    template: `
+    <field-component
+      markdown-preview-path="${markdownPreviewPath}"
+      markdown-docs-path="${markdownDocsPath}"
+    >
+      <textarea
+        slot="textarea"
+        v-model="text">
+        <slot>this is a test</slot>
+      </textarea>
+    </field-component>
+    `,
+    sync: false,
+  });
+  return wrapper;
 }
 
+const getPreviewLink = wrapper => wrapper.find('.nav-links .js-preview-link');
+const getWriteLink = wrapper => wrapper.find('.nav-links .js-write-link');
+const getMarkdownButton = wrapper => wrapper.find('.js-md');
+const getAllMarkdownButtons = wrapper => wrapper.findAll('.js-md');
+
 describe('Markdown field component', () => {
-  const markdownPreviewPath = `${TEST_HOST}/preview`;
-  const markdownDocsPath = `${TEST_HOST}/docs`;
   let axiosMock;
-  let vm;
+  const localVue = createLocalVue();
 
-  beforeEach(done => {
+  beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
-    vm = new Vue({
-      components: {
-        fieldComponent,
-      },
-      data() {
-        return {
-          text: 'testing\n123',
-        };
-      },
-      template: `
-        <field-component
-          markdown-preview-path="${markdownPreviewPath}"
-          markdown-docs-path="${markdownDocsPath}"
-        >
-          <textarea
-            slot="textarea"
-            v-model="text">
-          </textarea>
-        </field-component>
-      `,
-    }).$mount();
-
-    Vue.nextTick(done);
   });
 
   afterEach(() => {
@@ -50,122 +58,120 @@ describe('Markdown field component', () => {
   });
 
   describe('mounted', () => {
+    let wrapper;
     const previewHTML = '<p>markdown preview</p>';
+    let previewLink;
+    let writeLink;
 
     it('renders textarea inside backdrop', () => {
-      expect(vm.$el.querySelector('.zen-backdrop textarea')).not.toBeNull();
+      wrapper = createComponent();
+      expect(wrapper.find('.zen-backdrop textarea').element).not.toBeNull();
     });
 
     describe('markdown preview', () => {
-      let previewLink;
-      let writeLink;
-
       beforeEach(() => {
-        axiosMock.onPost(markdownPreviewPath).replyOnce(200, { body: previewHTML });
-
-        previewLink = vm.$el.querySelector('.nav-links .js-preview-link');
-        writeLink = vm.$el.querySelector('.nav-links .js-write-link');
+        axiosMock.onPost(markdownPreviewPath).reply(200, { body: previewHTML });
       });
 
-      it('sets preview link as active', done => {
-        previewLink.click();
-
-        Vue.nextTick(() => {
-          expect(previewLink.parentNode.classList.contains('active')).toBeTruthy();
+      it('sets preview link as active', () => {
+        wrapper = createComponent();
+        previewLink = getPreviewLink(wrapper);
+        previewLink.trigger('click');
 
-          done();
+        return localVue.nextTick().then(() => {
+          expect(previewLink.element.parentNode.classList.contains('active')).toBeTruthy();
         });
       });
 
-      it('shows preview loading text', done => {
-        previewLink.click();
+      it('shows preview loading text', () => {
+        wrapper = createComponent();
+        previewLink = getPreviewLink(wrapper);
+        previewLink.trigger('click');
 
-        Vue.nextTick(() => {
-          expect(vm.$el.querySelector('.md-preview-holder').textContent.trim()).toContain(
+        localVue.nextTick(() => {
+          expect(wrapper.find('.md-preview-holder').element.textContent.trim()).toContain(
             'Loading…',
           );
-
-          done();
         });
       });
 
-      it('renders markdown preview', done => {
-        previewLink.click();
+      it('renders markdown preview', () => {
+        wrapper = createComponent();
+        previewLink = getPreviewLink(wrapper);
+        previewLink.trigger('click');
 
         setTimeout(() => {
-          expect(vm.$el.querySelector('.md-preview-holder').innerHTML).toContain(previewHTML);
-
-          done();
+          expect(wrapper.find('.md-preview-holder').element.innerHTML).toContain(previewHTML);
         });
       });
 
-      it('renders GFM with jQuery', done => {
-        spyOn($.fn, 'renderGFM');
+      it('renders GFM with jQuery', () => {
+        wrapper = createComponent();
+        previewLink = getPreviewLink(wrapper);
+        jest.spyOn($.fn, 'renderGFM');
 
-        previewLink.click();
+        previewLink.trigger('click');
 
         setTimeout(() => {
           expect($.fn.renderGFM).toHaveBeenCalled();
-
-          done();
         }, 0);
       });
 
-      it('clicking already active write or preview link does nothing', done => {
-        writeLink.click();
-        Vue.nextTick()
-          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
-          .then(() => writeLink.click())
-          .then(() => Vue.nextTick())
-          .then(() => assertMarkdownTabs(true, writeLink, previewLink, vm))
-          .then(() => previewLink.click())
-          .then(() => Vue.nextTick())
-          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
-          .then(() => previewLink.click())
-          .then(() => Vue.nextTick())
-          .then(() => assertMarkdownTabs(false, writeLink, previewLink, vm))
-          .then(done)
-          .catch(done.fail);
+      it('clicking already active write or preview link does nothing', () => {
+        wrapper = createComponent();
+        writeLink = getWriteLink(wrapper);
+        previewLink = getPreviewLink(wrapper);
+
+        writeLink.trigger('click');
+        return localVue
+          .nextTick()
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
+          .then(() => writeLink.trigger('click'))
+          .then(() => localVue.nextTick())
+          .then(() => assertMarkdownTabs(true, writeLink, previewLink, wrapper))
+          .then(() => previewLink.trigger('click'))
+          .then(() => localVue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper))
+          .then(() => previewLink.trigger('click'))
+          .then(() => localVue.nextTick())
+          .then(() => assertMarkdownTabs(false, writeLink, previewLink, wrapper));
       });
     });
 
     describe('markdown buttons', () => {
-      it('converts single words', done => {
-        const textarea = vm.$el.querySelector('textarea');
-
+      it('converts single words', () => {
+        wrapper = createComponent();
+        const textarea = wrapper.find('textarea').element;
         textarea.setSelectionRange(0, 7);
-        vm.$el.querySelector('.js-md').click();
+        const markdownButton = getMarkdownButton(wrapper);
+        markdownButton.trigger('click');
 
-        Vue.nextTick(() => {
+        localVue.nextTick(() => {
           expect(textarea.value).toContain('**testing**');
-
-          done();
         });
       });
 
-      it('converts a line', done => {
-        const textarea = vm.$el.querySelector('textarea');
-
+      it('converts a line', () => {
+        wrapper = createComponent();
+        const textarea = wrapper.find('textarea').element;
         textarea.setSelectionRange(0, 0);
-        vm.$el.querySelectorAll('.js-md')[5].click();
+        const markdownButton = getAllMarkdownButtons(wrapper).wrappers[5];
+        markdownButton.trigger('click');
 
-        Vue.nextTick(() => {
+        localVue.nextTick(() => {
           expect(textarea.value).toContain('*  testing');
-
-          done();
         });
       });
 
-      it('converts multiple lines', done => {
-        const textarea = vm.$el.querySelector('textarea');
-
+      it('converts multiple lines', () => {
+        wrapper = createComponent();
+        const textarea = wrapper.find('textarea').element;
         textarea.setSelectionRange(0, 50);
-        vm.$el.querySelectorAll('.js-md')[5].click();
+        const markdownButton = getAllMarkdownButtons(wrapper).wrappers[5];
+        markdownButton.trigger('click');
 
-        Vue.nextTick(() => {
+        localVue.nextTick(() => {
           expect(textarea.value).toContain('* testing\n* 123');
-
-          done();
         });
       });
     });