diff options
Diffstat (limited to 'spec/frontend/ide/components')
50 files changed, 380 insertions, 307 deletions
diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js index 1a4b6ca0b71..657817eb3d8 100644 --- a/spec/frontend/ide/components/activity_bar_spec.js +++ b/spec/frontend/ide/components/activity_bar_spec.js @@ -1,14 +1,16 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; -import { leftSidebarViews } from '~/ide/constants'; import ActivityBar from '~/ide/components/activity_bar.vue'; +import { leftSidebarViews } from '~/ide/constants'; +import { createStore } from '~/ide/stores'; describe('IDE activity bar', () => { const Component = Vue.extend(ActivityBar); let vm; let store; + const findChangesBadge = () => vm.$el.querySelector('.badge'); + beforeEach(() => { store = createStore(); @@ -69,4 +71,19 @@ describe('IDE activity bar', () => { }); }); }); + + describe('changes badge', () => { + it('is rendered when files are staged', () => { + store.state.stagedFiles = [{ path: '/path/to/file' }]; + vm.$mount(); + + expect(findChangesBadge()).toBeTruthy(); + expect(findChangesBadge().textContent.trim()).toBe('1'); + }); + + it('is not rendered when no changes are present', () => { + vm.$mount(); + expect(findChangesBadge()).toBeFalsy(); + }); + }); }); diff --git a/spec/frontend/ide/components/branches/item_spec.js b/spec/frontend/ide/components/branches/item_spec.js index f1aa9187a8d..f90c298c401 100644 --- a/spec/frontend/ide/components/branches/item_spec.js +++ b/spec/frontend/ide/components/branches/item_spec.js @@ -1,8 +1,8 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; -import { createStore } from '~/ide/stores'; -import { createRouter } from '~/ide/ide_router'; +import { shallowMount } from '@vue/test-utils'; import Item from '~/ide/components/branches/item.vue'; +import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; import Timeago from '~/vue_shared/components/time_ago_tooltip.vue'; import { projectData } from '../../mock_data'; diff --git a/spec/frontend/ide/components/branches/search_list_spec.js b/spec/frontend/ide/components/branches/search_list_spec.js index 85776f8cc0e..0efa7af2c6c 100644 --- a/spec/frontend/ide/components/branches/search_list_spec.js +++ b/spec/frontend/ide/components/branches/search_list_spec.js @@ -1,9 +1,9 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; -import { __ } from '~/locale'; -import List from '~/ide/components/branches/search_list.vue'; import Item from '~/ide/components/branches/item.vue'; +import List from '~/ide/components/branches/search_list.vue'; +import { __ } from '~/locale'; import { branches } from '../../mock_data'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js index 91751bd34ea..c4dccf26af3 100644 --- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js @@ -1,9 +1,12 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import { projectData, branches } from 'jest/ide/mock_data'; -import { createStore } from '~/ide/stores'; import commitActions from '~/ide/components/commit_sidebar/actions.vue'; -import consts from '~/ide/stores/modules/commit/constants'; +import { createStore } from '~/ide/stores'; +import { + COMMIT_TO_NEW_BRANCH, + COMMIT_TO_CURRENT_BRANCH, +} from '~/ide/stores/modules/commit/constants'; const ACTION_UPDATE_COMMIT_ACTION = 'commit/updateCommitAction'; @@ -126,16 +129,16 @@ describe('IDE commit sidebar actions', () => { it.each` input | expectedOption - ${{ currentBranchId: BRANCH_DEFAULT }} | ${consts.COMMIT_TO_NEW_BRANCH} - ${{ currentBranchId: BRANCH_DEFAULT, emptyRepo: true }} | ${consts.COMMIT_TO_CURRENT_BRANCH} - ${{ currentBranchId: BRANCH_PROTECTED, hasMR: true }} | ${consts.COMMIT_TO_CURRENT_BRANCH} - ${{ currentBranchId: BRANCH_PROTECTED, hasMR: false }} | ${consts.COMMIT_TO_CURRENT_BRANCH} - ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: true }} | ${consts.COMMIT_TO_NEW_BRANCH} - ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: false }} | ${consts.COMMIT_TO_NEW_BRANCH} - ${{ currentBranchId: BRANCH_REGULAR, hasMR: true }} | ${consts.COMMIT_TO_CURRENT_BRANCH} - ${{ currentBranchId: BRANCH_REGULAR, hasMR: false }} | ${consts.COMMIT_TO_CURRENT_BRANCH} - ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: true }} | ${consts.COMMIT_TO_NEW_BRANCH} - ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: false }} | ${consts.COMMIT_TO_NEW_BRANCH} + ${{ currentBranchId: BRANCH_DEFAULT }} | ${COMMIT_TO_NEW_BRANCH} + ${{ currentBranchId: BRANCH_DEFAULT, emptyRepo: true }} | ${COMMIT_TO_CURRENT_BRANCH} + ${{ currentBranchId: BRANCH_PROTECTED, hasMR: true }} | ${COMMIT_TO_CURRENT_BRANCH} + ${{ currentBranchId: BRANCH_PROTECTED, hasMR: false }} | ${COMMIT_TO_CURRENT_BRANCH} + ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: true }} | ${COMMIT_TO_NEW_BRANCH} + ${{ currentBranchId: BRANCH_PROTECTED_NO_ACCESS, hasMR: false }} | ${COMMIT_TO_NEW_BRANCH} + ${{ currentBranchId: BRANCH_REGULAR, hasMR: true }} | ${COMMIT_TO_CURRENT_BRANCH} + ${{ currentBranchId: BRANCH_REGULAR, hasMR: false }} | ${COMMIT_TO_CURRENT_BRANCH} + ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: true }} | ${COMMIT_TO_NEW_BRANCH} + ${{ currentBranchId: BRANCH_REGULAR_NO_ACCESS, hasMR: false }} | ${COMMIT_TO_NEW_BRANCH} `( 'with $input, it dispatches update commit action with $expectedOption', ({ input, expectedOption }) => { diff --git a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js index ff780939026..50635ffe894 100644 --- a/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/editor_header_spec.js @@ -1,7 +1,7 @@ -import Vuex from 'vuex'; import { mount, createLocalVue } from '@vue/test-utils'; -import { createStore } from '~/ide/stores'; +import Vuex from 'vuex'; import EditorHeader from '~/ide/components/commit_sidebar/editor_header.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../../helpers'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js index c1dab4a04b6..4f81c0aa5d3 100644 --- a/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/empty_state_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import emptyState from '~/ide/components/commit_sidebar/empty_state.vue'; +import { createStore } from '~/ide/stores'; describe('IDE commit panel empty state', () => { let vm; diff --git a/spec/frontend/ide/components/commit_sidebar/form_spec.js b/spec/frontend/ide/components/commit_sidebar/form_spec.js index abd7e3bb8fc..2b567816ce8 100644 --- a/spec/frontend/ide/components/commit_sidebar/form_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/form_spec.js @@ -1,11 +1,12 @@ +import { GlModal } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; -import { getByText } from '@testing-library/dom'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { projectData } from 'jest/ide/mock_data'; +import { stubComponent } from 'helpers/stub_component'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import waitForPromises from 'helpers/wait_for_promises'; -import { createStore } from '~/ide/stores'; -import consts from '~/ide/stores/modules/commit/constants'; +import { projectData } from 'jest/ide/mock_data'; import CommitForm from '~/ide/components/commit_sidebar/form.vue'; +import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; import { leftSidebarViews } from '~/ide/constants'; import { createCodeownersCommitError, @@ -13,258 +14,287 @@ import { createBranchChangedCommitError, branchAlreadyExistsCommitError, } from '~/ide/lib/errors'; +import { createStore } from '~/ide/stores'; +import { COMMIT_TO_NEW_BRANCH } from '~/ide/stores/modules/commit/constants'; describe('IDE commit form', () => { - const Component = Vue.extend(CommitForm); - let vm; + let wrapper; let store; - const beginCommitButton = () => vm.$el.querySelector('[data-testid="begin-commit-button"]'); + const createComponent = () => { + wrapper = shallowMount(CommitForm, { + store, + directives: { + GlTooltip: createMockDirective(), + }, + stubs: { + GlModal: stubComponent(GlModal), + }, + }); + }; + + const setLastCommitMessage = (msg) => { + store.state.lastCommitMsg = msg; + }; + const goToCommitView = () => { + store.state.currentActivityView = leftSidebarViews.commit.name; + }; + const goToEditView = () => { + store.state.currentActivityView = leftSidebarViews.edit.name; + }; + const findBeginCommitButton = () => wrapper.find('[data-testid="begin-commit-button"]'); + const findBeginCommitButtonTooltip = () => + wrapper.find('[data-testid="begin-commit-button-tooltip"]'); + const findBeginCommitButtonData = () => ({ + disabled: findBeginCommitButton().props('disabled'), + tooltip: getBinding(findBeginCommitButtonTooltip().element, 'gl-tooltip').value.title, + }); + const findCommitButton = () => wrapper.find('[data-testid="commit-button"]'); + const findCommitButtonTooltip = () => wrapper.find('[data-testid="commit-button-tooltip"]'); + const findCommitButtonData = () => ({ + disabled: findCommitButton().props('disabled'), + tooltip: getBinding(findCommitButtonTooltip().element, 'gl-tooltip').value.title, + }); + const clickCommitButton = () => findCommitButton().vm.$emit('click'); + const findForm = () => wrapper.find('form'); + const submitForm = () => findForm().trigger('submit'); + const findCommitMessageInput = () => wrapper.find(CommitMessageField); + const setCommitMessageInput = (val) => findCommitMessageInput().vm.$emit('input', val); + const findDiscardDraftButton = () => wrapper.find('[data-testid="discard-draft"]'); beforeEach(() => { store = createStore(); - store.state.changedFiles.push('test'); + store.state.stagedFiles.push('test'); store.state.currentProjectId = 'abcproject'; store.state.currentBranchId = 'master'; - Vue.set(store.state.projects, 'abcproject', { ...projectData }); - - vm = createComponentWithStore(Component, store).$mount(); + Vue.set(store.state.projects, 'abcproject', { + ...projectData, + userPermissions: { pushCode: true }, + }); }); afterEach(() => { - vm.$destroy(); + wrapper.destroy(); }); - it('enables begin commit button when there are changes', () => { - expect(beginCommitButton()).not.toHaveAttr('disabled'); - }); + // Notes: + // - When there are no changes, there is no commit button so there's nothing to test :) + describe.each` + desc | stagedFiles | userPermissions | viewFn | buttonFn | disabled | tooltip + ${'when there are no changes'} | ${[]} | ${{ pushCode: true }} | ${goToEditView} | ${findBeginCommitButtonData} | ${true} | ${''} + ${'when there are changes'} | ${['test']} | ${{ pushCode: true }} | ${goToEditView} | ${findBeginCommitButtonData} | ${false} | ${''} + ${'when there are changes'} | ${['test']} | ${{ pushCode: true }} | ${goToCommitView} | ${findCommitButtonData} | ${false} | ${''} + ${'when user cannot push'} | ${['test']} | ${{ pushCode: false }} | ${goToEditView} | ${findBeginCommitButtonData} | ${true} | ${CommitForm.MSG_CANNOT_PUSH_CODE} + ${'when user cannot push'} | ${['test']} | ${{ pushCode: false }} | ${goToCommitView} | ${findCommitButtonData} | ${true} | ${CommitForm.MSG_CANNOT_PUSH_CODE} + `('$desc', ({ stagedFiles, userPermissions, viewFn, buttonFn, disabled, tooltip }) => { + beforeEach(async () => { + store.state.stagedFiles = stagedFiles; + store.state.projects.abcproject.userPermissions = userPermissions; + + createComponent(); + }); - it('disables begin commit button when there are no changes', async () => { - store.state.changedFiles = []; - await vm.$nextTick(); + it(`at view=${viewFn.name}, ${buttonFn.name} has disabled=${disabled} tooltip=${tooltip}`, async () => { + viewFn(); - expect(beginCommitButton()).toHaveAttr('disabled'); + await wrapper.vm.$nextTick(); + + expect(buttonFn()).toEqual({ + disabled, + tooltip, + }); + }); }); - describe('compact', () => { - beforeEach(() => { - vm.isCompact = true; + describe('on edit tab', () => { + beforeEach(async () => { + // Test that we react to switching to compact view. + goToCommitView(); + + createComponent(); - return vm.$nextTick(); + goToEditView(); + + await wrapper.vm.$nextTick(); }); it('renders commit button in compact mode', () => { - expect(beginCommitButton()).not.toBeNull(); - expect(beginCommitButton().textContent).toContain('Commit'); + expect(findBeginCommitButton().exists()).toBe(true); + expect(findBeginCommitButton().text()).toBe('Commit…'); }); it('does not render form', () => { - expect(vm.$el.querySelector('form')).toBeNull(); + expect(findForm().exists()).toBe(false); }); it('renders overview text', () => { - vm.$store.state.stagedFiles.push('test'); - - return vm.$nextTick(() => { - expect(vm.$el.querySelector('p').textContent).toContain('1 changed file'); - }); + expect(wrapper.find('p').text()).toBe('1 changed file'); }); - it('shows form when clicking commit button', () => { - beginCommitButton().click(); - - return vm.$nextTick(() => { - expect(vm.$el.querySelector('form')).not.toBeNull(); - }); - }); + it('when begin commit button is clicked, shows form', async () => { + findBeginCommitButton().vm.$emit('click'); - it('toggles activity bar view when clicking commit button', () => { - beginCommitButton().click(); + await wrapper.vm.$nextTick(); - return vm.$nextTick(() => { - expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); - }); + expect(findForm().exists()).toBe(true); }); - it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => { - store.state.lastCommitMsg = 'abc'; - store.state.currentActivityView = leftSidebarViews.edit.name; - await vm.$nextTick(); - - // if commit message is set, form is uncollapsed - expect(vm.isCompact).toBe(false); + it('when begin commit button is clicked, sets activity view', async () => { + findBeginCommitButton().vm.$emit('click'); - store.state.lastCommitMsg = ''; - await vm.$nextTick(); + await wrapper.vm.$nextTick(); - // collapsed when set to empty - expect(vm.isCompact).toBe(true); + expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); }); - it('collapses if in commit view but there are no changes and vice versa', async () => { - store.state.currentActivityView = leftSidebarViews.commit.name; - await vm.$nextTick(); + it('collapses if lastCommitMsg is set to empty and current view is not commit view', async () => { + // Test that it expands when lastCommitMsg is set + setLastCommitMessage('test'); + goToEditView(); - // expanded by default if there are changes - expect(vm.isCompact).toBe(false); + await wrapper.vm.$nextTick(); - store.state.changedFiles = []; - await vm.$nextTick(); + expect(findForm().exists()).toBe(true); - expect(vm.isCompact).toBe(true); + // Now test that it collapses when lastCommitMsg is cleared + setLastCommitMessage(''); - store.state.changedFiles.push('test'); - await vm.$nextTick(); + await wrapper.vm.$nextTick(); - // uncollapsed once again - expect(vm.isCompact).toBe(false); + expect(findForm().exists()).toBe(false); }); + }); - it('collapses if switched from commit view to edit view and vice versa', async () => { - store.state.currentActivityView = leftSidebarViews.edit.name; - await vm.$nextTick(); - - expect(vm.isCompact).toBe(true); + describe('on commit tab when window height is less than MAX_WINDOW_HEIGHT', () => { + let oldHeight; - store.state.currentActivityView = leftSidebarViews.commit.name; - await vm.$nextTick(); + beforeEach(async () => { + oldHeight = window.innerHeight; + window.innerHeight = 700; - expect(vm.isCompact).toBe(false); + createComponent(); - store.state.currentActivityView = leftSidebarViews.edit.name; - await vm.$nextTick(); + goToCommitView(); - expect(vm.isCompact).toBe(true); + await wrapper.vm.$nextTick(); }); - describe('when window height is less than MAX_WINDOW_HEIGHT', () => { - let oldHeight; - - beforeEach(() => { - oldHeight = window.innerHeight; - window.innerHeight = 700; - }); + afterEach(() => { + window.innerHeight = oldHeight; + }); - afterEach(() => { - window.innerHeight = oldHeight; - }); + it('stays collapsed if changes are added or removed', async () => { + expect(findForm().exists()).toBe(false); - it('stays collapsed when switching from edit view to commit view and back', async () => { - store.state.currentActivityView = leftSidebarViews.edit.name; - await vm.$nextTick(); + store.state.stagedFiles = []; + await wrapper.vm.$nextTick(); - expect(vm.isCompact).toBe(true); + expect(findForm().exists()).toBe(false); - store.state.currentActivityView = leftSidebarViews.commit.name; - await vm.$nextTick(); + store.state.stagedFiles.push('test'); + await wrapper.vm.$nextTick(); - expect(vm.isCompact).toBe(true); + expect(findForm().exists()).toBe(false); + }); + }); - store.state.currentActivityView = leftSidebarViews.edit.name; - await vm.$nextTick(); + describe('on commit tab', () => { + beforeEach(async () => { + // Test that the component reacts to switching to full view + goToEditView(); - expect(vm.isCompact).toBe(true); - }); + createComponent(); - it('stays uncollapsed if changes are added or removed', async () => { - store.state.currentActivityView = leftSidebarViews.commit.name; - await vm.$nextTick(); + goToCommitView(); - expect(vm.isCompact).toBe(true); + await wrapper.vm.$nextTick(); + }); - store.state.changedFiles = []; - await vm.$nextTick(); + it('shows form', () => { + expect(findForm().exists()).toBe(true); + }); - expect(vm.isCompact).toBe(true); + it('hides begin commit button', () => { + expect(findBeginCommitButton().exists()).toBe(false); + }); - store.state.changedFiles.push('test'); - await vm.$nextTick(); + describe('when no changed files', () => { + beforeEach(async () => { + store.state.stagedFiles = []; + await wrapper.vm.$nextTick(); + }); - expect(vm.isCompact).toBe(true); + it('hides form', () => { + expect(findForm().exists()).toBe(false); }); - it('uncollapses when clicked on Commit button in the edit view', async () => { - store.state.currentActivityView = leftSidebarViews.edit.name; - beginCommitButton().click(); - await waitForPromises(); + it('expands again when staged files are added', async () => { + store.state.stagedFiles.push('test'); + await wrapper.vm.$nextTick(); - expect(vm.isCompact).toBe(false); + expect(findForm().exists()).toBe(true); }); }); - }); - describe('full', () => { - beforeEach(() => { - vm.isCompact = false; + it('updates commitMessage in store on input', async () => { + setCommitMessageInput('testing commit message'); - return vm.$nextTick(); + await wrapper.vm.$nextTick(); + + expect(store.state.commit.commitMessage).toBe('testing commit message'); }); - it('updates commitMessage in store on input', () => { - const textarea = vm.$el.querySelector('textarea'); + describe('discard draft button', () => { + it('hidden when commitMessage is empty', () => { + expect(findDiscardDraftButton().exists()).toBe(false); + }); - textarea.value = 'testing commit message'; + it('resets commitMessage when clicking discard button', async () => { + setCommitMessageInput('testing commit message'); - textarea.dispatchEvent(new Event('input')); + await wrapper.vm.$nextTick(); - return vm.$nextTick().then(() => { - expect(vm.$store.state.commit.commitMessage).toBe('testing commit message'); - }); - }); + expect(findCommitMessageInput().props('text')).toBe('testing commit message'); - it('updating currentActivityView not to commit view sets compact mode', () => { - store.state.currentActivityView = 'a'; + // Test that commitMessage is cleared on click + findDiscardDraftButton().vm.$emit('click'); - return vm.$nextTick(() => { - expect(vm.isCompact).toBe(true); + await wrapper.vm.$nextTick(); + + expect(findCommitMessageInput().props('text')).toBe(''); }); }); - it('always opens itself in full view current activity view is not commit view when clicking commit button', () => { - beginCommitButton().click(); + describe('when submitting', () => { + beforeEach(async () => { + goToEditView(); - return vm.$nextTick(() => { - expect(store.state.currentActivityView).toBe(leftSidebarViews.commit.name); - expect(vm.isCompact).toBe(false); - }); - }); + createComponent(); - describe('discard draft button', () => { - it('hidden when commitMessage is empty', () => { - expect(vm.$el.querySelector('.btn-default').textContent).toContain('Collapse'); - }); + goToCommitView(); + + await wrapper.vm.$nextTick(); - it('resets commitMessage when clicking discard button', () => { - vm.$store.state.commit.commitMessage = 'testing commit message'; - - return vm - .$nextTick() - .then(() => { - vm.$el.querySelector('.btn-default').click(); - }) - .then(() => vm.$nextTick()) - .then(() => { - expect(vm.$store.state.commit.commitMessage).not.toBe('testing commit message'); - }); + setCommitMessageInput('testing commit message'); + + await wrapper.vm.$nextTick(); + + jest.spyOn(store, 'dispatch').mockResolvedValue(); }); - }); - describe('when submitting', () => { - beforeEach(() => { - jest.spyOn(vm, 'commitChanges'); + it.each([clickCommitButton, submitForm])('when %p, commits changes', (fn) => { + fn(); - vm.$store.state.stagedFiles.push('test'); - vm.$store.state.commit.commitMessage = 'testing commit message'; + expect(store.dispatch).toHaveBeenCalledWith('commit/commitChanges', undefined); }); - it('calls commitChanges', () => { - vm.commitChanges.mockResolvedValue({ success: true }); + it('when cannot push code, submitting does nothing', async () => { + store.state.projects.abcproject.userPermissions.pushCode = false; + await wrapper.vm.$nextTick(); - return vm.$nextTick().then(() => { - vm.$el.querySelector('.btn-success').click(); + submitForm(); - expect(vm.commitChanges).toHaveBeenCalled(); - }); + expect(store.dispatch).not.toHaveBeenCalled(); }); it.each` @@ -272,31 +302,32 @@ describe('IDE commit form', () => { ${() => createCodeownersCommitError('test message')} | ${{ actionPrimary: { text: 'Create new branch' } }} ${createUnexpectedCommitError} | ${{ actionPrimary: null }} `('opens error modal if commitError with $error', async ({ createError, props }) => { - jest.spyOn(vm.$refs.commitErrorModal, 'show'); + const modal = wrapper.find(GlModal); + modal.vm.show = jest.fn(); const error = createError(); store.state.commit.commitError = error; - await vm.$nextTick(); + await wrapper.vm.$nextTick(); - expect(vm.$refs.commitErrorModal.show).toHaveBeenCalled(); - expect(vm.$refs.commitErrorModal).toMatchObject({ + expect(modal.vm.show).toHaveBeenCalled(); + expect(modal.props()).toMatchObject({ actionCancel: { text: 'Cancel' }, ...props, }); // Because of the legacy 'mountComponent' approach here, the only way to // test the text of the modal is by viewing the content of the modal added to the document. - expect(document.body).toHaveText(error.messageHTML); + expect(modal.html()).toContain(error.messageHTML); }); }); describe('with error modal with primary', () => { beforeEach(() => { - jest.spyOn(vm.$store, 'dispatch').mockReturnValue(Promise.resolve()); + jest.spyOn(store, 'dispatch').mockResolvedValue(); }); const commitActions = [ - ['commit/updateCommitAction', consts.COMMIT_TO_NEW_BRANCH], + ['commit/updateCommitAction', COMMIT_TO_NEW_BRANCH], ['commit/commitChanges'], ]; @@ -310,27 +341,15 @@ describe('IDE commit form', () => { async ({ commitError, expectedActions }) => { store.state.commit.commitError = commitError('test message'); - await vm.$nextTick(); + await wrapper.vm.$nextTick(); - getByText(document.body, 'Create new branch').click(); + wrapper.find(GlModal).vm.$emit('ok'); await waitForPromises(); - expect(vm.$store.dispatch.mock.calls).toEqual(expectedActions); + expect(store.dispatch.mock.calls).toEqual(expectedActions); }, ); }); }); - - describe('commitButtonText', () => { - it('returns commit text when staged files exist', () => { - vm.$store.state.stagedFiles.push('testing'); - - expect(vm.commitButtonText).toBe('Commit'); - }); - - it('returns stage & commit text when staged files do not exist', () => { - expect(vm.commitButtonText).toBe('Stage & Commit'); - }); - }); }); diff --git a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js index baa25a11c2a..b91ee88e0d6 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; import { trimText } from 'helpers/text_helper'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import listItem from '~/ide/components/commit_sidebar/list_item.vue'; import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; import { file } from '../../helpers'; describe('Multi-file editor commit sidebar list item', () => { diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js index 898ec4bebce..eb12fc994a5 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import commitSidebarList from '~/ide/components/commit_sidebar/list.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../../helpers'; describe('Multi-file editor commit sidebar list', () => { diff --git a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js index 50da64abbbe..253c2a426ee 100644 --- a/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/new_merge_request_option_spec.js @@ -2,9 +2,12 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import { projectData, branches } from 'jest/ide/mock_data'; import NewMergeRequestOption from '~/ide/components/commit_sidebar/new_merge_request_option.vue'; -import { createStore } from '~/ide/stores'; import { PERMISSION_CREATE_MR } from '~/ide/constants'; -import consts from '~/ide/stores/modules/commit/constants'; +import { createStore } from '~/ide/stores'; +import { + COMMIT_TO_CURRENT_BRANCH, + COMMIT_TO_NEW_BRANCH, +} from '~/ide/stores/modules/commit/constants'; describe('create new MR checkbox', () => { let store; @@ -27,8 +30,8 @@ describe('create new MR checkbox', () => { vm = createComponentWithStore(Component, store); vm.$store.state.commit.commitAction = createNewBranch - ? consts.COMMIT_TO_NEW_BRANCH - : consts.COMMIT_TO_CURRENT_BRANCH; + ? COMMIT_TO_NEW_BRANCH + : COMMIT_TO_CURRENT_BRANCH; vm.$store.state.currentBranchId = currentBranchId; diff --git a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js index 73d811f99b8..a6f3253321b 100644 --- a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue'; +import { createStore } from '~/ide/stores'; describe('IDE commit sidebar radio group', () => { let vm; diff --git a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js index b116321efb3..7bbe47d37af 100644 --- a/spec/frontend/ide/components/commit_sidebar/success_message_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/success_message_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import successMessage from '~/ide/components/commit_sidebar/success_message.vue'; +import { createStore } from '~/ide/stores'; describe('IDE commit panel successful commit state', () => { let vm; diff --git a/spec/frontend/ide/components/error_message_spec.js b/spec/frontend/ide/components/error_message_spec.js index fa6816d3546..2de3fa863a8 100644 --- a/spec/frontend/ide/components/error_message_spec.js +++ b/spec/frontend/ide/components/error_message_spec.js @@ -1,6 +1,6 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; import ErrorMessage from '~/ide/components/error_message.vue'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/file_row_extra_spec.js b/spec/frontend/ide/components/file_row_extra_spec.js index 275b98bc154..641407c7b77 100644 --- a/spec/frontend/ide/components/file_row_extra_spec.js +++ b/spec/frontend/ide/components/file_row_extra_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import FileRowExtra from '~/ide/components/file_row_extra.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../helpers'; describe('IDE extra file row component', () => { diff --git a/spec/frontend/ide/components/file_templates/bar_spec.js b/spec/frontend/ide/components/file_templates/bar_spec.js index 158995c9c9c..4ca99f8d055 100644 --- a/spec/frontend/ide/components/file_templates/bar_spec.js +++ b/spec/frontend/ide/components/file_templates/bar_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { mountComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import Bar from '~/ide/components/file_templates/bar.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../../helpers'; describe('IDE file templates bar component', () => { diff --git a/spec/frontend/ide/components/file_templates/dropdown_spec.js b/spec/frontend/ide/components/file_templates/dropdown_spec.js index 628580103a4..44ac9aa954d 100644 --- a/spec/frontend/ide/components/file_templates/dropdown_spec.js +++ b/spec/frontend/ide/components/file_templates/dropdown_spec.js @@ -1,7 +1,7 @@ -import Vuex from 'vuex'; -import $ from 'jquery'; import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; +import $ from 'jquery'; +import Vuex from 'vuex'; import Dropdown from '~/ide/components/file_templates/dropdown.vue'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/ide_file_row_spec.js b/spec/frontend/ide/components/ide_file_row_spec.js index c00ad7c8365..20c105460f2 100644 --- a/spec/frontend/ide/components/ide_file_row_spec.js +++ b/spec/frontend/ide/components/ide_file_row_spec.js @@ -1,9 +1,9 @@ import { createLocalVue, mount } from '@vue/test-utils'; import Vuex from 'vuex'; -import IdeFileRow from '~/ide/components/ide_file_row.vue'; -import FileRow from '~/vue_shared/components/file_row.vue'; import FileRowExtra from '~/ide/components/file_row_extra.vue'; +import IdeFileRow from '~/ide/components/ide_file_row.vue'; import { createStore } from '~/ide/stores'; +import FileRow from '~/vue_shared/components/file_row.vue'; const localVue = createLocalVue(); localVue.use(Vuex); diff --git a/spec/frontend/ide/components/ide_review_spec.js b/spec/frontend/ide/components/ide_review_spec.js index 37f34a96495..740b7ada521 100644 --- a/spec/frontend/ide/components/ide_review_spec.js +++ b/spec/frontend/ide/components/ide_review_spec.js @@ -1,10 +1,10 @@ +import { createLocalVue, mount } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; -import { createLocalVue, mount } from '@vue/test-utils'; -import { trimText } from 'helpers/text_helper'; import { keepAlive } from 'helpers/keep_alive_component_helper'; -import IdeReview from '~/ide/components/ide_review.vue'; +import { trimText } from 'helpers/text_helper'; import EditorModeDropdown from '~/ide/components/editor_mode_dropdown.vue'; +import IdeReview from '~/ide/components/ide_review.vue'; import { createStore } from '~/ide/stores'; import { file } from '../helpers'; import { projectData } from '../mock_data'; diff --git a/spec/frontend/ide/components/ide_side_bar_spec.js b/spec/frontend/ide/components/ide_side_bar_spec.js index 72e9463945b..c683612b142 100644 --- a/spec/frontend/ide/components/ide_side_bar_spec.js +++ b/spec/frontend/ide/components/ide_side_bar_spec.js @@ -1,13 +1,13 @@ +import { GlSkeletonLoading } from '@gitlab/ui'; import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlSkeletonLoading } from '@gitlab/ui'; import waitForPromises from 'helpers/wait_for_promises'; -import { createStore } from '~/ide/stores'; +import IdeReview from '~/ide/components/ide_review.vue'; import IdeSidebar from '~/ide/components/ide_side_bar.vue'; import IdeTree from '~/ide/components/ide_tree.vue'; import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; -import IdeReview from '~/ide/components/ide_review.vue'; import { leftSidebarViews } from '~/ide/constants'; +import { createStore } from '~/ide/stores'; import { projectData } from '../mock_data'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/ide_sidebar_nav_spec.js b/spec/frontend/ide/components/ide_sidebar_nav_spec.js index 6b4cb9bd03d..2ea0c250794 100644 --- a/spec/frontend/ide/components/ide_sidebar_nav_spec.js +++ b/spec/frontend/ide/components/ide_sidebar_nav_spec.js @@ -1,8 +1,9 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; import { SIDE_RIGHT, SIDE_LEFT } from '~/ide/constants'; +import { BV_HIDE_TOOLTIP } from '~/lib/utils/constants'; const TEST_TABS = [ { @@ -74,7 +75,7 @@ describe('ide/components/ide_sidebar_nav', () => { createComponent({ isOpen, side }); bsTooltipHide = jest.fn(); - wrapper.vm.$root.$on('bv::hide::tooltip', bsTooltipHide); + wrapper.vm.$root.$on(BV_HIDE_TOOLTIP, bsTooltipHide); }); it('renders buttons', () => { diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js index 805fa898611..c9d19c18d03 100644 --- a/spec/frontend/ide/components/ide_spec.js +++ b/spec/frontend/ide/components/ide_spec.js @@ -1,9 +1,10 @@ -import Vuex from 'vuex'; +import { GlAlert } from '@gitlab/ui'; import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; import waitForPromises from 'helpers/wait_for_promises'; -import { createStore } from '~/ide/stores'; import ErrorMessage from '~/ide/components/error_message.vue'; -import ide from '~/ide/components/ide.vue'; +import Ide from '~/ide/components/ide.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../helpers'; import { projectData } from '../mock_data'; @@ -15,12 +16,12 @@ describe('WebIDE', () => { let wrapper; - function createComponent({ projData = emptyProjData, state = {} } = {}) { + const createComponent = ({ projData = emptyProjData, state = {} } = {}) => { const store = createStore(); store.state.currentProjectId = 'abcproject'; store.state.currentBranchId = 'master'; - store.state.projects.abcproject = { ...projData }; + store.state.projects.abcproject = projData && { ...projData }; store.state.trees['abcproject/master'] = { tree: [], loading: false, @@ -29,11 +30,13 @@ describe('WebIDE', () => { store.state[key] = state[key]; }); - return shallowMount(ide, { + wrapper = shallowMount(Ide, { store, localVue, }); - } + }; + + const findAlert = () => wrapper.find(GlAlert); afterEach(() => { wrapper.destroy(); @@ -42,7 +45,7 @@ describe('WebIDE', () => { describe('ide component, empty repo', () => { beforeEach(() => { - wrapper = createComponent({ + createComponent({ projData: { empty_repo: true, }, @@ -63,7 +66,7 @@ describe('WebIDE', () => { `( 'should error message exists=$exists when errorMessage=$errorMessage', async ({ errorMessage, exists }) => { - wrapper = createComponent({ + createComponent({ state: { errorMessage, }, @@ -78,12 +81,12 @@ describe('WebIDE', () => { describe('onBeforeUnload', () => { it('returns undefined when no staged files or changed files', () => { - wrapper = createComponent(); + createComponent(); expect(wrapper.vm.onBeforeUnload()).toBe(undefined); }); it('returns warning text when their are changed files', () => { - wrapper = createComponent({ + createComponent({ state: { changedFiles: [file()], }, @@ -93,7 +96,7 @@ describe('WebIDE', () => { }); it('returns warning text when their are staged files', () => { - wrapper = createComponent({ + createComponent({ state: { stagedFiles: [file()], }, @@ -104,7 +107,7 @@ describe('WebIDE', () => { it('updates event object', () => { const event = {}; - wrapper = createComponent({ + createComponent({ state: { stagedFiles: [file()], }, @@ -118,7 +121,7 @@ describe('WebIDE', () => { describe('non-existent branch', () => { it('does not render "New file" button for non-existent branch when repo is not empty', () => { - wrapper = createComponent({ + createComponent({ state: { projects: {}, }, @@ -130,7 +133,7 @@ describe('WebIDE', () => { describe('branch with files', () => { beforeEach(() => { - wrapper = createComponent({ + createComponent({ projData: { empty_repo: false, }, @@ -142,4 +145,31 @@ describe('WebIDE', () => { }); }); }); + + it('when user cannot push code, shows alert', () => { + createComponent({ + projData: { + userPermissions: { + pushCode: false, + }, + }, + }); + + expect(findAlert().props()).toMatchObject({ + dismissible: false, + }); + expect(findAlert().text()).toBe(Ide.MSG_CANNOT_PUSH_CODE); + }); + + it.each` + desc | projData + ${'when user can push code'} | ${{ userPermissions: { pushCode: true } }} + ${'when project is not ready'} | ${null} + `('$desc, no alert is shown', ({ projData }) => { + createComponent({ + projData, + }); + + expect(findAlert().exists()).toBe(false); + }); }); diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js index 47506bb87e8..9d33a1e2554 100644 --- a/spec/frontend/ide/components/ide_status_bar_spec.js +++ b/spec/frontend/ide/components/ide_status_bar_spec.js @@ -1,10 +1,10 @@ -import Vue from 'vue'; import _ from 'lodash'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; +import Vue from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; -import { createStore } from '~/ide/stores'; +import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import IdeStatusBar from '~/ide/components/ide_status_bar.vue'; import { rightSidebarViews } from '~/ide/constants'; +import { createStore } from '~/ide/stores'; import { projectData } from '../mock_data'; const TEST_PROJECT_ID = 'abcproject'; diff --git a/spec/frontend/ide/components/ide_status_list_spec.js b/spec/frontend/ide/components/ide_status_list_spec.js index 02b5dc19bd8..036edfb3ec1 100644 --- a/spec/frontend/ide/components/ide_status_list_spec.js +++ b/spec/frontend/ide/components/ide_status_list_spec.js @@ -1,6 +1,6 @@ -import Vuex from 'vuex'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlLink } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; import IdeStatusList from '~/ide/components/ide_status_list.vue'; import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue'; diff --git a/spec/frontend/ide/components/ide_status_mr_spec.js b/spec/frontend/ide/components/ide_status_mr_spec.js index ac1be4b21c0..0526d4653f8 100644 --- a/spec/frontend/ide/components/ide_status_mr_spec.js +++ b/spec/frontend/ide/components/ide_status_mr_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon, GlLink } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'helpers/test_constants'; import IdeStatusMr from '~/ide/components/ide_status_mr.vue'; diff --git a/spec/frontend/ide/components/ide_tree_spec.js b/spec/frontend/ide/components/ide_tree_spec.js index c5934b032c4..6eef646b012 100644 --- a/spec/frontend/ide/components/ide_tree_spec.js +++ b/spec/frontend/ide/components/ide_tree_spec.js @@ -1,6 +1,6 @@ +import { mount, createLocalVue } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; -import { mount, createLocalVue } from '@vue/test-utils'; import { keepAlive } from 'helpers/keep_alive_component_helper'; import IdeTree from '~/ide/components/ide_tree.vue'; import { createStore } from '~/ide/stores'; diff --git a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js index b323ad8320c..d632a34266a 100644 --- a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js +++ b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue'; describe('IDE job log scroll button', () => { diff --git a/spec/frontend/ide/components/jobs/list_spec.js b/spec/frontend/ide/components/jobs/list_spec.js index 5c5c6602374..8797e07aef1 100644 --- a/spec/frontend/ide/components/jobs/list_spec.js +++ b/spec/frontend/ide/components/jobs/list_spec.js @@ -1,5 +1,5 @@ -import { shallowMount, mount, createLocalVue } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount, mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import StageList from '~/ide/components/jobs/list.vue'; import Stage from '~/ide/components/jobs/stage.vue'; diff --git a/spec/frontend/ide/components/jobs/stage_spec.js b/spec/frontend/ide/components/jobs/stage_spec.js index e80215b9d13..9accd81a2ba 100644 --- a/spec/frontend/ide/components/jobs/stage_spec.js +++ b/spec/frontend/ide/components/jobs/stage_spec.js @@ -1,7 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; import { GlLoadingIcon } from '@gitlab/ui'; -import Stage from '~/ide/components/jobs/stage.vue'; +import { shallowMount } from '@vue/test-utils'; import Item from '~/ide/components/jobs/item.vue'; +import Stage from '~/ide/components/jobs/stage.vue'; import { stages, jobs } from '../../mock_data'; describe('IDE pipeline stage', () => { diff --git a/spec/frontend/ide/components/merge_requests/item_spec.js b/spec/frontend/ide/components/merge_requests/item_spec.js index 20adaa7abbc..f0a97a0b10a 100644 --- a/spec/frontend/ide/components/merge_requests/item_spec.js +++ b/spec/frontend/ide/components/merge_requests/item_spec.js @@ -1,8 +1,8 @@ -import Vuex from 'vuex'; import { mount, createLocalVue } from '@vue/test-utils'; -import { createStore } from '~/ide/stores'; -import { createRouter } from '~/ide/ide_router'; +import Vuex from 'vuex'; import Item from '~/ide/components/merge_requests/item.vue'; +import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; const TEST_ITEM = { iid: 1, diff --git a/spec/frontend/ide/components/merge_requests/list_spec.js b/spec/frontend/ide/components/merge_requests/list_spec.js index f0ac852fa67..85acabca38b 100644 --- a/spec/frontend/ide/components/merge_requests/list_spec.js +++ b/spec/frontend/ide/components/merge_requests/list_spec.js @@ -1,8 +1,8 @@ +import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; -import List from '~/ide/components/merge_requests/list.vue'; import Item from '~/ide/components/merge_requests/item.vue'; +import List from '~/ide/components/merge_requests/list.vue'; import TokenedInput from '~/ide/components/shared/tokened_input.vue'; import { mergeRequests as mergeRequestsMock } from '../../mock_data'; diff --git a/spec/frontend/ide/components/nav_dropdown_spec.js b/spec/frontend/ide/components/nav_dropdown_spec.js index 12a1a4c8013..4ddb3930764 100644 --- a/spec/frontend/ide/components/nav_dropdown_spec.js +++ b/spec/frontend/ide/components/nav_dropdown_spec.js @@ -1,8 +1,8 @@ -import $ from 'jquery'; import { mount } from '@vue/test-utils'; -import { createStore } from '~/ide/stores'; +import $ from 'jquery'; import NavDropdown from '~/ide/components/nav_dropdown.vue'; import { PERMISSION_READ_MR } from '~/ide/constants'; +import { createStore } from '~/ide/stores'; const TEST_PROJECT_ID = 'lorem-ipsum'; diff --git a/spec/frontend/ide/components/new_dropdown/index_spec.js b/spec/frontend/ide/components/new_dropdown/index_spec.js index 793d950b3e0..5a1c0471206 100644 --- a/spec/frontend/ide/components/new_dropdown/index_spec.js +++ b/spec/frontend/ide/components/new_dropdown/index_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; import newDropdown from '~/ide/components/new_dropdown/index.vue'; +import { createStore } from '~/ide/stores'; describe('new dropdown component', () => { let store; diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js index 06434081e39..0600fcea917 100644 --- a/spec/frontend/ide/components/new_dropdown/modal_spec.js +++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { createStore } from '~/ide/stores'; -import modal from '~/ide/components/new_dropdown/modal.vue'; import { deprecatedCreateFlash as createFlash } from '~/flash'; +import modal from '~/ide/components/new_dropdown/modal.vue'; +import { createStore } from '~/ide/stores'; jest.mock('~/flash'); diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js index c3da2a46858..7216f50b05c 100644 --- a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js +++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js @@ -1,9 +1,9 @@ import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; +import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; +import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue'; import { createStore } from '~/ide/stores'; import paneModule from '~/ide/stores/modules/pane'; -import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue'; -import IdeSidebarNav from '~/ide/components/ide_sidebar_nav.vue'; const localVue = createLocalVue(); localVue.use(Vuex); diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js index 57fd0e49e94..c6231d129ff 100644 --- a/spec/frontend/ide/components/panes/right_spec.js +++ b/spec/frontend/ide/components/panes/right_spec.js @@ -1,10 +1,10 @@ +import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import { createStore } from '~/ide/stores'; -import RightPane from '~/ide/components/panes/right.vue'; import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue'; +import RightPane from '~/ide/components/panes/right.vue'; import { rightSidebarViews } from '~/ide/constants'; +import { createStore } from '~/ide/stores'; import extendStore from '~/ide/stores/extend'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/pipelines/list_spec.js b/spec/frontend/ide/components/pipelines/list_spec.js index a1fbfd96c31..58d8c0629fb 100644 --- a/spec/frontend/ide/components/pipelines/list_spec.js +++ b/spec/frontend/ide/components/pipelines/list_spec.js @@ -1,13 +1,13 @@ +import { GlLoadingIcon, GlTab } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Vue from 'vue'; import Vuex from 'vuex'; -import { GlLoadingIcon, GlTab } from '@gitlab/ui'; import { TEST_HOST } from 'helpers/test_constants'; import { pipelines } from 'jest/ide/mock_data'; -import List from '~/ide/components/pipelines/list.vue'; import JobsList from '~/ide/components/jobs/list.vue'; -import CiIcon from '~/vue_shared/components/ci_icon.vue'; +import List from '~/ide/components/pipelines/list.vue'; import IDEServices from '~/ide/services'; +import CiIcon from '~/vue_shared/components/ci_icon.vue'; Vue.use(Vuex); diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js index 220982e1fd9..1768f01f3b8 100644 --- a/spec/frontend/ide/components/preview/clientside_spec.js +++ b/spec/frontend/ide/components/preview/clientside_spec.js @@ -1,7 +1,7 @@ -import Vuex from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import smooshpack from 'smooshpack'; +import Vuex from 'vuex'; import Clientside from '~/ide/components/preview/clientside.vue'; import eventHub from '~/ide/eventhub'; diff --git a/spec/frontend/ide/components/preview/navigator_spec.js b/spec/frontend/ide/components/preview/navigator_spec.js index ba5ac3bbbea..ee760364c7e 100644 --- a/spec/frontend/ide/components/preview/navigator_spec.js +++ b/spec/frontend/ide/components/preview/navigator_spec.js @@ -1,7 +1,7 @@ -import { shallowMount } from '@vue/test-utils'; -import { TEST_HOST } from 'helpers/test_constants'; import { GlLoadingIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { listen } from 'codesandbox-api'; +import { TEST_HOST } from 'helpers/test_constants'; import ClientsideNavigator from '~/ide/components/preview/navigator.vue'; jest.mock('codesandbox-api', () => ({ diff --git a/spec/frontend/ide/components/repo_commit_section_spec.js b/spec/frontend/ide/components/repo_commit_section_spec.js index e91debee4ca..c174f5e2006 100644 --- a/spec/frontend/ide/components/repo_commit_section_spec.js +++ b/spec/frontend/ide/components/repo_commit_section_spec.js @@ -1,10 +1,10 @@ import { mount } from '@vue/test-utils'; import { keepAlive } from 'helpers/keep_alive_component_helper'; -import { createStore } from '~/ide/stores'; -import { createRouter } from '~/ide/ide_router'; -import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue'; +import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; import { stageKeys } from '~/ide/constants'; +import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; import { file } from '../helpers'; const TEST_NO_CHANGES_SVG = 'nochangessvg'; diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js index 89a7f423e34..1985feb1615 100644 --- a/spec/frontend/ide/components/repo_editor_spec.js +++ b/spec/frontend/ide/components/repo_editor_spec.js @@ -1,22 +1,22 @@ -import Vuex from 'vuex'; -import Vue from 'vue'; import MockAdapter from 'axios-mock-adapter'; -import '~/behaviors/markdown/render_gfm'; import { Range } from 'monaco-editor'; +import Vue from 'vue'; +import Vuex from 'vuex'; +import '~/behaviors/markdown/render_gfm'; +import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import waitForPromises from 'helpers/wait_for_promises'; import waitUsingRealTimer from 'helpers/wait_using_real_timer'; -import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import axios from '~/lib/utils/axios_utils'; -import service from '~/ide/services'; -import { createStoreOptions } from '~/ide/stores'; import RepoEditor from '~/ide/components/repo_editor.vue'; -import Editor from '~/ide/lib/editor'; import { leftSidebarViews, FILE_VIEW_MODE_EDITOR, FILE_VIEW_MODE_PREVIEW, viewerTypes, } from '~/ide/constants'; +import Editor from '~/ide/lib/editor'; +import service from '~/ide/services'; +import { createStoreOptions } from '~/ide/stores'; +import axios from '~/lib/utils/axios_utils'; import { file } from '../helpers'; import { exampleConfigs, exampleFiles } from '../lib/editorconfig/mock_data'; diff --git a/spec/frontend/ide/components/repo_tab_spec.js b/spec/frontend/ide/components/repo_tab_spec.js index a44c8b4d5ee..b39a488b034 100644 --- a/spec/frontend/ide/components/repo_tab_spec.js +++ b/spec/frontend/ide/components/repo_tab_spec.js @@ -1,8 +1,8 @@ import { mount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { createStore } from '~/ide/stores'; import RepoTab from '~/ide/components/repo_tab.vue'; import { createRouter } from '~/ide/ide_router'; +import { createStore } from '~/ide/stores'; import { file } from '../helpers'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/repo_tabs_spec.js b/spec/frontend/ide/components/repo_tabs_spec.js index 45a17c37667..6ee73b0a437 100644 --- a/spec/frontend/ide/components/repo_tabs_spec.js +++ b/spec/frontend/ide/components/repo_tabs_spec.js @@ -1,7 +1,7 @@ -import Vuex from 'vuex'; import { mount, createLocalVue } from '@vue/test-utils'; -import { createStore } from '~/ide/stores'; +import Vuex from 'vuex'; import RepoTabs from '~/ide/components/repo_tabs.vue'; +import { createStore } from '~/ide/stores'; import { file } from '../helpers'; const localVue = createLocalVue(); diff --git a/spec/frontend/ide/components/resizable_panel_spec.js b/spec/frontend/ide/components/resizable_panel_spec.js index b1a1212371e..6a5af52ea35 100644 --- a/spec/frontend/ide/components/resizable_panel_spec.js +++ b/spec/frontend/ide/components/resizable_panel_spec.js @@ -1,8 +1,8 @@ -import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; +import Vuex from 'vuex'; import ResizablePanel from '~/ide/components/resizable_panel.vue'; -import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; import { SIDE_LEFT, SIDE_RIGHT } from '~/ide/constants'; +import PanelResizer from '~/vue_shared/components/panel_resizer.vue'; const TEST_WIDTH = 500; const TEST_MIN_WIDTH = 400; diff --git a/spec/frontend/ide/components/terminal/empty_state_spec.js b/spec/frontend/ide/components/terminal/empty_state_spec.js index b62470f67b6..57c816747aa 100644 --- a/spec/frontend/ide/components/terminal/empty_state_spec.js +++ b/spec/frontend/ide/components/terminal/empty_state_spec.js @@ -1,5 +1,5 @@ -import { shallowMount } from '@vue/test-utils'; import { GlLoadingIcon, GlButton, GlAlert } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; import { TEST_HOST } from 'spec/test_constants'; import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue'; diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js index 5653c8bf14d..5659a7d15da 100644 --- a/spec/frontend/ide/components/terminal/session_spec.js +++ b/spec/frontend/ide/components/terminal/session_spec.js @@ -1,5 +1,5 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlButton } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import TerminalSession from '~/ide/components/terminal/session.vue'; import Terminal from '~/ide/components/terminal/terminal.vue'; diff --git a/spec/frontend/ide/components/terminal/terminal_controls_spec.js b/spec/frontend/ide/components/terminal/terminal_controls_spec.js index 99182710218..416096083f0 100644 --- a/spec/frontend/ide/components/terminal/terminal_controls_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_controls_spec.js @@ -1,6 +1,6 @@ import { shallowMount } from '@vue/test-utils'; -import TerminalControls from '~/ide/components/terminal/terminal_controls.vue'; import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue'; +import TerminalControls from '~/ide/components/terminal/terminal_controls.vue'; describe('IDE TerminalControls', () => { let wrapper; diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js index 9cfe167d2f6..c4b186c004a 100644 --- a/spec/frontend/ide/components/terminal/terminal_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_spec.js @@ -1,7 +1,7 @@ -import Vue, { nextTick } from 'vue'; +import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; -import { GlLoadingIcon } from '@gitlab/ui'; import Terminal from '~/ide/components/terminal/terminal.vue'; import TerminalControls from '~/ide/components/terminal/terminal_controls.vue'; import { diff --git a/spec/frontend/ide/components/terminal/view_spec.js b/spec/frontend/ide/components/terminal/view_spec.js index 37f7957c526..e97d4d8a73b 100644 --- a/spec/frontend/ide/components/terminal/view_spec.js +++ b/spec/frontend/ide/components/terminal/view_spec.js @@ -1,10 +1,10 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { TEST_HOST } from 'spec/test_constants'; import waitForPromises from 'helpers/wait_for_promises'; +import { TEST_HOST } from 'spec/test_constants'; import TerminalEmptyState from '~/ide/components/terminal/empty_state.vue'; -import TerminalView from '~/ide/components/terminal/view.vue'; import TerminalSession from '~/ide/components/terminal/session.vue'; +import TerminalView from '~/ide/components/terminal/view.vue'; const TEST_HELP_PATH = `${TEST_HOST}/help`; const TEST_SVG_PATH = `${TEST_HOST}/illustration.svg`; diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js index afdecb7bbbd..69077ef2c68 100644 --- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_safe_spec.js @@ -1,5 +1,5 @@ -import Vuex from 'vuex'; import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue'; import TerminalSyncStatusSafe from '~/ide/components/terminal_sync/terminal_sync_status_safe.vue'; diff --git a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js index d15583f81e4..c916c43d1e2 100644 --- a/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js +++ b/spec/frontend/ide/components/terminal_sync/terminal_sync_status_spec.js @@ -1,6 +1,6 @@ -import Vuex from 'vuex'; -import { createLocalVue, shallowMount } from '@vue/test-utils'; import { GlLoadingIcon, GlIcon } from '@gitlab/ui'; +import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vuex from 'vuex'; import TerminalSyncStatus from '~/ide/components/terminal_sync/terminal_sync_status.vue'; import { MSG_TERMINAL_SYNC_CONNECTING, |