import VueApollo, { ApolloMutation } from 'vue-apollo'; import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import waitForPromises from 'helpers/wait_for_promises'; import createMockApollo from 'jest/helpers/mock_apollo_helper'; import GetSnippetQuery from 'shared_queries/snippet/snippet.query.graphql'; import { deprecatedCreateFlash as Flash } from '~/flash'; import * as urlUtils from '~/lib/utils/url_utility'; import SnippetEditApp from '~/snippets/components/edit.vue'; import SnippetDescriptionEdit from '~/snippets/components/snippet_description_edit.vue'; import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue'; import SnippetBlobActionsEdit from '~/snippets/components/snippet_blob_actions_edit.vue'; import TitleField from '~/vue_shared/components/form/title.vue'; import FormFooterActions from '~/vue_shared/components/form/form_footer_actions.vue'; import { SNIPPET_VISIBILITY_PRIVATE, SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PUBLIC, } from '~/snippets/constants'; import UpdateSnippetMutation from '~/snippets/mutations/updateSnippet.mutation.graphql'; import CreateSnippetMutation from '~/snippets/mutations/createSnippet.mutation.graphql'; import { testEntries } from '../test_utils'; jest.mock('~/flash'); const TEST_UPLOADED_FILES = ['foo/bar.txt', 'alpha/beta.js']; const TEST_API_ERROR = 'Ufff'; const TEST_MUTATION_ERROR = 'Bummer'; const TEST_ACTIONS = { NO_CONTENT: { ...testEntries.created.diff, content: '', }, NO_PATH: { ...testEntries.created.diff, filePath: '', }, VALID: { ...testEntries.created.diff, }, }; const TEST_WEB_URL = '/snippets/7'; const createTestSnippet = () => ({ webUrl: TEST_WEB_URL, id: 7, title: 'Snippet Title', description: 'Lorem ipsum snippet desc', visibilityLevel: SNIPPET_VISIBILITY_PRIVATE, }); describe('Snippet Edit app', () => { let wrapper; let fakeApollo; const relativeUrlRoot = '/foo/'; const originalRelativeUrlRoot = gon.relative_url_root; const GetSnippetQuerySpy = jest.fn().mockResolvedValue({ data: { snippets: { nodes: [createTestSnippet()] } }, }); const mutationTypes = { RESOLVE: jest.fn().mockResolvedValue({ data: { updateSnippet: { errors: [], snippet: createTestSnippet(), }, }, }), RESOLVE_WITH_ERRORS: jest.fn().mockResolvedValue({ data: { updateSnippet: { errors: [TEST_MUTATION_ERROR], snippet: createTestSnippet(), }, createSnippet: { errors: [TEST_MUTATION_ERROR], snippet: null, }, }, }), REJECT: jest.fn().mockRejectedValue(TEST_API_ERROR), }; function createComponent({ props = {}, loading = false, mutationRes = mutationTypes.RESOLVE, selectedLevel = SNIPPET_VISIBILITY_PRIVATE, withApollo = false, } = {}) { let componentData = { mocks: { $apollo: { queries: { snippet: { loading }, }, mutate: mutationRes, }, }, }; if (withApollo) { const localVue = createLocalVue(); localVue.use(VueApollo); const requestHandlers = [[GetSnippetQuery, GetSnippetQuerySpy]]; fakeApollo = createMockApollo(requestHandlers); componentData = { localVue, apolloProvider: fakeApollo, }; } wrapper = shallowMount(SnippetEditApp, { ...componentData, stubs: { ApolloMutation, FormFooterActions, }, provide: { selectedLevel, }, propsData: { snippetGid: 'gid://gitlab/PersonalSnippet/42', markdownPreviewPath: 'http://preview.foo.bar', markdownDocsPath: 'http://docs.foo.bar', ...props, }, }); } beforeEach(() => { gon.relative_url_root = relativeUrlRoot; jest.spyOn(urlUtils, 'redirectTo').mockImplementation(); }); afterEach(() => { wrapper.destroy(); wrapper = null; gon.relative_url_root = originalRelativeUrlRoot; }); const findBlobActions = () => wrapper.find(SnippetBlobActionsEdit); const findSubmitButton = () => wrapper.find('[data-testid="snippet-submit-btn"]'); const findCancelButton = () => wrapper.find('[data-testid="snippet-cancel-btn"]'); const hasDisabledSubmit = () => Boolean(findSubmitButton().attributes('disabled')); const clickSubmitBtn = () => wrapper.find('[data-testid="snippet-edit-form"]').trigger('submit'); const triggerBlobActions = actions => findBlobActions().vm.$emit('actions', actions); const setUploadFilesHtml = paths => { wrapper.vm.$el.innerHTML = paths.map(path => ``).join(''); }; const getApiData = ({ id, title = '', description = '', visibilityLevel = SNIPPET_VISIBILITY_PRIVATE, } = {}) => ({ id, title, description, visibilityLevel, blobActions: [], }); // Ideally we wouldn't call this method directly, but we don't have a way to trigger // apollo responses yet. const loadSnippet = (...nodes) => { if (nodes.length) { wrapper.setData({ snippet: nodes[0], newSnippet: false, }); } else { wrapper.setData({ newSnippet: true, }); } }; describe('rendering', () => { it('renders loader while the query is in flight', () => { createComponent({ loading: true }); expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); }); it.each([[{}], [{ snippetGid: '' }]])( 'should render all required components with %s', props => { createComponent(props); expect(wrapper.find(TitleField).exists()).toBe(true); expect(wrapper.find(SnippetDescriptionEdit).exists()).toBe(true); expect(wrapper.find(SnippetVisibilityEdit).exists()).toBe(true); expect(wrapper.find(FormFooterActions).exists()).toBe(true); expect(findBlobActions().exists()).toBe(true); }, ); it.each` title | actions | shouldDisable ${''} | ${[]} | ${true} ${''} | ${[TEST_ACTIONS.VALID]} | ${true} ${'foo'} | ${[]} | ${false} ${'foo'} | ${[TEST_ACTIONS.VALID]} | ${false} ${'foo'} | ${[TEST_ACTIONS.VALID, TEST_ACTIONS.NO_CONTENT]} | ${true} ${'foo'} | ${[TEST_ACTIONS.VALID, TEST_ACTIONS.NO_PATH]} | ${false} `( 'should handle submit disable (title=$title, actions=$actions, shouldDisable=$shouldDisable)', async ({ title, actions, shouldDisable }) => { createComponent(); loadSnippet({ title }); triggerBlobActions(actions); await wrapper.vm.$nextTick(); expect(hasDisabledSubmit()).toBe(shouldDisable); }, ); it.each` projectPath | snippetArg | expectation ${''} | ${[]} | ${urlUtils.joinPaths('/', relativeUrlRoot, '-', 'snippets')} ${'project/path'} | ${[]} | ${urlUtils.joinPaths('/', relativeUrlRoot, 'project/path/-', 'snippets')} ${''} | ${[createTestSnippet()]} | ${TEST_WEB_URL} ${'project/path'} | ${[createTestSnippet()]} | ${TEST_WEB_URL} `( 'should set cancel href when (projectPath=$projectPath, snippet=$snippetArg)', async ({ projectPath, snippetArg, expectation }) => { createComponent({ props: { projectPath }, }); loadSnippet(...snippetArg); await wrapper.vm.$nextTick(); expect(findCancelButton().attributes('href')).toBe(expectation); }, ); }); describe('functionality', () => { it('does not fetch snippet when create a new snippet', async () => { createComponent({ props: { snippetGid: '' }, withApollo: true }); jest.runOnlyPendingTimers(); await wrapper.vm.$nextTick(); expect(GetSnippetQuerySpy).not.toHaveBeenCalled(); }); describe('default visibility', () => { it.each([SNIPPET_VISIBILITY_PRIVATE, SNIPPET_VISIBILITY_INTERNAL, SNIPPET_VISIBILITY_PUBLIC])( 'marks %s visibility by default', async visibility => { createComponent({ props: { snippetGid: '' }, selectedLevel: visibility, }); expect(wrapper.vm.snippet.visibilityLevel).toEqual(visibility); }, ); }); describe('form submission handling', () => { it.each` snippetArg | projectPath | uploadedFiles | input | mutation ${[]} | ${'project/path'} | ${[]} | ${{ ...getApiData(), projectPath: 'project/path', uploadedFiles: [] }} | ${CreateSnippetMutation} ${[]} | ${''} | ${[]} | ${{ ...getApiData(), projectPath: '', uploadedFiles: [] }} | ${CreateSnippetMutation} ${[]} | ${''} | ${TEST_UPLOADED_FILES} | ${{ ...getApiData(), projectPath: '', uploadedFiles: TEST_UPLOADED_FILES }} | ${CreateSnippetMutation} ${[createTestSnippet()]} | ${'project/path'} | ${[]} | ${getApiData(createTestSnippet())} | ${UpdateSnippetMutation} ${[createTestSnippet()]} | ${''} | ${[]} | ${getApiData(createTestSnippet())} | ${UpdateSnippetMutation} `( 'should submit mutation with (snippet=$snippetArg, projectPath=$projectPath, uploadedFiles=$uploadedFiles)', async ({ snippetArg, projectPath, uploadedFiles, mutation, input }) => { createComponent({ props: { projectPath, }, }); loadSnippet(...snippetArg); setUploadFilesHtml(uploadedFiles); await wrapper.vm.$nextTick(); clickSubmitBtn(); expect(mutationTypes.RESOLVE).toHaveBeenCalledWith({ mutation, variables: { input, }, }); }, ); it('should redirect to snippet view on successful mutation', async () => { createComponent(); loadSnippet(createTestSnippet()); clickSubmitBtn(); await waitForPromises(); expect(urlUtils.redirectTo).toHaveBeenCalledWith(TEST_WEB_URL); }); it.each` snippetArg | projectPath | mutationRes | expectMessage ${[]} | ${'project/path'} | ${mutationTypes.RESOLVE_WITH_ERRORS} | ${`Can't create snippet: ${TEST_MUTATION_ERROR}`} ${[]} | ${''} | ${mutationTypes.RESOLVE_WITH_ERRORS} | ${`Can't create snippet: ${TEST_MUTATION_ERROR}`} ${[]} | ${''} | ${mutationTypes.REJECT} | ${`Can't create snippet: ${TEST_API_ERROR}`} ${[createTestSnippet()]} | ${'project/path'} | ${mutationTypes.RESOLVE_WITH_ERRORS} | ${`Can't update snippet: ${TEST_MUTATION_ERROR}`} ${[createTestSnippet()]} | ${''} | ${mutationTypes.RESOLVE_WITH_ERRORS} | ${`Can't update snippet: ${TEST_MUTATION_ERROR}`} `( 'should flash error with (snippet=$snippetArg, projectPath=$projectPath)', async ({ snippetArg, projectPath, mutationRes, expectMessage }) => { createComponent({ props: { projectPath, }, mutationRes, }); loadSnippet(...snippetArg); clickSubmitBtn(); await waitForPromises(); expect(urlUtils.redirectTo).not.toHaveBeenCalled(); expect(Flash).toHaveBeenCalledWith(expectMessage); }, ); }); describe('on before unload', () => { it.each` condition | expectPrevented | action ${'there are no actions'} | ${false} | ${() => triggerBlobActions([])} ${'there are actions'} | ${true} | ${() => triggerBlobActions([testEntries.updated.diff])} ${'the snippet is being saved'} | ${false} | ${() => clickSubmitBtn()} `( 'handles before unload prevent when $condition (expectPrevented=$expectPrevented)', ({ expectPrevented, action }) => { createComponent(); loadSnippet(); action(); const event = new Event('beforeunload'); const returnValueSetter = jest.spyOn(event, 'returnValue', 'set'); window.dispatchEvent(event); if (expectPrevented) { expect(returnValueSetter).toHaveBeenCalledWith( 'Are you sure you want to lose unsaved changes?', ); } else { expect(returnValueSetter).not.toHaveBeenCalled(); } }, ); }); }); });