diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-19 04:45:44 +0300 |
commit | 85dc423f7090da0a52c73eb66faf22ddb20efff9 (patch) | |
tree | 9160f299afd8c80c038f08e1545be119f5e3f1e1 /spec/frontend/issuable_create/components | |
parent | 15c2c8c66dbe422588e5411eee7e68f1fa440bb8 (diff) |
Add latest changes from gitlab-org/gitlab@13-4-stable-ee
Diffstat (limited to 'spec/frontend/issuable_create/components')
-rw-r--r-- | spec/frontend/issuable_create/components/issuable_create_root_spec.js | 64 | ||||
-rw-r--r-- | spec/frontend/issuable_create/components/issuable_form_spec.js | 119 |
2 files changed, 183 insertions, 0 deletions
diff --git a/spec/frontend/issuable_create/components/issuable_create_root_spec.js b/spec/frontend/issuable_create/components/issuable_create_root_spec.js new file mode 100644 index 00000000000..675d01ae4af --- /dev/null +++ b/spec/frontend/issuable_create/components/issuable_create_root_spec.js @@ -0,0 +1,64 @@ +import { mount } from '@vue/test-utils'; + +import IssuableCreateRoot from '~/issuable_create/components/issuable_create_root.vue'; +import IssuableForm from '~/issuable_create/components/issuable_form.vue'; + +const createComponent = ({ + descriptionPreviewPath = '/gitlab-org/gitlab-shell/preview_markdown', + descriptionHelpPath = '/help/user/markdown', + labelsFetchPath = '/gitlab-org/gitlab-shell/-/labels.json', + labelsManagePath = '/gitlab-org/gitlab-shell/-/labels', +} = {}) => { + return mount(IssuableCreateRoot, { + propsData: { + descriptionPreviewPath, + descriptionHelpPath, + labelsFetchPath, + labelsManagePath, + }, + slots: { + title: ` + <h1 class="js-create-title">New Issuable</h1> + `, + actions: ` + <button class="js-issuable-save">Submit issuable</button> + `, + }, + }); +}; + +describe('IssuableCreateRoot', () => { + let wrapper; + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('template', () => { + it('renders component container element with class "issuable-create-container"', () => { + expect(wrapper.classes()).toContain('issuable-create-container'); + }); + + it('renders contents for slot "title"', () => { + const titleEl = wrapper.find('h1.js-create-title'); + + expect(titleEl.exists()).toBe(true); + expect(titleEl.text()).toBe('New Issuable'); + }); + + it('renders issuable-form component', () => { + expect(wrapper.find(IssuableForm).exists()).toBe(true); + }); + + it('renders contents for slot "actions" within issuable-form component', () => { + const buttonEl = wrapper.find(IssuableForm).find('button.js-issuable-save'); + + expect(buttonEl.exists()).toBe(true); + expect(buttonEl.text()).toBe('Submit issuable'); + }); + }); +}); diff --git a/spec/frontend/issuable_create/components/issuable_form_spec.js b/spec/frontend/issuable_create/components/issuable_form_spec.js new file mode 100644 index 00000000000..e2c6b4d9521 --- /dev/null +++ b/spec/frontend/issuable_create/components/issuable_form_spec.js @@ -0,0 +1,119 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlFormInput } from '@gitlab/ui'; + +import MarkdownField from '~/vue_shared/components/markdown/field.vue'; +import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; + +import IssuableForm from '~/issuable_create/components/issuable_form.vue'; + +const createComponent = ({ + descriptionPreviewPath = '/gitlab-org/gitlab-shell/preview_markdown', + descriptionHelpPath = '/help/user/markdown', + labelsFetchPath = '/gitlab-org/gitlab-shell/-/labels.json', + labelsManagePath = '/gitlab-org/gitlab-shell/-/labels', +} = {}) => { + return shallowMount(IssuableForm, { + propsData: { + descriptionPreviewPath, + descriptionHelpPath, + labelsFetchPath, + labelsManagePath, + }, + slots: { + actions: ` + <button class="js-issuable-save">Submit issuable</button> + `, + }, + }); +}; + +describe('IssuableForm', () => { + let wrapper; + + beforeEach(() => { + wrapper = createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('methods', () => { + describe('handleUpdateSelectedLabels', () => { + it('sets provided `labels` param to prop `selectedLabels`', () => { + const labels = [ + { + id: 1, + color: '#BADA55', + text_color: '#ffffff', + title: 'Documentation', + }, + ]; + + wrapper.vm.handleUpdateSelectedLabels(labels); + + expect(wrapper.vm.selectedLabels).toBe(labels); + }); + }); + }); + + describe('template', () => { + it('renders issuable title input field', () => { + const titleFieldEl = wrapper.find('[data-testid="issuable-title"]'); + + expect(titleFieldEl.exists()).toBe(true); + expect(titleFieldEl.find('label').text()).toBe('Title'); + expect(titleFieldEl.find(GlFormInput).exists()).toBe(true); + expect(titleFieldEl.find(GlFormInput).attributes('placeholder')).toBe('Title'); + expect(titleFieldEl.find(GlFormInput).attributes('autofocus')).toBe('true'); + }); + + it('renders issuable description input field', () => { + const descriptionFieldEl = wrapper.find('[data-testid="issuable-description"]'); + + expect(descriptionFieldEl.exists()).toBe(true); + expect(descriptionFieldEl.find('label').text()).toBe('Description'); + expect(descriptionFieldEl.find(MarkdownField).exists()).toBe(true); + expect(descriptionFieldEl.find(MarkdownField).props()).toMatchObject({ + markdownPreviewPath: wrapper.vm.descriptionPreviewPath, + markdownDocsPath: wrapper.vm.descriptionHelpPath, + addSpacingClasses: false, + showSuggestPopover: true, + }); + expect(descriptionFieldEl.find('textarea').exists()).toBe(true); + expect(descriptionFieldEl.find('textarea').attributes('placeholder')).toBe( + 'Write a comment or drag your files hereā¦', + ); + }); + + it('renders labels select field', () => { + const labelsSelectEl = wrapper.find('[data-testid="issuable-labels"]'); + + expect(labelsSelectEl.exists()).toBe(true); + expect(labelsSelectEl.find('label').text()).toBe('Labels'); + expect(labelsSelectEl.find(LabelsSelect).exists()).toBe(true); + expect(labelsSelectEl.find(LabelsSelect).props()).toMatchObject({ + allowLabelEdit: true, + allowLabelCreate: true, + allowMultiselect: true, + allowScopedLabels: true, + labelsFetchPath: wrapper.vm.labelsFetchPath, + labelsManagePath: wrapper.vm.labelsManagePath, + selectedLabels: wrapper.vm.selectedLabels, + labelsListTitle: 'Select label', + footerCreateLabelTitle: 'Create project label', + footerManageLabelTitle: 'Manage project labels', + variant: 'embedded', + }); + }); + + it('renders contents for slot "actions"', () => { + const buttonEl = wrapper + .find('[data-testid="issuable-create-actions"]') + .find('button.js-issuable-save'); + + expect(buttonEl.exists()).toBe(true); + expect(buttonEl.text()).toBe('Submit issuable'); + }); + }); +}); |