diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/components')
6 files changed, 95 insertions, 46 deletions
diff --git a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js index bc77b7045eb..b54feea6ff7 100644 --- a/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js +++ b/spec/frontend/pipeline_editor/components/commit/commit_section_spec.js @@ -1,17 +1,20 @@ import VueApollo from 'vue-apollo'; import { GlFormTextarea, GlFormInput, GlLoadingIcon } from '@gitlab/ui'; -import { createLocalVue, mount } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue from 'vue'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import { objectToQuery, redirectTo } from '~/lib/utils/url_utility'; import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue'; import CommitSection from '~/pipeline_editor/components/commit/commit_section.vue'; import { COMMIT_ACTION_CREATE, COMMIT_ACTION_UPDATE, COMMIT_SUCCESS, + COMMIT_SUCCESS_WITH_REDIRECT, } from '~/pipeline_editor/constants'; +import { resolvers } from '~/pipeline_editor/graphql/resolvers'; import commitCreate from '~/pipeline_editor/graphql/mutations/commit_ci_file.mutation.graphql'; +import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql'; import updatePipelineEtag from '~/pipeline_editor/graphql/mutations/client/update_pipeline_etag.mutation.graphql'; import { @@ -23,18 +26,8 @@ import { mockCommitMessage, mockDefaultBranch, mockProjectFullPath, - mockNewMergeRequestPath, } from '../../mock_data'; -const localVue = createLocalVue(); - -jest.mock('~/lib/utils/url_utility', () => ({ - redirectTo: jest.fn(), - refreshCurrentPage: jest.fn(), - objectToQuery: jest.requireActual('~/lib/utils/url_utility').objectToQuery, - mergeUrlParams: jest.requireActual('~/lib/utils/url_utility').mergeUrlParams, -})); - const mockVariables = { action: COMMIT_ACTION_UPDATE, projectPath: mockProjectFullPath, @@ -48,7 +41,6 @@ const mockVariables = { const mockProvide = { ciConfigPath: mockCiConfigPath, projectFullPath: mockProjectFullPath, - newMergeRequestPath: mockNewMergeRequestPath, }; describe('Pipeline Editor | Commit section', () => { @@ -79,11 +71,23 @@ describe('Pipeline Editor | Commit section', () => { const createComponentWithApollo = (options) => { const handlers = [[commitCreate, mockMutateCommitData]]; - localVue.use(VueApollo); - mockApollo = createMockApollo(handlers); + Vue.use(VueApollo); + mockApollo = createMockApollo(handlers, resolvers); + + mockApollo.clients.defaultClient.cache.writeQuery({ + query: getCurrentBranch, + data: { + workBranches: { + __typename: 'BranchList', + current: { + __typename: 'WorkBranch', + name: mockDefaultBranch, + }, + }, + }, + }); const apolloConfig = { - localVue, apolloProvider: mockApollo, }; @@ -209,20 +213,23 @@ describe('Pipeline Editor | Commit section', () => { const newBranch = 'new-branch'; beforeEach(async () => { + mockMutateCommitData.mockResolvedValue(mockCommitCreateResponse); createComponentWithApollo(); + mockMutateCommitData.mockResolvedValue(mockCommitCreateResponse); await submitCommit({ branch: newBranch, openMergeRequest: true, }); }); - it('redirects to the merge request page with source and target branches', () => { - const branchesQuery = objectToQuery({ - 'merge_request[source_branch]': newBranch, - 'merge_request[target_branch]': mockDefaultBranch, - }); - - expect(redirectTo).toHaveBeenCalledWith(`${mockNewMergeRequestPath}?${branchesQuery}`); + it('emits a commit event with the right type, sourceBranch and targetBranch', () => { + expect(wrapper.emitted('commit')).toBeTruthy(); + expect(wrapper.emitted('commit')[0]).toMatchObject([ + { + type: COMMIT_SUCCESS_WITH_REDIRECT, + params: { sourceBranch: newBranch, targetBranch: mockDefaultBranch }, + }, + ]); }); }); diff --git a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js index ab9027a56a4..7dbacad34bf 100644 --- a/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js +++ b/spec/frontend/pipeline_editor/components/file-nav/branch_switcher_spec.js @@ -12,6 +12,10 @@ import waitForPromises from 'helpers/wait_for_promises'; import BranchSwitcher from '~/pipeline_editor/components/file_nav/branch_switcher.vue'; import { DEFAULT_FAILURE } from '~/pipeline_editor/constants'; import getAvailableBranchesQuery from '~/pipeline_editor/graphql/queries/available_branches.query.graphql'; +import getCurrentBranch from '~/pipeline_editor/graphql/queries/client/current_branch.query.graphql'; +import getLastCommitBranch from '~/pipeline_editor/graphql/queries/client/last_commit_branch.query.graphql'; +import { resolvers } from '~/pipeline_editor/graphql/resolvers'; + import { mockBranchPaginationLimit, mockDefaultBranch, @@ -34,6 +38,7 @@ describe('Pipeline editor branch switcher', () => { const createComponent = ({ currentBranch = mockDefaultBranch, + availableBranches = ['main'], isQueryLoading = false, mountFn = shallowMount, options = {}, @@ -59,7 +64,7 @@ describe('Pipeline editor branch switcher', () => { }, data() { return { - availableBranches: ['main'], + availableBranches, currentBranch, }; }, @@ -67,13 +72,44 @@ describe('Pipeline editor branch switcher', () => { }); }; - const createComponentWithApollo = ({ mountFn = shallowMount, props = {} } = {}) => { + const createComponentWithApollo = ({ + mountFn = shallowMount, + props = {}, + availableBranches = ['main'], + } = {}) => { const handlers = [[getAvailableBranchesQuery, mockAvailableBranchQuery]]; - mockApollo = createMockApollo(handlers); + mockApollo = createMockApollo(handlers, resolvers); + + mockApollo.clients.defaultClient.cache.writeQuery({ + query: getCurrentBranch, + data: { + workBranches: { + __typename: 'BranchList', + current: { + __typename: 'WorkBranch', + name: mockDefaultBranch, + }, + }, + }, + }); + + mockApollo.clients.defaultClient.cache.writeQuery({ + query: getLastCommitBranch, + data: { + workBranches: { + __typename: 'BranchList', + lastCommit: { + __typename: 'WorkBranch', + name: '', + }, + }, + }, + }); createComponent({ mountFn, props, + availableBranches, options: { localVue, apolloProvider: mockApollo, @@ -113,7 +149,7 @@ describe('Pipeline editor branch switcher', () => { describe('when querying for the first time', () => { beforeEach(() => { - createComponentWithApollo(); + createComponentWithApollo({ availableBranches: [] }); }); it('disables the dropdown', () => { @@ -153,7 +189,7 @@ describe('Pipeline editor branch switcher', () => { describe('on fetch error', () => { beforeEach(async () => { setAvailableBranchesMock(new Error()); - createComponentWithApollo(); + createComponentWithApollo({ availableBranches: [] }); await waitForPromises(); }); diff --git a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js index c101b1d21c7..35315db39f8 100644 --- a/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js +++ b/spec/frontend/pipeline_editor/components/header/pipeline_status_spec.js @@ -1,5 +1,6 @@ import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; @@ -8,8 +9,7 @@ import getPipelineQuery from '~/pipeline_editor/graphql/queries/pipeline.query.g import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue'; import { mockCommitSha, mockProjectPipeline, mockProjectFullPath } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('Pipeline Status', () => { let wrapper; @@ -21,7 +21,6 @@ describe('Pipeline Status', () => { mockApollo = createMockApollo(handlers); wrapper = shallowMount(PipelineStatus, { - localVue, apolloProvider: mockApollo, propsData: { commitSha: mockCommitSha, @@ -70,13 +69,13 @@ describe('Pipeline Status', () => { describe('when querying data', () => { describe('when data is set', () => { - beforeEach(() => { + beforeEach(async () => { mockPipelineQuery.mockResolvedValue({ data: { project: mockProjectPipeline() }, }); createComponentWithApollo(); - waitForPromises(); + await waitForPromises(); }); it('query is called with correct variables', async () => { diff --git a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js index 6b9f576917f..93eb18c90cf 100644 --- a/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js +++ b/spec/frontend/pipeline_editor/components/header/pipline_editor_mini_graph_spec.js @@ -1,14 +1,15 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import PipelineEditorMiniGraph from '~/pipeline_editor/components/header/pipeline_editor_mini_graph.vue'; import PipelineMiniGraph from '~/pipelines/components/pipelines_list/pipeline_mini_graph.vue'; import getLinkedPipelinesQuery from '~/projects/commit_box/info/graphql/queries/get_linked_pipelines.query.graphql'; import { PIPELINE_FAILURE } from '~/pipeline_editor/constants'; import { mockLinkedPipelines, mockProjectFullPath, mockProjectPipeline } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('Pipeline Status', () => { let wrapper; @@ -35,7 +36,6 @@ describe('Pipeline Status', () => { createComponent({ hasStages, options: { - localVue, apolloProvider: mockApollo, }, }); @@ -89,9 +89,10 @@ describe('Pipeline Status', () => { }); describe('when query fails', () => { - beforeEach(() => { + beforeEach(async () => { mockLinkedPipelinesQuery.mockRejectedValue(new Error()); createComponentWithApollo(); + await waitForPromises(); }); it('should emit an error event when query fails', async () => { diff --git a/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js b/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js index 570323826d1..1ad621e6f45 100644 --- a/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js +++ b/spec/frontend/pipeline_editor/components/header/validation_segment_spec.js @@ -1,6 +1,7 @@ import VueApollo from 'vue-apollo'; import { GlIcon } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import { escape } from 'lodash'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import createMockApollo from 'helpers/mock_apollo_helper'; @@ -24,8 +25,7 @@ import { mockYmlHelpPagePath, } from '../../mock_data'; -const localVue = createLocalVue(); -localVue.use(VueApollo); +Vue.use(VueApollo); describe('Validation segment component', () => { let wrapper; @@ -45,7 +45,6 @@ describe('Validation segment component', () => { wrapper = extendedWrapper( shallowMount(ValidationSegment, { - localVue, apolloProvider: mockApollo, provide: { ymlHelpPagePath: mockYmlHelpPagePath, diff --git a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_messages_spec.js b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_messages_spec.js index a55176ccd79..d9ecee31e83 100644 --- a/spec/frontend/pipeline_editor/components/ui/pipeline_editor_messages_spec.js +++ b/spec/frontend/pipeline_editor/components/ui/pipeline_editor_messages_spec.js @@ -8,6 +8,7 @@ import PipelineEditorMessages from '~/pipeline_editor/components/ui/pipeline_edi import { COMMIT_FAILURE, COMMIT_SUCCESS, + COMMIT_SUCCESS_WITH_REDIRECT, DEFAULT_FAILURE, DEFAULT_SUCCESS, LOAD_FAILURE_UNKNOWN, @@ -34,7 +35,13 @@ describe('Pipeline Editor messages', () => { it('shows a message for successful commit type', () => { createComponent({ successType: COMMIT_SUCCESS, showSuccess: true }); - expect(findAlert().text()).toBe(wrapper.vm.$options.successTexts[COMMIT_SUCCESS]); + expect(findAlert().text()).toBe(wrapper.vm.$options.success[COMMIT_SUCCESS]); + }); + + it('shows a message for successful commit with redirect type', () => { + createComponent({ successType: COMMIT_SUCCESS_WITH_REDIRECT, showSuccess: true }); + + expect(findAlert().text()).toBe(wrapper.vm.$options.success[COMMIT_SUCCESS_WITH_REDIRECT]); }); it('does not show alert when there is a successType but visibility is off', () => { @@ -46,7 +53,7 @@ describe('Pipeline Editor messages', () => { it('shows a success alert with default copy if `showSuccess` is true and the `successType` is not valid,', () => { createComponent({ successType: 'random', showSuccess: true }); - expect(findAlert().text()).toBe(wrapper.vm.$options.successTexts[DEFAULT_SUCCESS]); + expect(findAlert().text()).toBe(wrapper.vm.$options.success[DEFAULT_SUCCESS]); }); it('emit `hide-success` event when clicking on the dismiss button', async () => { @@ -71,7 +78,7 @@ describe('Pipeline Editor messages', () => { `('shows a message for $message', ({ failureType, expectedFailureType }) => { createComponent({ failureType, showFailure: true }); - expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[expectedFailureType]); + expect(findAlert().text()).toBe(wrapper.vm.$options.errors[expectedFailureType]); }); it('show failure reasons when there are some', () => { |