diff options
Diffstat (limited to 'spec/frontend/ide/components')
47 files changed, 240 insertions, 239 deletions
diff --git a/spec/frontend/ide/components/activity_bar_spec.js b/spec/frontend/ide/components/activity_bar_spec.js index 762f3c5dad1..1a4b6ca0b71 100644 --- a/spec/frontend/ide/components/activity_bar_spec.js +++ b/spec/frontend/ide/components/activity_bar_spec.js @@ -1,8 +1,8 @@ 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 { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; describe('IDE activity bar', () => { const Component = Vue.extend(ActivityBar); @@ -59,7 +59,7 @@ describe('IDE activity bar', () => { expect(vm.$el.querySelector('.js-ide-edit-mode').classList).toContain('active'); }); - it('sets commit item active', done => { + it('sets commit item active', (done) => { vm.$store.state.currentActivityView = leftSidebarViews.commit.name; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/branches/search_list_spec.js b/spec/frontend/ide/components/branches/search_list_spec.js index fe142d70698..85776f8cc0e 100644 --- a/spec/frontend/ide/components/branches/search_list_spec.js +++ b/spec/frontend/ide/components/branches/search_list_spec.js @@ -71,7 +71,7 @@ describe('IDE branches search list', () => { it('renders check next to active branch', () => { const activeBranch = 'regular'; createComponent({ branches }, activeBranch); - const items = wrapper.findAll(Item).filter(w => w.props('isActive')); + const items = wrapper.findAll(Item).filter((w) => w.props('isActive')); expect(items.length).toBe(1); expect(items.at(0).props('item').name).toBe(activeBranch); diff --git a/spec/frontend/ide/components/commit_sidebar/actions_spec.js b/spec/frontend/ide/components/commit_sidebar/actions_spec.js index 0003e13c92f..91751bd34ea 100644 --- a/spec/frontend/ide/components/commit_sidebar/actions_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/actions_spec.js @@ -30,7 +30,7 @@ describe('IDE commit sidebar actions', () => { vm.$store.state.currentProjectId = 'abcproject'; const proj = { ...projectData }; - proj.branches[currentBranchId] = branches.find(branch => branch.name === currentBranchId); + proj.branches[currentBranchId] = branches.find((branch) => branch.name === currentBranchId); proj.empty_repo = emptyRepo; Vue.set(vm.$store.state.projects, 'abcproject', proj); @@ -72,7 +72,7 @@ describe('IDE commit sidebar actions', () => { expect(findText()).toContain('Commit to master branch'); }); - it('hides merge request option when project merge requests are disabled', done => { + it('hides merge request option when project merge requests are disabled', (done) => { createComponent({ hasMR: false }); vm.$nextTick(() => { @@ -106,7 +106,7 @@ describe('IDE commit sidebar actions', () => { expect(vm.$store.dispatch).not.toHaveBeenCalled(); }); - it('calls again after staged changes', done => { + it('calls again after staged changes', (done) => { createComponent({ currentBranchId: null }); vm.$store.state.currentBranchId = 'master'; 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 dbb43e43c19..c1dab4a04b6 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 { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; describe('IDE commit panel empty state', () => { let vm; 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 7ce628d4da7..baa25a11c2a 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_item_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_item_spec.js @@ -41,7 +41,7 @@ describe('Multi-file editor commit sidebar list item', () => { expect(findPathText()).toContain(f.path); }); - it('correctly renders renamed entries', done => { + it('correctly renders renamed entries', (done) => { Vue.set(vm.file, 'prevName', 'Old name'); vm.$nextTick() @@ -52,7 +52,7 @@ describe('Multi-file editor commit sidebar list item', () => { .catch(done.fail); }); - it('correctly renders entry, the name of which did not change after rename (as within a folder)', done => { + it('correctly renders entry, the name of which did not change after rename (as within a folder)', (done) => { Vue.set(vm.file, 'prevName', f.name); vm.$nextTick() @@ -63,7 +63,7 @@ describe('Multi-file editor commit sidebar list item', () => { .catch(done.fail); }); - it('opens a closed file in the editor when clicking the file path', done => { + it('opens a closed file in the editor when clicking the file path', (done) => { jest.spyOn(vm, 'openPendingTab'); jest.spyOn(router, 'push').mockImplementation(() => {}); @@ -77,7 +77,7 @@ describe('Multi-file editor commit sidebar list item', () => { }); }); - it('calls updateViewer with diff when clicking file', done => { + it('calls updateViewer with diff when clicking file', (done) => { jest.spyOn(vm, 'openFileInEditor'); jest.spyOn(vm, 'updateViewer'); jest.spyOn(router, 'push').mockImplementation(() => {}); @@ -134,7 +134,7 @@ describe('Multi-file editor commit sidebar list item', () => { expect(vm.$el.querySelector('.is-active')).toBe(null); }); - it('adds active class when keys match', done => { + it('adds active class when keys match', (done) => { vm.keyPrefix = 'staged'; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/commit_sidebar/list_spec.js b/spec/frontend/ide/components/commit_sidebar/list_spec.js index 636dfbf0b2a..898ec4bebce 100644 --- a/spec/frontend/ide/components/commit_sidebar/list_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/list_spec.js @@ -31,7 +31,7 @@ describe('Multi-file editor commit sidebar list', () => { }); describe('with a list of files', () => { - beforeEach(done => { + beforeEach((done) => { const f = file('file name'); f.changed = true; vm.fileList.push(f); diff --git a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js index d6ea8b9a4bd..1514fbc2c3b 100644 --- a/spec/frontend/ide/components/commit_sidebar/message_field_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/message_field_spec.js @@ -23,7 +23,7 @@ describe('IDE commit message field', () => { vm.$destroy(); }); - it('adds is-focused class on focus', done => { + it('adds is-focused class on focus', (done) => { vm.$el.querySelector('textarea').focus(); vm.$nextTick(() => { @@ -33,7 +33,7 @@ describe('IDE commit message field', () => { }); }); - it('removed is-focused class on blur', done => { + it('removed is-focused class on blur', (done) => { vm.$el.querySelector('textarea').focus(); vm.$nextTick() @@ -66,7 +66,7 @@ describe('IDE commit message field', () => { describe('highlights', () => { describe('subject line', () => { - it('does not highlight less than 50 characters', done => { + it('does not highlight less than 50 characters', (done) => { vm.text = 'text less than 50 chars'; vm.$nextTick() @@ -81,7 +81,7 @@ describe('IDE commit message field', () => { .catch(done.fail); }); - it('highlights characters over 50 length', done => { + it('highlights characters over 50 length', (done) => { vm.text = 'text less than 50 chars that should not highlighted. text more than 50 should be highlighted'; @@ -102,7 +102,7 @@ describe('IDE commit message field', () => { }); describe('body text', () => { - it('does not highlight body text less tan 72 characters', done => { + it('does not highlight body text less tan 72 characters', (done) => { vm.text = 'subject line\nbody content'; vm.$nextTick() @@ -114,7 +114,7 @@ describe('IDE commit message field', () => { .catch(done.fail); }); - it('highlights body text more than 72 characters', done => { + it('highlights body text more than 72 characters', (done) => { vm.text = 'subject line\nbody content that will be highlighted when it is more than 72 characters in length'; @@ -128,7 +128,7 @@ describe('IDE commit message field', () => { .catch(done.fail); }); - it('highlights body text & subject line', done => { + it('highlights body text & subject line', (done) => { vm.text = 'text less than 50 chars that should not highlighted\nbody content that will be highlighted when it is more than 72 characters in length'; @@ -147,7 +147,7 @@ describe('IDE commit message field', () => { }); describe('scrolling textarea', () => { - it('updates transform of highlights', done => { + it('updates transform of highlights', (done) => { vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content'; vm.$nextTick() 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 7cbf5ebc61a..50da64abbbe 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 @@ -17,7 +17,7 @@ describe('create new MR checkbox', () => { ] = { foo: 'bar' }; }; - const setPermissions = permissions => { + const setPermissions = (permissions) => { store.state.projects[store.state.currentProjectId].userPermissions = permissions; }; @@ -33,7 +33,7 @@ describe('create new MR checkbox', () => { vm.$store.state.currentBranchId = currentBranchId; store.state.projects.abcproject.branches[currentBranchId] = branches.find( - branch => branch.name === currentBranchId, + (branch) => branch.name === currentBranchId, ); return vm.$mount(); @@ -69,7 +69,7 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('has new MR', done => { + it('has new MR', (done) => { setMR(); vm.$nextTick() @@ -93,7 +93,7 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).toBe(''); }); - it('has new MR', done => { + it('has new MR', (done) => { setMR(); vm.$nextTick() @@ -118,7 +118,7 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is rendered if MR exists', done => { + it('is rendered if MR exists', (done) => { setMR(); vm.$nextTick() @@ -141,7 +141,7 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is hidden if MR exists', done => { + it('is hidden if MR exists', (done) => { setMR(); vm.$nextTick() @@ -165,7 +165,7 @@ describe('create new MR checkbox', () => { expect(vm.$el.textContent).not.toBe(''); }); - it('is hidden if MR exists', done => { + it('is hidden if MR exists', (done) => { setMR(); vm.$nextTick() 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 bf61f4bbe77..73d811f99b8 100644 --- a/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js +++ b/spec/frontend/ide/components/commit_sidebar/radio_group_spec.js @@ -7,7 +7,7 @@ describe('IDE commit sidebar radio group', () => { let vm; let store; - beforeEach(done => { + beforeEach((done) => { store = createStore(); const Component = Vue.extend(radioGroup); @@ -33,7 +33,7 @@ describe('IDE commit sidebar radio group', () => { expect(vm.$el.textContent).toContain('test'); }); - it('uses slot if label is not present', done => { + it('uses slot if label is not present', (done) => { vm.$destroy(); vm = new Vue({ @@ -41,7 +41,7 @@ describe('IDE commit sidebar radio group', () => { radioGroup, }, store, - render: createElement => + render: (createElement) => createElement('radio-group', { props: { value: '1' } }, 'Testing slot'), }); @@ -54,7 +54,7 @@ describe('IDE commit sidebar radio group', () => { }); }); - it('updates store when changing radio button', done => { + it('updates store when changing radio button', (done) => { vm.$el.querySelector('input').dispatchEvent(new Event('change')); Vue.nextTick(() => { @@ -65,7 +65,7 @@ describe('IDE commit sidebar radio group', () => { }); describe('with input', () => { - beforeEach(done => { + beforeEach((done) => { vm.$destroy(); const Component = Vue.extend(radioGroup); @@ -89,7 +89,7 @@ describe('IDE commit sidebar radio group', () => { expect(vm.$el.querySelector('.form-control')).not.toBeNull(); }); - it('hides input when commitAction doesnt match value', done => { + it('hides input when commitAction doesnt match value', (done) => { store.state.commit.commitAction = '2'; Vue.nextTick(() => { @@ -98,7 +98,7 @@ describe('IDE commit sidebar radio group', () => { }); }); - it('updates branch name in store on input', done => { + it('updates branch name in store on input', (done) => { const input = vm.$el.querySelector('.form-control'); input.value = 'testing-123'; input.dispatchEvent(new Event('input')); 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 db13c90fbb9..b116321efb3 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 { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; describe('IDE commit panel successful commit state', () => { let vm; @@ -23,7 +23,7 @@ describe('IDE commit panel successful commit state', () => { vm.$destroy(); }); - it('renders last commit message when it exists', done => { + it('renders last commit message when it exists', (done) => { vm.$store.state.lastCommitMsg = 'testing commit message'; Vue.nextTick(() => { diff --git a/spec/frontend/ide/components/error_message_spec.js b/spec/frontend/ide/components/error_message_spec.js index 8b7e7da3b51..fa6816d3546 100644 --- a/spec/frontend/ide/components/error_message_spec.js +++ b/spec/frontend/ide/components/error_message_spec.js @@ -10,7 +10,7 @@ describe('IDE error message component', () => { let wrapper; const setErrorMessageMock = jest.fn(); - const createComponent = messageProps => { + const createComponent = (messageProps) => { const fakeStore = new Vuex.Store({ actions: { setErrorMessage: setErrorMessageMock }, }); @@ -103,7 +103,7 @@ describe('IDE error message component', () => { let resolveAction; actionMock.mockImplementation( () => - new Promise(resolve => { + new Promise((resolve) => { resolveAction = resolve; }), ); diff --git a/spec/frontend/ide/components/file_row_extra_spec.js b/spec/frontend/ide/components/file_row_extra_spec.js index 2a106ad37c0..275b98bc154 100644 --- a/spec/frontend/ide/components/file_row_extra_spec.js +++ b/spec/frontend/ide/components/file_row_extra_spec.js @@ -45,15 +45,16 @@ describe('IDE extra file row component', () => { expect(vm.folderChangesTooltip).toBe(undefined); }); - [{ input: 1, output: '1 changed file' }, { input: 2, output: '2 changed files' }].forEach( - ({ input, output }) => { - it('returns changed files count if changes count is not 0', () => { - changesCount = input; - - expect(vm.folderChangesTooltip).toBe(output); - }); - }, - ); + [ + { input: 1, output: '1 changed file' }, + { input: 2, output: '2 changed files' }, + ].forEach(({ input, output }) => { + it('returns changed files count if changes count is not 0', () => { + changesCount = input; + + expect(vm.folderChangesTooltip).toBe(output); + }); + }); }); describe('show tree changes count', () => { @@ -69,7 +70,7 @@ describe('IDE extra file row component', () => { expect(vm.$el.querySelector('.ide-tree-changes')).toBe(null); }); - it('does not show when tree is open', done => { + it('does not show when tree is open', (done) => { vm.file.type = 'tree'; vm.file.opened = true; changesCount = 1; @@ -81,7 +82,7 @@ describe('IDE extra file row component', () => { }); }); - it('shows for trees with changes', done => { + it('shows for trees with changes', (done) => { vm.file.type = 'tree'; vm.file.opened = false; changesCount = 1; @@ -99,7 +100,7 @@ describe('IDE extra file row component', () => { expect(vm.$el.querySelector('.file-changed-icon')).toBe(null); }); - it('shows when file is changed', done => { + it('shows when file is changed', (done) => { vm.file.changed = true; vm.$nextTick(() => { @@ -109,7 +110,7 @@ describe('IDE extra file row component', () => { }); }); - it('shows when file is staged', done => { + it('shows when file is staged', (done) => { vm.file.staged = true; vm.$nextTick(() => { @@ -119,7 +120,7 @@ describe('IDE extra file row component', () => { }); }); - it('shows when file is a tempFile', done => { + it('shows when file is a tempFile', (done) => { vm.file.tempFile = true; vm.$nextTick(() => { @@ -129,7 +130,7 @@ describe('IDE extra file row component', () => { }); }); - it('shows when file is renamed', done => { + it('shows when file is renamed', (done) => { vm.file.prevPath = 'original-file'; vm.$nextTick(() => { @@ -139,7 +140,7 @@ describe('IDE extra file row component', () => { }); }); - it('hides when file is renamed', done => { + it('hides when file is renamed', (done) => { vm.file.prevPath = 'original-file'; vm.file.type = 'tree'; @@ -156,7 +157,7 @@ describe('IDE extra file row component', () => { expect(vm.$el.querySelector('[data-testid="git-merge-icon"]')).toBe(null); }); - it('shows when a merge request change', done => { + it('shows when a merge request change', (done) => { vm.file.mrChange = true; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/file_templates/bar_spec.js b/spec/frontend/ide/components/file_templates/bar_spec.js index 5a33837fb14..158995c9c9c 100644 --- a/spec/frontend/ide/components/file_templates/bar_spec.js +++ b/spec/frontend/ide/components/file_templates/bar_spec.js @@ -46,7 +46,7 @@ describe('IDE file templates bar component', () => { }); describe('template dropdown', () => { - beforeEach(done => { + beforeEach((done) => { vm.$store.state.fileTemplates.templates = [ { name: 'test', @@ -67,10 +67,7 @@ describe('IDE file templates bar component', () => { it('calls fetchTemplate on click', () => { jest.spyOn(vm, 'fetchTemplate').mockImplementation(); - vm.$el - .querySelectorAll('.dropdown-content')[1] - .querySelector('button') - .click(); + vm.$el.querySelectorAll('.dropdown-content')[1].querySelector('button').click(); expect(vm.fetchTemplate).toHaveBeenCalledWith({ name: 'test', @@ -78,7 +75,7 @@ describe('IDE file templates bar component', () => { }); }); - it('shows undo button if updateSuccess is true', done => { + it('shows undo button if updateSuccess is true', (done) => { vm.$store.state.fileTemplates.updateSuccess = true; vm.$nextTick(() => { @@ -96,7 +93,7 @@ describe('IDE file templates bar component', () => { expect(vm.undoFileTemplate).toHaveBeenCalled(); }); - it('calls setSelectedTemplateType if activeFile name matches a template', done => { + it('calls setSelectedTemplateType if activeFile name matches a template', (done) => { const fileName = '.gitlab-ci.yml'; jest.spyOn(vm, 'setSelectedTemplateType').mockImplementation(() => {}); diff --git a/spec/frontend/ide/components/file_templates/dropdown_spec.js b/spec/frontend/ide/components/file_templates/dropdown_spec.js index 3cffbc3362f..628580103a4 100644 --- a/spec/frontend/ide/components/file_templates/dropdown_spec.js +++ b/spec/frontend/ide/components/file_templates/dropdown_spec.js @@ -109,7 +109,7 @@ describe('IDE file templates dropdown component', () => { }); const items = findItemButtons(); - expect(items.wrappers.map(x => x.text())).toEqual(templates.map(x => x.name)); + expect(items.wrappers.map((x) => x.text())).toEqual(templates.map((x) => x.name)); }); it('searches template data', () => { @@ -124,7 +124,7 @@ describe('IDE file templates dropdown component', () => { const items = findItemButtons(); expect(items.length).toBe(matches.length); - expect(items.wrappers.map(x => x.text())).toEqual(matches); + expect(items.wrappers.map((x) => x.text())).toEqual(matches); }); }); @@ -151,7 +151,7 @@ describe('IDE file templates dropdown component', () => { const items = findItemButtons(); expect(items.length).toBe(data.length); - expect(items.wrappers.map(x => x.text())).toEqual(data.map(x => x.name)); + expect(items.wrappers.map((x) => x.text())).toEqual(data.map((x) => x.name)); }); it('renders input when `searchable` is true', () => { @@ -169,7 +169,7 @@ describe('IDE file templates dropdown component', () => { const items = findItemButtons(); expect(items.length).toBe(matches.length); - expect(items.wrappers.map(x => x.text())).toEqual(matches); + expect(items.wrappers.map((x) => x.text())).toEqual(matches); }); }); }); diff --git a/spec/frontend/ide/components/ide_review_spec.js b/spec/frontend/ide/components/ide_review_spec.js index bcc98669427..37f34a96495 100644 --- a/spec/frontend/ide/components/ide_review_spec.js +++ b/spec/frontend/ide/components/ide_review_spec.js @@ -1,11 +1,11 @@ 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 EditorModeDropdown from '~/ide/components/editor_mode_dropdown.vue'; import { createStore } from '~/ide/stores'; -import { trimText } from '../../helpers/text_helper'; -import { keepAlive } from '../../helpers/keep_alive_component_helper'; import { file } from '../helpers'; import { projectData } from '../mock_data'; diff --git a/spec/frontend/ide/components/ide_sidebar_nav_spec.js b/spec/frontend/ide/components/ide_sidebar_nav_spec.js index 49d476b56e4..6b4cb9bd03d 100644 --- a/spec/frontend/ide/components/ide_sidebar_nav_spec.js +++ b/spec/frontend/ide/components/ide_sidebar_nav_spec.js @@ -48,7 +48,7 @@ describe('ide/components/ide_sidebar_nav', () => { const findButtons = () => wrapper.findAll('li button'); const findButtonsData = () => - findButtons().wrappers.map(button => { + findButtons().wrappers.map((button) => { return { title: button.attributes('title'), ariaLabel: button.attributes('aria-label'), @@ -58,10 +58,7 @@ describe('ide/components/ide_sidebar_nav', () => { tooltip: getBinding(button.element, 'tooltip').value, }; }); - const clickTab = () => - findButtons() - .at(TEST_CURRENT_INDEX) - .trigger('click'); + const clickTab = () => findButtons().at(TEST_CURRENT_INDEX).trigger('click'); describe.each` isOpen | side | otherSide | classes | classesObj | emitEvent | emitArg diff --git a/spec/frontend/ide/components/ide_spec.js b/spec/frontend/ide/components/ide_spec.js index 315298eaf26..805fa898611 100644 --- a/spec/frontend/ide/components/ide_spec.js +++ b/spec/frontend/ide/components/ide_spec.js @@ -25,7 +25,7 @@ describe('WebIDE', () => { tree: [], loading: false, }; - Object.keys(state).forEach(key => { + Object.keys(state).forEach((key) => { store.state[key] = state[key]; }); diff --git a/spec/frontend/ide/components/ide_status_bar_spec.js b/spec/frontend/ide/components/ide_status_bar_spec.js index bc8144f544c..47506bb87e8 100644 --- a/spec/frontend/ide/components/ide_status_bar_spec.js +++ b/spec/frontend/ide/components/ide_status_bar_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import _ from 'lodash'; import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; -import { TEST_HOST } from '../../helpers/test_constants'; +import { TEST_HOST } from 'helpers/test_constants'; import { createStore } from '~/ide/stores'; import IdeStatusBar from '~/ide/components/ide_status_bar.vue'; import { rightSidebarViews } from '~/ide/constants'; @@ -73,7 +73,7 @@ describe('ideStatusBar', () => { }); describe('pipeline status', () => { - it('opens right sidebar on clicking icon', done => { + it('opens right sidebar on clicking icon', (done) => { jest.spyOn(vm, 'openRightPane').mockImplementation(() => {}); Vue.set(vm.$store.state.pipelines, 'latestPipeline', { details: { diff --git a/spec/frontend/ide/components/ide_status_mr_spec.js b/spec/frontend/ide/components/ide_status_mr_spec.js index 4d9ad61201d..ac1be4b21c0 100644 --- a/spec/frontend/ide/components/ide_status_mr_spec.js +++ b/spec/frontend/ide/components/ide_status_mr_spec.js @@ -9,7 +9,7 @@ const TEST_URL = `${TEST_HOST}merge-requests/9001`; describe('ide/components/ide_status_mr', () => { let wrapper; - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(IdeStatusMr, { propsData: props, }); diff --git a/spec/frontend/ide/components/ide_tree_list_spec.js b/spec/frontend/ide/components/ide_tree_list_spec.js index dd57a5c5f4d..c8153ea339e 100644 --- a/spec/frontend/ide/components/ide_tree_list_spec.js +++ b/spec/frontend/ide/components/ide_tree_list_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; +import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import IdeTreeList from '~/ide/components/ide_tree_list.vue'; import { createStore } from '~/ide/stores'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; import { file } from '../helpers'; import { projectData } from '../mock_data'; @@ -41,7 +41,7 @@ describe('IDE tree list', () => { vm.$mount(); }); - it('renders loading indicator', done => { + it('renders loading indicator', (done) => { store.state.trees['abcproject/master'].loading = true; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/ide_tree_spec.js b/spec/frontend/ide/components/ide_tree_spec.js index ad00dec2e48..c5934b032c4 100644 --- a/spec/frontend/ide/components/ide_tree_spec.js +++ b/spec/frontend/ide/components/ide_tree_spec.js @@ -1,9 +1,9 @@ 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'; -import { keepAlive } from '../../helpers/keep_alive_component_helper'; import { file } from '../helpers'; import { projectData } from '../mock_data'; diff --git a/spec/frontend/ide/components/jobs/detail/description_spec.js b/spec/frontend/ide/components/jobs/detail/description_spec.js index 5554738336a..786a7661d97 100644 --- a/spec/frontend/ide/components/jobs/detail/description_spec.js +++ b/spec/frontend/ide/components/jobs/detail/description_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; import Description from '~/ide/components/jobs/detail/description.vue'; -import mountComponent from '../../../../helpers/vue_mount_component_helper'; import { jobs } from '../../../mock_data'; describe('IDE job description', () => { 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 57174181a3d..b323ad8320c 100644 --- a/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js +++ b/spec/frontend/ide/components/jobs/detail/scroll_button_spec.js @@ -5,7 +5,7 @@ import ScrollButton from '~/ide/components/jobs/detail/scroll_button.vue'; describe('IDE job log scroll button', () => { let wrapper; - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(ScrollButton, { propsData: { direction: 'up', diff --git a/spec/frontend/ide/components/jobs/detail_spec.js b/spec/frontend/ide/components/jobs/detail_spec.js index 496d8284fdd..79ac0a8122a 100644 --- a/spec/frontend/ide/components/jobs/detail_spec.js +++ b/spec/frontend/ide/components/jobs/detail_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; import { TEST_HOST } from 'helpers/test_constants'; +import { createComponentWithStore } from 'helpers/vue_mount_component_helper'; import JobDetail from '~/ide/components/jobs/detail.vue'; import { createStore } from '~/ide/stores'; -import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper'; import { jobs } from '../../mock_data'; describe('IDE jobs detail view', () => { @@ -48,7 +48,7 @@ describe('IDE jobs detail view', () => { expect(vm.$el.querySelector('.bash').textContent).toContain('testing'); }); - it('renders empty message output', done => { + it('renders empty message output', (done) => { vm.$store.state.pipelines.detailJob.output = ''; vm.$nextTick(() => { @@ -68,7 +68,7 @@ describe('IDE jobs detail view', () => { expect(vm.$el.querySelector('.bash').style.display).toBe('none'); }); - it('hide loading icon when isLoading is false', done => { + it('hide loading icon when isLoading is false', (done) => { vm.$store.state.pipelines.detailJob.isLoading = false; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/jobs/item_spec.js b/spec/frontend/ide/components/jobs/item_spec.js index 93c01640b54..7343fc80a03 100644 --- a/spec/frontend/ide/components/jobs/item_spec.js +++ b/spec/frontend/ide/components/jobs/item_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; +import mountComponent from 'helpers/vue_mount_component_helper'; import JobItem from '~/ide/components/jobs/item.vue'; -import mountComponent from '../../../helpers/vue_mount_component_helper'; import { jobs } from '../../mock_data'; describe('IDE jobs item', () => { @@ -27,7 +27,7 @@ describe('IDE jobs item', () => { expect(vm.$el.querySelector('[data-testid="status_success_borderless-icon"]')).not.toBe(null); }); - it('does not render view logs button if not started', done => { + it('does not render view logs button if not started', (done) => { vm.job.started = false; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/jobs/list_spec.js b/spec/frontend/ide/components/jobs/list_spec.js index e821a585e18..5c5c6602374 100644 --- a/spec/frontend/ide/components/jobs/list_spec.js +++ b/spec/frontend/ide/components/jobs/list_spec.js @@ -36,7 +36,7 @@ describe('IDE stages list', () => { status: { icon: 'status_success' }, })); - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(StageList, { propsData: { ...defaultProps, @@ -48,7 +48,7 @@ describe('IDE stages list', () => { }; afterEach(() => { - Object.values(storeActions).forEach(actionMock => actionMock.mockClear()); + Object.values(storeActions).forEach((actionMock) => actionMock.mockClear()); }); afterAll(() => { diff --git a/spec/frontend/ide/components/jobs/stage_spec.js b/spec/frontend/ide/components/jobs/stage_spec.js index 3a47571ee13..e80215b9d13 100644 --- a/spec/frontend/ide/components/jobs/stage_spec.js +++ b/spec/frontend/ide/components/jobs/stage_spec.js @@ -20,7 +20,7 @@ describe('IDE pipeline stage', () => { const findHeader = () => wrapper.find({ ref: 'cardHeader' }); const findJobList = () => wrapper.find({ ref: 'jobList' }); - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(Stage, { propsData: { ...defaultProps, @@ -60,10 +60,7 @@ describe('IDE pipeline stage', () => { it('emits clickViewLog entity with job', () => { const [job] = defaultProps.stage.jobs; createComponent(); - wrapper - .findAll(Item) - .at(0) - .vm.$emit('clickViewLog', job); + wrapper.findAll(Item).at(0).vm.$emit('clickViewLog', job); return wrapper.vm.$nextTick().then(() => { expect(wrapper.emitted().clickViewLog[0][0]).toBe(job); }); diff --git a/spec/frontend/ide/components/merge_requests/list_spec.js b/spec/frontend/ide/components/merge_requests/list_spec.js index 80dcd861451..f0ac852fa67 100644 --- a/spec/frontend/ide/components/merge_requests/list_spec.js +++ b/spec/frontend/ide/components/merge_requests/list_spec.js @@ -82,9 +82,7 @@ describe('IDE merge requests list', () => { return wrapper.vm .$nextTick() .then(() => { - findSearchTypeButtons() - .at(0) - .trigger('click'); + findSearchTypeButtons().at(0).trigger('click'); return wrapper.vm.$nextTick(); }) .then(() => { @@ -153,8 +151,8 @@ describe('IDE merge requests list', () => { it('shows search types', () => { const buttons = findSearchTypeButtons(); - expect(buttons.wrappers.map(x => x.text().trim())).toEqual( - wrapper.vm.$options.searchTypes.map(x => x.label), + expect(buttons.wrappers.map((x) => x.text().trim())).toEqual( + wrapper.vm.$options.searchTypes.map((x) => x.label), ); }); @@ -168,9 +166,7 @@ describe('IDE merge requests list', () => { describe('with search type', () => { beforeEach(() => { - findSearchTypeButtons() - .at(0) - .trigger('click'); + findSearchTypeButtons().at(0).trigger('click'); return wrapper.vm .$nextTick() diff --git a/spec/frontend/ide/components/nav_dropdown_button_spec.js b/spec/frontend/ide/components/nav_dropdown_button_spec.js index c98aa313f40..a02bfa5c391 100644 --- a/spec/frontend/ide/components/nav_dropdown_button_spec.js +++ b/spec/frontend/ide/components/nav_dropdown_button_spec.js @@ -23,7 +23,7 @@ describe('NavDropdown', () => { vm.$mount(); }; - const findIcon = name => vm.$el.querySelector(`[data-testid="${name}-icon"]`); + const findIcon = (name) => vm.$el.querySelector(`[data-testid="${name}-icon"]`); const findMRIcon = () => findIcon('merge-request'); const findBranchIcon = () => findIcon('branch'); @@ -36,7 +36,7 @@ describe('NavDropdown', () => { expect(trimText(vm.$el.textContent)).toEqual('- -'); }); - it('renders branch name, if state has currentBranchId', done => { + it('renders branch name, if state has currentBranchId', (done) => { vm.$store.state.currentBranchId = TEST_BRANCH_ID; vm.$nextTick() @@ -47,7 +47,7 @@ describe('NavDropdown', () => { .catch(done.fail); }); - it('renders mr id, if state has currentMergeRequestId', done => { + it('renders mr id, if state has currentMergeRequestId', (done) => { vm.$store.state.currentMergeRequestId = TEST_MR_ID; vm.$nextTick() @@ -58,7 +58,7 @@ describe('NavDropdown', () => { .catch(done.fail); }); - it('renders branch and mr, if state has both', done => { + it('renders branch and mr, if state has both', (done) => { vm.$store.state.currentBranchId = TEST_BRANCH_ID; vm.$store.state.currentMergeRequestId = TEST_MR_ID; diff --git a/spec/frontend/ide/components/nav_dropdown_spec.js b/spec/frontend/ide/components/nav_dropdown_spec.js index 2f91ab7af0a..12a1a4c8013 100644 --- a/spec/frontend/ide/components/nav_dropdown_spec.js +++ b/spec/frontend/ide/components/nav_dropdown_spec.js @@ -39,7 +39,7 @@ describe('IDE NavDropdown', () => { }); }; - const findIcon = name => wrapper.find(`[data-testid="${name}-icon"]`); + const findIcon = (name) => wrapper.find(`[data-testid="${name}-icon"]`); const findMRIcon = () => findIcon('merge-request'); const findNavForm = () => wrapper.find('.ide-nav-form'); const showDropdown = () => { @@ -58,7 +58,7 @@ describe('IDE NavDropdown', () => { expect(findNavForm().exists()).toBe(false); }); - it('renders nav form when show.bs.dropdown', done => { + it('renders nav form when show.bs.dropdown', (done) => { showDropdown(); wrapper.vm @@ -70,7 +70,7 @@ describe('IDE NavDropdown', () => { .catch(done.fail); }); - it('destroys nav form when closed', done => { + it('destroys nav form when closed', (done) => { showDropdown(); hideDropdown(); diff --git a/spec/frontend/ide/components/new_dropdown/button_spec.js b/spec/frontend/ide/components/new_dropdown/button_spec.js index 66317296ee9..32fa2babcdb 100644 --- a/spec/frontend/ide/components/new_dropdown/button_spec.js +++ b/spec/frontend/ide/components/new_dropdown/button_spec.js @@ -37,7 +37,7 @@ describe('IDE new entry dropdown button component', () => { expect(vm.$emit).toHaveBeenCalledWith('click'); }); - it('hides label if showLabel is false', done => { + it('hides label if showLabel is false', (done) => { vm.showLabel = false; vm.$nextTick(() => { @@ -52,7 +52,7 @@ describe('IDE new entry dropdown button component', () => { expect(vm.tooltipTitle).toBe(''); }); - it('returns label', done => { + it('returns label', (done) => { vm.showLabel = false; vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/new_dropdown/index_spec.js b/spec/frontend/ide/components/new_dropdown/index_spec.js index c6cebf36de3..793d950b3e0 100644 --- a/spec/frontend/ide/components/new_dropdown/index_spec.js +++ b/spec/frontend/ide/components/new_dropdown/index_spec.js @@ -57,7 +57,7 @@ describe('new dropdown component', () => { }); describe('isOpen', () => { - it('scrolls dropdown into view', done => { + it('scrolls dropdown into view', (done) => { jest.spyOn(vm.$refs.dropdownMenu, 'scrollIntoView').mockImplementation(() => {}); vm.isOpen = true; diff --git a/spec/frontend/ide/components/new_dropdown/modal_spec.js b/spec/frontend/ide/components/new_dropdown/modal_spec.js index ea8ba24c9d0..06434081e39 100644 --- a/spec/frontend/ide/components/new_dropdown/modal_spec.js +++ b/spec/frontend/ide/components/new_dropdown/modal_spec.js @@ -19,7 +19,7 @@ describe('new file modal component', () => { ${'tree'} | ${'Create new directory'} | ${'Create directory'} | ${false} ${'blob'} | ${'Create new file'} | ${'Create file'} | ${true} `('$entryType', ({ entryType, modalTitle, btnTitle, showsFileTemplates }) => { - beforeEach(done => { + beforeEach((done) => { const store = createStore(); vm = createComponentWithStore(Component, store).$mount(); diff --git a/spec/frontend/ide/components/new_dropdown/upload_spec.js b/spec/frontend/ide/components/new_dropdown/upload_spec.js index 3f3784dbb3a..7303f81aad0 100644 --- a/spec/frontend/ide/components/new_dropdown/upload_spec.js +++ b/spec/frontend/ide/components/new_dropdown/upload_spec.js @@ -62,15 +62,15 @@ describe('new dropdown upload', () => { result: 'base64,8PDw8A==', // ðððð }; - const textFile = new File(['plain text'], 'textFile'); - const binaryFile = new File(['😺'], 'binaryFile'); + const textFile = new File(['plain text'], 'textFile', { type: 'test/mime-text' }); + const binaryFile = new File(['😺'], 'binaryFile', { type: 'test/mime-binary' }); beforeEach(() => { jest.spyOn(FileReader.prototype, 'readAsText'); }); - it('calls readAsText and creates file in plain text (without encoding) if the file content is plain text', done => { - const waitForCreate = new Promise(resolve => vm.$on('create', resolve)); + it('calls readAsText and creates file in plain text (without encoding) if the file content is plain text', (done) => { + const waitForCreate = new Promise((resolve) => vm.$on('create', resolve)); vm.createFile(textTarget, textFile); @@ -83,6 +83,7 @@ describe('new dropdown upload', () => { type: 'blob', content: 'plain text', rawPath: '', + mimeType: 'test/mime-text', }); }) .then(done) @@ -99,6 +100,7 @@ describe('new dropdown upload', () => { type: 'blob', content: 'ðððð', rawPath: 'blob:https://gitlab.com/048c7ac1-98de-4a37-ab1b-0206d0ea7e1b', + mimeType: 'test/mime-binary', }); }); }); diff --git a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js index bb9ba32a699..c3da2a46858 100644 --- a/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js +++ b/spec/frontend/ide/components/panes/collapsible_sidebar_spec.js @@ -15,7 +15,7 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => { const width = 350; const fakeComponentName = 'fake-component'; - const createComponent = props => { + const createComponent = (props) => { wrapper = shallowMount(CollapsibleSidebar, { localVue, store, @@ -47,7 +47,7 @@ describe('ide/components/panes/collapsible_sidebar.vue', () => { beforeEach(() => { const FakeComponent = localVue.component(fakeComponentName, { - render: () => {}, + render: () => null, }); fakeView = { diff --git a/spec/frontend/ide/components/panes/right_spec.js b/spec/frontend/ide/components/panes/right_spec.js index 203d35ed335..57fd0e49e94 100644 --- a/spec/frontend/ide/components/panes/right_spec.js +++ b/spec/frontend/ide/components/panes/right_spec.js @@ -14,7 +14,7 @@ describe('ide/components/panes/right.vue', () => { let wrapper; let store; - const createComponent = props => { + const createComponent = (props) => { extendStore(store, document.createElement('div')); wrapper = shallowMount(RightPane, { diff --git a/spec/frontend/ide/components/pipelines/list_spec.js b/spec/frontend/ide/components/pipelines/list_spec.js index c1744fefe20..a1fbfd96c31 100644 --- a/spec/frontend/ide/components/pipelines/list_spec.js +++ b/spec/frontend/ide/components/pipelines/list_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +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'; @@ -8,8 +9,7 @@ import JobsList from '~/ide/components/jobs/list.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import IDEServices from '~/ide/services'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); jest.mock('~/ide/services', () => ({ pingUsage: jest.fn(), @@ -59,9 +59,6 @@ describe('IDE pipelines list', () => { failedStages: failedStagesGetterMock, pipelineFailed: () => false, }, - methods: { - fetchLatestPipeline: jest.fn(), - }, }, }, }); @@ -69,7 +66,6 @@ describe('IDE pipelines list', () => { const createComponent = (state = {}, pipelinesState = {}) => { wrapper = shallowMount(List, { - localVue, store: createStore(state, pipelinesState), }); }; @@ -165,11 +161,7 @@ describe('IDE pipelines list', () => { const isLoadingJobs = true; createComponent({}, { ...withLatestPipelineState, stages, isLoadingJobs }); - const jobProps = wrapper - .findAll(GlTab) - .at(0) - .find(JobsList) - .props(); + const jobProps = wrapper.findAll(GlTab).at(0).find(JobsList).props(); expect(jobProps.stages).toBe(stages); expect(jobProps.loading).toBe(isLoadingJobs); }); @@ -180,11 +172,7 @@ describe('IDE pipelines list', () => { const isLoadingJobs = true; createComponent({}, { ...withLatestPipelineState, isLoadingJobs }); - const jobProps = wrapper - .findAll(GlTab) - .at(1) - .find(JobsList) - .props(); + const jobProps = wrapper.findAll(GlTab).at(1).find(JobsList).props(); expect(jobProps.stages).toBe(failedStages); expect(jobProps.loading).toBe(isLoadingJobs); }); diff --git a/spec/frontend/ide/components/preview/clientside_spec.js b/spec/frontend/ide/components/preview/clientside_spec.js index 7b22f75cee4..220982e1fd9 100644 --- a/spec/frontend/ide/components/preview/clientside_spec.js +++ b/spec/frontend/ide/components/preview/clientside_spec.js @@ -3,6 +3,7 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { shallowMount, createLocalVue } from '@vue/test-utils'; import smooshpack from 'smooshpack'; import Clientside from '~/ide/components/preview/clientside.vue'; +import eventHub from '~/ide/eventhub'; jest.mock('smooshpack', () => ({ Manager: jest.fn(), @@ -70,6 +71,17 @@ describe('IDE clientside preview', () => { }); }; + const createInitializedComponent = () => { + createComponent(); + wrapper.setData({ + sandpackReady: true, + manager: { + listener: jest.fn(), + updatePreview: jest.fn(), + }, + }); + }; + afterEach(() => { wrapper.destroy(); }); @@ -293,33 +305,33 @@ describe('IDE clientside preview', () => { }); describe('update', () => { - beforeEach(() => { - createComponent(); - wrapper.setData({ sandpackReady: true }); - }); - it('initializes manager if manager is empty', () => { createComponent({ getters: { packageJson: dummyPackageJson } }); wrapper.setData({ sandpackReady: true }); wrapper.vm.update(); - jest.advanceTimersByTime(250); - return waitForCalls().then(() => { expect(smooshpack.Manager).toHaveBeenCalled(); }); }); it('calls updatePreview', () => { - wrapper.setData({ - manager: { - listener: jest.fn(), - updatePreview: jest.fn(), - }, - }); + createInitializedComponent(); + wrapper.vm.update(); - jest.advanceTimersByTime(250); + expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts); + }); + }); + + describe('on ide.files.change event', () => { + beforeEach(() => { + createInitializedComponent(); + + eventHub.$emit('ide.files.change'); + }); + + it('calls updatePreview', () => { expect(wrapper.vm.manager.updatePreview).toHaveBeenCalledWith(wrapper.vm.sandboxOpts); }); }); @@ -355,4 +367,18 @@ describe('IDE clientside preview', () => { }); }); }); + + describe('when destroyed', () => { + let spy; + + beforeEach(() => { + createInitializedComponent(); + spy = wrapper.vm.manager.updatePreview; + wrapper.destroy(); + }); + + it('does not call updatePreview', () => { + expect(spy).not.toHaveBeenCalled(); + }); + }); }); diff --git a/spec/frontend/ide/components/repo_commit_section_spec.js b/spec/frontend/ide/components/repo_commit_section_spec.js index 096079308cd..e91debee4ca 100644 --- a/spec/frontend/ide/components/repo_commit_section_spec.js +++ b/spec/frontend/ide/components/repo_commit_section_spec.js @@ -1,7 +1,7 @@ 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 { keepAlive } from '../../helpers/keep_alive_component_helper'; import RepoCommitSection from '~/ide/components/repo_commit_section.vue'; import EmptyState from '~/ide/components/commit_sidebar/empty_state.vue'; import { stageKeys } from '~/ide/constants'; @@ -32,7 +32,7 @@ describe('RepoCommitSection', () => { }, }; - const files = [file('file1'), file('file2')].map(f => + const files = [file('file1'), file('file2')].map((f) => Object.assign(f, { type: 'blob', content: 'orginal content', @@ -42,7 +42,7 @@ describe('RepoCommitSection', () => { store.state.currentBranch = 'master'; store.state.changedFiles = []; store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }]; - store.state.stagedFiles.forEach(f => + store.state.stagedFiles.forEach((f) => Object.assign(f, { changed: true, staged: true, @@ -50,7 +50,7 @@ describe('RepoCommitSection', () => { }), ); - files.forEach(f => { + files.forEach((f) => { store.state.entries[f.path] = f; }); } @@ -77,18 +77,8 @@ describe('RepoCommitSection', () => { }); it('renders no changes text', () => { - expect( - wrapper - .find(EmptyState) - .text() - .trim(), - ).toContain('No changes'); - expect( - wrapper - .find(EmptyState) - .find('img') - .attributes('src'), - ).toBe(TEST_NO_CHANGES_SVG); + expect(wrapper.find(EmptyState).text().trim()).toContain('No changes'); + expect(wrapper.find(EmptyState).find('img').attributes('src')).toBe(TEST_NO_CHANGES_SVG); }); }); @@ -115,9 +105,9 @@ describe('RepoCommitSection', () => { const allFiles = store.state.changedFiles.concat(store.state.stagedFiles); const changedFileNames = wrapper .findAll('.multi-file-commit-list > li') - .wrappers.map(x => x.text().trim()); + .wrappers.map((x) => x.text().trim()); - expect(changedFileNames).toEqual(allFiles.map(x => x.path)); + expect(changedFileNames).toEqual(allFiles.map((x) => x.path)); }); it('does not show empty state', () => { @@ -151,7 +141,7 @@ describe('RepoCommitSection', () => { beforeEach(() => { setupDefaultState(); - store.state.changedFiles = store.state.stagedFiles.map(x => + store.state.changedFiles = store.state.stagedFiles.map((x) => Object.assign(x, { staged: false }), ); store.state.stagedFiles = []; diff --git a/spec/frontend/ide/components/repo_editor_spec.js b/spec/frontend/ide/components/repo_editor_spec.js index 71a4f08cfb4..89a7f423e34 100644 --- a/spec/frontend/ide/components/repo_editor_spec.js +++ b/spec/frontend/ide/components/repo_editor_spec.js @@ -5,6 +5,7 @@ import '~/behaviors/markdown/render_gfm'; import { Range } from 'monaco-editor'; 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'; @@ -16,7 +17,6 @@ import { FILE_VIEW_MODE_PREVIEW, viewerTypes, } from '~/ide/constants'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; import { file } from '../helpers'; import { exampleConfigs, exampleFiles } from '../lib/editorconfig/mock_data'; @@ -25,7 +25,7 @@ describe('RepoEditor', () => { let store; const waitForEditorSetup = () => - new Promise(resolve => { + new Promise((resolve) => { vm.$once('editorSetup', resolve); }); @@ -43,7 +43,7 @@ describe('RepoEditor', () => { vm.$mount(); }; - const createOpenFile = path => { + const createOpenFile = (path) => { const origFile = store.state.openFiles[0]; const newFile = { ...origFile, path, key: path, name: 'myfile.txt', content: 'hello world' }; @@ -91,7 +91,7 @@ describe('RepoEditor', () => { }); const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder'); - const changeViewMode = viewMode => + const changeViewMode = (viewMode) => store.dispatch('editor/updateFileEditor', { path: vm.file.path, data: { viewMode } }); describe('default', () => { @@ -119,7 +119,7 @@ describe('RepoEditor', () => { expect(findEditor()).not.toHaveCss({ display: 'none' }); }); - it('renders only an edit tab', done => { + it('renders only an edit tab', (done) => { Vue.nextTick(() => { const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); @@ -157,7 +157,7 @@ describe('RepoEditor', () => { mock.restore(); }); - it('renders an Edit and a Preview Tab', done => { + it('renders an Edit and a Preview Tab', (done) => { Vue.nextTick(() => { const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); @@ -169,7 +169,7 @@ describe('RepoEditor', () => { }); }); - it('renders markdown for tempFile', done => { + it('renders markdown for tempFile', (done) => { vm.file.tempFile = true; vm.$nextTick() @@ -202,9 +202,11 @@ describe('RepoEditor', () => { }); describe('when open file is binary and not raw', () => { - beforeEach(done => { + beforeEach((done) => { vm.file.name = 'file.dat'; vm.file.content = '🐱'; // non-ascii binary content + jest.spyOn(vm.editor, 'createInstance').mockImplementation(); + jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation(); vm.$nextTick(done); }); @@ -212,10 +214,20 @@ describe('RepoEditor', () => { it('does not render the IDE', () => { expect(vm.shouldHideEditor).toBeTruthy(); }); + + it('does not call createInstance', async () => { + // Mirror the act's in the `createEditorInstance` + vm.createEditorInstance(); + + await vm.$nextTick(); + + expect(vm.editor.createInstance).not.toHaveBeenCalled(); + expect(vm.editor.createDiffInstance).not.toHaveBeenCalled(); + }); }); describe('createEditorInstance', () => { - it('calls createInstance when viewer is editor', done => { + it('calls createInstance when viewer is editor', (done) => { jest.spyOn(vm.editor, 'createInstance').mockImplementation(); vm.createEditorInstance(); @@ -227,7 +239,7 @@ describe('RepoEditor', () => { }); }); - it('calls createDiffInstance when viewer is diff', done => { + it('calls createDiffInstance when viewer is diff', (done) => { vm.$store.state.viewer = 'diff'; jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation(); @@ -241,7 +253,7 @@ describe('RepoEditor', () => { }); }); - it('calls createDiffInstance when viewer is a merge request diff', done => { + it('calls createDiffInstance when viewer is a merge request diff', (done) => { vm.$store.state.viewer = 'mrdiff'; jest.spyOn(vm.editor, 'createDiffInstance').mockImplementation(); @@ -342,7 +354,7 @@ describe('RepoEditor', () => { jest.spyOn(vm.editor, 'updateDiffView').mockImplementation(); }); - it('calls updateDimensions when panelResizing is false', done => { + it('calls updateDimensions when panelResizing is false', (done) => { vm.$store.state.panelResizing = true; vm.$nextTick() @@ -358,7 +370,7 @@ describe('RepoEditor', () => { .catch(done.fail); }); - it('does not call updateDimensions when panelResizing is true', done => { + it('does not call updateDimensions when panelResizing is true', (done) => { vm.$store.state.panelResizing = true; vm.$nextTick(() => { @@ -369,7 +381,7 @@ describe('RepoEditor', () => { }); }); - it('calls updateDimensions when rightPane is opened', done => { + it('calls updateDimensions when rightPane is opened', (done) => { vm.$store.state.rightPane.isOpen = true; vm.$nextTick(() => { @@ -386,7 +398,7 @@ describe('RepoEditor', () => { expect(vm.$el.querySelector('.nav-links')).not.toBe(null); }); - it('hides tabs in review mode', done => { + it('hides tabs in review mode', (done) => { vm.$store.state.currentActivityView = leftSidebarViews.review.name; vm.$nextTick(() => { @@ -396,7 +408,7 @@ describe('RepoEditor', () => { }); }); - it('hides tabs in commit mode', done => { + it('hides tabs in commit mode', (done) => { vm.$store.state.currentActivityView = leftSidebarViews.commit.name; vm.$nextTick(() => { @@ -408,7 +420,7 @@ describe('RepoEditor', () => { }); describe('when files view mode is preview', () => { - beforeEach(done => { + beforeEach((done) => { jest.spyOn(vm.editor, 'updateDimensions').mockImplementation(); changeViewMode(FILE_VIEW_MODE_PREVIEW); vm.file.name = 'myfile.md'; @@ -440,7 +452,7 @@ describe('RepoEditor', () => { jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true); }); - it('does not fetch file information for temp entries', done => { + it('does not fetch file information for temp entries', (done) => { vm.file.tempFile = true; vm.initEditor(); @@ -452,7 +464,7 @@ describe('RepoEditor', () => { .catch(done.fail); }); - it('is being initialised for files without content even if shouldHideEditor is `true`', done => { + it('is being initialised for files without content even if shouldHideEditor is `true`', (done) => { vm.file.content = ''; vm.file.raw = ''; @@ -467,7 +479,7 @@ describe('RepoEditor', () => { .catch(done.fail); }); - it('does not initialize editor for files already with content', done => { + it('does not initialize editor for files already with content', (done) => { vm.file.content = 'foo'; vm.initEditor(); @@ -487,7 +499,7 @@ describe('RepoEditor', () => { jest.spyOn(vm, 'initEditor').mockImplementation(); }); - it('calls removePendingTab when old file is pending', done => { + it('calls removePendingTab when old file is pending', (done) => { jest.spyOn(vm, 'shouldHideEditor', 'get').mockReturnValue(true); jest.spyOn(vm, 'removePendingTab').mockImplementation(); @@ -507,7 +519,7 @@ describe('RepoEditor', () => { .catch(done.fail); }); - it('does not call initEditor if the file did not change', done => { + it('does not call initEditor if the file did not change', (done) => { Vue.set(vm, 'file', vm.file); vm.$nextTick() @@ -518,7 +530,7 @@ describe('RepoEditor', () => { .catch(done.fail); }); - it('calls initEditor when file key is changed', done => { + it('calls initEditor when file key is changed', (done) => { expect(vm.initEditor).not.toHaveBeenCalled(); Vue.set(vm, 'file', { @@ -540,7 +552,7 @@ describe('RepoEditor', () => { vm.getRawFileData.mockRestore(); }); - const createRemoteFile = name => ({ + const createRemoteFile = (name) => ({ ...file(name), tmpFile: false, }); @@ -593,7 +605,7 @@ describe('RepoEditor', () => { }); describe('onPaste', () => { - const setFileName = name => { + const setFileName = (name) => { Vue.set(vm, 'file', { ...vm.file, content: 'hello world\n', @@ -615,8 +627,8 @@ describe('RepoEditor', () => { ); }; - const watchState = watched => - new Promise(resolve => { + const watchState = (watched) => + new Promise((resolve) => { const unwatch = vm.$store.watch(watched, () => { unwatch(); resolve(); @@ -626,7 +638,7 @@ describe('RepoEditor', () => { // Pasting an image does a lot of things like using the FileReader API, // so, waitForPromises isn't very reliable (and causes a flaky spec) // Read more about state.watch: https://vuex.vuejs.org/api/#watch - const waitForFileContentChange = () => watchState(s => s.entries['foo/bar.md'].content); + const waitForFileContentChange = () => watchState((s) => s.entries['foo/bar.md'].content); beforeEach(() => { setFileName('bar.md'); diff --git a/spec/frontend/ide/components/repo_tabs_spec.js b/spec/frontend/ide/components/repo_tabs_spec.js index b251f207853..45a17c37667 100644 --- a/spec/frontend/ide/components/repo_tabs_spec.js +++ b/spec/frontend/ide/components/repo_tabs_spec.js @@ -30,7 +30,7 @@ describe('RepoTabs', () => { wrapper.destroy(); }); - it('renders a list of tabs', done => { + it('renders a list of tabs', (done) => { store.state.openFiles[0].active = true; wrapper.vm.$nextTick(() => { diff --git a/spec/frontend/ide/components/resizable_panel_spec.js b/spec/frontend/ide/components/resizable_panel_spec.js index 7368de0cee7..b1a1212371e 100644 --- a/spec/frontend/ide/components/resizable_panel_spec.js +++ b/spec/frontend/ide/components/resizable_panel_spec.js @@ -38,7 +38,7 @@ describe('~/ide/components/resizable_panel', () => { }; const findResizer = () => wrapper.find(PanelResizer); const findInlineStyle = () => wrapper.element.style.cssText; - const createInlineStyle = width => `width: ${width}px;`; + const createInlineStyle = (width) => `width: ${width}px;`; describe.each` props | showResizer | resizerSide | expectedStyle diff --git a/spec/frontend/ide/components/shared/tokened_input_spec.js b/spec/frontend/ide/components/shared/tokened_input_spec.js index e687216bd06..837bfe6b574 100644 --- a/spec/frontend/ide/components/shared/tokened_input_spec.js +++ b/spec/frontend/ide/components/shared/tokened_input_spec.js @@ -44,9 +44,9 @@ describe('IDE shared/TokenedInput', () => { }); it('renders tokens', () => { - const renderedTokens = getTokenElements(vm).map(x => x.textContent.trim()); + const renderedTokens = getTokenElements(vm).map((x) => x.textContent.trim()); - expect(renderedTokens).toEqual(TEST_TOKENS.map(x => x.label)); + expect(renderedTokens).toEqual(TEST_TOKENS.map((x) => x.label)); }); it('renders input', () => { @@ -54,7 +54,7 @@ describe('IDE shared/TokenedInput', () => { expect(vm.$refs.input).toHaveValue(TEST_VALUE); }); - it('renders placeholder, when tokens are empty', done => { + it('renders placeholder, when tokens are empty', (done) => { vm.tokens = []; vm.$nextTick() diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js index 3ca37166ac4..5653c8bf14d 100644 --- a/spec/frontend/ide/components/terminal/session_spec.js +++ b/spec/frontend/ide/components/terminal/session_spec.js @@ -67,7 +67,7 @@ describe('IDE TerminalSession', () => { }); }); - [STARTING, PENDING, RUNNING].forEach(status => { + [STARTING, PENDING, RUNNING].forEach((status) => { it(`show stop button when status is ${status}`, () => { state.session = { status }; factory(); @@ -82,7 +82,7 @@ describe('IDE TerminalSession', () => { }); }); - [STOPPING, STOPPED].forEach(status => { + [STOPPING, STOPPED].forEach((status) => { it(`show stop button when status is ${status}`, () => { state.session = { status }; factory(); diff --git a/spec/frontend/ide/components/terminal/terminal_controls_spec.js b/spec/frontend/ide/components/terminal/terminal_controls_spec.js index c22063e1d72..99182710218 100644 --- a/spec/frontend/ide/components/terminal/terminal_controls_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_controls_spec.js @@ -17,7 +17,7 @@ describe('IDE TerminalControls', () => { it('shows an up and down scroll button', () => { factory(); - expect(buttons.wrappers.map(x => x.props())).toEqual([ + expect(buttons.wrappers.map((x) => x.props())).toEqual([ expect.objectContaining({ direction: 'up', disabled: true }), expect.objectContaining({ direction: 'down', disabled: true }), ]); diff --git a/spec/frontend/ide/components/terminal/terminal_spec.js b/spec/frontend/ide/components/terminal/terminal_spec.js index 3095288bb28..9cfe167d2f6 100644 --- a/spec/frontend/ide/components/terminal/terminal_spec.js +++ b/spec/frontend/ide/components/terminal/terminal_spec.js @@ -1,4 +1,5 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; import Vuex from 'vuex'; import { GlLoadingIcon } from '@gitlab/ui'; import Terminal from '~/ide/components/terminal/terminal.vue'; @@ -14,24 +15,25 @@ import GLTerminal from '~/terminal/terminal'; const TEST_TERMINAL_PATH = 'terminal/path'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); jest.mock('~/terminal/terminal', () => - jest.fn().mockImplementation(() => ({ - dispose: jest.fn(), - disable: jest.fn(), - addScrollListener: jest.fn(), - scrollToTop: jest.fn(), - scrollToBottom: jest.fn(), - })), + jest.fn().mockImplementation(function FakeTerminal() { + Object.assign(this, { + dispose: jest.fn(), + disable: jest.fn(), + addScrollListener: jest.fn(), + scrollToTop: jest.fn(), + scrollToBottom: jest.fn(), + }); + }), ); describe('IDE Terminal', () => { let wrapper; let state; - const factory = propsData => { + const factory = (propsData) => { const store = new Vuex.Store({ state, mutations: { @@ -41,13 +43,12 @@ describe('IDE Terminal', () => { }, }); - wrapper = shallowMount(localVue.extend(Terminal), { + wrapper = shallowMount(Terminal, { propsData: { status: RUNNING, terminalPath: TEST_TERMINAL_PATH, ...propsData, }, - localVue, store, }); }; @@ -63,7 +64,7 @@ describe('IDE Terminal', () => { }); describe('loading text', () => { - [STARTING, PENDING].forEach(status => { + [STARTING, PENDING].forEach((status) => { it(`shows when starting (${status})`, () => { factory({ status }); @@ -79,7 +80,7 @@ describe('IDE Terminal', () => { expect(wrapper.find('.top-bar').text()).toBe('Stopping...'); }); - [RUNNING, STOPPED].forEach(status => { + [RUNNING, STOPPED].forEach((status) => { it('hides when not loading', () => { factory({ status }); @@ -102,7 +103,7 @@ describe('IDE Terminal', () => { factory(); wrapper.vm.createTerminal(); - return localVue.nextTick(); + return nextTick(); }); it('is visible if terminal is created', () => { @@ -129,7 +130,7 @@ describe('IDE Terminal', () => { wrapper.setData({ canScrollUp: true, canScrollDown: true }); - return localVue.nextTick().then(() => { + return nextTick().then(() => { expect(wrapper.find(TerminalControls).props()).toEqual({ canScrollUp: true, canScrollDown: true, @@ -139,30 +140,24 @@ describe('IDE Terminal', () => { }); describe('refresh', () => { - let createTerminal; - let stopTerminal; - - beforeEach(() => { - createTerminal = jest.fn().mockName('createTerminal'); - stopTerminal = jest.fn().mockName('stopTerminal'); - }); - it('creates the terminal if running', () => { factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH }); - wrapper.setMethods({ createTerminal }); wrapper.vm.refresh(); - expect(createTerminal).toHaveBeenCalled(); + expect(GLTerminal.mock.instances).toHaveLength(1); }); - it('stops the terminal if stopping', () => { - factory({ status: STOPPING }); + it('stops the terminal if stopping', async () => { + factory({ status: RUNNING, terminalPath: TEST_TERMINAL_PATH }); - wrapper.setMethods({ stopTerminal }); wrapper.vm.refresh(); - expect(stopTerminal).toHaveBeenCalled(); + const terminal = GLTerminal.mock.instances[0]; + wrapper.setProps({ status: STOPPING }); + await nextTick(); + + expect(terminal.disable).toHaveBeenCalled(); }); }); 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 9adf5848f9d..d15583f81e4 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 @@ -26,7 +26,7 @@ describe('ide/components/terminal_sync/terminal_sync_status', () => { namespaced: true, state: moduleState, mutations: { - [START_LOADING]: state => { + [START_LOADING]: (state) => { state.isLoading = true; }, }, |