diff options
Diffstat (limited to 'spec/javascripts/ide/components')
3 files changed, 0 insertions, 866 deletions
diff --git a/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js b/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js deleted file mode 100644 index 53508f52b2f..00000000000 --- a/spec/javascripts/ide/components/commit_sidebar/message_field_spec.js +++ /dev/null @@ -1,170 +0,0 @@ -import Vue from 'vue'; -import createComponent from 'spec/helpers/vue_mount_component_helper'; -import CommitMessageField from '~/ide/components/commit_sidebar/message_field.vue'; - -describe('IDE commit message field', () => { - const Component = Vue.extend(CommitMessageField); - let vm; - - beforeEach(() => { - setFixtures('<div id="app"></div>'); - - vm = createComponent( - Component, - { - text: '', - placeholder: 'testing', - }, - '#app', - ); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('adds is-focused class on focus', done => { - vm.$el.querySelector('textarea').focus(); - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - done(); - }); - }); - - it('removed is-focused class on blur', done => { - vm.$el.querySelector('textarea').focus(); - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.is-focused')).not.toBeNull(); - - vm.$el.querySelector('textarea').blur(); - - return vm.$nextTick(); - }) - .then(() => { - expect(vm.$el.querySelector('.is-focused')).toBeNull(); - - done(); - }) - .then(done) - .catch(done.fail); - }); - - it('emits input event on input', () => { - spyOn(vm, '$emit'); - - const textarea = vm.$el.querySelector('textarea'); - textarea.value = 'testing'; - - textarea.dispatchEvent(new Event('input')); - - expect(vm.$emit).toHaveBeenCalledWith('input', 'testing'); - }); - - describe('highlights', () => { - describe('subject line', () => { - it('does not highlight less than 50 characters', done => { - vm.text = 'text less than 50 chars'; - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars', - ); - - expect(vm.$el.querySelector('mark').style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); - }); - - 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'; - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelector('.highlights span').textContent).toContain( - 'text less than 50 chars that should not highlighte', - ); - - expect(vm.$el.querySelector('mark').style.display).not.toBe('none'); - expect(vm.$el.querySelector('mark').textContent).toBe( - 'd. text more than 50 should be highlighted', - ); - }) - .then(done) - .catch(done.fail); - }); - }); - - describe('body text', () => { - it('does not highlight body text less tan 72 characters', done => { - vm.text = 'subject line\nbody content'; - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).toBe('none'); - }) - .then(done) - .catch(done.fail); - }); - - 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'; - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark')[1].style.display).not.toBe('none'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); - }); - - 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'; - - vm.$nextTick() - .then(() => { - expect(vm.$el.querySelectorAll('.highlights span').length).toBe(2); - expect(vm.$el.querySelectorAll('mark').length).toBe(2); - - expect(vm.$el.querySelectorAll('mark')[0].textContent).toContain('d'); - expect(vm.$el.querySelectorAll('mark')[1].textContent).toBe(' in length'); - }) - .then(done) - .catch(done.fail); - }); - }); - }); - - describe('scrolling textarea', () => { - it('updates transform of highlights', done => { - vm.text = 'subject line\n\n\n\n\n\n\n\n\n\n\nbody content'; - - vm.$nextTick() - .then(() => { - vm.$el.querySelector('textarea').scrollTo(0, 50); - - vm.handleScroll(); - }) - .then(vm.$nextTick) - .then(() => { - expect(vm.scrollTop).toBe(50); - expect(vm.$el.querySelector('.highlights').style.transform).toBe( - 'translate3d(0px, -50px, 0px)', - ); - }) - .then(done) - .catch(done.fail); - }); - }); -}); diff --git a/spec/javascripts/ide/components/jobs/detail_spec.js b/spec/javascripts/ide/components/jobs/detail_spec.js deleted file mode 100644 index a4e6b81acba..00000000000 --- a/spec/javascripts/ide/components/jobs/detail_spec.js +++ /dev/null @@ -1,184 +0,0 @@ -import Vue from 'vue'; -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', () => { - const Component = Vue.extend(JobDetail); - let vm; - - beforeEach(() => { - const store = createStore(); - - store.state.pipelines.detailJob = { - ...jobs[0], - isLoading: true, - output: 'testing', - rawPath: `${gl.TEST_HOST}/raw`, - }; - - vm = createComponentWithStore(Component, store); - - spyOn(vm, 'fetchJobTrace').and.returnValue(Promise.resolve()); - - vm = vm.$mount(); - - spyOn(vm.$refs.buildTrace, 'scrollTo'); - }); - - afterEach(() => { - vm.$destroy(); - }); - - it('calls fetchJobTrace on mount', () => { - expect(vm.fetchJobTrace).toHaveBeenCalled(); - }); - - it('scrolls to bottom on mount', done => { - setTimeout(() => { - expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalled(); - - done(); - }); - }); - - it('renders job output', () => { - expect(vm.$el.querySelector('.bash').textContent).toContain('testing'); - }); - - it('renders empty message output', done => { - vm.$store.state.pipelines.detailJob.output = ''; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.bash').textContent).toContain('No messages were logged'); - - done(); - }); - }); - - it('renders loading icon', () => { - expect(vm.$el.querySelector('.build-loader-animation')).not.toBe(null); - expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe(''); - }); - - it('hides output when loading', () => { - expect(vm.$el.querySelector('.bash')).not.toBe(null); - expect(vm.$el.querySelector('.bash').style.display).toBe('none'); - }); - - it('hide loading icon when isLoading is false', done => { - vm.$store.state.pipelines.detailJob.isLoading = false; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.build-loader-animation').style.display).toBe('none'); - - done(); - }); - }); - - it('resets detailJob when clicking header button', () => { - spyOn(vm, 'setDetailJob'); - - vm.$el.querySelector('.btn').click(); - - expect(vm.setDetailJob).toHaveBeenCalledWith(null); - }); - - it('renders raw path link', () => { - expect(vm.$el.querySelector('.controllers-buttons').getAttribute('href')).toBe( - `${gl.TEST_HOST}/raw`, - ); - }); - - describe('scroll buttons', () => { - it('triggers scrollDown when clicking down button', done => { - spyOn(vm, 'scrollDown'); - - vm.$el.querySelectorAll('.btn-scroll')[1].click(); - - vm.$nextTick(() => { - expect(vm.scrollDown).toHaveBeenCalled(); - - done(); - }); - }); - - it('triggers scrollUp when clicking up button', done => { - spyOn(vm, 'scrollUp'); - - vm.scrollPos = 1; - - vm.$nextTick() - .then(() => vm.$el.querySelector('.btn-scroll').click()) - .then(() => vm.$nextTick()) - .then(() => { - expect(vm.scrollUp).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - }); - - describe('scrollDown', () => { - it('scrolls build trace to bottom', () => { - spyOnProperty(vm.$refs.buildTrace, 'scrollHeight').and.returnValue(1000); - - vm.scrollDown(); - - expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 1000); - }); - }); - - describe('scrollUp', () => { - it('scrolls build trace to top', () => { - vm.scrollUp(); - - expect(vm.$refs.buildTrace.scrollTo).toHaveBeenCalledWith(0, 0); - }); - }); - - describe('scrollBuildLog', () => { - beforeEach(() => { - spyOnProperty(vm.$refs.buildTrace, 'offsetHeight').and.returnValue(100); - spyOnProperty(vm.$refs.buildTrace, 'scrollHeight').and.returnValue(200); - }); - - it('sets scrollPos to bottom when at the bottom', done => { - spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(100); - - vm.scrollBuildLog(); - - setTimeout(() => { - expect(vm.scrollPos).toBe(1); - - done(); - }); - }); - - it('sets scrollPos to top when at the top', done => { - spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(0); - vm.scrollPos = 1; - - vm.scrollBuildLog(); - - setTimeout(() => { - expect(vm.scrollPos).toBe(0); - - done(); - }); - }); - - it('resets scrollPos when not at top or bottom', done => { - spyOnProperty(vm.$refs.buildTrace, 'scrollTop').and.returnValue(10); - - vm.scrollBuildLog(); - - setTimeout(() => { - expect(vm.scrollPos).toBe(''); - - done(); - }); - }); - }); -}); diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js deleted file mode 100644 index 8db29011da7..00000000000 --- a/spec/javascripts/ide/components/repo_editor_spec.js +++ /dev/null @@ -1,512 +0,0 @@ -import Vue from 'vue'; -import MockAdapter from 'axios-mock-adapter'; -import '~/behaviors/markdown/render_gfm'; -import axios from '~/lib/utils/axios_utils'; -import store 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 } from '~/ide/constants'; -import { createComponentWithStore } from '../../helpers/vue_mount_component_helper'; -import setTimeoutPromise from '../../helpers/set_timeout_promise_helper'; -import { file, resetStore } from '../helpers'; - -describe('RepoEditor', () => { - let vm; - - beforeEach(done => { - const f = { - ...file(), - viewMode: FILE_VIEW_MODE_EDITOR, - }; - const RepoEditor = Vue.extend(repoEditor); - - vm = createComponentWithStore(RepoEditor, store, { - file: f, - }); - - f.active = true; - f.tempFile = true; - - vm.$store.state.openFiles.push(f); - vm.$store.state.projects = { - 'gitlab-org/gitlab': { - branches: { - master: { - name: 'master', - commit: { - id: 'abcdefgh', - }, - }, - }, - }, - }; - vm.$store.state.currentProjectId = 'gitlab-org/gitlab'; - vm.$store.state.currentBranchId = 'master'; - - Vue.set(vm.$store.state.entries, f.path, f); - - spyOn(vm, 'getFileData').and.returnValue(Promise.resolve()); - spyOn(vm, 'getRawFileData').and.returnValue(Promise.resolve()); - - vm.$mount(); - - Vue.nextTick(() => setTimeout(done)); - }); - - afterEach(() => { - vm.$destroy(); - - resetStore(vm.$store); - - Editor.editorInstance.dispose(); - }); - - const findEditor = () => vm.$el.querySelector('.multi-file-editor-holder'); - - it('sets renderWhitespace to `all`', () => { - vm.$store.state.renderWhitespaceInCode = true; - - expect(vm.editorOptions.renderWhitespace).toEqual('all'); - }); - - it('sets renderWhitespace to `none`', () => { - vm.$store.state.renderWhitespaceInCode = false; - - expect(vm.editorOptions.renderWhitespace).toEqual('none'); - }); - - it('renders an ide container', () => { - expect(vm.shouldHideEditor).toBeFalsy(); - expect(vm.showEditor).toBe(true); - expect(findEditor()).not.toHaveCss({ display: 'none' }); - }); - - it('renders only an edit tab', done => { - Vue.nextTick(() => { - const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); - - expect(tabs.length).toBe(1); - expect(tabs[0].textContent.trim()).toBe('Edit'); - - done(); - }); - }); - - describe('when file is markdown', () => { - beforeEach(done => { - vm.file.previewMode = { - id: 'markdown', - previewTitle: 'Preview Markdown', - }; - - vm.$nextTick(done); - }); - - it('renders an Edit and a Preview Tab', done => { - Vue.nextTick(() => { - const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); - - expect(tabs.length).toBe(2); - expect(tabs[0].textContent.trim()).toBe('Edit'); - expect(tabs[1].textContent.trim()).toBe('Preview Markdown'); - - done(); - }); - }); - }); - - describe('when file is markdown and viewer mode is review', () => { - let mock; - - beforeEach(done => { - mock = new MockAdapter(axios); - - vm.file.projectId = 'namespace/project'; - vm.file.previewMode = { - id: 'markdown', - previewTitle: 'Preview Markdown', - }; - vm.file.content = 'testing 123'; - vm.$store.state.viewer = 'diff'; - - mock.onPost(/(.*)\/preview_markdown/).reply(200, { - body: '<p>testing 123</p>', - }); - - vm.$nextTick(done); - }); - - afterEach(() => { - mock.restore(); - }); - - it('renders an Edit and a Preview Tab', done => { - Vue.nextTick(() => { - const tabs = vm.$el.querySelectorAll('.ide-mode-tabs .nav-links li'); - - expect(tabs.length).toBe(2); - expect(tabs[0].textContent.trim()).toBe('Review'); - expect(tabs[1].textContent.trim()).toBe('Preview Markdown'); - - done(); - }); - }); - - it('renders markdown for tempFile', done => { - vm.file.tempFile = true; - vm.file.path = `${vm.file.path}.md`; - vm.$store.state.entries[vm.file.path] = vm.file; - - vm.$nextTick() - .then(() => { - vm.$el.querySelectorAll('.ide-mode-tabs .nav-links a')[1].click(); - }) - .then(setTimeoutPromise) - .then(() => { - expect(vm.$el.querySelector('.preview-container').innerHTML).toContain( - '<p>testing 123</p>', - ); - }) - .then(done) - .catch(done.fail); - }); - }); - - describe('when open file is binary and not raw', () => { - beforeEach(done => { - vm.file.binary = true; - - vm.$nextTick(done); - }); - - it('does not render the IDE', () => { - expect(vm.shouldHideEditor).toBeTruthy(); - }); - }); - - describe('createEditorInstance', () => { - it('calls createInstance when viewer is editor', done => { - spyOn(vm.editor, 'createInstance'); - - vm.createEditorInstance(); - - vm.$nextTick(() => { - expect(vm.editor.createInstance).toHaveBeenCalled(); - - done(); - }); - }); - - it('calls createDiffInstance when viewer is diff', done => { - vm.$store.state.viewer = 'diff'; - - spyOn(vm.editor, 'createDiffInstance'); - - vm.createEditorInstance(); - - vm.$nextTick(() => { - expect(vm.editor.createDiffInstance).toHaveBeenCalled(); - - done(); - }); - }); - - it('calls createDiffInstance when viewer is a merge request diff', done => { - vm.$store.state.viewer = 'mrdiff'; - - spyOn(vm.editor, 'createDiffInstance'); - - vm.createEditorInstance(); - - vm.$nextTick(() => { - expect(vm.editor.createDiffInstance).toHaveBeenCalled(); - - done(); - }); - }); - }); - - describe('setupEditor', () => { - it('creates new model', () => { - spyOn(vm.editor, 'createModel').and.callThrough(); - - Editor.editorInstance.modelManager.dispose(); - - vm.setupEditor(); - - expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, null); - expect(vm.model).not.toBeNull(); - }); - - it('attaches model to editor', () => { - spyOn(vm.editor, 'attachModel').and.callThrough(); - - Editor.editorInstance.modelManager.dispose(); - - vm.setupEditor(); - - expect(vm.editor.attachModel).toHaveBeenCalledWith(vm.model); - }); - - it('attaches model to merge request editor', () => { - vm.$store.state.viewer = 'mrdiff'; - vm.file.mrChange = true; - spyOn(vm.editor, 'attachMergeRequestModel'); - - Editor.editorInstance.modelManager.dispose(); - - vm.setupEditor(); - - expect(vm.editor.attachMergeRequestModel).toHaveBeenCalledWith(vm.model); - }); - - it('does not attach model to merge request editor when not a MR change', () => { - vm.$store.state.viewer = 'mrdiff'; - vm.file.mrChange = false; - spyOn(vm.editor, 'attachMergeRequestModel'); - - Editor.editorInstance.modelManager.dispose(); - - vm.setupEditor(); - - expect(vm.editor.attachMergeRequestModel).not.toHaveBeenCalledWith(vm.model); - }); - - it('adds callback methods', () => { - spyOn(vm.editor, 'onPositionChange').and.callThrough(); - - Editor.editorInstance.modelManager.dispose(); - - vm.setupEditor(); - - expect(vm.editor.onPositionChange).toHaveBeenCalled(); - expect(vm.model.events.size).toBe(2); - }); - - it('updates state when model content changed', done => { - vm.model.setValue('testing 123\n'); - - setTimeout(() => { - expect(vm.file.content).toBe('testing 123\n'); - - done(); - }); - }); - - it('sets head model as staged file', () => { - spyOn(vm.editor, 'createModel').and.callThrough(); - - Editor.editorInstance.modelManager.dispose(); - - vm.$store.state.stagedFiles.push({ ...vm.file, key: 'staged' }); - vm.file.staged = true; - vm.file.key = `unstaged-${vm.file.key}`; - - vm.setupEditor(); - - expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, vm.$store.state.stagedFiles[0]); - }); - }); - - describe('editor updateDimensions', () => { - beforeEach(() => { - spyOn(vm.editor, 'updateDimensions').and.callThrough(); - spyOn(vm.editor, 'updateDiffView'); - }); - - it('calls updateDimensions when panelResizing is false', done => { - vm.$store.state.panelResizing = true; - - vm.$nextTick() - .then(() => { - vm.$store.state.panelResizing = false; - }) - .then(vm.$nextTick) - .then(() => { - expect(vm.editor.updateDimensions).toHaveBeenCalled(); - expect(vm.editor.updateDiffView).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('does not call updateDimensions when panelResizing is true', done => { - vm.$store.state.panelResizing = true; - - vm.$nextTick(() => { - expect(vm.editor.updateDimensions).not.toHaveBeenCalled(); - expect(vm.editor.updateDiffView).not.toHaveBeenCalled(); - - done(); - }); - }); - - it('calls updateDimensions when rightPane is opened', done => { - vm.$store.state.rightPane.isOpen = true; - - vm.$nextTick(() => { - expect(vm.editor.updateDimensions).toHaveBeenCalled(); - expect(vm.editor.updateDiffView).toHaveBeenCalled(); - - done(); - }); - }); - }); - - describe('show tabs', () => { - it('shows tabs in edit mode', () => { - expect(vm.$el.querySelector('.nav-links')).not.toBe(null); - }); - - it('hides tabs in review mode', done => { - vm.$store.state.currentActivityView = leftSidebarViews.review.name; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.nav-links')).toBe(null); - - done(); - }); - }); - - it('hides tabs in commit mode', done => { - vm.$store.state.currentActivityView = leftSidebarViews.commit.name; - - vm.$nextTick(() => { - expect(vm.$el.querySelector('.nav-links')).toBe(null); - - done(); - }); - }); - }); - - describe('when files view mode is preview', () => { - beforeEach(done => { - spyOn(vm.editor, 'updateDimensions'); - vm.file.viewMode = FILE_VIEW_MODE_PREVIEW; - vm.$nextTick(done); - }); - - it('should hide editor', () => { - expect(vm.showEditor).toBe(false); - expect(findEditor()).toHaveCss({ display: 'none' }); - }); - - describe('when file view mode changes to editor', () => { - beforeEach(done => { - vm.file.viewMode = FILE_VIEW_MODE_EDITOR; - - // one tick to trigger watch - vm.$nextTick() - // another tick needed until we can update dimensions - .then(() => vm.$nextTick()) - .then(done) - .catch(done.fail); - }); - - it('should update dimensions', () => { - expect(vm.editor.updateDimensions).toHaveBeenCalled(); - }); - }); - }); - - describe('initEditor', () => { - beforeEach(() => { - vm.file.tempFile = false; - spyOn(vm.editor, 'createInstance'); - spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true); - }); - - it('does not fetch file information for temp entries', done => { - vm.file.tempFile = true; - - vm.initEditor(); - vm.$nextTick() - .then(() => { - expect(vm.getFileData).not.toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('is being initialised for files without content even if shouldHideEditor is `true`', done => { - vm.file.content = ''; - vm.file.raw = ''; - - vm.initEditor(); - vm.$nextTick() - .then(() => { - expect(vm.getFileData).toHaveBeenCalled(); - expect(vm.getRawFileData).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('does not initialize editor for files already with content', done => { - vm.file.content = 'foo'; - - vm.initEditor(); - vm.$nextTick() - .then(() => { - expect(vm.getFileData).not.toHaveBeenCalled(); - expect(vm.getRawFileData).not.toHaveBeenCalled(); - expect(vm.editor.createInstance).not.toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - }); - - describe('updates on file changes', () => { - beforeEach(() => { - spyOn(vm, 'initEditor'); - }); - - it('calls removePendingTab when old file is pending', done => { - spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true); - spyOn(vm, 'removePendingTab'); - - vm.file.pending = true; - - vm.$nextTick() - .then(() => { - vm.file = file('testing'); - vm.file.content = 'foo'; // need to prevent full cycle of initEditor - - return vm.$nextTick(); - }) - .then(() => { - expect(vm.removePendingTab).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('does not call initEditor if the file did not change', done => { - Vue.set(vm, 'file', vm.file); - - vm.$nextTick() - .then(() => { - expect(vm.initEditor).not.toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - - it('calls initEditor when file key is changed', done => { - expect(vm.initEditor).not.toHaveBeenCalled(); - - Vue.set(vm, 'file', { - ...vm.file, - key: 'new', - }); - - vm.$nextTick() - .then(() => { - expect(vm.initEditor).toHaveBeenCalled(); - }) - .then(done) - .catch(done.fail); - }); - }); -}); |