diff options
Diffstat (limited to 'spec/frontend/pipeline_editor/pipeline_editor_app_spec.js')
| -rw-r--r-- | spec/frontend/pipeline_editor/pipeline_editor_app_spec.js | 91 |
1 files changed, 64 insertions, 27 deletions
diff --git a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js index 887d296222f..d8e3436479c 100644 --- a/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js +++ b/spec/frontend/pipeline_editor/pipeline_editor_app_spec.js @@ -2,8 +2,11 @@ import { GlAlert, GlButton, GlLoadingIcon, GlTabs } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; +import { TEST_HOST } from 'helpers/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; import httpStatusCodes from '~/lib/utils/http_status'; +import CodeSnippetAlert from '~/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue'; +import { CODE_SNIPPET_SOURCES } from '~/pipeline_editor/components/code_snippet_alert/constants'; import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue'; import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue'; @@ -72,7 +75,7 @@ describe('Pipeline editor app component', () => { }); }; - const createComponentWithApollo = ({ props = {}, provide = {} } = {}) => { + const createComponentWithApollo = async ({ props = {}, provide = {} } = {}) => { const handlers = [[getCiConfigData, mockCiConfigData]]; const resolvers = { Query: { @@ -94,6 +97,8 @@ describe('Pipeline editor app component', () => { }; createComponent({ props, provide, options }); + + return waitForPromises(); }; const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); @@ -103,6 +108,7 @@ describe('Pipeline editor app component', () => { const findEmptyState = () => wrapper.findComponent(PipelineEditorEmptyState); const findEmptyStateButton = () => wrapper.findComponent(PipelineEditorEmptyState).findComponent(GlButton); + const findCodeSnippetAlert = () => wrapper.findComponent(CodeSnippetAlert); beforeEach(() => { mockBlobContentData = jest.fn(); @@ -116,11 +122,55 @@ describe('Pipeline editor app component', () => { wrapper.destroy(); }); - it('displays a loading icon if the blob query is loading', () => { - createComponent({ blobLoading: true }); + describe('loading state', () => { + it('displays a loading icon if the blob query is loading', () => { + createComponent({ blobLoading: true }); + + expect(findLoadingIcon().exists()).toBe(true); + expect(findTextEditor().exists()).toBe(false); + }); + }); + + describe('code snippet alert', () => { + const setCodeSnippetUrlParam = (value) => { + global.jsdom.reconfigure({ + url: `${TEST_HOST}/?code_snippet_copied_from=${value}`, + }); + }; + + it('does not show by default', () => { + createComponent(); + + expect(findCodeSnippetAlert().exists()).toBe(false); + }); + + it.each(CODE_SNIPPET_SOURCES)('shows if URL param is %s, and cleans up URL', (source) => { + jest.spyOn(window.history, 'replaceState'); + setCodeSnippetUrlParam(source); + createComponent(); + + expect(findCodeSnippetAlert().exists()).toBe(true); + expect(window.history.replaceState).toHaveBeenCalledWith({}, document.title, `${TEST_HOST}/`); + }); + + it('does not show if URL param is invalid', () => { + setCodeSnippetUrlParam('foo_bar'); + createComponent(); + + expect(findCodeSnippetAlert().exists()).toBe(false); + }); + + it('disappears on dismiss', async () => { + setCodeSnippetUrlParam('api_fuzzing'); + createComponent(); + const alert = findCodeSnippetAlert(); + + expect(alert.exists()).toBe(true); + + await alert.vm.$emit('dismiss'); - expect(findLoadingIcon().exists()).toBe(true); - expect(findTextEditor().exists()).toBe(false); + expect(alert.exists()).toBe(false); + }); }); describe('when queries are called', () => { @@ -131,9 +181,7 @@ describe('Pipeline editor app component', () => { describe('when file exists', () => { beforeEach(async () => { - createComponentWithApollo(); - - await waitForPromises(); + await createComponentWithApollo(); }); it('shows pipeline editor home component', () => { @@ -145,10 +193,6 @@ describe('Pipeline editor app component', () => { }); it('ci config query is called with correct variables', async () => { - createComponentWithApollo(); - - await waitForPromises(); - expect(mockCiConfigData).toHaveBeenCalledWith({ content: mockCiYml, projectPath: mockProjectFullPath, @@ -164,9 +208,7 @@ describe('Pipeline editor app component', () => { status: httpStatusCodes.BAD_REQUEST, }, }); - createComponentWithApollo(); - - await waitForPromises(); + await createComponentWithApollo(); expect(findEmptyState().exists()).toBe(true); expect(findAlert().exists()).toBe(false); @@ -181,9 +223,7 @@ describe('Pipeline editor app component', () => { status: httpStatusCodes.NOT_FOUND, }, }); - createComponentWithApollo(); - - await waitForPromises(); + await createComponentWithApollo(); expect(findEmptyState().exists()).toBe(true); expect(findAlert().exists()).toBe(false); @@ -194,8 +234,7 @@ describe('Pipeline editor app component', () => { describe('because of a fetching error', () => { it('shows a unkown error message', async () => { mockBlobContentData.mockRejectedValueOnce(new Error('My error!')); - createComponentWithApollo(); - await waitForPromises(); + await createComponentWithApollo(); expect(findEmptyState().exists()).toBe(false); expect(findAlert().text()).toBe(wrapper.vm.$options.errorTexts[LOAD_FAILURE_UNKNOWN]); @@ -212,7 +251,7 @@ describe('Pipeline editor app component', () => { }, }); - createComponentWithApollo({ + await createComponentWithApollo({ provide: { glFeatures: { pipelineEditorEmptyStateAction: true, @@ -220,8 +259,6 @@ describe('Pipeline editor app component', () => { }, }); - await waitForPromises(); - expect(findEmptyState().exists()).toBe(true); expect(findTextEditor().exists()).toBe(false); @@ -254,9 +291,9 @@ describe('Pipeline editor app component', () => { describe('and the commit mutation fails', () => { const commitFailedReasons = ['Commit failed']; - beforeEach(() => { + beforeEach(async () => { window.scrollTo = jest.fn(); - createComponent(); + await createComponentWithApollo(); findEditorHome().vm.$emit('showError', { type: COMMIT_FAILURE, @@ -278,9 +315,9 @@ describe('Pipeline editor app component', () => { describe('when an unknown error occurs', () => { const unknownReasons = ['Commit failed']; - beforeEach(() => { + beforeEach(async () => { window.scrollTo = jest.fn(); - createComponent(); + await createComponentWithApollo(); findEditorHome().vm.$emit('showError', { type: COMMIT_FAILURE, |