1 files changed, 21 insertions, 27 deletions

diff --git a/spec/frontend/issue_show/components/fields/title_spec.js b/spec/frontend/issue_show/components/fields/title_spec.js
index 99e8658b89f..783ce9eb76c 100644
--- a/spec/frontend/issue_show/components/fields/title_spec.js
+++ b/spec/frontend/issue_show/components/fields/title_spec.js
@@ -1,48 +1,42 @@
-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import TitleField from '~/issue_show/components/fields/title.vue';
 import eventHub from '~/issue_show/event_hub';
-import Store from '~/issue_show/stores';
-import titleField from '~/issue_show/components/fields/title.vue';
-import { keyboardDownEvent } from '../../helpers';
 
 describe('Title field component', () => {
-  let vm;
-  let store;
+  let wrapper;
 
-  beforeEach(() => {
-    const Component = Vue.extend(titleField);
-    store = new Store({
-      titleHtml: '',
-      descriptionHtml: '',
-      issuableRef: '',
-    });
-    store.formState.title = 'test';
+  const findInput = () => wrapper.find({ ref: 'input' });
 
-    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
+  beforeEach(() => {
+    jest.spyOn(eventHub, '$emit');
 
-    vm = new Component({
+    wrapper = shallowMount(TitleField, {
       propsData: {
-        formState: store.formState,
+        formState: {
+          title: 'test',
+        },
       },
-    }).$mount();
+    });
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders form control with formState title', () => {
-    expect(vm.$el.querySelector('.form-control').value).toBe('test');
+    expect(findInput().element.value).toBe('test');
   });
 
   it('triggers update with meta+enter', () => {
-    vm.$el.querySelector('.form-control').dispatchEvent(keyboardDownEvent(13, true));
+    findInput().trigger('keydown.enter', { metaKey: true });
 
-    expect(eventHub.$emit).toHaveBeenCalled();
+    expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 
   it('triggers update with ctrl+enter', () => {
-    vm.$el.querySelector('.form-control').dispatchEvent(keyboardDownEvent(13, false, true));
-
-    expect(eventHub.$emit).toHaveBeenCalled();
-  });
+    findInput().trigger('keydown.enter', { ctrlKey: true });
 
-  it('has a ref named `input`', () => {
-    expect(vm.$refs.input).not.toBeNull();
+    expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 });