diff options
Diffstat (limited to 'spec/frontend/issue_show')
13 files changed, 91 insertions, 98 deletions
diff --git a/spec/frontend/issue_show/components/app_spec.js b/spec/frontend/issue_show/components/app_spec.js index ec2055ca7d1..9e1bc8242fe 100644 --- a/spec/frontend/issue_show/components/app_spec.js +++ b/spec/frontend/issue_show/components/app_spec.js @@ -2,11 +2,15 @@ import { GlIntersectionObserver } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; import { useMockIntersectionObserver } from 'helpers/mock_dom_observer'; -import axios from '~/lib/utils/axios_utils'; -import { visitUrl } from '~/lib/utils/url_utility'; import '~/behaviors/markdown/render_gfm'; import IssuableApp from '~/issue_show/components/app.vue'; +import DescriptionComponent from '~/issue_show/components/description.vue'; +import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue'; +import PinnedLinks from '~/issue_show/components/pinned_links.vue'; +import { IssuableStatus, IssuableStatusText } from '~/issue_show/constants'; import eventHub from '~/issue_show/event_hub'; +import axios from '~/lib/utils/axios_utils'; +import { visitUrl } from '~/lib/utils/url_utility'; import { appProps, initialRequest, @@ -14,10 +18,6 @@ import { secondRequest, zoomMeetingUrl, } from '../mock_data'; -import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue'; -import DescriptionComponent from '~/issue_show/components/description.vue'; -import PinnedLinks from '~/issue_show/components/pinned_links.vue'; -import { IssuableStatus, IssuableStatusText } from '~/issue_show/constants'; function formatText(text) { return text.trim().replace(/\s\s+/g, ' '); @@ -423,7 +423,7 @@ describe('Issuable output', () => { }); it('shows the form if template names request is successful', () => { - const mockData = [{ name: 'Bug' }]; + const mockData = [{ name: 'test', id: 'test', project_path: '/', namespace_path: '/' }]; mock.onGet('/issuable-templates-path').reply(() => Promise.resolve([200, mockData])); return wrapper.vm.requestTemplatesAndShowForm().then(() => { diff --git a/spec/frontend/issue_show/components/description_spec.js b/spec/frontend/issue_show/components/description_spec.js index de53d98e6be..d59a257a2be 100644 --- a/spec/frontend/issue_show/components/description_spec.js +++ b/spec/frontend/issue_show/components/description_spec.js @@ -1,8 +1,8 @@ import $ from 'jquery'; import Vue from 'vue'; import '~/behaviors/markdown/render_gfm'; -import mountComponent from 'helpers/vue_mount_component_helper'; import { TEST_HOST } from 'helpers/test_constants'; +import mountComponent from 'helpers/vue_mount_component_helper'; import Description from '~/issue_show/components/description.vue'; import TaskList from '~/task_list'; import { descriptionProps as props } from '../mock_data'; 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'); }); }); diff --git a/spec/frontend/issue_show/components/form_spec.js b/spec/frontend/issue_show/components/form_spec.js index 4e123f606f6..4a8ec3cf66a 100644 --- a/spec/frontend/issue_show/components/form_spec.js +++ b/spec/frontend/issue_show/components/form_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import mountComponent from 'helpers/vue_mount_component_helper'; -import formComponent from '~/issue_show/components/form.vue'; import Autosave from '~/autosave'; +import formComponent from '~/issue_show/components/form.vue'; import eventHub from '~/issue_show/event_hub'; jest.mock('~/autosave'); @@ -19,6 +19,7 @@ describe('Inline edit form component', () => { markdownPreviewPath: '/', markdownDocsPath: '/', projectPath: '/', + projectId: 1, projectNamespace: '/', }; @@ -42,7 +43,11 @@ describe('Inline edit form component', () => { }); it('renders template selector when templates exists', () => { - createComponent({ issuableTemplates: ['test'] }); + createComponent({ + issuableTemplates: [ + { name: 'test', id: 'test', project_path: 'test', namespace_path: 'test' }, + ], + }); expect(vm.$el.querySelector('.js-issuable-selector-wrap')).not.toBeNull(); }); diff --git a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js b/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js index 112cb4d4c3a..6758e6192b8 100644 --- a/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js +++ b/spec/frontend/issue_show/components/incidents/highlight_bar_spec.js @@ -1,6 +1,6 @@ +import { GlLink } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import merge from 'lodash/merge'; -import { GlLink } from '@gitlab/ui'; import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue'; import { formatDate } from '~/lib/utils/datetime_utility'; diff --git a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js index 416870d1408..f46b6ba6f54 100644 --- a/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js +++ b/spec/frontend/issue_show/components/incidents/incident_tabs_spec.js @@ -1,15 +1,15 @@ +import { GlTab } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import merge from 'lodash/merge'; -import { GlTab } from '@gitlab/ui'; import waitForPromises from 'helpers/wait_for_promises'; -import INVALID_URL from '~/lib/utils/invalid_url'; -import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue'; -import { descriptionProps } from '../../mock_data'; +import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; import DescriptionComponent from '~/issue_show/components/description.vue'; import HighlightBar from '~/issue_show/components/incidents/highlight_bar.vue'; -import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; +import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue'; +import INVALID_URL from '~/lib/utils/invalid_url'; import Tracking from '~/tracking'; -import { trackIncidentDetailsViewsOptions } from '~/incidents/constants'; +import AlertDetailsTable from '~/vue_shared/components/alert_details_table.vue'; +import { descriptionProps } from '../../mock_data'; const mockAlert = { __typename: 'AlertManagementAlert', diff --git a/spec/frontend/issue_show/components/pinned_links_spec.js b/spec/frontend/issue_show/components/pinned_links_spec.js index 2d140fd068a..3fe1f9fd6d9 100644 --- a/spec/frontend/issue_show/components/pinned_links_spec.js +++ b/spec/frontend/issue_show/components/pinned_links_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import PinnedLinks from '~/issue_show/components/pinned_links.vue'; import { STATUS_PAGE_PUBLISHED, JOIN_ZOOM_MEETING } from '~/issue_show/constants'; diff --git a/spec/frontend/issue_show/components/title_spec.js b/spec/frontend/issue_show/components/title_spec.js index c274048fdd5..78880a7f540 100644 --- a/spec/frontend/issue_show/components/title_spec.js +++ b/spec/frontend/issue_show/components/title_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; -import Store from '~/issue_show/stores'; import titleComponent from '~/issue_show/components/title.vue'; import eventHub from '~/issue_show/event_hub'; +import Store from '~/issue_show/stores'; describe('Title component', () => { let vm; diff --git a/spec/frontend/issue_show/helpers.js b/spec/frontend/issue_show/helpers.js deleted file mode 100644 index 7ca6a22929d..00000000000 --- a/spec/frontend/issue_show/helpers.js +++ /dev/null @@ -1,9 +0,0 @@ -export const keyboardDownEvent = (code, metaKey = false, ctrlKey = false) => { - const e = new CustomEvent('keydown'); - - e.keyCode = code; - e.metaKey = metaKey; - e.ctrlKey = ctrlKey; - - return e; -}; diff --git a/spec/frontend/issue_show/issue_spec.js b/spec/frontend/issue_show/issue_spec.js index 818f501882b..9cb7059dd7f 100644 --- a/spec/frontend/issue_show/issue_spec.js +++ b/spec/frontend/issue_show/issue_spec.js @@ -1,11 +1,11 @@ import MockAdapter from 'axios-mock-adapter'; import { useMockIntersectionObserver } from 'helpers/mock_dom_observer'; import waitForPromises from 'helpers/wait_for_promises'; -import axios from '~/lib/utils/axios_utils'; import { initIssuableApp } from '~/issue_show/issue'; import * as parseData from '~/issue_show/utils/parse_data'; -import { appProps } from './mock_data'; +import axios from '~/lib/utils/axios_utils'; import createStore from '~/notes/stores'; +import { appProps } from './mock_data'; const mock = new MockAdapter(axios); mock.onGet().reply(200); diff --git a/spec/frontend/issue_show/mock_data.js b/spec/frontend/issue_show/mock_data.js index 5a31a550088..fd08c95b454 100644 --- a/spec/frontend/issue_show/mock_data.js +++ b/spec/frontend/issue_show/mock_data.js @@ -52,6 +52,7 @@ export const appProps = { markdownDocsPath: '/', projectNamespace: '/', projectPath: '/', + projectId: 1, issuableTemplateNamesPath: '/issuable-templates-path', zoomMeetingUrl, publishedIncidentUrl, |