diff options
Diffstat (limited to 'spec/frontend/jira_import/components/jira_import_form_spec.js')
-rw-r--r-- | spec/frontend/jira_import/components/jira_import_form_spec.js | 179 |
1 files changed, 109 insertions, 70 deletions
diff --git a/spec/frontend/jira_import/components/jira_import_form_spec.js b/spec/frontend/jira_import/components/jira_import_form_spec.js index dea94e7bf1f..685b0288e92 100644 --- a/spec/frontend/jira_import/components/jira_import_form_spec.js +++ b/spec/frontend/jira_import/components/jira_import_form_spec.js @@ -1,44 +1,51 @@ -import { GlAvatar, GlButton, GlFormSelect, GlLabel } from '@gitlab/ui'; +import { GlButton, GlFormSelect, GlLabel, GlTable } from '@gitlab/ui'; +import { getByRole } from '@testing-library/dom'; import { mount, shallowMount } from '@vue/test-utils'; +import AxiosMockAdapter from 'axios-mock-adapter'; +import axios from '~/lib/utils/axios_utils'; import JiraImportForm from '~/jira_import/components/jira_import_form.vue'; - -const importLabel = 'jira-import::MTG-1'; -const value = 'MTG'; - -const mountComponent = ({ mountType } = {}) => { - const mountFunction = mountType === 'mount' ? mount : shallowMount; - - return mountFunction(JiraImportForm, { - propsData: { - importLabel, - issuesPath: 'gitlab-org/gitlab-test/-/issues', - jiraProjects: [ - { - text: 'My Jira Project', - value: 'MJP', - }, - { - text: 'My Second Jira Project', - value: 'MSJP', - }, - { - text: 'Migrate to GitLab', - value: 'MTG', - }, - ], - value, - }, - }); -}; +import { issuesPath, jiraProjects, userMappings } from '../mock_data'; describe('JiraImportForm', () => { + let axiosMock; let wrapper; + const currentUsername = 'mrgitlab'; + const importLabel = 'jira-import::MTG-1'; + const value = 'MTG'; + const getSelectDropdown = () => wrapper.find(GlFormSelect); const getCancelButton = () => wrapper.findAll(GlButton).at(1); + const getHeader = name => getByRole(wrapper.element, 'columnheader', { name }); + + const mountComponent = ({ isSubmitting = false, mountFunction = shallowMount } = {}) => + mountFunction(JiraImportForm, { + propsData: { + importLabel, + isSubmitting, + issuesPath, + jiraProjects, + projectId: '5', + userMappings, + value, + }, + data: () => ({ + isFetching: false, + searchTerm: '', + selectState: null, + users: [], + }), + currentUsername, + }); + + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + }); + afterEach(() => { + axiosMock.restore(); wrapper.destroy(); wrapper = null; }); @@ -51,16 +58,22 @@ describe('JiraImportForm', () => { }); it('contains a list of Jira projects to select from', () => { - wrapper = mountComponent({ mountType: 'mount' }); - - const optionItems = ['My Jira Project', 'My Second Jira Project', 'Migrate to GitLab']; + wrapper = mountComponent({ mountFunction: mount }); getSelectDropdown() .findAll('option') .wrappers.forEach((optionEl, index) => { - expect(optionEl.text()).toBe(optionItems[index]); + expect(optionEl.text()).toBe(jiraProjects[index].text); }); }); + + it('emits an "input" event when the input select value changes', () => { + wrapper = mountComponent(); + + getSelectDropdown().vm.$emit('change', value); + + expect(wrapper.emitted('input')[0]).toEqual([value]); + }); }); describe('form information', () => { @@ -72,64 +85,90 @@ describe('JiraImportForm', () => { expect(wrapper.find(GlLabel).props('title')).toBe(importLabel); }); + it('shows a heading for the user mapping section', () => { + expect( + getByRole(wrapper.element, 'heading', { name: 'Jira-GitLab user mapping template' }), + ).toBeTruthy(); + }); + it('shows information to the user', () => { expect(wrapper.find('p').text()).toBe( - "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:", + 'Jira users have been matched with similar GitLab users. This can be overwritten by selecting a GitLab user from the dropdown in the "GitLab username" column. If it wasn\'t possible to match a Jira user with a GitLab user, the dropdown defaults to the user conducting the import.', ); }); + }); - it('shows jira.issue.summary for the Title', () => { - expect(wrapper.find('[id="jira-project-title"]').text()).toBe('jira.issue.summary'); - }); + describe('table', () => { + describe('headers', () => { + beforeEach(() => { + wrapper = mountComponent({ mountFunction: mount }); + }); - it('shows an avatar for the Reporter', () => { - expect(wrapper.contains(GlAvatar)).toBe(true); - }); + it('has a "Jira display name" column', () => { + expect(getHeader('Jira display name')).toBeTruthy(); + }); - it('shows jira.issue.description.content for the Description', () => { - expect(wrapper.find('[id="jira-project-description"]').text()).toBe( - 'jira.issue.description.content', - ); - }); - }); + it('has an "arrow" column', () => { + expect(getHeader('Arrow')).toBeTruthy(); + }); - describe('Next button', () => { - beforeEach(() => { - wrapper = mountComponent(); + it('has a "GitLab username" column', () => { + expect(getHeader('GitLab username')).toBeTruthy(); + }); }); - it('is shown', () => { - expect(wrapper.find(GlButton).text()).toBe('Next'); + describe('body', () => { + it('shows all user mappings', () => { + wrapper = mountComponent({ mountFunction: mount }); + + expect(wrapper.find(GlTable).findAll('tbody tr').length).toBe(userMappings.length); + }); + + it('shows correct information in each cell', () => { + wrapper = mountComponent({ mountFunction: mount }); + + expect(wrapper.find(GlTable).element).toMatchSnapshot(); + }); }); }); - describe('Cancel button', () => { - beforeEach(() => { - wrapper = mountComponent(); - }); + describe('buttons', () => { + describe('"Continue" button', () => { + it('is shown', () => { + wrapper = mountComponent(); - it('is shown', () => { - expect(getCancelButton().text()).toBe('Cancel'); - }); + expect(wrapper.find(GlButton).text()).toBe('Continue'); + }); + + it('is in loading state when the form is submitting', async () => { + wrapper = mountComponent({ isSubmitting: true }); - it('links to the Issues page', () => { - expect(getCancelButton().attributes('href')).toBe('gitlab-org/gitlab-test/-/issues'); + expect(wrapper.find(GlButton).props('loading')).toBe(true); + }); }); - }); - it('emits an "input" event when the input select value changes', () => { - wrapper = mountComponent({ mountType: 'mount' }); + describe('"Cancel" button', () => { + beforeEach(() => { + wrapper = mountComponent(); + }); - getSelectDropdown().vm.$emit('change', value); + it('is shown', () => { + expect(getCancelButton().text()).toBe('Cancel'); + }); - expect(wrapper.emitted('input')[0]).toEqual([value]); + it('links to the Issues page', () => { + expect(getCancelButton().attributes('href')).toBe(issuesPath); + }); + }); }); - it('emits an "initiateJiraImport" event with the selected dropdown value when submitted', () => { - wrapper = mountComponent(); + describe('form', () => { + it('emits an "initiateJiraImport" event with the selected dropdown value when submitted', () => { + wrapper = mountComponent(); - wrapper.find('form').trigger('submit'); + wrapper.find('form').trigger('submit'); - expect(wrapper.emitted('initiateJiraImport')[0]).toEqual([value]); + expect(wrapper.emitted('initiateJiraImport')[0]).toEqual([value]); + }); }); }); |