diff --git a/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue b/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue index 40e5115b77091371193a1c5c798c94b2dcbbbd15..4cfcc5ccfccd47194beefd6098cad60734ce8161 100644 --- a/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue +++ b/ee/app/assets/javascripts/related_items_tree/components/create_issue_form.vue @@ -200,7 +200,7 @@ export default { </script> <template> - <div> + <form data-testid="form" @submit.prevent="createIssue"> <div class="row mb-3"> <div class="col-sm-6 gl-mb-3 gl-sm-mb-0"> <label class="label-bold">{{ s__('Issue|Title') }}</label> @@ -212,7 +212,6 @@ export default { parentItem.confidential ? __('New confidential issue title') : __('New issue title') " autofocus - @keyup.enter="createIssue" /> </div> <div class="col-sm-6"> @@ -297,6 +296,7 @@ export default { variant="confirm" category="primary" size="small" + type="submit" class="gl-mr-2" data-testid="submit-button" :disabled="isIssueCreationDisabled" @@ -308,5 +308,5 @@ export default { __('Cancel') }}</gl-button> </div> - </div> + </form> </template> diff --git a/ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js b/ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js index aa8122ffee348e040c7a7ff5b98da8bd357732d8..6902e0e4e9a535ca62ba09f57888d39ec92e78d0 100644 --- a/ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js +++ b/ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js @@ -13,7 +13,6 @@ import Vuex from 'vuex'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import { ENTER_KEY } from '~/lib/utils/keys'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -59,6 +58,7 @@ describe('CreateIssueForm', () => { const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader); const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); const findDropdownItem = (index) => findDropdownItems().at(index); + const findForm = () => wrapper.findByTestId('form'); const findIssueTitleInput = () => wrapper.findComponent(GlFormInput); const findIssueTitleLabel = () => wrapper.findAll('label').at(0); const findProjectItem = (project) => wrapper.findByTestId(`project-item-${project.id}`); @@ -161,13 +161,14 @@ describe('CreateIssueForm', () => { expect(input.attributes('value')).toBe(''); }); - it('emits event `submit` on enter', async () => { + it('emits event `submit` when form is submitted', async () => { const input = findTitleInput(); const endpoint = Api.buildUrl(Api.projectCreateIssuePath).replace(':id', mockProject.id); await selectProject(); await input.vm.$emit('input', 'Some issue'); - await input.vm.$emit('keyup', new KeyboardEvent({ key: ENTER_KEY })); + + await findForm().trigger('submit'); expect(wrapper.emitted('submit')[0]).toEqual( expect.arrayContaining([{ issuesEndpoint: endpoint, title: 'Some issue' }]),