diff options
Diffstat (limited to 'spec/frontend/issue_show/components/fields/description_spec.js')
-rw-r--r-- | spec/frontend/issue_show/components/fields/description_spec.js | 78 |
1 files changed, 39 insertions, 39 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'); }); }); |