diff options
Diffstat (limited to 'spec/javascripts')
57 files changed, 896 insertions, 325 deletions
diff --git a/spec/javascripts/.eslintrc b/spec/javascripts/.eslintrc index 3d922021978..9eb0e732572 100644 --- a/spec/javascripts/.eslintrc +++ b/spec/javascripts/.eslintrc @@ -18,6 +18,7 @@ "sandbox": false, "setFixtures": false, "setStyleFixtures": false, + "spyOnDependency": false, "spyOnEvent": false, "ClassSpecHelper": false }, diff --git a/spec/javascripts/activities_spec.js b/spec/javascripts/activities_spec.js index 909a1bf76bc..5dbdcd24296 100644 --- a/spec/javascripts/activities_spec.js +++ b/spec/javascripts/activities_spec.js @@ -3,24 +3,30 @@ import $ from 'jquery'; import 'vendor/jquery.endless-scroll'; import Activities from '~/activities'; +import Pager from '~/pager'; -(() => { +describe('Activities', () => { window.gon || (window.gon = {}); const fixtureTemplate = 'static/event_filter.html.raw'; const filters = [ { id: 'all', - }, { + }, + { id: 'push', name: 'push events', - }, { + }, + { id: 'merged', name: 'merge events', - }, { + }, + { id: 'comments', - }, { + }, + { id: 'team', - }]; + }, + ]; function getEventName(index) { const filter = filters[index]; @@ -32,31 +38,34 @@ import Activities from '~/activities'; return `#${filter.id}_event_filter`; } - describe('Activities', () => { - beforeEach(() => { - loadFixtures(fixtureTemplate); - new Activities(); - }); - - for (let i = 0; i < filters.length; i += 1) { - ((i) => { - describe(`when selecting ${getEventName(i)}`, () => { - beforeEach(() => { - $(getSelector(i)).click(); - }); - - for (let x = 0; x < filters.length; x += 1) { - ((x) => { - const shouldHighlight = i === x; - const testName = shouldHighlight ? 'should highlight' : 'should not highlight'; - - it(`${testName} ${getEventName(x)}`, () => { - expect($(getSelector(x)).parent().hasClass('active')).toEqual(shouldHighlight); - }); - })(x); - } - }); - })(i); - } + beforeEach(() => { + loadFixtures(fixtureTemplate); + spyOn(Pager, 'init').and.stub(); + new Activities(); }); -})(); + + for (let i = 0; i < filters.length; i += 1) { + (i => { + describe(`when selecting ${getEventName(i)}`, () => { + beforeEach(() => { + $(getSelector(i)).click(); + }); + + for (let x = 0; x < filters.length; x += 1) { + (x => { + const shouldHighlight = i === x; + const testName = shouldHighlight ? 'should highlight' : 'should not highlight'; + + it(`${testName} ${getEventName(x)}`, () => { + expect( + $(getSelector(x)) + .parent() + .hasClass('active'), + ).toEqual(shouldHighlight); + }); + })(x); + } + }); + })(i); + } +}); diff --git a/spec/javascripts/behaviors/quick_submit_spec.js b/spec/javascripts/behaviors/quick_submit_spec.js index c37c62c63dd..d03836d10f9 100644 --- a/spec/javascripts/behaviors/quick_submit_spec.js +++ b/spec/javascripts/behaviors/quick_submit_spec.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import '~/behaviors/quick_submit'; -describe('Quick Submit behavior', () => { +describe('Quick Submit behavior', function () { const keydownEvent = (options = { keyCode: 13, metaKey: true }) => $.Event('keydown', options); preloadFixtures('merge_requests/merge_request_with_task_list.html.raw'); diff --git a/spec/javascripts/blob/blob_file_dropzone_spec.js b/spec/javascripts/blob/blob_file_dropzone_spec.js index 0b1de504435..346f795c3f5 100644 --- a/spec/javascripts/blob/blob_file_dropzone_spec.js +++ b/spec/javascripts/blob/blob_file_dropzone_spec.js @@ -1,7 +1,7 @@ import $ from 'jquery'; import BlobFileDropzone from '~/blob/blob_file_dropzone'; -describe('BlobFileDropzone', () => { +describe('BlobFileDropzone', function () { preloadFixtures('blob/show.html.raw'); beforeEach(() => { diff --git a/spec/javascripts/comment_type_toggle_spec.js b/spec/javascripts/comment_type_toggle_spec.js index dfd0810d52e..0ba709298c5 100644 --- a/spec/javascripts/comment_type_toggle_spec.js +++ b/spec/javascripts/comment_type_toggle_spec.js @@ -1,5 +1,4 @@ import CommentTypeToggle from '~/comment_type_toggle'; -import * as dropLabSrc from '~/droplab/drop_lab'; import InputSetter from '~/droplab/plugins/input_setter'; describe('CommentTypeToggle', function () { @@ -59,14 +58,14 @@ describe('CommentTypeToggle', function () { this.droplab = jasmine.createSpyObj('droplab', ['init']); - spyOn(dropLabSrc, 'default').and.returnValue(this.droplab); + this.droplabConstructor = spyOnDependency(CommentTypeToggle, 'DropLab').and.returnValue(this.droplab); spyOn(this.commentTypeToggle, 'setConfig').and.returnValue(this.config); CommentTypeToggle.prototype.initDroplab.call(this.commentTypeToggle); }); it('should instantiate a DropLab instance', function () { - expect(dropLabSrc.default).toHaveBeenCalled(); + expect(this.droplabConstructor).toHaveBeenCalled(); }); it('should set .droplab', function () { diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js b/spec/javascripts/commit/pipelines/pipelines_spec.js index 53820770f3f..819ed7896ca 100644 --- a/spec/javascripts/commit/pipelines/pipelines_spec.js +++ b/spec/javascripts/commit/pipelines/pipelines_spec.js @@ -4,7 +4,7 @@ import axios from '~/lib/utils/axios_utils'; import pipelinesTable from '~/commit/pipelines/pipelines_table.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; -describe('Pipelines table in Commits and Merge requests', () => { +describe('Pipelines table in Commits and Merge requests', function () { const jsonFixtureName = 'pipelines/pipelines.json'; let pipeline; let PipelinesTable; diff --git a/spec/javascripts/commits_spec.js b/spec/javascripts/commits_spec.js index 977298b9221..60d100e8544 100644 --- a/spec/javascripts/commits_spec.js +++ b/spec/javascripts/commits_spec.js @@ -3,6 +3,7 @@ import 'vendor/jquery.endless-scroll'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import CommitsList from '~/commits'; +import Pager from '~/pager'; describe('Commits List', () => { let commitsList; @@ -14,6 +15,7 @@ describe('Commits List', () => { </form> <ol id="commits-list"></ol> `); + spyOn(Pager, 'init').and.stub(); commitsList = new CommitsList(25); }); @@ -68,9 +70,10 @@ describe('Commits List', () => { mock.restore(); }); - it('should save the last search string', (done) => { + it('should save the last search string', done => { commitsList.searchField.val('GitLab'); - commitsList.filterResults() + commitsList + .filterResults() .then(() => { expect(ajaxSpy).toHaveBeenCalled(); expect(commitsList.lastSearch).toEqual('GitLab'); @@ -80,8 +83,9 @@ describe('Commits List', () => { .catch(done.fail); }); - it('should not make ajax call if the input does not change', (done) => { - commitsList.filterResults() + it('should not make ajax call if the input does not change', done => { + commitsList + .filterResults() .then(() => { expect(ajaxSpy).not.toHaveBeenCalled(); expect(commitsList.lastSearch).toEqual(''); diff --git a/spec/javascripts/droplab/hook_spec.js b/spec/javascripts/droplab/hook_spec.js index 3d39bd0812b..5eed1db2750 100644 --- a/spec/javascripts/droplab/hook_spec.js +++ b/spec/javascripts/droplab/hook_spec.js @@ -1,5 +1,4 @@ import Hook from '~/droplab/hook'; -import * as dropdownSrc from '~/droplab/drop_down'; describe('Hook', function () { describe('class constructor', function () { @@ -10,7 +9,7 @@ describe('Hook', function () { this.config = {}; this.dropdown = {}; - spyOn(dropdownSrc, 'default').and.returnValue(this.dropdown); + this.dropdownConstructor = spyOnDependency(Hook, 'DropDown').and.returnValue(this.dropdown); this.hook = new Hook(this.trigger, this.list, this.plugins, this.config); }); @@ -24,7 +23,7 @@ describe('Hook', function () { }); it('should call DropDown constructor', function () { - expect(dropdownSrc.default).toHaveBeenCalledWith(this.list, this.config); + expect(this.dropdownConstructor).toHaveBeenCalledWith(this.list, this.config); }); it('should set .type', function () { diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js index 95d02974bdc..8fcee36beb8 100644 --- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js @@ -1,5 +1,3 @@ -import * as urlUtils from '~/lib/utils/url_utility'; -import * as recentSearchesStoreSrc from '~/filtered_search/stores/recent_searches_store'; import RecentSearchesService from '~/filtered_search/services/recent_searches_service'; import RecentSearchesServiceError from '~/filtered_search/services/recent_searches_service_error'; import RecentSearchesRoot from '~/filtered_search/recent_searches_root'; @@ -11,7 +9,7 @@ import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dro import FilteredSearchManager from '~/filtered_search/filtered_search_manager'; import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; -describe('Filtered Search Manager', () => { +describe('Filtered Search Manager', function () { let input; let manager; let tokensContainer; @@ -74,18 +72,19 @@ describe('Filtered Search Manager', () => { describe('class constructor', () => { const isLocalStorageAvailable = 'isLocalStorageAvailable'; + let RecentSearchesStoreSpy; beforeEach(() => { spyOn(RecentSearchesService, 'isAvailable').and.returnValue(isLocalStorageAvailable); - spyOn(recentSearchesStoreSrc, 'default'); spyOn(RecentSearchesRoot.prototype, 'render'); + RecentSearchesStoreSpy = spyOnDependency(FilteredSearchManager, 'RecentSearchesStore'); }); it('should instantiate RecentSearchesStore with isLocalStorageAvailable', () => { manager = new FilteredSearchManager({ page }); expect(RecentSearchesService.isAvailable).toHaveBeenCalled(); - expect(recentSearchesStoreSrc.default).toHaveBeenCalledWith({ + expect(RecentSearchesStoreSpy).toHaveBeenCalledWith({ isLocalStorageAvailable, allowedKeys: FilteredSearchTokenKeys.getKeys(), }); @@ -164,7 +163,7 @@ describe('Filtered Search Manager', () => { it('should search with a single word', (done) => { input.value = 'searchTerm'; - spyOn(urlUtils, 'visitUrl').and.callFake((url) => { + spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => { expect(url).toEqual(`${defaultParams}&search=searchTerm`); done(); }); @@ -175,7 +174,7 @@ describe('Filtered Search Manager', () => { it('should search with multiple words', (done) => { input.value = 'awesome search terms'; - spyOn(urlUtils, 'visitUrl').and.callFake((url) => { + spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => { expect(url).toEqual(`${defaultParams}&search=awesome+search+terms`); done(); }); @@ -186,7 +185,7 @@ describe('Filtered Search Manager', () => { it('should search with special characters', (done) => { input.value = '~!@#$%^&*()_+{}:<>,.?/'; - spyOn(urlUtils, 'visitUrl').and.callFake((url) => { + spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => { expect(url).toEqual(`${defaultParams}&search=~!%40%23%24%25%5E%26*()_%2B%7B%7D%3A%3C%3E%2C.%3F%2F`); done(); }); @@ -200,7 +199,7 @@ describe('Filtered Search Manager', () => { ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} `); - spyOn(urlUtils, 'visitUrl').and.callFake((url) => { + spyOnDependency(FilteredSearchManager, 'visitUrl').and.callFake((url) => { expect(url).toEqual(`${defaultParams}&label_name[]=bug`); done(); }); diff --git a/spec/javascripts/filtered_search/recent_searches_root_spec.js b/spec/javascripts/filtered_search/recent_searches_root_spec.js index d8ba6de5f45..1e6272bad0b 100644 --- a/spec/javascripts/filtered_search/recent_searches_root_spec.js +++ b/spec/javascripts/filtered_search/recent_searches_root_spec.js @@ -1,11 +1,11 @@ import RecentSearchesRoot from '~/filtered_search/recent_searches_root'; -import * as vueSrc from 'vue'; describe('RecentSearchesRoot', () => { describe('render', () => { let recentSearchesRoot; let data; let template; + let VueSpy; beforeEach(() => { recentSearchesRoot = { @@ -14,7 +14,7 @@ describe('RecentSearchesRoot', () => { }, }; - spyOn(vueSrc, 'default').and.callFake((options) => { + VueSpy = spyOnDependency(RecentSearchesRoot, 'Vue').and.callFake((options) => { data = options.data; template = options.template; }); @@ -23,7 +23,7 @@ describe('RecentSearchesRoot', () => { }); it('should instantiate Vue', () => { - expect(vueSrc.default).toHaveBeenCalled(); + expect(VueSpy).toHaveBeenCalled(); expect(data()).toBe(recentSearchesRoot.store.state); expect(template).toContain(':is-local-storage-available="isLocalStorageAvailable"'); }); diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js index 5393502196e..7f9c4811fba 100644 --- a/spec/javascripts/gl_dropdown_spec.js +++ b/spec/javascripts/gl_dropdown_spec.js @@ -1,9 +1,8 @@ /* eslint-disable comma-dangle, no-param-reassign, no-unused-expressions, max-len */ import $ from 'jquery'; -import '~/gl_dropdown'; +import GLDropdown from '~/gl_dropdown'; import '~/lib/utils/common_utils'; -import * as urlUtils from '~/lib/utils/url_utility'; describe('glDropdown', function describeDropdown() { preloadFixtures('static/gl_dropdown.html.raw'); @@ -138,13 +137,13 @@ describe('glDropdown', function describeDropdown() { expect(this.dropdownContainerElement).toHaveClass('open'); const randomIndex = Math.floor(Math.random() * (this.projectsData.length - 1)) + 0; navigateWithKeys('down', randomIndex, () => { - spyOn(urlUtils, 'visitUrl').and.stub(); + const visitUrl = spyOnDependency(GLDropdown, 'visitUrl').and.stub(); navigateWithKeys('enter', null, () => { expect(this.dropdownContainerElement).not.toHaveClass('open'); const link = $(`${ITEM_SELECTOR}:eq(${randomIndex}) a`, this.$dropdownMenuElement); expect(link).toHaveClass('is-active'); const linkedLocation = link.attr('href'); - if (linkedLocation && linkedLocation !== '#') expect(urlUtils.visitUrl).toHaveBeenCalledWith(linkedLocation); + if (linkedLocation && linkedLocation !== '#') expect(visitUrl).toHaveBeenCalledWith(linkedLocation); }); }); }); diff --git a/spec/javascripts/groups/components/app_spec.js b/spec/javascripts/groups/components/app_spec.js index d8428bd0e08..2b92c485f41 100644 --- a/spec/javascripts/groups/components/app_spec.js +++ b/spec/javascripts/groups/components/app_spec.js @@ -1,7 +1,6 @@ import $ from 'jquery'; import Vue from 'vue'; -import * as utils from '~/lib/utils/url_utility'; import appComponent from '~/groups/components/app.vue'; import groupFolderComponent from '~/groups/components/group_folder.vue'; import groupItemComponent from '~/groups/components/group_item.vue'; @@ -177,7 +176,7 @@ describe('AppComponent', () => { it('should fetch groups for provided page details and update window state', (done) => { spyOn(vm, 'fetchGroups').and.returnValue(returnServicePromise(mockGroups)); spyOn(vm, 'updateGroups').and.callThrough(); - spyOn(utils, 'mergeUrlParams').and.callThrough(); + const mergeUrlParams = spyOnDependency(appComponent, 'mergeUrlParams').and.callThrough(); spyOn(window.history, 'replaceState'); spyOn($, 'scrollTo'); @@ -193,7 +192,7 @@ describe('AppComponent', () => { setTimeout(() => { expect(vm.isLoading).toBe(false); expect($.scrollTo).toHaveBeenCalledWith(0); - expect(utils.mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String)); + expect(mergeUrlParams).toHaveBeenCalledWith({ page: 2 }, jasmine.any(String)); expect(window.history.replaceState).toHaveBeenCalledWith({ page: jasmine.any(String), }, jasmine.any(String), jasmine.any(String)); diff --git a/spec/javascripts/groups/components/group_item_spec.js b/spec/javascripts/groups/components/group_item_spec.js index e3c942597a3..49a139855c8 100644 --- a/spec/javascripts/groups/components/group_item_spec.js +++ b/spec/javascripts/groups/components/group_item_spec.js @@ -1,5 +1,4 @@ import Vue from 'vue'; -import * as urlUtils from '~/lib/utils/url_utility'; import groupItemComponent from '~/groups/components/group_item.vue'; import groupFolderComponent from '~/groups/components/group_folder.vue'; import eventHub from '~/groups/event_hub'; @@ -135,13 +134,13 @@ describe('GroupItemComponent', () => { const group = Object.assign({}, mockParentGroupItem); group.childrenCount = 0; const newVm = createComponent(group); - spyOn(urlUtils, 'visitUrl').and.stub(); + const visitUrl = spyOnDependency(groupItemComponent, 'visitUrl').and.stub(); spyOn(eventHub, '$emit'); newVm.onClickRowGroup(event); setTimeout(() => { expect(eventHub.$emit).not.toHaveBeenCalled(); - expect(urlUtils.visitUrl).toHaveBeenCalledWith(newVm.group.relativePath); + expect(visitUrl).toHaveBeenCalledWith(newVm.group.relativePath); done(); }, 0); }); diff --git a/spec/javascripts/helpers/class_spec_helper_spec.js b/spec/javascripts/helpers/class_spec_helper_spec.js index 1415ffb7eb3..fa104ae5bcd 100644 --- a/spec/javascripts/helpers/class_spec_helper_spec.js +++ b/spec/javascripts/helpers/class_spec_helper_spec.js @@ -2,7 +2,7 @@ import './class_spec_helper'; -describe('ClassSpecHelper', () => { +describe('ClassSpecHelper', function () { describe('itShouldBeAStaticMethod', () => { beforeEach(() => { class TestClass { diff --git a/spec/javascripts/ide/components/file_finder/index_spec.js b/spec/javascripts/ide/components/file_finder/index_spec.js new file mode 100644 index 00000000000..4f208e946d2 --- /dev/null +++ b/spec/javascripts/ide/components/file_finder/index_spec.js @@ -0,0 +1,308 @@ +import Vue from 'vue'; +import store from '~/ide/stores'; +import FindFileComponent from '~/ide/components/file_finder/index.vue'; +import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes'; +import router from '~/ide/ide_router'; +import { file, resetStore } from '../../helpers'; +import { mountComponentWithStore } from '../../../helpers/vue_mount_component_helper'; + +describe('IDE File finder item spec', () => { + const Component = Vue.extend(FindFileComponent); + let vm; + + beforeEach(done => { + setFixtures('<div id="app"></div>'); + + vm = mountComponentWithStore(Component, { + store, + el: '#app', + props: { + index: 0, + }, + }); + + setTimeout(done); + }); + + afterEach(() => { + vm.$destroy(); + + resetStore(vm.$store); + }); + + describe('with entries', () => { + beforeEach(done => { + Vue.set(vm.$store.state.entries, 'folder', { + ...file('folder'), + path: 'folder', + type: 'folder', + }); + + Vue.set(vm.$store.state.entries, 'index.js', { + ...file('index.js'), + path: 'index.js', + type: 'blob', + url: '/index.jsurl', + }); + + Vue.set(vm.$store.state.entries, 'component.js', { + ...file('component.js'), + path: 'component.js', + type: 'blob', + }); + + setTimeout(done); + }); + + it('renders list of blobs', () => { + expect(vm.$el.textContent).toContain('index.js'); + expect(vm.$el.textContent).toContain('component.js'); + expect(vm.$el.textContent).not.toContain('folder'); + }); + + it('filters entries', done => { + vm.searchText = 'index'; + + vm.$nextTick(() => { + expect(vm.$el.textContent).toContain('index.js'); + expect(vm.$el.textContent).not.toContain('component.js'); + + done(); + }); + }); + + it('shows clear button when searchText is not empty', done => { + vm.searchText = 'index'; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.dropdown-input-clear').classList).toContain('show'); + expect(vm.$el.querySelector('.dropdown-input-search').classList).toContain('hidden'); + + done(); + }); + }); + + it('clear button resets searchText', done => { + vm.searchText = 'index'; + + vm + .$nextTick() + .then(() => { + vm.$el.querySelector('.dropdown-input-clear').click(); + }) + .then(vm.$nextTick) + .then(() => { + expect(vm.searchText).toBe(''); + }) + .then(done) + .catch(done.fail); + }); + + it('clear button focues search input', done => { + spyOn(vm.$refs.searchInput, 'focus'); + vm.searchText = 'index'; + + vm + .$nextTick() + .then(() => { + vm.$el.querySelector('.dropdown-input-clear').click(); + }) + .then(vm.$nextTick) + .then(() => { + expect(vm.$refs.searchInput.focus).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + describe('listShowCount', () => { + it('returns 1 when no filtered entries exist', done => { + vm.searchText = 'testing 123'; + + vm.$nextTick(() => { + expect(vm.listShowCount).toBe(1); + + done(); + }); + }); + + it('returns entries length when not filtered', () => { + expect(vm.listShowCount).toBe(2); + }); + }); + + describe('listHeight', () => { + it('returns 55 when entries exist', () => { + expect(vm.listHeight).toBe(55); + }); + + it('returns 33 when entries dont exist', done => { + vm.searchText = 'testing 123'; + + vm.$nextTick(() => { + expect(vm.listHeight).toBe(33); + + done(); + }); + }); + }); + + describe('filteredBlobsLength', () => { + it('returns length of filtered blobs', done => { + vm.searchText = 'index'; + + vm.$nextTick(() => { + expect(vm.filteredBlobsLength).toBe(1); + + done(); + }); + }); + }); + + describe('watches', () => { + describe('searchText', () => { + it('resets focusedIndex when updated', done => { + vm.focusedIndex = 1; + vm.searchText = 'test'; + + vm.$nextTick(() => { + expect(vm.focusedIndex).toBe(0); + + done(); + }); + }); + }); + + describe('fileFindVisible', () => { + it('returns searchText when false', done => { + vm.searchText = 'test'; + vm.$store.state.fileFindVisible = true; + + vm + .$nextTick() + .then(() => { + vm.$store.state.fileFindVisible = false; + }) + .then(vm.$nextTick) + .then(() => { + expect(vm.searchText).toBe(''); + }) + .then(done) + .catch(done.fail); + }); + }); + }); + + describe('openFile', () => { + beforeEach(() => { + spyOn(router, 'push'); + spyOn(vm, 'toggleFileFinder'); + }); + + it('closes file finder', () => { + vm.openFile(vm.$store.state.entries['index.js']); + + expect(vm.toggleFileFinder).toHaveBeenCalled(); + }); + + it('pushes to router', () => { + vm.openFile(vm.$store.state.entries['index.js']); + + expect(router.push).toHaveBeenCalledWith('/project/index.jsurl'); + }); + }); + + describe('onKeyup', () => { + it('opens file on enter key', done => { + const event = new CustomEvent('keyup'); + event.keyCode = ENTER_KEY_CODE; + + spyOn(vm, 'openFile'); + + vm.$refs.searchInput.dispatchEvent(event); + + vm.$nextTick(() => { + expect(vm.openFile).toHaveBeenCalledWith(vm.$store.state.entries['index.js']); + + done(); + }); + }); + + it('closes file finder on esc key', done => { + const event = new CustomEvent('keyup'); + event.keyCode = ESC_KEY_CODE; + + spyOn(vm, 'toggleFileFinder'); + + vm.$refs.searchInput.dispatchEvent(event); + + vm.$nextTick(() => { + expect(vm.toggleFileFinder).toHaveBeenCalled(); + + done(); + }); + }); + }); + + describe('onKeyDown', () => { + let el; + + beforeEach(() => { + el = vm.$refs.searchInput; + }); + + describe('up key', () => { + const event = new CustomEvent('keydown'); + event.keyCode = UP_KEY_CODE; + + it('resets to last index when at top', () => { + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(1); + }); + + it('minus 1 from focusedIndex', () => { + vm.focusedIndex = 1; + + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(0); + }); + }); + + describe('down key', () => { + const event = new CustomEvent('keydown'); + event.keyCode = DOWN_KEY_CODE; + + it('resets to first index when at bottom', () => { + vm.focusedIndex = 1; + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(0); + }); + + it('adds 1 to focusedIndex', () => { + el.dispatchEvent(event); + + expect(vm.focusedIndex).toBe(1); + }); + }); + }); + }); + + describe('without entries', () => { + it('renders loading text when loading', done => { + store.state.loading = true; + + vm.$nextTick(() => { + expect(vm.$el.textContent).toContain('Loading...'); + + done(); + }); + }); + + it('renders no files text', () => { + expect(vm.$el.textContent).toContain('No files found.'); + }); + }); +}); diff --git a/spec/javascripts/ide/components/file_finder/item_spec.js b/spec/javascripts/ide/components/file_finder/item_spec.js new file mode 100644 index 00000000000..0f1116c6912 --- /dev/null +++ b/spec/javascripts/ide/components/file_finder/item_spec.js @@ -0,0 +1,140 @@ +import Vue from 'vue'; +import ItemComponent from '~/ide/components/file_finder/item.vue'; +import { file } from '../../helpers'; +import createComponent from '../../../helpers/vue_mount_component_helper'; + +describe('IDE File finder item spec', () => { + const Component = Vue.extend(ItemComponent); + let vm; + let localFile; + + beforeEach(() => { + localFile = { + ...file(), + name: 'test file', + path: 'test/file', + }; + + vm = createComponent(Component, { + file: localFile, + focused: true, + searchText: '', + index: 0, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders file name & path', () => { + expect(vm.$el.textContent).toContain('test file'); + expect(vm.$el.textContent).toContain('test/file'); + }); + + describe('focused', () => { + it('adds is-focused class', () => { + expect(vm.$el.classList).toContain('is-focused'); + }); + + it('does not have is-focused class when not focused', done => { + vm.focused = false; + + vm.$nextTick(() => { + expect(vm.$el.classList).not.toContain('is-focused'); + + done(); + }); + }); + }); + + describe('changed file icon', () => { + it('does not render when not a changed or temp file', () => { + expect(vm.$el.querySelector('.diff-changed-stats')).toBe(null); + }); + + it('renders when a changed file', done => { + vm.file.changed = true; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null); + + done(); + }); + }); + + it('renders when a temp file', done => { + vm.file.tempFile = true; + + vm.$nextTick(() => { + expect(vm.$el.querySelector('.diff-changed-stats')).not.toBe(null); + + done(); + }); + }); + }); + + it('emits event when clicked', () => { + spyOn(vm, '$emit'); + + vm.$el.click(); + + expect(vm.$emit).toHaveBeenCalledWith('click', vm.file); + }); + + describe('path', () => { + let el; + + beforeEach(done => { + vm.searchText = 'file'; + + el = vm.$el.querySelector('.diff-changed-file-path'); + + vm.$nextTick(done); + }); + + it('highlights text', () => { + expect(el.querySelectorAll('.highlighted').length).toBe(4); + }); + + it('adds ellipsis to long text', done => { + vm.file.path = new Array(70) + .fill() + .map((_, i) => `${i}-`) + .join(''); + + vm.$nextTick(() => { + expect(el.textContent).toBe(`...${vm.file.path.substr(vm.file.path.length - 60)}`); + done(); + }); + }); + }); + + describe('name', () => { + let el; + + beforeEach(done => { + vm.searchText = 'file'; + + el = vm.$el.querySelector('.diff-changed-file-name'); + + vm.$nextTick(done); + }); + + it('highlights text', () => { + expect(el.querySelectorAll('.highlighted').length).toBe(4); + }); + + it('does not add ellipsis to long text', done => { + vm.file.name = new Array(70) + .fill() + .map((_, i) => `${i}-`) + .join(''); + + vm.$nextTick(() => { + expect(el.textContent).not.toBe(`...${vm.file.name.substr(vm.file.name.length - 60)}`); + done(); + }); + }); + }); +}); diff --git a/spec/javascripts/ide/components/ide_spec.js b/spec/javascripts/ide/components/ide_spec.js index 2a49adc5740..6f580e1f7af 100644 --- a/spec/javascripts/ide/components/ide_spec.js +++ b/spec/javascripts/ide/components/ide_spec.js @@ -1,4 +1,5 @@ import Vue from 'vue'; +import Mousetrap from 'mousetrap'; import store from '~/ide/stores'; import ide from '~/ide/components/ide.vue'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; @@ -43,4 +44,68 @@ describe('ide component', () => { done(); }); }); + + describe('file finder', () => { + beforeEach(done => { + spyOn(vm, 'toggleFileFinder'); + + vm.$store.state.fileFindVisible = true; + + vm.$nextTick(done); + }); + + it('calls toggleFileFinder on `t` key press', done => { + Mousetrap.trigger('t'); + + vm + .$nextTick() + .then(() => { + expect(vm.toggleFileFinder).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('calls toggleFileFinder on `command+p` key press', done => { + Mousetrap.trigger('command+p'); + + vm + .$nextTick() + .then(() => { + expect(vm.toggleFileFinder).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('calls toggleFileFinder on `ctrl+p` key press', done => { + Mousetrap.trigger('ctrl+p'); + + vm + .$nextTick() + .then(() => { + expect(vm.toggleFileFinder).toHaveBeenCalled(); + }) + .then(done) + .catch(done.fail); + }); + + it('always allows `command+p` to trigger toggleFileFinder', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'command+p'), + ).toBe(false); + }); + + it('always allows `ctrl+p` to trigger toggleFileFinder', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 'ctrl+p'), + ).toBe(false); + }); + + it('onlys handles `t` when focused in input-field', () => { + expect( + vm.mousetrapStopCallback(null, vm.$el.querySelector('.dropdown-input-field'), 't'), + ).toBe(true); + }); + }); }); diff --git a/spec/javascripts/ide/stores/actions_spec.js b/spec/javascripts/ide/stores/actions_spec.js index 9f27b89b34a..2e773062524 100644 --- a/spec/javascripts/ide/stores/actions_spec.js +++ b/spec/javascripts/ide/stores/actions_spec.js @@ -1,5 +1,11 @@ -import * as urlUtils from '~/lib/utils/url_utility'; -import * as actions from '~/ide/stores/actions'; +import actions, { + stageAllChanges, + unstageAllChanges, + toggleFileFinder, + setCurrentBranchId, + setEmptyStateSvgs, + updateActivityBarView, +} from '~/ide/stores/actions'; import store from '~/ide/stores'; import * as types from '~/ide/stores/mutation_types'; import router from '~/ide/ide_router'; @@ -17,12 +23,12 @@ describe('Multi-file store actions', () => { describe('redirectToUrl', () => { it('calls visitUrl', done => { - spyOn(urlUtils, 'visitUrl'); + const visitUrl = spyOnDependency(actions, 'visitUrl'); store .dispatch('redirectToUrl', 'test') .then(() => { - expect(urlUtils.visitUrl).toHaveBeenCalledWith('test'); + expect(visitUrl).toHaveBeenCalledWith('test'); done(); }) @@ -298,7 +304,7 @@ describe('Multi-file store actions', () => { store.state.changedFiles.push(file(), file('new')); testAction( - actions.stageAllChanges, + stageAllChanges, null, store.state, [ @@ -316,7 +322,7 @@ describe('Multi-file store actions', () => { store.state.stagedFiles.push(file(), file('new')); testAction( - actions.unstageAllChanges, + unstageAllChanges, null, store.state, [ @@ -344,7 +350,7 @@ describe('Multi-file store actions', () => { describe('updateActivityBarView', () => { it('commits UPDATE_ACTIVITY_BAR_VIEW', done => { testAction( - actions.updateActivityBarView, + updateActivityBarView, 'test', {}, [{ type: 'UPDATE_ACTIVITY_BAR_VIEW', payload: 'test' }], @@ -357,7 +363,7 @@ describe('Multi-file store actions', () => { describe('setEmptyStateSvgs', () => { it('commits setEmptyStateSvgs', done => { testAction( - actions.setEmptyStateSvgs, + setEmptyStateSvgs, 'svg', {}, [{ type: 'SET_EMPTY_STATE_SVGS', payload: 'svg' }], @@ -370,7 +376,7 @@ describe('Multi-file store actions', () => { describe('setCurrentBranchId', () => { it('commits setCurrentBranchId', done => { testAction( - actions.setCurrentBranchId, + setCurrentBranchId, 'branchId', {}, [{ type: 'SET_CURRENT_BRANCH', payload: 'branchId' }], @@ -379,4 +385,17 @@ describe('Multi-file store actions', () => { ); }); }); + + describe('toggleFileFinder', () => { + it('commits TOGGLE_FILE_FINDER', done => { + testAction( + toggleFileFinder, + true, + null, + [{ type: 'TOGGLE_FILE_FINDER', payload: true }], + [], + done, + ); + }); + }); }); diff --git a/spec/javascripts/ide/stores/getters_spec.js b/spec/javascripts/ide/stores/getters_spec.js index 212ae29254b..68e0cceef76 100644 --- a/spec/javascripts/ide/stores/getters_spec.js +++ b/spec/javascripts/ide/stores/getters_spec.js @@ -58,4 +58,24 @@ describe('IDE store getters', () => { expect(getters.currentMergeRequest(localState)).toBeNull(); }); }); + + describe('allBlobs', () => { + beforeEach(() => { + Object.assign(localState.entries, { + index: { type: 'blob', name: 'index', lastOpenedAt: 0 }, + app: { type: 'blob', name: 'blob', lastOpenedAt: 0 }, + folder: { type: 'folder', name: 'folder', lastOpenedAt: 0 }, + }); + }); + + it('returns only blobs', () => { + expect(getters.allBlobs(localState).length).toBe(2); + }); + + it('returns list sorted by lastOpenedAt', () => { + localState.entries.app.lastOpenedAt = new Date().getTime(); + + expect(getters.allBlobs(localState)[0].name).toBe('blob'); + }); + }); }); diff --git a/spec/javascripts/ide/stores/modules/commit/actions_spec.js b/spec/javascripts/ide/stores/modules/commit/actions_spec.js index 116967208e0..b2b4b85ca42 100644 --- a/spec/javascripts/ide/stores/modules/commit/actions_spec.js +++ b/spec/javascripts/ide/stores/modules/commit/actions_spec.js @@ -1,7 +1,7 @@ +import actions from '~/ide/stores/actions'; import store from '~/ide/stores'; import service from '~/ide/services'; import router from '~/ide/ide_router'; -import * as urlUtils from '~/lib/utils/url_utility'; import eventHub from '~/ide/eventhub'; import * as consts from '~/ide/stores/modules/commit/constants'; import { resetStore, file } from 'spec/ide/helpers'; @@ -307,8 +307,10 @@ describe('IDE commit module actions', () => { }); describe('commitChanges', () => { + let visitUrl; + beforeEach(() => { - spyOn(urlUtils, 'visitUrl'); + visitUrl = spyOnDependency(actions, 'visitUrl'); document.body.innerHTML += '<div class="flash-container"></div>'; @@ -461,7 +463,7 @@ describe('IDE commit module actions', () => { store .dispatch('commit/commitChanges') .then(() => { - expect(urlUtils.visitUrl).toHaveBeenCalledWith( + expect(visitUrl).toHaveBeenCalledWith( `webUrl/merge_requests/new?merge_request[source_branch]=${ store.getters['commit/newBranchName'] }&merge_request[target_branch]=master`, diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js index 26858dd1f10..6a7897a9e4d 100644 --- a/spec/javascripts/ide/stores/mutations_spec.js +++ b/spec/javascripts/ide/stores/mutations_spec.js @@ -108,4 +108,12 @@ describe('Multi-file store mutations', () => { expect(localState.committedStateSvgPath).toBe('commited'); }); }); + + describe('TOGGLE_FILE_FINDER', () => { + it('updates fileFindVisible', () => { + mutations.TOGGLE_FILE_FINDER(localState, true); + + expect(localState.fileFindVisible).toBe(true); + }); + }); }); diff --git a/spec/javascripts/issue_show/components/app_spec.js b/spec/javascripts/issue_show/components/app_spec.js index d5a87b5ce20..bf1f0c822fe 100644 --- a/spec/javascripts/issue_show/components/app_spec.js +++ b/spec/javascripts/issue_show/components/app_spec.js @@ -2,7 +2,6 @@ import Vue from 'vue'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import '~/behaviors/markdown/render_gfm'; -import * as urlUtils from '~/lib/utils/url_utility'; import issuableApp from '~/issue_show/components/app.vue'; import eventHub from '~/issue_show/event_hub'; import setTimeoutPromise from 'spec/helpers/set_timeout_promise_helper'; @@ -174,7 +173,7 @@ describe('Issuable output', () => { }); it('does not redirect if issue has not moved', (done) => { - spyOn(urlUtils, 'visitUrl'); + const visitUrl = spyOnDependency(issuableApp, 'visitUrl'); spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => { resolve({ data: { @@ -187,16 +186,13 @@ describe('Issuable output', () => { vm.updateIssuable(); setTimeout(() => { - expect( - urlUtils.visitUrl, - ).not.toHaveBeenCalled(); - + expect(visitUrl).not.toHaveBeenCalled(); done(); }); }); it('redirects if returned web_url has changed', (done) => { - spyOn(urlUtils, 'visitUrl'); + const visitUrl = spyOnDependency(issuableApp, 'visitUrl'); spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => { resolve({ data: { @@ -209,10 +205,7 @@ describe('Issuable output', () => { vm.updateIssuable(); setTimeout(() => { - expect( - urlUtils.visitUrl, - ).toHaveBeenCalledWith('/testing-issue-move'); - + expect(visitUrl).toHaveBeenCalledWith('/testing-issue-move'); done(); }); }); @@ -340,7 +333,7 @@ describe('Issuable output', () => { describe('deleteIssuable', () => { it('changes URL when deleted', (done) => { - spyOn(urlUtils, 'visitUrl'); + const visitUrl = spyOnDependency(issuableApp, 'visitUrl'); spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => { resolve({ data: { @@ -352,16 +345,13 @@ describe('Issuable output', () => { vm.deleteIssuable(); setTimeout(() => { - expect( - urlUtils.visitUrl, - ).toHaveBeenCalledWith('/test'); - + expect(visitUrl).toHaveBeenCalledWith('/test'); done(); }); }); it('stops polling when deleting', (done) => { - spyOn(urlUtils, 'visitUrl'); + spyOnDependency(issuableApp, 'visitUrl'); spyOn(vm.poll, 'stop').and.callThrough(); spyOn(vm.service, 'deleteIssuable').and.callFake(() => new Promise((resolve) => { resolve({ @@ -377,7 +367,6 @@ describe('Issuable output', () => { expect( vm.poll.stop, ).toHaveBeenCalledWith(); - done(); }); }); diff --git a/spec/javascripts/issue_show/components/description_spec.js b/spec/javascripts/issue_show/components/description_spec.js index d96151a8a3a..889c8545faa 100644 --- a/spec/javascripts/issue_show/components/description_spec.js +++ b/spec/javascripts/issue_show/components/description_spec.js @@ -1,7 +1,6 @@ import $ from 'jquery'; import Vue from 'vue'; -import descriptionComponent from '~/issue_show/components/description.vue'; -import * as taskList from '~/task_list'; +import Description from '~/issue_show/components/description.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('Description component', () => { @@ -17,7 +16,7 @@ describe('Description component', () => { }; beforeEach(() => { - DescriptionComponent = Vue.extend(descriptionComponent); + DescriptionComponent = Vue.extend(Description); if (!document.querySelector('.issuable-meta')) { const metaData = document.createElement('div'); @@ -82,18 +81,20 @@ describe('Description component', () => { }); describe('TaskList', () => { + let TaskList; + beforeEach(() => { vm = mountComponent(DescriptionComponent, Object.assign({}, props, { issuableType: 'issuableType', })); - spyOn(taskList, 'default'); + TaskList = spyOnDependency(Description, 'TaskList'); }); it('re-inits the TaskList when description changed', (done) => { vm.descriptionHtml = 'changed'; setTimeout(() => { - expect(taskList.default).toHaveBeenCalled(); + expect(TaskList).toHaveBeenCalled(); done(); }); }); @@ -103,7 +104,7 @@ describe('Description component', () => { vm.descriptionHtml = 'changed'; setTimeout(() => { - expect(taskList.default).not.toHaveBeenCalled(); + expect(TaskList).not.toHaveBeenCalled(); done(); }); }); @@ -112,7 +113,7 @@ describe('Description component', () => { vm.descriptionHtml = 'changed'; setTimeout(() => { - expect(taskList.default).toHaveBeenCalledWith({ + expect(TaskList).toHaveBeenCalledWith({ dataType: 'issuableType', fieldName: 'description', selector: '.detail-page-description', diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js index c6bbacf237a..da00b615c9b 100644 --- a/spec/javascripts/job_spec.js +++ b/spec/javascripts/job_spec.js @@ -2,7 +2,6 @@ import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; import { numberToHumanSize } from '~/lib/utils/number_utils'; -import * as urlUtils from '~/lib/utils/url_utility'; import '~/lib/utils/datetime_utility'; import Job from '~/job'; import '~/breakpoints'; @@ -22,7 +21,7 @@ describe('Job', () => { beforeEach(() => { loadFixtures('builds/build-with-artifacts.html.raw'); - spyOn(urlUtils, 'visitUrl'); + spyOnDependency(Job, 'visitUrl'); response = {}; diff --git a/spec/javascripts/jobs/sidebar_details_block_spec.js b/spec/javascripts/jobs/sidebar_details_block_spec.js index 6b397c22fb9..9c4454252ce 100644 --- a/spec/javascripts/jobs/sidebar_details_block_spec.js +++ b/spec/javascripts/jobs/sidebar_details_block_spec.js @@ -102,7 +102,7 @@ describe('Sidebar details block', () => { }); it('should render runner ID', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual('Runner: #1'); + expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual('Runner: local ci runner (#1)'); }); it('should render timeout information', () => { diff --git a/spec/javascripts/lib/utils/csrf_token_spec.js b/spec/javascripts/lib/utils/csrf_token_spec.js index c484213df8e..81a39a97a84 100644 --- a/spec/javascripts/lib/utils/csrf_token_spec.js +++ b/spec/javascripts/lib/utils/csrf_token_spec.js @@ -1,6 +1,6 @@ import csrf from '~/lib/utils/csrf'; -describe('csrf', () => { +describe('csrf', function () { beforeEach(() => { this.tokenKey = 'X-CSRF-Token'; this.token = 'pH1cvjnP9grx2oKlhWEDvUZnJ8x2eXsIs1qzyHkF3DugSG5yTxR76CWeEZRhML2D1IeVB7NEW0t5l/axE4iJpQ=='; diff --git a/spec/javascripts/lib/utils/image_utility_spec.js b/spec/javascripts/lib/utils/image_utility_spec.js index 75addfcc833..a7eff419fba 100644 --- a/spec/javascripts/lib/utils/image_utility_spec.js +++ b/spec/javascripts/lib/utils/image_utility_spec.js @@ -1,4 +1,4 @@ -import * as imageUtility from '~/lib/utils/image_utility'; +import { isImageLoaded } from '~/lib/utils/image_utility'; describe('imageUtility', () => { describe('isImageLoaded', () => { @@ -8,7 +8,7 @@ describe('imageUtility', () => { naturalHeight: 100, }; - expect(imageUtility.isImageLoaded(element)).toEqual(false); + expect(isImageLoaded(element)).toEqual(false); }); it('should return false when naturalHeight = 0', () => { @@ -17,7 +17,7 @@ describe('imageUtility', () => { naturalHeight: 0, }; - expect(imageUtility.isImageLoaded(element)).toEqual(false); + expect(isImageLoaded(element)).toEqual(false); }); it('should return true when image.complete and naturalHeight != 0', () => { @@ -26,7 +26,7 @@ describe('imageUtility', () => { naturalHeight: 100, }; - expect(imageUtility.isImageLoaded(element)).toEqual(true); + expect(isImageLoaded(element)).toEqual(true); }); }); }); diff --git a/spec/javascripts/merge_request_tabs_spec.js b/spec/javascripts/merge_request_tabs_spec.js index 79c8cf0ba32..3dbd9756cd2 100644 --- a/spec/javascripts/merge_request_tabs_spec.js +++ b/spec/javascripts/merge_request_tabs_spec.js @@ -3,7 +3,6 @@ import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import * as urlUtils from '~/lib/utils/url_utility'; import MergeRequestTabs from '~/merge_request_tabs'; import '~/commit/pipelines/pipelines_bundle'; import '~/breakpoints'; @@ -356,7 +355,7 @@ import 'vendor/jquery.scrollTo'; describe('with note fragment hash', () => { it('should expand and scroll to linked fragment hash #note_xxx', function (done) { - spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); setTimeout(() => { @@ -372,7 +371,7 @@ import 'vendor/jquery.scrollTo'; }); it('should gracefully ignore non-existant fragment hash', function (done) { - spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); setTimeout(() => { @@ -385,7 +384,7 @@ import 'vendor/jquery.scrollTo'; describe('with line number fragment hash', () => { it('should gracefully ignore line number fragment hash', function () { - spyOn(urlUtils, 'getLocationHash').and.returnValue(noteLineNumId); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); expect(noteLineNumId.length).toBeGreaterThan(0); @@ -422,7 +421,7 @@ import 'vendor/jquery.scrollTo'; describe('with note fragment hash', () => { it('should expand and scroll to linked fragment hash #note_xxx', function (done) { - spyOn(urlUtils, 'getLocationHash').and.returnValue(noteId); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteId); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); @@ -439,7 +438,7 @@ import 'vendor/jquery.scrollTo'; }); it('should gracefully ignore non-existant fragment hash', function (done) { - spyOn(urlUtils, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue('note_something-that-does-not-exist'); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); setTimeout(() => { @@ -451,7 +450,7 @@ import 'vendor/jquery.scrollTo'; describe('with line number fragment hash', () => { it('should gracefully ignore line number fragment hash', function () { - spyOn(urlUtils, 'getLocationHash').and.returnValue(noteLineNumId); + spyOnDependency(MergeRequestTabs, 'getLocationHash').and.returnValue(noteLineNumId); this.class.loadDiff('/foo/bar/merge_requests/1/diffs'); expect(noteLineNumId.length).toBeGreaterThan(0); diff --git a/spec/javascripts/monitoring/monitoring_store_spec.js b/spec/javascripts/monitoring/monitoring_store_spec.js index 88aa7659275..08d54946787 100644 --- a/spec/javascripts/monitoring/monitoring_store_spec.js +++ b/spec/javascripts/monitoring/monitoring_store_spec.js @@ -1,7 +1,7 @@ import MonitoringStore from '~/monitoring/stores/monitoring_store'; import MonitoringMock, { deploymentData } from './mock_data'; -describe('MonitoringStore', () => { +describe('MonitoringStore', function () { this.store = new MonitoringStore(); this.store.storeMetrics(MonitoringMock.data); diff --git a/spec/javascripts/notes_spec.js b/spec/javascripts/notes_spec.js index ec56ab0e2f0..0952356c2f4 100644 --- a/spec/javascripts/notes_spec.js +++ b/spec/javascripts/notes_spec.js @@ -3,7 +3,6 @@ import $ from 'jquery'; import _ from 'underscore'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import * as urlUtils from '~/lib/utils/url_utility'; import 'autosize'; import '~/gl_form'; import '~/lib/utils/text_utility'; @@ -222,7 +221,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; }); it('sets target when hash matches', () => { - spyOn(urlUtils, 'getLocationHash').and.returnValue(hash); + spyOnDependency(Notes, 'getLocationHash').and.returnValue(hash); Notes.updateNoteTargetSelector($note); @@ -231,7 +230,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; }); it('unsets target when hash does not match', () => { - spyOn(urlUtils, 'getLocationHash').and.returnValue('note_doesnotexist'); + spyOnDependency(Notes, 'getLocationHash').and.returnValue('note_doesnotexist'); Notes.updateNoteTargetSelector($note); @@ -239,7 +238,7 @@ import timeoutPromise from './helpers/set_timeout_promise_helper'; }); it('unsets target when there is not a hash fragment anymore', () => { - spyOn(urlUtils, 'getLocationHash').and.returnValue(null); + spyOnDependency(Notes, 'getLocationHash').and.returnValue(null); Notes.updateNoteTargetSelector($note); diff --git a/spec/javascripts/pager_spec.js b/spec/javascripts/pager_spec.js index b09494f0b77..04f2e7ef4f9 100644 --- a/spec/javascripts/pager_spec.js +++ b/spec/javascripts/pager_spec.js @@ -1,15 +1,25 @@ -/* global fixture */ +import $ from 'jquery'; import MockAdapter from 'axios-mock-adapter'; import axios from '~/lib/utils/axios_utils'; -import * as utils from '~/lib/utils/url_utility'; import Pager from '~/pager'; describe('pager', () => { + let axiosMock; + + beforeEach(() => { + axiosMock = new MockAdapter(axios); + }); + + afterEach(() => { + axiosMock.restore(); + }); + describe('init', () => { const originalHref = window.location.href; beforeEach(() => { setFixtures('<div class="content_list"></div><div class="loading"></div>'); + spyOn($.fn, 'endlessScroll').and.stub(); }); afterEach(() => { @@ -25,7 +35,7 @@ describe('pager', () => { it('should use current url if data-href attribute not provided', () => { const href = `${gl.TEST_HOST}/some_list`; - spyOn(utils, 'removeParams').and.returnValue(href); + spyOnDependency(Pager, 'removeParams').and.returnValue(href); Pager.init(); expect(Pager.url).toBe(href); }); @@ -39,42 +49,37 @@ describe('pager', () => { it('keeps extra query parameters from url', () => { window.history.replaceState({}, null, '?filter=test&offset=100'); const href = `${gl.TEST_HOST}/some_list?filter=test`; - spyOn(utils, 'removeParams').and.returnValue(href); + const removeParams = spyOnDependency(Pager, 'removeParams').and.returnValue(href); Pager.init(); - expect(utils.removeParams).toHaveBeenCalledWith(['limit', 'offset']); + expect(removeParams).toHaveBeenCalledWith(['limit', 'offset']); expect(Pager.url).toEqual(href); }); }); describe('getOld', () => { const urlRegex = /(.*)some_list(.*)$/; - let mock; function mockSuccess() { - mock.onGet(urlRegex).reply(200, { + axiosMock.onGet(urlRegex).reply(200, { count: 0, html: '', }); } function mockError() { - mock.onGet(urlRegex).networkError(); + axiosMock.onGet(urlRegex).networkError(); } beforeEach(() => { - setFixtures('<div class="content_list" data-href="/some_list"></div><div class="loading"></div>'); + setFixtures( + '<div class="content_list" data-href="/some_list"></div><div class="loading"></div>', + ); spyOn(axios, 'get').and.callThrough(); - mock = new MockAdapter(axios); - Pager.init(); }); - afterEach(() => { - mock.restore(); - }); - - it('shows loader while loading next page', (done) => { + it('shows loader while loading next page', done => { mockSuccess(); spyOn(Pager.loading, 'show'); @@ -87,7 +92,7 @@ describe('pager', () => { }); }); - it('hides loader on success', (done) => { + it('hides loader on success', done => { mockSuccess(); spyOn(Pager.loading, 'hide'); @@ -100,7 +105,7 @@ describe('pager', () => { }); }); - it('hides loader on error', (done) => { + it('hides loader on error', done => { mockError(); spyOn(Pager.loading, 'hide'); @@ -113,7 +118,7 @@ describe('pager', () => { }); }); - it('sends request to url with offset and limit params', (done) => { + it('sends request to url with offset and limit params', done => { Pager.offset = 100; Pager.limit = 20; Pager.getOld(); diff --git a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js index a6fe9fb65e9..b69e5f9a3a0 100644 --- a/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js +++ b/spec/javascripts/pages/admin/jobs/index/components/stop_jobs_modal_spec.js @@ -2,7 +2,6 @@ import Vue from 'vue'; import axios from '~/lib/utils/axios_utils'; import stopJobsModal from '~/pages/admin/jobs/index/components/stop_jobs_modal.vue'; -import * as urlUtility from '~/lib/utils/url_utility'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; @@ -24,7 +23,7 @@ describe('stop_jobs_modal.vue', () => { describe('onSubmit', () => { it('stops jobs and redirects to overview page', (done) => { const responseURL = `${gl.TEST_HOST}/stop_jobs_modal.vue/jobs`; - const redirectSpy = spyOn(urlUtility, 'redirectTo'); + const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo'); spyOn(axios, 'post').and.callFake((url) => { expect(url).toBe(props.url); return Promise.resolve({ @@ -44,7 +43,7 @@ describe('stop_jobs_modal.vue', () => { it('displays error if stopping jobs failed', (done) => { const dummyError = new Error('stopping jobs failed'); - const redirectSpy = spyOn(urlUtility, 'redirectTo'); + const redirectSpy = spyOnDependency(stopJobsModal, 'redirectTo'); spyOn(axios, 'post').and.callFake((url) => { expect(url).toBe(props.url); return Promise.reject(dummyError); diff --git a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js index 6074e06fcec..94401beb5c9 100644 --- a/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js +++ b/spec/javascripts/pages/milestones/shared/components/delete_milestone_modal_spec.js @@ -3,7 +3,6 @@ import Vue from 'vue'; import axios from '~/lib/utils/axios_utils'; import deleteMilestoneModal from '~/pages/milestones/shared/components/delete_milestone_modal.vue'; import eventHub from '~/pages/milestones/shared/event_hub'; -import * as urlUtility from '~/lib/utils/url_utility'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; @@ -40,7 +39,7 @@ describe('delete_milestone_modal.vue', () => { }, }); }); - const redirectSpy = spyOn(urlUtility, 'redirectTo'); + const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo'); vm.onSubmit() .then(() => { @@ -60,7 +59,7 @@ describe('delete_milestone_modal.vue', () => { eventHub.$emit.calls.reset(); return Promise.reject(dummyError); }); - const redirectSpy = spyOn(urlUtility, 'redirectTo'); + const redirectSpy = spyOnDependency(deleteMilestoneModal, 'redirectTo'); vm.onSubmit() .catch((error) => { diff --git a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js index f95a7cef18a..fb7d2763b49 100644 --- a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js +++ b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js @@ -6,7 +6,7 @@ const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout); const cookieKey = 'pipeline_schedules_callout_dismissed'; const docsUrl = 'help/ci/scheduled_pipelines'; -describe('Pipeline Schedule Callout', () => { +describe('Pipeline Schedule Callout', function () { beforeEach(() => { setFixtures(` <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div> diff --git a/spec/javascripts/pipelines/graph/action_component_spec.js b/spec/javascripts/pipelines/graph/action_component_spec.js index 581209f215d..3de10392472 100644 --- a/spec/javascripts/pipelines/graph/action_component_spec.js +++ b/spec/javascripts/pipelines/graph/action_component_spec.js @@ -6,7 +6,7 @@ import mountComponent from '../../helpers/vue_mount_component_helper'; describe('pipeline graph action component', () => { let component; - beforeEach((done) => { + beforeEach(done => { const ActionComponent = Vue.extend(actionComponent); component = mountComponent(ActionComponent, { tooltipText: 'bar', @@ -22,7 +22,7 @@ describe('pipeline graph action component', () => { }); it('should emit an event with the provided link', () => { - eventHub.$on('graphAction', (link) => { + eventHub.$on('graphAction', link => { expect(link).toEqual('foo'); }); }); @@ -31,7 +31,7 @@ describe('pipeline graph action component', () => { expect(component.$el.getAttribute('data-original-title')).toEqual('bar'); }); - it('should update bootstrap tooltip when title changes', (done) => { + it('should update bootstrap tooltip when title changes', done => { component.tooltipText = 'changed'; setTimeout(() => { @@ -44,4 +44,45 @@ describe('pipeline graph action component', () => { expect(component.$el.querySelector('.ci-action-icon-wrapper')).toBeDefined(); expect(component.$el.querySelector('svg')).toBeDefined(); }); + + it('disables the button when clicked', done => { + component.$el.click(); + + component.$nextTick(() => { + expect(component.$el.getAttribute('disabled')).toEqual('disabled'); + done(); + }); + }); + + it('re-enabled the button when `requestFinishedFor` matches `linkRequested`', done => { + component.$el.click(); + + component + .$nextTick() + .then(() => { + expect(component.$el.getAttribute('disabled')).toEqual('disabled'); + component.requestFinishedFor = 'foo'; + }) + .then(() => { + expect(component.$el.getAttribute('disabled')).toBeNull(); + }) + .then(done) + .catch(done.fail); + }); + + it('does not re-enable the button when `requestFinishedFor` does not matches `linkRequested`', done => { + component.$el.click(); + + component + .$nextTick() + .then(() => { + expect(component.$el.getAttribute('disabled')).toEqual('disabled'); + component.requestFinishedFor = 'bar'; + }) + .then(() => { + expect(component.$el.getAttribute('disabled')).toEqual('disabled'); + }) + .then(done) + .catch(done.fail); + }); }); diff --git a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js deleted file mode 100644 index ba721bc53c6..00000000000 --- a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js +++ /dev/null @@ -1,32 +0,0 @@ -import Vue from 'vue'; -import dropdownActionComponent from '~/pipelines/components/graph/dropdown_action_component.vue'; - -describe('action component', () => { - let component; - - beforeEach((done) => { - const DropdownActionComponent = Vue.extend(dropdownActionComponent); - component = new DropdownActionComponent({ - propsData: { - tooltipText: 'bar', - link: 'foo', - actionMethod: 'post', - actionIcon: 'cancel', - }, - }).$mount(); - - Vue.nextTick(done); - }); - - it('should render a link', () => { - expect(component.$el.getAttribute('href')).toEqual('foo'); - }); - - it('should render the provided title as a bootstrap tooltip', () => { - expect(component.$el.getAttribute('data-original-title')).toEqual('bar'); - }); - - it('should render an svg', () => { - expect(component.$el.querySelector('svg')).toBeDefined(); - }); -}); diff --git a/spec/javascripts/pipelines/graph/job_component_spec.js b/spec/javascripts/pipelines/graph/job_component_spec.js index c9677ae209a..073dae56c25 100644 --- a/spec/javascripts/pipelines/graph/job_component_spec.js +++ b/spec/javascripts/pipelines/graph/job_component_spec.js @@ -93,17 +93,6 @@ describe('pipeline graph job component', () => { }); }); - describe('dropdown', () => { - it('should render the dropdown action icon', () => { - component = mountComponent(JobComponent, { - job: mockJob, - isDropdown: true, - }); - - expect(component.$el.querySelector('a.ci-action-icon-wrapper')).toBeDefined(); - }); - }); - it('should render provided class name', () => { component = mountComponent(JobComponent, { job: mockJob, diff --git a/spec/javascripts/right_sidebar_spec.js b/spec/javascripts/right_sidebar_spec.js index 80770a61011..e264b16335f 100644 --- a/spec/javascripts/right_sidebar_spec.js +++ b/spec/javascripts/right_sidebar_spec.js @@ -9,8 +9,6 @@ import Sidebar from '~/right_sidebar'; (function() { var $aside, $icon, $labelsIcon, $page, $toggle, assertSidebarState; - this.sidebar = null; - $aside = null; $toggle = null; @@ -43,7 +41,7 @@ import Sidebar from '~/right_sidebar'; beforeEach(function() { loadFixtures(fixtureName); mock = new MockAdapter(axios); - this.sidebar = new Sidebar(); + new Sidebar(); // eslint-disable-line no-new $aside = $('.right-sidebar'); $page = $('.layout-page'); $icon = $aside.find('i'); diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js index 1a27955983d..4f515f98a7e 100644 --- a/spec/javascripts/search_autocomplete_spec.js +++ b/spec/javascripts/search_autocomplete_spec.js @@ -4,7 +4,6 @@ import $ from 'jquery'; import '~/gl_dropdown'; import SearchAutocomplete from '~/search_autocomplete'; import '~/lib/utils/common_utils'; -import * as urlUtils from '~/lib/utils/url_utility'; describe('Search autocomplete dropdown', () => { var assertLinks, @@ -129,9 +128,6 @@ describe('Search autocomplete dropdown', () => { beforeEach(function() { loadFixtures('static/search_autocomplete.html.raw'); - // Prevent turbolinks from triggering within gl_dropdown - spyOn(urlUtils, 'visitUrl').and.returnValue(true); - window.gon = {}; window.gon.current_user_id = userId; window.gon.current_username = userName; diff --git a/spec/javascripts/settings_panels_spec.js b/spec/javascripts/settings_panels_spec.js index d433f8c3e07..4fba36bd4de 100644 --- a/spec/javascripts/settings_panels_spec.js +++ b/spec/javascripts/settings_panels_spec.js @@ -13,9 +13,9 @@ describe('Settings Panels', () => { }); it('should expand linked hash fragment panel', () => { - location.hash = '#js-general-pipeline-settings'; + location.hash = '#autodevops-settings'; - const pipelineSettingsPanel = document.querySelector('#js-general-pipeline-settings'); + const pipelineSettingsPanel = document.querySelector('#autodevops-settings'); // Our test environment automatically expands everything so we need to clear that out first pipelineSettingsPanel.classList.remove('expanded'); diff --git a/spec/javascripts/shortcuts_dashboard_navigation_spec.js b/spec/javascripts/shortcuts_dashboard_navigation_spec.js index 888b49004bf..7cb201e01d8 100644 --- a/spec/javascripts/shortcuts_dashboard_navigation_spec.js +++ b/spec/javascripts/shortcuts_dashboard_navigation_spec.js @@ -1,24 +1,23 @@ import findAndFollowLink from '~/shortcuts_dashboard_navigation'; -import * as urlUtility from '~/lib/utils/url_utility'; describe('findAndFollowLink', () => { it('visits a link when the selector exists', () => { const href = '/some/path'; - const locationSpy = spyOn(urlUtility, 'visitUrl'); + const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl'); setFixtures(`<a class="my-shortcut" href="${href}">link</a>`); findAndFollowLink('.my-shortcut'); - expect(locationSpy).toHaveBeenCalledWith(href); + expect(visitUrl).toHaveBeenCalledWith(href); }); it('does not throw an exception when the selector does not exist', () => { - const locationSpy = spyOn(urlUtility, 'visitUrl'); + const visitUrl = spyOnDependency(findAndFollowLink, 'visitUrl'); // this should not throw an exception findAndFollowLink('.this-selector-does-not-exist'); - expect(locationSpy).not.toHaveBeenCalled(); + expect(visitUrl).not.toHaveBeenCalled(); }); }); diff --git a/spec/javascripts/shortcuts_issuable_spec.js b/spec/javascripts/shortcuts_issuable_spec.js index b0d714cbefb..d73608ed0ed 100644 --- a/spec/javascripts/shortcuts_issuable_spec.js +++ b/spec/javascripts/shortcuts_issuable_spec.js @@ -4,7 +4,7 @@ import ShortcutsIssuable from '~/shortcuts_issuable'; initCopyAsGFM(); -describe('ShortcutsIssuable', () => { +describe('ShortcutsIssuable', function () { const fixtureName = 'merge_requests/diff_comment.html.raw'; preloadFixtures(fixtureName); beforeEach(() => { diff --git a/spec/javascripts/sidebar/sidebar_mediator_spec.js b/spec/javascripts/sidebar/sidebar_mediator_spec.js index afa18cc127e..da950258a94 100644 --- a/spec/javascripts/sidebar/sidebar_mediator_spec.js +++ b/spec/javascripts/sidebar/sidebar_mediator_spec.js @@ -1,12 +1,11 @@ import _ from 'underscore'; import Vue from 'vue'; -import * as urlUtils from '~/lib/utils/url_utility'; import SidebarMediator from '~/sidebar/sidebar_mediator'; import SidebarStore from '~/sidebar/stores/sidebar_store'; import SidebarService from '~/sidebar/services/sidebar_service'; import Mock from './mock_data'; -describe('Sidebar mediator', () => { +describe('Sidebar mediator', function() { beforeEach(() => { Vue.http.interceptors.push(Mock.sidebarMockInterceptor); this.mediator = new SidebarMediator(Mock.mediator); @@ -87,12 +86,12 @@ describe('Sidebar mediator', () => { const moveToProjectId = 7; this.mediator.store.setMoveToProjectId(moveToProjectId); spyOn(this.mediator.service, 'moveIssue').and.callThrough(); - spyOn(urlUtils, 'visitUrl'); + const visitUrl = spyOnDependency(SidebarMediator, 'visitUrl'); this.mediator.moveIssue() .then(() => { expect(this.mediator.service.moveIssue).toHaveBeenCalledWith(moveToProjectId); - expect(urlUtils.visitUrl).toHaveBeenCalledWith('/root/some-project/issues/5'); + expect(visitUrl).toHaveBeenCalledWith('/root/some-project/issues/5'); }) .then(done) .catch(done.fail); diff --git a/spec/javascripts/sidebar/sidebar_move_issue_spec.js b/spec/javascripts/sidebar/sidebar_move_issue_spec.js index d8e636cbdf0..a3fb965fbab 100644 --- a/spec/javascripts/sidebar/sidebar_move_issue_spec.js +++ b/spec/javascripts/sidebar/sidebar_move_issue_spec.js @@ -7,7 +7,7 @@ import SidebarService from '~/sidebar/services/sidebar_service'; import SidebarMoveIssue from '~/sidebar/lib/sidebar_move_issue'; import Mock from './mock_data'; -describe('SidebarMoveIssue', () => { +describe('SidebarMoveIssue', function () { beforeEach(() => { Vue.http.interceptors.push(Mock.sidebarMockInterceptor); this.mediator = new SidebarMediator(Mock.mediator); diff --git a/spec/javascripts/sidebar/sidebar_store_spec.js b/spec/javascripts/sidebar/sidebar_store_spec.js index 3591f96ff87..08b112a54ba 100644 --- a/spec/javascripts/sidebar/sidebar_store_spec.js +++ b/spec/javascripts/sidebar/sidebar_store_spec.js @@ -31,7 +31,7 @@ const PARTICIPANT_LIST = [ { ...PARTICIPANT, id: 3 }, ]; -describe('Sidebar store', () => { +describe('Sidebar store', function () { beforeEach(() => { this.store = new SidebarStore({ currentUser: { diff --git a/spec/javascripts/test_bundle.js b/spec/javascripts/test_bundle.js index 14bff05e537..bcd15f5eae2 100644 --- a/spec/javascripts/test_bundle.js +++ b/spec/javascripts/test_bundle.js @@ -1,4 +1,5 @@ -/* eslint-disable jasmine/no-global-setup */ +/* eslint-disable jasmine/no-global-setup, jasmine/no-unsafe-spy, no-underscore-dangle */ + import $ from 'jquery'; import 'vendor/jasmine-jquery'; import '~/commons'; @@ -55,6 +56,17 @@ window.addEventListener('unhandledrejection', event => { console.error(event.reason.stack || event.reason); }); +// Add global function to spy on a module's dependencies via rewire +window.spyOnDependency = (module, name) => { + const dependency = module.__GetDependency__(name); + const spy = jasmine.createSpy(name, dependency); + module.__Rewire__(name, spy); + return spy; +}; + +// Reset any rewired modules after each test (see babel-plugin-rewire) +afterEach(__rewire_reset_all__); // eslint-disable-line + // HACK: Chrome 59 disconnects if there are too many synchronous tests in a row // because it appears to lock up the thread that communicates to Karma's socket // This async beforeEach gets called on every spec and releases the JS thread long diff --git a/spec/javascripts/todos_spec.js b/spec/javascripts/todos_spec.js index 898bbb3819b..e74f4bdef7e 100644 --- a/spec/javascripts/todos_spec.js +++ b/spec/javascripts/todos_spec.js @@ -1,5 +1,4 @@ import $ from 'jquery'; -import * as urlUtils from '~/lib/utils/url_utility'; import Todos from '~/pages/dashboard/todos/index/todos'; import '~/lib/utils/common_utils'; @@ -18,7 +17,7 @@ describe('Todos', () => { it('opens the todo url', (done) => { const todoLink = todoItem.dataset.url; - spyOn(urlUtils, 'visitUrl').and.callFake((url) => { + spyOnDependency(Todos, 'visitUrl').and.callFake((url) => { expect(url).toEqual(todoLink); done(); }); @@ -33,7 +32,7 @@ describe('Todos', () => { beforeEach(() => { metakeyEvent = $.Event('click', { keyCode: 91, ctrlKey: true }); - visitUrlSpy = spyOn(urlUtils, 'visitUrl').and.callFake(() => {}); + visitUrlSpy = spyOnDependency(Todos, 'visitUrl').and.callFake(() => {}); windowOpenSpy = spyOn(window, 'open').and.callFake(() => {}); }); diff --git a/spec/javascripts/u2f/authenticate_spec.js b/spec/javascripts/u2f/authenticate_spec.js index 39c47a5c06d..d84b13b07c4 100644 --- a/spec/javascripts/u2f/authenticate_spec.js +++ b/spec/javascripts/u2f/authenticate_spec.js @@ -3,7 +3,7 @@ import U2FAuthenticate from '~/u2f/authenticate'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; -describe('U2FAuthenticate', () => { +describe('U2FAuthenticate', function () { preloadFixtures('u2f/authenticate.html.raw'); beforeEach((done) => { diff --git a/spec/javascripts/u2f/register_spec.js b/spec/javascripts/u2f/register_spec.js index 136b4cad737..d9383314891 100644 --- a/spec/javascripts/u2f/register_spec.js +++ b/spec/javascripts/u2f/register_spec.js @@ -3,7 +3,7 @@ import U2FRegister from '~/u2f/register'; import 'vendor/u2f'; import MockU2FDevice from './mock_u2f_device'; -describe('U2FRegister', () => { +describe('U2FRegister', function () { preloadFixtures('u2f/register.html.raw'); beforeEach((done) => { diff --git a/spec/javascripts/vue_mr_widget/components/deployment_spec.js b/spec/javascripts/vue_mr_widget/components/deployment_spec.js index ff8d54c029f..c82ba61a5b1 100644 --- a/spec/javascripts/vue_mr_widget/components/deployment_spec.js +++ b/spec/javascripts/vue_mr_widget/components/deployment_spec.js @@ -1,5 +1,4 @@ import Vue from 'vue'; -import * as urlUtils from '~/lib/utils/url_utility'; import deploymentComponent from '~/vue_merge_request_widget/components/deployment.vue'; import MRWidgetService from '~/vue_merge_request_widget/services/mr_widget_service'; import { getTimeago } from '~/lib/utils/datetime_utility'; @@ -117,13 +116,13 @@ describe('Deployment component', () => { it('should show a confirm dialog and call service.stopEnvironment when confirmed', (done) => { spyOn(window, 'confirm').and.returnValue(true); spyOn(MRWidgetService, 'stopEnvironment').and.returnValue(returnPromise(true)); - spyOn(urlUtils, 'visitUrl').and.returnValue(true); + const visitUrl = spyOnDependency(deploymentComponent, 'visitUrl').and.returnValue(true); vm = mockStopEnvironment(); expect(window.confirm).toHaveBeenCalled(); expect(MRWidgetService.stopEnvironment).toHaveBeenCalledWith(deploymentMockData.stop_url); setTimeout(() => { - expect(urlUtils.visitUrl).toHaveBeenCalledWith(url); + expect(visitUrl).toHaveBeenCalledWith(url); done(); }, 333); }); diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js index 300b7882d03..81c16593eb4 100644 --- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js +++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js @@ -1,7 +1,6 @@ import Vue from 'vue'; import ReadyToMerge from '~/vue_merge_request_widget/components/states/ready_to_merge.vue'; import eventHub from '~/vue_merge_request_widget/event_hub'; -import * as simplePoll from '~/lib/utils/simple_poll'; const commitMessage = 'This is the commit message'; const commitMessageWithDescription = 'This is the commit message description'; @@ -355,9 +354,9 @@ describe('ReadyToMerge', () => { describe('initiateMergePolling', () => { it('should call simplePoll', () => { - spyOn(simplePoll, 'default'); + const simplePoll = spyOnDependency(ReadyToMerge, 'simplePoll'); vm.initiateMergePolling(); - expect(simplePoll.default).toHaveBeenCalled(); + expect(simplePoll).toHaveBeenCalled(); }); }); @@ -457,11 +456,11 @@ describe('ReadyToMerge', () => { describe('initiateRemoveSourceBranchPolling', () => { it('should emit event and call simplePoll', () => { spyOn(eventHub, '$emit'); - spyOn(simplePoll, 'default'); + const simplePoll = spyOnDependency(ReadyToMerge, 'simplePoll'); vm.initiateRemoveSourceBranchPolling(); expect(eventHub.$emit).toHaveBeenCalledWith('SetBranchRemoveFlag', [true]); - expect(simplePoll.default).toHaveBeenCalled(); + expect(simplePoll).toHaveBeenCalled(); }); }); @@ -524,18 +523,20 @@ describe('ReadyToMerge', () => { }); describe('when user can merge and can delete branch', () => { + let customVm; + beforeEach(() => { - this.customVm = createComponent({ + customVm = createComponent({ mr: { canRemoveSourceBranch: true }, }); }); it('isRemoveSourceBranchButtonDisabled should be false', () => { - expect(this.customVm.isRemoveSourceBranchButtonDisabled).toBe(false); + expect(customVm.isRemoveSourceBranchButtonDisabled).toBe(false); }); it('should be enabled in rendered output', () => { - const checkboxElement = this.customVm.$el.querySelector('#remove-source-branch-input'); + const checkboxElement = customVm.$el.querySelector('#remove-source-branch-input'); expect(checkboxElement).not.toBeNull(); }); }); diff --git a/spec/javascripts/vue_shared/components/ci_icon_spec.js b/spec/javascripts/vue_shared/components/ci_icon_spec.js index d8664408595..423bc746a22 100644 --- a/spec/javascripts/vue_shared/components/ci_icon_spec.js +++ b/spec/javascripts/vue_shared/components/ci_icon_spec.js @@ -1,139 +1,122 @@ import Vue from 'vue'; import ciIcon from '~/vue_shared/components/ci_icon.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('CI Icon component', () => { - let CiIcon; - beforeEach(() => { - CiIcon = Vue.extend(ciIcon); + const Component = Vue.extend(ciIcon); + let vm; + + afterEach(() => { + vm.$destroy(); }); it('should render a span element with an svg', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_success', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_success', }, - }).$mount(); + }); - expect(component.$el.tagName).toEqual('SPAN'); - expect(component.$el.querySelector('span > svg')).toBeDefined(); + expect(vm.$el.tagName).toEqual('SPAN'); + expect(vm.$el.querySelector('span > svg')).toBeDefined(); }); it('should render a success status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_success', - group: 'success', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_success', + group: 'success', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-success')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-success')).toEqual(true); }); it('should render a failed status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_failed', - group: 'failed', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_failed', + group: 'failed', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-failed')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-failed')).toEqual(true); }); it('should render success with warnings status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_warning', - group: 'warning', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_warning', + group: 'warning', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-warning')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-warning')).toEqual(true); }); it('should render pending status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_pending', - group: 'pending', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_pending', + group: 'pending', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-pending')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-pending')).toEqual(true); }); it('should render running status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_running', - group: 'running', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_running', + group: 'running', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-running')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-running')).toEqual(true); }); it('should render created status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_created', - group: 'created', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_created', + group: 'created', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-created')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-created')).toEqual(true); }); it('should render skipped status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_skipped', - group: 'skipped', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_skipped', + group: 'skipped', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-skipped')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-skipped')).toEqual(true); }); it('should render canceled status', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_canceled', - group: 'canceled', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_canceled', + group: 'canceled', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-canceled')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-canceled')).toEqual(true); }); it('should render status for manual action', () => { - const component = new CiIcon({ - propsData: { - status: { - icon: 'icon_status_manual', - group: 'manual', - }, + vm = mountComponent(Component, { + status: { + icon: 'icon_status_manual', + group: 'manual', }, - }).$mount(); + }); - expect(component.$el.classList.contains('ci-status-icon-manual')).toEqual(true); + expect(vm.$el.classList.contains('ci-status-icon-manual')).toEqual(true); }); }); diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js index f598b1afa74..97f0fbb04db 100644 --- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js +++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js @@ -3,10 +3,10 @@ import clipboardButton from '~/vue_shared/components/clipboard_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('clipboard button', () => { + const Component = Vue.extend(clipboardButton); let vm; beforeEach(() => { - const Component = Vue.extend(clipboardButton); vm = mountComponent(Component, { text: 'copy me', title: 'Copy this value into Clipboard!', diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index ed66361bfc3..7189e8cfcfa 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -55,7 +55,6 @@ describe('Commit component', () => { path: '/jschatz1', username: 'jschatz1', }, - commitIconSvg: '<svg></svg>', }; component = mountComponent(CommitComponent, props); @@ -82,8 +81,10 @@ describe('Commit component', () => { expect(component.$el.querySelector('.commit-sha').textContent).toContain(props.shortSha); }); - it('should render the given commitIconSvg', () => { - expect(component.$el.querySelector('.js-commit-icon').children).toContain('svg'); + it('should render icon for commit', () => { + expect( + component.$el.querySelector('.js-commit-icon use').getAttribute('xlink:href'), + ).toContain('commit'); }); describe('Given commit title and author props', () => { diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js index f19589d3b75..af9693c48fd 100644 --- a/spec/javascripts/vue_shared/components/expand_button_spec.js +++ b/spec/javascripts/vue_shared/components/expand_button_spec.js @@ -3,10 +3,10 @@ import expandButton from '~/vue_shared/components/expand_button.vue'; import mountComponent from 'spec/helpers/vue_mount_component_helper'; describe('expand button', () => { + const Component = Vue.extend(expandButton); let vm; beforeEach(() => { - const Component = Vue.extend(expandButton); vm = mountComponent(Component, { slots: { expanded: '<p>Expanded!</p>', @@ -22,7 +22,7 @@ describe('expand button', () => { expect(vm.$el.textContent.trim()).toEqual('...'); }); - it('hides expander on click', (done) => { + it('hides expander on click', done => { vm.$el.querySelector('button').click(); vm.$nextTick(() => { expect(vm.$el.querySelector('button').getAttribute('style')).toEqual('display: none;'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js index 6fe95153204..e8685ab48be 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js @@ -73,6 +73,22 @@ describe('BaseComponent', () => { expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); }); }); + + describe('handleCollapsedValueClick', () => { + it('emits toggleCollapse event on component', () => { + spyOn(vm, '$emit'); + vm.handleCollapsedValueClick(); + expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); + }); + }); + + describe('handleDropdownHidden', () => { + it('emits onDropdownClose event on component', () => { + spyOn(vm, '$emit'); + vm.handleDropdownHidden(); + expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); + }); + }); }); describe('mounted', () => { diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js index 39040670a87..da74595bcdc 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -56,6 +56,16 @@ describe('DropdownValueCollapsedComponent', () => { }); }); + describe('methods', () => { + describe('handleClick', () => { + it('emits onValueClick event on component', () => { + spyOn(vm, '$emit'); + vm.handleClick(); + expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); + }); + }); + }); + describe('template', () => { it('renders component container element with tooltip`', () => { expect(vm.$el.dataset.placement).toBe('left'); |