1 files changed, 57 insertions, 71 deletions

diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
index ace266aec5e..c2ef29c1059 100644
--- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
+++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js
@@ -1,135 +1,121 @@
-import Vue, { nextTick } from 'vue';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
-import createComponent from 'helpers/vue_mount_component_helper';
+import { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
 import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue';
 
 describe('IDE commit message field', () => {
-  const Component = Vue.extend(CommitMessageField);
-  let vm;
+  let wrapper;
 
   beforeEach(() => {
-    setHTMLFixture('<div id="app"></div>');
-
-    vm = createComponent(
-      Component,
-      {
+    wrapper = mount(CommitMessageField, {
+      propsData: {
         text: '',
         placeholder: 'testing',
       },
-      '#app',
-    );
+      attachTo: document.body,
+    });
   });
 
   afterEach(() => {
-    vm.$destroy();
-
-    resetHTMLFixture();
+    wrapper.destroy();
   });
 
+  const findMessage = () => wrapper.find('textarea');
+  const findHighlights = () => wrapper.findAll('.highlights span');
+  const findMarks = () => wrapper.findAll('mark');
+
   it('adds is-focused class on focus', async () => {
-    vm.$el.querySelector('textarea').focus();
+    await findMessage().trigger('focus');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(true);
   });
 
   it('removed is-focused class on blur', async () => {
-    vm.$el.querySelector('textarea').focus();
+    await findMessage().trigger('focus');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).not.toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(true);
 
-    vm.$el.querySelector('textarea').blur();
+    await findMessage().trigger('blur');
 
-    await nextTick();
-    expect(vm.$el.querySelector('.is-focused')).toBeNull();
+    expect(wrapper.find('.is-focused').exists()).toBe(false);
   });
 
-  it('emits input event on input', () => {
-    jest.spyOn(vm, '$emit').mockImplementation();
-
-    const textarea = vm.$el.querySelector('textarea');
-    textarea.value = 'testing';
-
-    textarea.dispatchEvent(new Event('input'));
+  it('emits input event on input', async () => {
+    await findMessage().setValue('testing');
 
-    expect(vm.$emit).toHaveBeenCalledWith('input', 'testing');
+    expect(wrapper.emitted('input')[0]).toStrictEqual(['testing']);
   });
 
   describe('highlights', () => {
     describe('subject line', () => {
       it('does not highlight less than 50 characters', async () => {
-        vm.text = 'text less than 50 chars';
+        await wrapper.setProps({ text: 'text less than 50 chars' });
 
-        await nextTick();
-        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
-          'text less than 50 chars',
-        );
+        expect(findHighlights()).toHaveLength(1);
+        expect(findHighlights().at(0).text()).toContain('text less than 50 chars');
 
-        expect(vm.$el.querySelector('mark').style.display).toBe('none');
+        expect(findMarks()).toHaveLength(1);
+        expect(findMarks().at(0).isVisible()).toBe(false);
       });
 
       it('highlights characters over 50 length', async () => {
-        vm.text =
-          'text less than 50 chars that should not highlighted. text more than 50 should be highlighted';
+        await wrapper.setProps({
+          text:
+            'text less than 50 chars that should not highlighted. text more than 50 should be highlighted',
+        });
 
-        await nextTick();
-        expect(vm.$el.querySelector('.highlights span').textContent).toContain(
+        expect(findHighlights()).toHaveLength(1);
+        expect(findHighlights().at(0).text()).toContain(
           'text less than 50 chars that should not highlighte',
         );
 
-        expect(vm.$el.querySelector('mark').style.display).not.toBe('none');
-        expect(vm.$el.querySelector('mark').textContent).toBe(
-          'd. text more than 50 should be highlighted',
-        );
+        expect(findMarks()).toHaveLength(1);
+        expect(findMarks().at(0).isVisible()).toBe(true);
+        expect(findMarks().at(0).text()).toBe('d. text more than 50 should be highlighted');
       });
     });
 
     describe('body text', () => {
       it('does not highlight body text less tan 72 characters', async () => {
-        vm.text = 'subject line\nbody content';
+        await wrapper.setProps({ text: 'subject line\nbody content' });
 
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none');
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks().at(1).isVisible()).toBe(false);
       });
 
       it('highlights body text more than 72 characters', async () => {
-        vm.text =
-          'subject line\nbody content that will be highlighted when it is more than 72 characters in length';
-
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none');
-        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
+        await wrapper.setProps({
+          text:
+            'subject line\nbody content that will be highlighted when it is more than 72 characters in length',
+        });
+
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks().at(1).isVisible()).toBe(true);
+        expect(findMarks().at(1).text()).toBe('in length');
       });
 
       it('highlights body text & subject line', async () => {
-        vm.text =
-          'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length';
+        await wrapper.setProps({
+          text:
+            'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length',
+        });
 
-        await nextTick();
-        expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2);
-        expect(vm.$el.querySelectorAll('mark').length).toBe(2);
+        expect(findHighlights()).toHaveLength(2);
+        expect(findMarks()).toHaveLength(2);
 
-        expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d');
-        expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length');
+        expect(findMarks().at(0).text()).toContain('d');
+        expect(findMarks().at(1).text()).toBe('in length');
       });
     });
   });
 
   describe('scrolling textarea', () => {
     it('updates transform of highlights', async () => {
-      vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content';
+      await wrapper.setProps({ text: 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content' });
 
+      findMessage().element.scrollTo(0, 50);
       await nextTick();
-      vm.$el.querySelector('textarea').scrollTo(0, 50);
 
-      vm.handleScroll();
-
-      await nextTick();
-      expect(vm.scrollTop).toBe(50);
-      expect(vm.$el.querySelector('.highlights').style.transform).toBe('translate3d(0, -50px, 0)');
+      expect(wrapper.find('.highlights').element.style.transform).toBe('translate3d(0, -50px, 0)');
     });
   });
 });