diff options
Diffstat (limited to 'spec/frontend/issue_show/components/fields')
3 files changed, 64 insertions, 68 deletions
diff --git a/spec/frontend/issue_show/components/fields/description_spec.js b/spec/frontend/issue_show/components/fields/description_spec.js index 96c81c419d0..a50be30cf4c 100644 --- a/spec/frontend/issue_show/components/fields/description_spec.js +++ b/spec/frontend/issue_show/components/fields/description_spec.js @@ -1,70 +1,70 @@ -import Vue from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import DescriptionField from '~/issue_show/components/fields/description.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'; +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; 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'); }); }); diff --git a/spec/frontend/issue_show/components/fields/description_template_spec.js b/spec/frontend/issue_show/components/fields/description_template_spec.js index 9ebab31f1ad..1193d4f8add 100644 --- a/spec/frontend/issue_show/components/fields/description_template_spec.js +++ b/spec/frontend/issue_show/components/fields/description_template_spec.js @@ -14,8 +14,10 @@ describe('Issue description template component', () => { vm = new Component({ propsData: { formState, - issuableTemplates: [{ name: 'test' }], + issuableTemplates: [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }], + projectId: 1, projectPath: '/', + namespacePath: '/', projectNamespace: '/', }, }).$mount(); @@ -23,7 +25,7 @@ describe('Issue description template component', () => { it('renders templates as JSON array in data attribute', () => { expect(vm.$el.querySelector('.js-issuable-selector').getAttribute('data-data')).toBe( - '[{"name":"test"}]', + '[{"name":"test","id":"test","project_path":"/","namespace_path":"/"}]', ); }); 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'); }); }); |