Merge branch 'cngo-update-tests-to-remove-keyboardDownEvent' into 'master'

Update tests to remove `keyboardDownEvent` helper

See merge request gitlab-org/gitlab!53848

spec/frontend/issue_show/components/fields/description_spec.js

-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import DescriptionField from '~/issue_show/components/fields/description.vue';
+import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import eventHub from '~/issue_show/event_hub';
-import Store from '~/issue_show/stores';
-import descriptionField from '~/issue_show/components/fields/description.vue';
-import { keyboardDownEvent } from '../../helpers';
 
 describe('Description field component', () => {
-  let vm;
-  let store;
-
-  beforeEach((done) => {
-    const Component = Vue.extend(descriptionField);
-    const el = document.createElement('div');
-    store = new Store({
-      titleHtml: '',
-      descriptionHtml: '',
-      issuableRef: '',
-    });
-    store.formState.description = 'test';
-
-    document.body.appendChild(el);
+  let wrapper;
 
-    jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
+  const findTextarea = () => wrapper.find({ ref: 'textarea' });
 
-    vm = new Component({
-      el,
+  const mountComponent = (description = 'test') =>
+    shallowMount(DescriptionField, {
+      attachTo: document.body,
       propsData: {
         markdownPreviewPath: '/',
         markdownDocsPath: '/',
-        formState: store.formState,
+        formState: {
+          description,
+        },
+      },
+      stubs: {
+        MarkdownField,
       },
-    }).$mount();
+    });
+
+  beforeEach(() => {
+    jest.spyOn(eventHub, '$emit');
+  });
 
-    Vue.nextTick(done);
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
   });
 
   it('renders markdown field with description', () => {
-    expect(vm.$el.querySelector('.md-area textarea').value).toBe('test');
+    wrapper = mountComponent();
+
+    expect(findTextarea().element.value).toBe('test');
   });
 
-  it('renders markdown field with a markdown description', (done) => {
-    store.formState.description = '**test**';
+  it('renders markdown field with a markdown description', () => {
+    const markdown = '**test**';
 
-    Vue.nextTick(() => {
-      expect(vm.$el.querySelector('.md-area textarea').value).toBe('**test**');
+    wrapper = mountComponent(markdown);
 
-      done();
-    });
+    expect(findTextarea().element.value).toBe(markdown);
   });
 
   it('focuses field when mounted', () => {
-    expect(document.activeElement).toBe(vm.$refs.textarea);
+    wrapper = mountComponent();
+
+    expect(document.activeElement).toBe(findTextarea().element);
   });
 
   it('triggers update with meta+enter', () => {
-    vm.$el.querySelector('.md-area textarea').dispatchEvent(keyboardDownEvent(13, true));
+    wrapper = mountComponent();
 
-    expect(eventHub.$emit).toHaveBeenCalled();
+    findTextarea().trigger('keydown.enter', { metaKey: true });
+
+    expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 
   it('triggers update with ctrl+enter', () => {
-    vm.$el.querySelector('.md-area textarea').dispatchEvent(keyboardDownEvent(13, false, true));
+    wrapper = mountComponent();
 
-    expect(eventHub.$emit).toHaveBeenCalled();
-  });
+    findTextarea().trigger('keydown.enter', { ctrlKey: true });
 
-  it('has a ref named `textarea`', () => {
-    expect(vm.$refs.textarea).not.toBeNull();
+    expect(eventHub.$emit).toHaveBeenCalledWith('update.issuable');
   });
 });

spec/frontend/issue_show/components/fields/title_spec.js

-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');
   });
 });

spec/frontend/issue_show/helpers.js

-export const keyboardDownEvent = (code, metaKey = false, ctrlKey = false) => {
-  const e = new CustomEvent('keydown');
-
-  e.keyCode = code;
-  e.metaKey = metaKey;
-  e.ctrlKey = ctrlKey;
-
-  return e;
-};