3 files changed, 49 insertions, 61 deletions

diff --git a/spec/frontend/issues/show/components/fields/description_spec.js b/spec/frontend/issues/show/components/fields/description_spec.js
index dd511c3945c..0dcd70ac19b 100644
--- a/spec/frontend/issues/show/components/fields/description_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_spec.js
@@ -14,9 +14,8 @@ describe('Description field component', () => {
       propsData: {
         markdownPreviewPath: '/',
         markdownDocsPath: '/',
-        formState: {
-          description,
-        },
+        quickActionsDocsPath: '/',
+        value: description,
       },
       stubs: {
         MarkdownField,
diff --git a/spec/frontend/issues/show/components/fields/description_template_spec.js b/spec/frontend/issues/show/components/fields/description_template_spec.js
index abe2805e5b2..79a3bfa9840 100644
--- a/spec/frontend/issues/show/components/fields/description_template_spec.js
+++ b/spec/frontend/issues/show/components/fields/description_template_spec.js
@@ -1,74 +1,65 @@
-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
 import descriptionTemplate from '~/issues/show/components/fields/description_template.vue';
 
 describe('Issue description template component with templates as hash', () => {
-  let vm;
-  let formState;
+  let wrapper;
+  const defaultOptions = {
+    propsData: {
+      value: 'test',
+      issuableTemplates: {
+        test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
+      },
+      projectId: 1,
+      projectPath: '/',
+      namespacePath: '/',
+      projectNamespace: '/',
+    },
+  };
 
-  beforeEach(() => {
-    const Component = Vue.extend(descriptionTemplate);
-    formState = {
-      description: 'test',
-    };
+  const findIssuableSelector = () => wrapper.find('.js-issuable-selector');
 
-    vm = new Component({
-      propsData: {
-        formState,
-        issuableTemplates: {
-          test: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
-        },
-        projectId: 1,
-        projectPath: '/',
-        namespacePath: '/',
-        projectNamespace: '/',
-      },
-    }).$mount();
+  const createComponent = (options = defaultOptions) => {
+    wrapper = shallowMount(descriptionTemplate, options);
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
   });
 
   it('renders templates as JSON hash in data attribute', () => {
-    expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
+    createComponent();
+    expect(findIssuableSelector().attributes('data-data')).toBe(
       '{"test":[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]}',
     );
   });
 
-  it('updates formState when changing template', () => {
-    vm.issuableTemplate.editor.setValue('test new template');
+  it('emits input event', () => {
+    createComponent();
+    wrapper.vm.issuableTemplate.editor.setValue('test new template');
 
-    expect(formState.description).toBe('test new template');
+    expect(wrapper.emitted('input')).toEqual([['test new template']]);
   });
 
-  it('returns formState description with editor getValue', () => {
-    formState.description = 'testing new template';
-
-    expect(vm.issuableTemplate.editor.getValue()).toBe('testing new template');
+  it('returns value with editor getValue', () => {
+    createComponent();
+    expect(wrapper.vm.issuableTemplate.editor.getValue()).toBe('test');
   });
-});
-
-describe('Issue description template component with templates as array', () => {
-  let vm;
-  let formState;
 
-  beforeEach(() => {
-    const Component = Vue.extend(descriptionTemplate);
-    formState = {
-      description: 'test',
-    };
-
-    vm = new Component({
-      propsData: {
-        formState,
-        issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
-        projectId: 1,
-        projectPath: '/',
-        namespacePath: '/',
-        projectNamespace: '/',
-      },
-    }).$mount();
-  });
-
-  it('renders templates as JSON array in data attribute', () => {
-    expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe(
-      '[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
-    );
+  describe('Issue description template component with templates as array', () => {
+    it('renders templates as JSON array in data attribute', () => {
+      createComponent({
+        propsData: {
+          value: 'test',
+          issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }],
+          projectId: 1,
+          projectPath: '/',
+          namespacePath: '/',
+          projectNamespace: '/',
+        },
+      });
+      expect(findIssuableSelector().attributes('data-data')).toBe(
+        '[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]',
+      );
+    });
   });
 });
diff --git a/spec/frontend/issues/show/components/fields/title_spec.js b/spec/frontend/issues/show/components/fields/title_spec.js
index efd0b6fbd30..de04405d89b 100644
--- a/spec/frontend/issues/show/components/fields/title_spec.js
+++ b/spec/frontend/issues/show/components/fields/title_spec.js
@@ -12,9 +12,7 @@ describe('Title field component', () => {
 
     wrapper = shallowMount(TitleField, {
       propsData: {
-        formState: {
-          title: 'test',
-        },
+        value: 'test',
       },
     });
   });