diff options
Diffstat (limited to 'spec/javascripts')
48 files changed, 2989 insertions, 588 deletions
diff --git a/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js new file mode 100644 index 00000000000..3305ddc412d --- /dev/null +++ b/spec/javascripts/behaviors/markdown/highlight_current_user_spec.js @@ -0,0 +1,55 @@ +import highlightCurrentUser from '~/behaviors/markdown/highlight_current_user'; + +describe('highlightCurrentUser', () => { + let rootElement; + let elements; + + beforeEach(() => { + setFixtures(` + <div id="dummy-root-element"> + <div data-user="1">@first</div> + <div data-user="2">@second</div> + </div> + `); + rootElement = document.getElementById('dummy-root-element'); + elements = rootElement.querySelectorAll('[data-user]'); + }); + + describe('without current user', () => { + beforeEach(() => { + window.gon = window.gon || {}; + window.gon.current_user_id = null; + }); + + afterEach(() => { + delete window.gon.current_user_id; + }); + + it('does not highlight the user', () => { + const initialHtml = rootElement.outerHTML; + + highlightCurrentUser(elements); + + expect(rootElement.outerHTML).toBe(initialHtml); + }); + }); + + describe('with current user', () => { + beforeEach(() => { + window.gon = window.gon || {}; + window.gon.current_user_id = 2; + }); + + afterEach(() => { + delete window.gon.current_user_id; + }); + + it('highlights current user', () => { + highlightCurrentUser(elements); + + expect(elements.length).toBe(2); + expect(elements[0]).not.toHaveClass('current-user'); + expect(elements[1]).toHaveClass('current-user'); + }); + }); +}); diff --git a/spec/javascripts/boards/board_new_issue_spec.js b/spec/javascripts/boards/board_new_issue_spec.js index ee37821ad08..1245e3e099a 100644 --- a/spec/javascripts/boards/board_new_issue_spec.js +++ b/spec/javascripts/boards/board_new_issue_spec.js @@ -69,7 +69,6 @@ describe('Issue boards new issue form', () => { vm.$el.querySelector('.btn-success').click(); expect(vm.submit.calls.count()).toBe(1); - expect(vm.$refs['submit-button']).toBe(vm.$el.querySelector('.btn-success')); }) .then(done) .catch(done.fail); diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js index cf7d8df5405..a3a714678af 100644 --- a/spec/javascripts/diffs/components/app_spec.js +++ b/spec/javascripts/diffs/components/app_spec.js @@ -44,7 +44,8 @@ describe('diffs/components/app', () => { it('shows comments message, with commit', done => { vm.$store.state.diffs.commit = getDiffWithCommit().commit; - vm.$nextTick() + vm + .$nextTick() .then(() => { expect(vm.$el).toContainText('Only comments from the following commit are shown below'); expect(vm.$el).toContainElement('.blob-commit-info'); @@ -55,10 +56,14 @@ describe('diffs/components/app', () => { it('shows comments message, with old mergeRequestDiff', done => { vm.$store.state.diffs.mergeRequestDiff = { latest: false }; + vm.$store.state.diffs.targetBranch = 'master'; - vm.$nextTick() + vm + .$nextTick() .then(() => { - expect(vm.$el).toContainText("Not all comments are displayed because you're viewing an old version of the diff."); + expect(vm.$el).toContainText( + "Not all comments are displayed because you're viewing an old version of the diff.", + ); }) .then(done) .catch(done.fail); @@ -67,9 +72,12 @@ describe('diffs/components/app', () => { it('shows comments message, with startVersion', done => { vm.$store.state.diffs.startVersion = 'test'; - vm.$nextTick() + vm + .$nextTick() .then(() => { - expect(vm.$el).toContainText("Not all comments are displayed because you're comparing two versions of the diff."); + expect(vm.$el).toContainText( + "Not all comments are displayed because you're comparing two versions of the diff.", + ); }) .then(done) .catch(done.fail); diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js deleted file mode 100644 index 7f21273a991..00000000000 --- a/spec/javascripts/diffs/components/changed_files_spec.js +++ /dev/null @@ -1,105 +0,0 @@ -import Vue from 'vue'; -import Vuex from 'vuex'; -import { mountComponentWithStore } from 'spec/helpers'; -import diffsModule from '~/diffs/store/modules'; -import changedFiles from '~/diffs/components/changed_files.vue'; - -describe('ChangedFiles', () => { - const Component = Vue.extend(changedFiles); - const store = new Vuex.Store({ - modules: { - diffs: diffsModule(), - }, - }); - - let vm; - - beforeEach(() => { - setFixtures(` - <div id="dummy-element"></div> - <div class="js-tabs-affix"></div> - `); - - const props = { - diffFiles: [ - { - addedLines: 10, - removedLines: 20, - blob: { - path: 'some/code.txt', - }, - filePath: 'some/code.txt', - }, - ], - }; - - vm = mountComponentWithStore(Component, { props, store }); - }); - - describe('with single file added', () => { - it('shows files changes', () => { - expect(vm.$el).toContainText('1 changed file'); - }); - - it('shows file additions and deletions', () => { - expect(vm.$el).toContainText('10 additions'); - expect(vm.$el).toContainText('20 deletions'); - }); - }); - - describe('diff view mode buttons', () => { - let inlineButton; - let parallelButton; - - beforeEach(() => { - inlineButton = vm.$el.querySelector('.js-inline-diff-button'); - parallelButton = vm.$el.querySelector('.js-parallel-diff-button'); - }); - - it('should have Inline and Side-by-side buttons', () => { - expect(inlineButton).toBeDefined(); - expect(parallelButton).toBeDefined(); - }); - - it('should add active class to Inline button', done => { - vm.$store.state.diffs.diffViewType = 'inline'; - - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(true); - expect(parallelButton.classList.contains('active')).toEqual(false); - - done(); - }); - }); - - it('should toggle active state of buttons when diff view type changed', done => { - vm.$store.state.diffs.diffViewType = 'parallel'; - - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(false); - expect(parallelButton.classList.contains('active')).toEqual(true); - - done(); - }); - }); - - describe('clicking them', () => { - it('should toggle the diff view type', done => { - parallelButton.click(); - - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(false); - expect(parallelButton.classList.contains('active')).toEqual(true); - - inlineButton.click(); - - vm.$nextTick(() => { - expect(inlineButton.classList.contains('active')).toEqual(true); - expect(parallelButton.classList.contains('active')).toEqual(false); - done(); - }); - }); - }); - }); - }); -}); diff --git a/spec/javascripts/diffs/components/commit_item_spec.js b/spec/javascripts/diffs/components/commit_item_spec.js index 627fb8c490a..8c3376c0eb3 100644 --- a/spec/javascripts/diffs/components/commit_item_spec.js +++ b/spec/javascripts/diffs/components/commit_item_spec.js @@ -9,6 +9,8 @@ import getDiffWithCommit from '../mock_data/diff_with_commit'; const TEST_AUTHOR_NAME = 'test'; const TEST_AUTHOR_EMAIL = 'test+test@gitlab.com'; const TEST_AUTHOR_GRAVATAR = `${TEST_HOST}/avatar/test?s=36`; +const TEST_SIGNATURE_HTML = '<a>Legit commit</a>'; +const TEST_PIPELINE_STATUS_PATH = `${TEST_HOST}/pipeline/status`; const getTitleElement = vm => vm.$el.querySelector('.commit-row-message.item-title'); const getDescElement = vm => vm.$el.querySelector('pre.commit-row-description'); @@ -16,6 +18,7 @@ const getDescExpandElement = vm => vm.$el.querySelector('.commit-content .text-e const getShaElement = vm => vm.$el.querySelector('.commit-sha-group'); const getAvatarElement = vm => vm.$el.querySelector('.user-avatar-link'); const getCommitterElement = vm => vm.$el.querySelector('.commiter'); +const getCommitActionsElement = vm => vm.$el.querySelector('.commit-actions'); describe('diffs/components/commit_widget', () => { const Component = Vue.extend(CommitItem); @@ -125,4 +128,36 @@ describe('diffs/components/commit_widget', () => { expect(nameElement).toHaveText(TEST_AUTHOR_NAME); }); }); + + describe('with signature', () => { + beforeEach(done => { + vm.commit.signatureHtml = TEST_SIGNATURE_HTML; + + vm.$nextTick() + .then(done) + .catch(done.fail); + }); + + it('renders signature html', () => { + const actionsElement = getCommitActionsElement(vm); + + expect(actionsElement).toContainHtml(TEST_SIGNATURE_HTML); + }); + }); + + describe('with pipeline status', () => { + beforeEach(done => { + vm.commit.pipelineStatusPath = TEST_PIPELINE_STATUS_PATH; + + vm.$nextTick() + .then(done) + .catch(done.fail); + }); + + it('renders pipeline status', () => { + const actionsElement = getCommitActionsElement(vm); + + expect(actionsElement).toContainElement('.ci-status-link'); + }); + }); }); diff --git a/spec/javascripts/diffs/components/file_row_stats_spec.js b/spec/javascripts/diffs/components/file_row_stats_spec.js new file mode 100644 index 00000000000..a8a7f3f1d82 --- /dev/null +++ b/spec/javascripts/diffs/components/file_row_stats_spec.js @@ -0,0 +1,33 @@ +import Vue from 'vue'; +import FileRowStats from '~/diffs/components/file_row_stats.vue'; +import mountComponent from 'spec/helpers/vue_mount_component_helper'; + +describe('Diff file row stats', () => { + let Component; + let vm; + + beforeAll(() => { + Component = Vue.extend(FileRowStats); + }); + + beforeEach(() => { + vm = mountComponent(Component, { + file: { + addedLines: 20, + removedLines: 10, + }, + }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders added lines count', () => { + expect(vm.$el.querySelector('.cgreen').textContent).toContain('+20'); + }); + + it('renders removed lines count', () => { + expect(vm.$el.querySelector('.cred').textContent).toContain('-10'); + }); +}); diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js new file mode 100644 index 00000000000..08e25d2004e --- /dev/null +++ b/spec/javascripts/diffs/components/tree_list_spec.js @@ -0,0 +1,120 @@ +import Vue from 'vue'; +import Vuex from 'vuex'; +import TreeList from '~/diffs/components/tree_list.vue'; +import createStore from '~/diffs/store/modules'; +import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; + +describe('Diffs tree list component', () => { + let Component; + let vm; + + beforeAll(() => { + Component = Vue.extend(TreeList); + }); + + beforeEach(() => { + Vue.use(Vuex); + + const store = new Vuex.Store({ + modules: { + diffs: createStore(), + }, + }); + + // Setup initial state + store.state.diffs.addedLines = 10; + store.state.diffs.removedLines = 20; + store.state.diffs.diffFiles.push('test'); + + vm = mountComponentWithStore(Component, { store }); + }); + + afterEach(() => { + vm.$destroy(); + }); + + it('renders diff stats', () => { + expect(vm.$el.textContent).toContain('1 changed file'); + expect(vm.$el.textContent).toContain('10 additions'); + expect(vm.$el.textContent).toContain('20 deletions'); + }); + + it('renders empty text', () => { + expect(vm.$el.textContent).toContain('No files found'); + }); + + describe('with files', () => { + beforeEach(done => { + Object.assign(vm.$store.state.diffs.treeEntries, { + 'index.js': { + addedLines: 0, + changed: true, + deleted: false, + fileHash: 'test', + key: 'index.js', + name: 'index.js', + path: 'index.js', + removedLines: 0, + tempFile: true, + type: 'blob', + }, + app: { + key: 'app', + path: 'app', + name: 'app', + type: 'tree', + tree: [], + }, + }); + vm.$store.state.diffs.tree = [ + vm.$store.state.diffs.treeEntries['index.js'], + vm.$store.state.diffs.treeEntries.app, + ]; + + vm.$nextTick(done); + }); + + it('renders tree', () => { + expect(vm.$el.querySelectorAll('.file-row').length).toBe(2); + expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js'); + expect(vm.$el.querySelectorAll('.file-row')[1].textContent).toContain('app'); + }); + + it('filters tree list to blobs matching search', done => { + vm.search = 'index'; + + vm.$nextTick(() => { + expect(vm.$el.querySelectorAll('.file-row').length).toBe(1); + expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js'); + + done(); + }); + }); + + it('calls toggleTreeOpen when clicking folder', () => { + spyOn(vm.$store, 'dispatch').and.stub(); + + vm.$el.querySelectorAll('.file-row')[1].click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app'); + }); + + it('calls scrollToFile when clicking blob', () => { + spyOn(vm.$store, 'dispatch').and.stub(); + + vm.$el.querySelector('.file-row').click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js'); + }); + }); + + describe('clearSearch', () => { + it('resets search', () => { + vm.search = 'test'; + + vm.$el.querySelector('.tree-list-clear-icon').click(); + + expect(vm.search).toBe(''); + }); + }); +}); diff --git a/spec/javascripts/diffs/mock_data/diff_discussions.js b/spec/javascripts/diffs/mock_data/diff_discussions.js index b29a22da7c2..0ad214ea4a4 100644 --- a/spec/javascripts/diffs/mock_data/diff_discussions.js +++ b/spec/javascripts/diffs/mock_data/diff_discussions.js @@ -2,15 +2,13 @@ export default { id: '6b232e05bea388c6b043ccc243ba505faac04ea8', reply_id: '6b232e05bea388c6b043ccc243ba505faac04ea8', position: { - formatter: { - old_line: null, - new_line: 2, - old_path: 'CHANGELOG', - new_path: 'CHANGELOG', - base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a', - start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962', - head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', - }, + old_line: null, + new_line: 2, + old_path: 'CHANGELOG', + new_path: 'CHANGELOG', + base_sha: 'e63f41fe459e62e1228fcef60d7189127aeba95a', + start_sha: 'd9eaefe5a676b820c57ff18cf5b68316025f7962', + head_sha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', }, line_code: '1c497fbb3a46b78edf04cc2a2fa33f67e3ffbe2a_1_2', expanded: true, diff --git a/spec/javascripts/diffs/mock_data/diff_file.js b/spec/javascripts/diffs/mock_data/diff_file.js index 372b8f066cf..2aa2f8f3528 100644 --- a/spec/javascripts/diffs/mock_data/diff_file.js +++ b/spec/javascripts/diffs/mock_data/diff_file.js @@ -33,7 +33,7 @@ export default { contentSha: 'c48ee0d1bf3b30453f5b32250ce03134beaa6d13', storedExternally: null, externalStorage: null, - oldPathHtml: ['CHANGELOG', 'CHANGELOG'], + oldPathHtml: 'CHANGELOG', newPathHtml: 'CHANGELOG', editPath: '/gitlab-org/gitlab-test/edit/spooky-stuff/CHANGELOG', viewPath: '/gitlab-org/gitlab-test/blob/spooky-stuff/CHANGELOG', diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js index 05b39bad6ea..85c1926fcb1 100644 --- a/spec/javascripts/diffs/store/actions_spec.js +++ b/spec/javascripts/diffs/store/actions_spec.js @@ -22,6 +22,9 @@ import actions, { expandAllFiles, toggleFileDiscussions, saveDiffDiscussion, + toggleTreeOpen, + scrollToFile, + toggleShowTreeList, } from '~/diffs/store/actions'; import * as types from '~/diffs/store/mutation_types'; import { reduceDiscussionsToLineCodes } from '~/notes/stores/utils'; @@ -145,12 +148,8 @@ describe('DiffsStoreActions', () => { }, fileHash: 'ABC', resolvable: true, - position: { - formatter: diffPosition, - }, - original_position: { - formatter: diffPosition, - }, + position: diffPosition, + original_position: diffPosition, }; const discussions = reduceDiscussionsToLineCodes([singleDiscussion]); @@ -175,6 +174,7 @@ describe('DiffsStoreActions', () => { oldLine: 5, oldPath: 'file2', lineCode: 'ABC_1_1', + positionType: 'text', }, }, }, @@ -608,4 +608,88 @@ describe('DiffsStoreActions', () => { .catch(done.fail); }); }); + + describe('toggleTreeOpen', () => { + it('commits TOGGLE_FOLDER_OPEN', done => { + testAction( + toggleTreeOpen, + 'path', + {}, + [{ type: types.TOGGLE_FOLDER_OPEN, payload: 'path' }], + [], + done, + ); + }); + }); + + describe('scrollToFile', () => { + let commit; + + beforeEach(() => { + commit = jasmine.createSpy(); + jasmine.clock().install(); + }); + + afterEach(() => { + jasmine.clock().uninstall(); + }); + + it('updates location hash', () => { + const state = { + treeEntries: { + path: { + fileHash: 'test', + }, + }, + }; + + scrollToFile({ state, commit }, 'path'); + + expect(document.location.hash).toBe('#test'); + }); + + it('commits UPDATE_CURRENT_DIFF_FILE_ID', () => { + const state = { + treeEntries: { + path: { + fileHash: 'test', + }, + }, + }; + + scrollToFile({ state, commit }, 'path'); + + expect(commit).toHaveBeenCalledWith(types.UPDATE_CURRENT_DIFF_FILE_ID, 'test'); + }); + + it('resets currentDiffId after timeout', () => { + const state = { + treeEntries: { + path: { + fileHash: 'test', + }, + }, + }; + + scrollToFile({ state, commit }, 'path'); + + jasmine.clock().tick(1000); + + expect(commit.calls.argsFor(1)).toEqual([types.UPDATE_CURRENT_DIFF_FILE_ID, '']); + }); + }); + + describe('toggleShowTreeList', () => { + it('commits toggle', done => { + testAction(toggleShowTreeList, null, {}, [{ type: types.TOGGLE_SHOW_TREE_LIST }], [], done); + }); + + it('updates localStorage', () => { + spyOn(localStorage, 'setItem'); + + toggleShowTreeList({ commit() {}, state: { showTreeList: true } }); + + expect(localStorage.setItem).toHaveBeenCalledWith('mr_tree_show', true); + }); + }); }); diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js index 4747e437c4e..cfeaaec6980 100644 --- a/spec/javascripts/diffs/store/getters_spec.js +++ b/spec/javascripts/diffs/store/getters_spec.js @@ -291,4 +291,31 @@ describe('Diffs Module Getters', () => { expect(getters.getDiffFileByHash(localState)('123')).toBeUndefined(); }); }); + + describe('allBlobs', () => { + it('returns an array of blobs', () => { + localState.treeEntries = { + file: { + type: 'blob', + }, + tree: { + type: 'tree', + }, + }; + + expect(getters.allBlobs(localState)).toEqual([ + { + type: 'blob', + }, + ]); + }); + }); + + describe('diffFilesLength', () => { + it('returns length of diff files', () => { + localState.diffFiles.push('test', 'test 2'); + + expect(getters.diffFilesLength(localState)).toBe(2); + }); + }); }); diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js index 9a5d8dfbd15..0b712055956 100644 --- a/spec/javascripts/diffs/store/mutations_spec.js +++ b/spec/javascripts/diffs/store/mutations_spec.js @@ -1,3 +1,4 @@ +import createState from '~/diffs/store/modules/diff_state'; import mutations from '~/diffs/store/mutations'; import * as types from '~/diffs/store/mutation_types'; import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants'; @@ -193,24 +194,16 @@ describe('DiffsStoreMutations', () => { line_code: 'ABC_1', diff_discussion: true, resolvable: true, - original_position: { - formatter: diffPosition, - }, - position: { - formatter: diffPosition, - }, + original_position: diffPosition, + position: diffPosition, }, { id: 2, line_code: 'ABC_1', diff_discussion: true, resolvable: true, - original_position: { - formatter: diffPosition, - }, - position: { - formatter: diffPosition, - }, + original_position: diffPosition, + position: diffPosition, }, ]; @@ -356,4 +349,44 @@ describe('DiffsStoreMutations', () => { expect(state.diffFiles[0].highlightedDiffLines[0].discussions.length).toEqual(0); }); }); + + describe('TOGGLE_FOLDER_OPEN', () => { + it('toggles entry opened prop', () => { + const state = { + treeEntries: { + path: { + opened: false, + }, + }, + }; + + mutations[types.TOGGLE_FOLDER_OPEN](state, 'path'); + + expect(state.treeEntries.path.opened).toBe(true); + }); + }); + + describe('TOGGLE_SHOW_TREE_LIST', () => { + it('toggles showTreeList', () => { + const state = createState(); + + mutations[types.TOGGLE_SHOW_TREE_LIST](state); + + expect(state.showTreeList).toBe(false, 'Failed to toggle showTreeList to false'); + + mutations[types.TOGGLE_SHOW_TREE_LIST](state); + + expect(state.showTreeList).toBe(true, 'Failed to toggle showTreeList to true'); + }); + }); + + describe('UPDATE_CURRENT_DIFF_FILE_ID', () => { + it('updates currentDiffFileId', () => { + const state = createState(); + + mutations[types.UPDATE_CURRENT_DIFF_FILE_ID](state, 'somefileid'); + + expect(state.currentDiffFileId).toBe('somefileid'); + }); + }); }); diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js index 897cd1483aa..257270a91ec 100644 --- a/spec/javascripts/diffs/store/utils_spec.js +++ b/spec/javascripts/diffs/store/utils_spec.js @@ -333,20 +333,12 @@ describe('DiffsStoreUtils', () => { const discussions = { upToDateDiscussion1: { - original_position: { - formatter: diffPosition, - }, - position: { - formatter: wrongDiffPosition, - }, + original_position: diffPosition, + position: wrongDiffPosition, }, outDatedDiscussion1: { - original_position: { - formatter: wrongDiffPosition, - }, - position: { - formatter: wrongDiffPosition, - }, + original_position: wrongDiffPosition, + position: wrongDiffPosition, }, }; @@ -421,4 +413,113 @@ describe('DiffsStoreUtils', () => { ).toBe(false); }); }); + + describe('generateTreeList', () => { + let files; + + beforeAll(() => { + files = [ + { + newPath: 'app/index.js', + deletedFile: false, + newFile: false, + removedLines: 10, + addedLines: 0, + fileHash: 'test', + }, + { + newPath: 'app/test/index.js', + deletedFile: false, + newFile: true, + removedLines: 0, + addedLines: 0, + fileHash: 'test', + }, + { + newPath: 'package.json', + deletedFile: true, + newFile: false, + removedLines: 0, + addedLines: 0, + fileHash: 'test', + }, + ]; + }); + + it('creates a tree of files', () => { + const { tree } = utils.generateTreeList(files); + + expect(tree).toEqual([ + { + key: 'app', + path: 'app', + name: 'app', + type: 'tree', + tree: [ + { + addedLines: 0, + changed: true, + deleted: false, + fileHash: 'test', + key: 'app/index.js', + name: 'index.js', + path: 'app/index.js', + removedLines: 10, + tempFile: false, + type: 'blob', + tree: [], + }, + { + key: 'app/test', + path: 'app/test', + name: 'test', + type: 'tree', + opened: true, + tree: [ + { + addedLines: 0, + changed: true, + deleted: false, + fileHash: 'test', + key: 'app/test/index.js', + name: 'index.js', + path: 'app/test/index.js', + removedLines: 0, + tempFile: true, + type: 'blob', + tree: [], + }, + ], + }, + ], + opened: true, + }, + { + key: 'package.json', + path: 'package.json', + name: 'package.json', + type: 'blob', + changed: true, + tempFile: false, + deleted: true, + fileHash: 'test', + addedLines: 0, + removedLines: 0, + tree: [], + }, + ]); + }); + + it('creates flat list of blobs & folders', () => { + const { treeEntries } = utils.generateTreeList(files); + + expect(Object.keys(treeEntries)).toEqual([ + 'app', + 'app/index.js', + 'app/test', + 'app/test/index.js', + 'package.json', + ]); + }); + }); }); diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js index 8792e99d461..68bbbf838da 100644 --- a/spec/javascripts/filtered_search/dropdown_utils_spec.js +++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js @@ -288,13 +288,13 @@ describe('Dropdown Utils', () => { describe('setDataValueIfSelected', () => { beforeEach(() => { - spyOn(FilteredSearchDropdownManager, 'addWordToInput') - .and.callFake(() => {}); + spyOn(FilteredSearchDropdownManager, 'addWordToInput').and.callFake(() => {}); }); it('calls addWordToInput when dataValue exists', () => { const selected = { getAttribute: () => 'value', + hasAttribute: () => false, }; DropdownUtils.setDataValueIfSelected(null, selected); @@ -304,6 +304,7 @@ describe('Dropdown Utils', () => { it('returns true when dataValue exists', () => { const selected = { getAttribute: () => 'value', + hasAttribute: () => false, }; const result = DropdownUtils.setDataValueIfSelected(null, selected); diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js index 756a654765b..53a6d1d62b0 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -240,13 +240,17 @@ describe('Filtered Search Visual Tokens', () => { beforeEach(() => { setFixtures(` <div class="test-area"> - ${subject.createVisualTokenElementHTML()} + ${subject.createVisualTokenElementHTML('custom-token')} </div> `); tokenElement = document.querySelector('.test-area').firstElementChild; }); + it('should add class name to token element', () => { + expect(document.querySelector('.test-area .custom-token')).toBeDefined(); + }); + it('contains name div', () => { expect(tokenElement.querySelector('.name')).toEqual(jasmine.anything()); }); @@ -280,7 +284,7 @@ describe('Filtered Search Visual Tokens', () => { describe('addVisualTokenElement', () => { it('renders search visual tokens', () => { - subject.addVisualTokenElement('search term', null, true); + subject.addVisualTokenElement('search term', null, { isSearchTerm: true }); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-term')).toEqual(true); diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js index 60dabe28045..c93a939ad71 100644 --- a/spec/javascripts/ide/components/file_row_extra_spec.js +++ b/spec/javascripts/ide/components/file_row_extra_spec.js @@ -107,14 +107,14 @@ describe('IDE extra file row component', () => { describe('changes file icon', () => { it('hides when file is not changed', () => { - expect(vm.$el.querySelector('.ide-file-changed-icon')).toBe(null); + expect(vm.$el.querySelector('.file-changed-icon')).toBe(null); }); it('shows when file is changed', done => { vm.file.changed = true; vm.$nextTick(() => { - expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null); + expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null); done(); }); @@ -124,7 +124,7 @@ describe('IDE extra file row component', () => { vm.file.staged = true; vm.$nextTick(() => { - expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null); + expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null); done(); }); @@ -134,7 +134,7 @@ describe('IDE extra file row component', () => { vm.file.tempFile = true; vm.$nextTick(() => { - expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null); + expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null); done(); }); diff --git a/spec/javascripts/ide/components/ide_status_bar_spec.js b/spec/javascripts/ide/components/ide_status_bar_spec.js index 0e93c5193a1..47d6492a7a6 100644 --- a/spec/javascripts/ide/components/ide_status_bar_spec.js +++ b/spec/javascripts/ide/components/ide_status_bar_spec.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import store from '~/ide/stores'; import ideStatusBar from '~/ide/components/ide_status_bar.vue'; +import { rightSidebarViews } from '~/ide/constants'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import { resetStore } from '../helpers'; import { projectData } from '../mock_data'; @@ -64,7 +65,7 @@ describe('ideStatusBar', () => { describe('pipeline status', () => { it('opens right sidebar on clicking icon', done => { - spyOn(vm, 'setRightPane'); + spyOn(vm, 'openRightPane'); Vue.set(vm.$store.state.pipelines, 'latestPipeline', { details: { status: { @@ -80,7 +81,7 @@ describe('ideStatusBar', () => { .then(() => { vm.$el.querySelector('.ide-status-pipeline button').click(); - expect(vm.setRightPane).toHaveBeenCalledWith('pipelines-list'); + expect(vm.openRightPane).toHaveBeenCalledWith(rightSidebarViews.pipelines); }) .then(done) .catch(done.fail); diff --git a/spec/javascripts/ide/components/panes/right_spec.js b/spec/javascripts/ide/components/panes/right_spec.js index c75975d2af6..4899f850cf4 100644 --- a/spec/javascripts/ide/components/panes/right_spec.js +++ b/spec/javascripts/ide/components/panes/right_spec.js @@ -25,7 +25,8 @@ describe('IDE right pane', () => { describe('active', () => { it('renders merge request button as active', done => { - vm.$store.state.rightPane = rightSidebarViews.mergeRequestInfo; + vm.$store.state.rightPane.isOpen = true; + vm.$store.state.rightPane.currentView = rightSidebarViews.mergeRequestInfo.name; vm.$store.state.currentMergeRequestId = '123'; vm.$store.state.currentProjectId = 'gitlab-ce'; vm.$store.state.currentMergeRequestId = 1; @@ -41,20 +42,21 @@ describe('IDE right pane', () => { }, }; - vm.$nextTick(() => { - expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null); - expect( - vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'), - ).toBe('Merge Request'); - - done(); - }); + vm.$nextTick() + .then(() => { + expect(vm.$el.querySelector('.ide-sidebar-link.active')).not.toBe(null); + expect( + vm.$el.querySelector('.ide-sidebar-link.active').getAttribute('data-original-title'), + ).toBe('Merge Request'); + }) + .then(done) + .catch(done.fail); }); }); describe('click', () => { beforeEach(() => { - spyOn(vm, 'setRightPane'); + spyOn(vm, 'open'); }); it('sets view to merge request', done => { @@ -63,7 +65,7 @@ describe('IDE right pane', () => { vm.$nextTick(() => { vm.$el.querySelector('.ide-sidebar-link').click(); - expect(vm.setRightPane).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo); + expect(vm.open).toHaveBeenCalledWith(rightSidebarViews.mergeRequestInfo); done(); }); diff --git a/spec/javascripts/ide/components/repo_editor_spec.js b/spec/javascripts/ide/components/repo_editor_spec.js index 0e2e246defd..991fb750876 100644 --- a/spec/javascripts/ide/components/repo_editor_spec.js +++ b/spec/javascripts/ide/components/repo_editor_spec.js @@ -319,8 +319,8 @@ describe('RepoEditor', () => { }); }); - it('calls updateDimensions when rightPane is updated', done => { - vm.$store.state.rightPane = 'testing'; + it('calls updateDimensions when rightPane is opened', done => { + vm.$store.state.rightPane.isOpen = true; vm.$nextTick(() => { expect(vm.editor.updateDimensions).toHaveBeenCalled(); diff --git a/spec/javascripts/ide/components/repo_tab_spec.js b/spec/javascripts/ide/components/repo_tab_spec.js index 278a0753322..3b52f279bf2 100644 --- a/spec/javascripts/ide/components/repo_tab_spec.js +++ b/spec/javascripts/ide/components/repo_tab_spec.js @@ -93,13 +93,13 @@ describe('RepoTab', () => { Vue.nextTick() .then(() => { - expect(vm.$el.querySelector('.ide-file-modified')).toBeNull(); + expect(vm.$el.querySelector('.file-modified')).toBeNull(); vm.$el.dispatchEvent(new Event('mouseout')); }) .then(Vue.nextTick) .then(() => { - expect(vm.$el.querySelector('.ide-file-modified')).not.toBeNull(); + expect(vm.$el.querySelector('.file-modified')).not.toBeNull(); done(); }) diff --git a/spec/javascripts/ide/helpers.js b/spec/javascripts/ide/helpers.js index 3ce9c9fcda1..7e107747346 100644 --- a/spec/javascripts/ide/helpers.js +++ b/spec/javascripts/ide/helpers.js @@ -6,6 +6,7 @@ import mergeRequestsState from '~/ide/stores/modules/merge_requests/state'; import pipelinesState from '~/ide/stores/modules/pipelines/state'; import branchesState from '~/ide/stores/modules/branches/state'; import fileTemplatesState from '~/ide/stores/modules/file_templates/state'; +import paneState from '~/ide/stores/modules/pane/state'; export const resetStore = store => { const newState = { @@ -15,6 +16,7 @@ export const resetStore = store => { pipelines: pipelinesState(), branches: branchesState(), fileTemplates: fileTemplatesState(), + rightPane: paneState(), }; store.replaceState(newState); }; diff --git a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js index c29dd9f0d06..734233100ab 100644 --- a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js +++ b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js @@ -69,11 +69,17 @@ describe('IDE file templates actions', () => { describe('fetchTemplateTypes', () => { describe('success', () => { + let nextPage; + beforeEach(() => { - mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(200, [ - { - name: 'MIT', - }, + mock.onGet(/api\/(.*)\/templates\/licenses/).replyOnce(() => [ + 200, + [ + { + name: 'MIT', + }, + ], + { 'X-NEXT-PAGE': nextPage }, ]); }); @@ -116,6 +122,38 @@ describe('IDE file templates actions', () => { done, ); }); + + it('dispatches actions for next page', done => { + nextPage = '2'; + state.selectedTemplateType = { + key: 'licenses', + }; + + testAction( + actions.fetchTemplateTypes, + null, + state, + [], + [ + { + type: 'requestTemplateTypes', + }, + { + type: 'receiveTemplateTypesSuccess', + payload: [ + { + name: 'MIT', + }, + ], + }, + { + type: 'fetchTemplateTypes', + payload: 2, + }, + ], + done, + ); + }); }); describe('error', () => { diff --git a/spec/javascripts/ide/stores/modules/pane/actions_spec.js b/spec/javascripts/ide/stores/modules/pane/actions_spec.js new file mode 100644 index 00000000000..f150ded6df5 --- /dev/null +++ b/spec/javascripts/ide/stores/modules/pane/actions_spec.js @@ -0,0 +1,87 @@ +import * as actions from '~/ide/stores/modules/pane/actions'; +import * as types from '~/ide/stores/modules/pane/mutation_types'; +import testAction from 'spec/helpers/vuex_action_helper'; + +describe('IDE pane module actions', () => { + const TEST_VIEW = { name: 'test' }; + const TEST_VIEW_KEEP_ALIVE = { name: 'test-keep-alive', keepAlive: true }; + + describe('toggleOpen', () => { + it('dispatches open if closed', done => { + testAction( + actions.toggleOpen, + TEST_VIEW, + { isOpen: false }, + [], + [{ type: 'open', payload: TEST_VIEW }], + done, + ); + }); + + it('dispatches close if opened', done => { + testAction( + actions.toggleOpen, + TEST_VIEW, + { isOpen: true }, + [], + [{ type: 'close' }], + done, + ); + }); + }); + + describe('open', () => { + it('commits SET_OPEN', done => { + testAction( + actions.open, + null, + {}, + [{ type: types.SET_OPEN, payload: true }], + [], + done, + ); + }); + + it('commits SET_CURRENT_VIEW if view is given', done => { + testAction( + actions.open, + TEST_VIEW, + {}, + [ + { type: types.SET_OPEN, payload: true }, + { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW.name }, + ], + [], + done, + ); + }); + + it('commits KEEP_ALIVE_VIEW if keepAlive is true', done => { + testAction( + actions.open, + TEST_VIEW_KEEP_ALIVE, + {}, + [ + { type: types.SET_OPEN, payload: true }, + { type: types.SET_CURRENT_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name }, + { type: types.KEEP_ALIVE_VIEW, payload: TEST_VIEW_KEEP_ALIVE.name }, + ], + [], + done, + ); + }); + }); + + describe('close', () => { + it('commits SET_OPEN', done => { + testAction( + actions.close, + null, + {}, + [{ type: types.SET_OPEN, payload: false }], + [], + done, + ); + }); + }); +}); diff --git a/spec/javascripts/ide/stores/modules/pane/getters_spec.js b/spec/javascripts/ide/stores/modules/pane/getters_spec.js new file mode 100644 index 00000000000..2060863b5d6 --- /dev/null +++ b/spec/javascripts/ide/stores/modules/pane/getters_spec.js @@ -0,0 +1,61 @@ +import * as getters from '~/ide/stores/modules/pane/getters'; +import state from '~/ide/stores/modules/pane/state'; + +describe('IDE pane module getters', () => { + const TEST_VIEW = 'test-view'; + const TEST_KEEP_ALIVE_VIEWS = { + [TEST_VIEW]: true, + }; + + describe('isActiveView', () => { + it('returns true if given view matches currentView', () => { + const result = getters.isActiveView({ currentView: 'A' })('A'); + + expect(result).toBe(true); + }); + + it('returns false if given view does not match currentView', () => { + const result = getters.isActiveView({ currentView: 'A' })('B'); + + expect(result).toBe(false); + }); + }); + + describe('isAliveView', () => { + it('returns true if given view is in keepAliveViews', () => { + const result = getters.isAliveView( + { keepAliveViews: TEST_KEEP_ALIVE_VIEWS }, + {}, + )(TEST_VIEW); + + expect(result).toBe(true); + }); + + it('returns true if given view is active view and open', () => { + const result = getters.isAliveView( + { ...state(), isOpen: true }, + { isActiveView: () => true }, + )(TEST_VIEW); + + expect(result).toBe(true); + }); + + it('returns false if given view is active view and closed', () => { + const result = getters.isAliveView( + state(), + { isActiveView: () => true }, + )(TEST_VIEW); + + expect(result).toBe(false); + }); + + it('returns false if given view is not activeView', () => { + const result = getters.isAliveView( + { ...state(), isOpen: true }, + { isActiveView: () => false }, + )(TEST_VIEW); + + expect(result).toBe(false); + }); + }); +}); diff --git a/spec/javascripts/ide/stores/modules/pane/mutations_spec.js b/spec/javascripts/ide/stores/modules/pane/mutations_spec.js new file mode 100644 index 00000000000..b5fcd35912e --- /dev/null +++ b/spec/javascripts/ide/stores/modules/pane/mutations_spec.js @@ -0,0 +1,42 @@ +import state from '~/ide/stores/modules/pane/state'; +import mutations from '~/ide/stores/modules/pane/mutations'; +import * as types from '~/ide/stores/modules/pane/mutation_types'; + +describe('IDE pane module mutations', () => { + const TEST_VIEW = 'test-view'; + let mockedState; + + beforeEach(() => { + mockedState = state(); + }); + + describe('SET_OPEN', () => { + it('sets isOpen', () => { + mockedState.isOpen = false; + + mutations[types.SET_OPEN](mockedState, true); + + expect(mockedState.isOpen).toBe(true); + }); + }); + + describe('SET_CURRENT_VIEW', () => { + it('sets currentView', () => { + mockedState.currentView = null; + + mutations[types.SET_CURRENT_VIEW](mockedState, TEST_VIEW); + + expect(mockedState.currentView).toEqual(TEST_VIEW); + }); + }); + + describe('KEEP_ALIVE_VIEW', () => { + it('adds entry to keepAliveViews', () => { + mutations[types.KEEP_ALIVE_VIEW](mockedState, TEST_VIEW); + + expect(mockedState.keepAliveViews).toEqual({ + [TEST_VIEW]: true, + }); + }); + }); +}); diff --git a/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js index 91edb388791..d85354c3681 100644 --- a/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js +++ b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js @@ -315,29 +315,29 @@ describe('IDE pipelines actions', () => { 'job', mockedState, [{ type: types.SET_DETAIL_JOB, payload: 'job' }], - [{ type: 'setRightPane', payload: 'jobs-detail' }], + [{ type: 'rightPane/open', payload: rightSidebarViews.jobsDetail }], done, ); }); - it('dispatches setRightPane as pipeline when job is null', done => { + it('dispatches rightPane/open as pipeline when job is null', done => { testAction( setDetailJob, null, mockedState, [{ type: types.SET_DETAIL_JOB, payload: null }], - [{ type: 'setRightPane', payload: rightSidebarViews.pipelines }], + [{ type: 'rightPane/open', payload: rightSidebarViews.pipelines }], done, ); }); - it('dispatches setRightPane as job', done => { + it('dispatches rightPane/open as job', done => { testAction( setDetailJob, 'job', mockedState, [{ type: types.SET_DETAIL_JOB, payload: 'job' }], - [{ type: 'setRightPane', payload: rightSidebarViews.jobsDetail }], + [{ type: 'rightPane/open', payload: rightSidebarViews.jobsDetail }], done, ); }); diff --git a/spec/javascripts/issue_show/index_spec.js b/spec/javascripts/issue_show/index_spec.js new file mode 100644 index 00000000000..fa0b426c06c --- /dev/null +++ b/spec/javascripts/issue_show/index_spec.js @@ -0,0 +1,19 @@ +import initIssueableApp from '~/issue_show'; + +describe('Issue show index', () => { + describe('initIssueableApp', () => { + it('should initialize app with no potential XSS attack', () => { + const d = document.createElement('div'); + d.id = 'js-issuable-app-initial-data'; + d.innerHTML = JSON.stringify({ + initialDescriptionHtml: '<img src=x onerror=alert(1)>', + }); + document.body.appendChild(d); + + const alertSpy = spyOn(window, 'alert'); + initIssueableApp(); + + expect(alertSpy).not.toHaveBeenCalled(); + }); + }); +}); diff --git a/spec/javascripts/job_spec.js b/spec/javascripts/job_spec.js index 2fcb5566ebc..d6b5dec9e47 100644 --- a/spec/javascripts/job_spec.js +++ b/spec/javascripts/job_spec.js @@ -57,25 +57,6 @@ describe('Job', () => { expect(job.buildStage).toBe('test'); expect(job.state).toBe(''); }); - - it('only shows the jobs matching the current stage', () => { - expect($('.build-job[data-stage="build"]').is(':visible')).toBe(false); - expect($('.build-job[data-stage="test"]').is(':visible')).toBe(true); - expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false); - }); - - it('selects the current stage in the build dropdown menu', () => { - expect($('.stage-selection').text()).toBe('test'); - }); - - it('updates the jobs when the build dropdown changes', () => { - $('.stage-item:contains("build")').click(); - - expect($('.stage-selection').text()).toBe('build'); - expect($('.build-job[data-stage="build"]').is(':visible')).toBe(true); - expect($('.build-job[data-stage="test"]').is(':visible')).toBe(false); - expect($('.build-job[data-stage="deploy"]').is(':visible')).toBe(false); - }); }); describe('running build', () => { diff --git a/spec/javascripts/jobs/components/commit_block_spec.js b/spec/javascripts/jobs/components/commit_block_spec.js index 61ee993f46a..0bcc4ff940f 100644 --- a/spec/javascripts/jobs/components/commit_block_spec.js +++ b/spec/javascripts/jobs/components/commit_block_spec.js @@ -56,7 +56,7 @@ describe('Commit block', () => { props.mergeRequest.path, ); expect(vm.$el.querySelector('.js-link-commit').textContent.trim()).toEqual( - props.mergeRequest.iid, + `!${props.mergeRequest.iid}`, ); }); }); diff --git a/spec/javascripts/jobs/components/empty_state_spec.js b/spec/javascripts/jobs/components/empty_state_spec.js index 872cc1e3864..73488eaab9b 100644 --- a/spec/javascripts/jobs/components/empty_state_spec.js +++ b/spec/javascripts/jobs/components/empty_state_spec.js @@ -67,7 +67,7 @@ describe('Empty State', () => { content, action: { path: 'runner', - title: 'Check runner', + button_title: 'Check runner', method: 'post', }, }); diff --git a/spec/javascripts/jobs/components/environments_block_spec.js b/spec/javascripts/jobs/components/environments_block_spec.js index 015c26be9fc..7d836129b13 100644 --- a/spec/javascripts/jobs/components/environments_block_spec.js +++ b/spec/javascripts/jobs/components/environments_block_spec.js @@ -5,19 +5,16 @@ import mountComponent from '../../helpers/vue_mount_component_helper'; describe('Environments block', () => { const Component = Vue.extend(component); let vm; - const icon = { + const status = { group: 'success', icon: 'status_success', label: 'passed', text: 'passed', tooltip: 'passed', }; - const deployment = { - path: 'deployment', - name: 'deployment name', - }; + const environment = { - path: '/environment', + environment_path: '/environment', name: 'environment', }; @@ -25,15 +22,14 @@ describe('Environments block', () => { vm.$destroy(); }); - describe('with latest deployment', () => { + describe('with last deployment', () => { it('renders info for most recent deployment', () => { vm = mountComponent(Component, { deploymentStatus: { - status: 'latest', - icon, - deployment, + status: 'last', environment, }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( @@ -48,17 +44,17 @@ describe('Environments block', () => { vm = mountComponent(Component, { deploymentStatus: { status: 'out_of_date', - icon, - deployment, environment: Object.assign({}, environment, { - last_deployment: { name: 'deployment', path: 'last_deployment' }, + last_deployment: { iid: 'deployment', deployable: { build_path: 'bar' } }, }), }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( - 'This job is an out-of-date deployment to environment. View the most recent deployment deployment.', + 'This job is an out-of-date deployment to environment. View the most recent deployment #deployment.', ); + expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('bar'); }); }); @@ -67,10 +63,9 @@ describe('Environments block', () => { vm = mountComponent(Component, { deploymentStatus: { status: 'out_of_date', - icon, - deployment: null, environment, }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( @@ -85,10 +80,9 @@ describe('Environments block', () => { vm = mountComponent(Component, { deploymentStatus: { status: 'failed', - icon, - deployment: null, environment, }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( @@ -99,21 +93,24 @@ describe('Environments block', () => { describe('creating deployment', () => { describe('with last deployment', () => { - it('renders info about creating deployment and overriding lastest deployment', () => { + it('renders info about creating deployment and overriding latest deployment', () => { vm = mountComponent(Component, { deploymentStatus: { status: 'creating', - icon, - deployment, environment: Object.assign({}, environment, { - last_deployment: { name: 'deployment', path: 'last_deployment' }, + last_deployment: { + iid: 'deployment', + deployable: { build_path: 'foo' }, + }, }), }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( - 'This job is creating a deployment to environment and will overwrite the last deployment.', + 'This job is creating a deployment to environment and will overwrite the latest deployment.', ); + expect(vm.$el.querySelector('.js-job-deployment-link').getAttribute('href')).toEqual('foo'); }); }); @@ -122,10 +119,9 @@ describe('Environments block', () => { vm = mountComponent(Component, { deploymentStatus: { status: 'creating', - icon, - deployment: null, environment, }, + iconStatus: status, }); expect(vm.$el.textContent.trim()).toEqual( @@ -133,5 +129,18 @@ describe('Environments block', () => { ); }); }); + + describe('without environment', () => { + it('does not render environment link', () => { + vm = mountComponent(Component, { + deploymentStatus: { + status: 'creating', + environment: null, + }, + iconStatus: status, + }); + expect(vm.$el.querySelector('.js-environment-link')).toBeNull(); + }); + }); }); }); diff --git a/spec/javascripts/jobs/components/header_spec.js b/spec/javascripts/jobs/components/header_spec.js deleted file mode 100644 index e21e2c6d6e3..00000000000 --- a/spec/javascripts/jobs/components/header_spec.js +++ /dev/null @@ -1,98 +0,0 @@ -import Vue from 'vue'; -import headerComponent from '~/jobs/components/header.vue'; -import mountComponent from 'spec/helpers/vue_mount_component_helper'; - -describe('Job details header', () => { - let HeaderComponent; - let vm; - let props; - - beforeEach(() => { - HeaderComponent = Vue.extend(headerComponent); - - const threeWeeksAgo = new Date(); - threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21); - - const twoDaysAgo = new Date(); - twoDaysAgo.setDate(twoDaysAgo.getDate() - 2); - - props = { - job: { - status: { - group: 'failed', - icon: 'status_failed', - label: 'failed', - text: 'failed', - details_path: 'path', - }, - id: 123, - created_at: threeWeeksAgo.toISOString(), - user: { - web_url: 'path', - name: 'Foo', - username: 'foobar', - email: 'foo@bar.com', - avatar_url: 'link', - }, - started: twoDaysAgo.toISOString(), - new_issue_path: 'path', - }, - isLoading: false, - }; - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('job reason', () => { - it('should not render the reason when reason is absent', () => { - vm = mountComponent(HeaderComponent, props); - - expect(vm.shouldRenderReason).toBe(false); - }); - - it('should render the reason when reason is present', () => { - props.job.callout_message = 'There is an unknown failure, please try again'; - - vm = mountComponent(HeaderComponent, props); - - expect(vm.shouldRenderReason).toBe(true); - }); - }); - - describe('triggered job', () => { - beforeEach(() => { - vm = mountComponent(HeaderComponent, props); - }); - - it('should render provided job information', () => { - expect( - vm.$el - .querySelector('.header-main-content') - .textContent.replace(/\s+/g, ' ') - .trim(), - ).toEqual('failed Job #123 triggered 2 days ago by Foo'); - }); - - it('should render new issue link', () => { - expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual( - props.job.new_issue_path, - ); - }); - }); - - describe('created job', () => { - it('should render created key', () => { - props.job.started = false; - vm = mountComponent(HeaderComponent, props); - - expect( - vm.$el - .querySelector('.header-main-content') - .textContent.replace(/\s+/g, ' ') - .trim(), - ).toEqual('failed Job #123 created 3 weeks ago by Foo'); - }); - }); -}); diff --git a/spec/javascripts/jobs/components/job_app_spec.js b/spec/javascripts/jobs/components/job_app_spec.js new file mode 100644 index 00000000000..e02eb9723fe --- /dev/null +++ b/spec/javascripts/jobs/components/job_app_spec.js @@ -0,0 +1,324 @@ +import Vue from 'vue'; +import jobApp from '~/jobs/components/job_app.vue'; +import createStore from '~/jobs/store'; +import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; + +describe('Job App ', () => { + const Component = Vue.extend(jobApp); + let store; + let vm; + + const threeWeeksAgo = new Date(); + threeWeeksAgo.setDate(threeWeeksAgo.getDate() - 21); + + const twoDaysAgo = new Date(); + twoDaysAgo.setDate(twoDaysAgo.getDate() - 2); + + const job = { + status: { + group: 'failed', + icon: 'status_failed', + label: 'failed', + text: 'failed', + details_path: 'path', + }, + id: 123, + created_at: threeWeeksAgo.toISOString(), + user: { + web_url: 'path', + name: 'Foo', + username: 'foobar', + email: 'foo@bar.com', + avatar_url: 'link', + }, + started: twoDaysAgo.toISOString(), + new_issue_path: 'path', + runners: { + available: false, + }, + tags: ['docker'], + has_trace: true, + }; + + const props = { + runnerHelpUrl: 'help/runners', + }; + + beforeEach(() => { + store = createStore(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('Header section', () => { + describe('job callout message', () => { + it('should not render the reason when reason is absent', () => { + store.dispatch('receiveJobSuccess', job); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.shouldRenderCalloutMessage).toBe(false); + }); + + it('should render the reason when reason is present', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + callout_message: 'There is an unknown failure, please try again', + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.shouldRenderCalloutMessage).toBe(true); + }); + }); + + describe('triggered job', () => { + beforeEach(() => { + store.dispatch('receiveJobSuccess', job); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + }); + + it('should render provided job information', () => { + expect( + vm.$el + .querySelector('.header-main-content') + .textContent.replace(/\s+/g, ' ') + .trim(), + ).toEqual('failed Job #123 triggered 2 days ago by Foo'); + }); + + it('should render new issue link', () => { + expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual( + job.new_issue_path, + ); + }); + }); + + describe('created job', () => { + it('should render created key', () => { + store.dispatch('receiveJobSuccess', Object.assign({}, job, { started: false })); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect( + vm.$el + .querySelector('.header-main-content') + .textContent.replace(/\s+/g, ' ') + .trim(), + ).toEqual('failed Job #123 created 3 weeks ago by Foo'); + }); + }); + }); + + describe('stuck block', () => { + it('renders stuck block when there are no runners', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + status: { + group: 'pending', + icon: 'status_pending', + label: 'pending', + text: 'pending', + details_path: 'path', + }, + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-stuck')).not.toBeNull(); + }); + + it('renders tags in stuck block when there are no runners', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + status: { + group: 'pending', + icon: 'status_pending', + label: 'pending', + text: 'pending', + details_path: 'path', + }, + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-stuck').textContent).toContain(job.tags[0]); + }); + + it(' does not renders stuck block when there are no runners', () => { + store.dispatch('receiveJobSuccess', Object.assign({}, job, { runners: { available: true } })); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-stuck')).toBeNull(); + }); + }); + + describe('environments block', () => { + it('renders environment block when job has environment', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + deployment_status: { + environment: { + environment_path: '/path', + name: 'foo', + }, + }, + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-environment')).not.toBeNull(); + }); + + it('does not render environment block when job has environment', () => { + store.dispatch('receiveJobSuccess', job); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-environment')).toBeNull(); + }); + }); + + describe('erased block', () => { + it('renders erased block when `erased` is true', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + erased: true, + erased_by: { + username: 'root', + web_url: 'gitlab.com/root', + }, + erased_at: '2016-11-07T11:11:16.525Z', + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-erased')).not.toBeNull(); + }); + + it('does not render erased block when `erased` is false', () => { + store.dispatch('receiveJobSuccess', Object.assign({}, job, { erased: false })); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-erased')).toBeNull(); + }); + }); + + describe('empty states block', () => { + it('renders empty state when job does not have trace and is not running', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + has_trace: false, + status: { + group: 'pending', + icon: 'status_pending', + label: 'pending', + text: 'pending', + details_path: 'path', + illustration: { + image: 'path', + size: '340', + title: 'Empty State', + content: 'This is an empty state', + }, + action: { + button_title: 'Retry job', + method: 'post', + path: '/path', + }, + }, + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-empty-state')).not.toBeNull(); + }); + + it('does not render empty state when job does not have trace but it is running', () => { + store.dispatch( + 'receiveJobSuccess', + Object.assign({}, job, { + has_trace: false, + status: { + group: 'running', + icon: 'status_running', + label: 'running', + text: 'running', + details_path: 'path', + }, + }), + ); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-empty-state')).toBeNull(); + }); + + it('does not render empty state when job has trace but it is not running', () => { + store.dispatch('receiveJobSuccess', Object.assign({}, job, { has_trace: true })); + + vm = mountComponentWithStore(Component, { + props, + store, + }); + + expect(vm.$el.querySelector('.js-job-empty-state')).toBeNull(); + }); + }); +}); diff --git a/spec/javascripts/jobs/components/jobs_container_spec.js b/spec/javascripts/jobs/components/jobs_container_spec.js index f3f8ff0d031..fa3a2c4c266 100644 --- a/spec/javascripts/jobs/components/jobs_container_spec.js +++ b/spec/javascripts/jobs/components/jobs_container_spec.js @@ -2,7 +2,7 @@ import Vue from 'vue'; import component from '~/jobs/components/jobs_container.vue'; import mountComponent from '../../helpers/vue_mount_component_helper'; -describe('Artifacts block', () => { +describe('Jobs List block', () => { const Component = Vue.extend(component); let vm; @@ -16,8 +16,7 @@ describe('Artifacts block', () => { text: 'passed', tooltip: 'passed', }, - path: 'job/233432756', - id: '233432756', + id: 233432756, tooltip: 'build - passed', retried: true, }; @@ -33,8 +32,7 @@ describe('Artifacts block', () => { text: 'passed', tooltip: 'passed', }, - path: 'job/2322756', - id: '2322756', + id: 2322756, tooltip: 'build - passed', active: true, }; @@ -50,8 +48,7 @@ describe('Artifacts block', () => { text: 'passed', tooltip: 'passed', }, - path: 'job/232153', - id: '232153', + id: 232153, tooltip: 'build - passed', }; @@ -62,14 +59,16 @@ describe('Artifacts block', () => { it('renders list of jobs', () => { vm = mountComponent(Component, { jobs: [job, retried, active], + jobId: 12313, }); expect(vm.$el.querySelectorAll('a').length).toEqual(3); }); - it('renders arrow right when job is active', () => { + it('renders arrow right when job id matches `jobId`', () => { vm = mountComponent(Component, { jobs: [active], + jobId: active.id, }); expect(vm.$el.querySelector('a .js-arrow-right')).not.toBeNull(); @@ -78,6 +77,7 @@ describe('Artifacts block', () => { it('does not render arrow right when job is not active', () => { vm = mountComponent(Component, { jobs: [job], + jobId: active.id, }); expect(vm.$el.querySelector('a .js-arrow-right')).toBeNull(); @@ -86,6 +86,7 @@ describe('Artifacts block', () => { it('renders job name when present', () => { vm = mountComponent(Component, { jobs: [job], + jobId: active.id, }); expect(vm.$el.querySelector('a').textContent.trim()).toContain(job.name); @@ -95,6 +96,7 @@ describe('Artifacts block', () => { it('renders job id when job name is not available', () => { vm = mountComponent(Component, { jobs: [retried], + jobId: active.id, }); expect(vm.$el.querySelector('a').textContent.trim()).toContain(retried.id); @@ -103,14 +105,16 @@ describe('Artifacts block', () => { it('links to the job page', () => { vm = mountComponent(Component, { jobs: [job], + jobId: active.id, }); - expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(job.path); + expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(job.status.details_path); }); it('renders retry icon when job was retried', () => { vm = mountComponent(Component, { jobs: [retried], + jobId: active.id, }); expect(vm.$el.querySelector('.js-retry-icon')).not.toBeNull(); @@ -119,6 +123,7 @@ describe('Artifacts block', () => { it('does not render retry icon when job was not retried', () => { vm = mountComponent(Component, { jobs: [job], + jobId: active.id, }); expect(vm.$el.querySelector('.js-retry-icon')).toBeNull(); diff --git a/spec/javascripts/jobs/components/sidebar_details_block_spec.js b/spec/javascripts/jobs/components/sidebar_details_block_spec.js deleted file mode 100644 index ba19534dac2..00000000000 --- a/spec/javascripts/jobs/components/sidebar_details_block_spec.js +++ /dev/null @@ -1,139 +0,0 @@ -import Vue from 'vue'; -import sidebarDetailsBlock from '~/jobs/components/sidebar_details_block.vue'; -import job from '../mock_data'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Sidebar details block', () => { - let SidebarComponent; - let vm; - - function trimWhitespace(element) { - return element.textContent.replace(/\s+/g, ' ').trim(); - } - - beforeEach(() => { - SidebarComponent = Vue.extend(sidebarDetailsBlock); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('when it is loading', () => { - it('should render a loading spinner', () => { - vm = mountComponent(SidebarComponent, { - job: {}, - isLoading: true, - }); - expect(vm.$el.querySelector('.fa-spinner')).toBeDefined(); - }); - }); - - describe('when there is no retry path retry', () => { - it('should not render a retry button', () => { - vm = mountComponent(SidebarComponent, { - job: {}, - isLoading: false, - }); - - expect(vm.$el.querySelector('.js-retry-job')).toBeNull(); - }); - }); - - describe('without terminal path', () => { - it('does not render terminal link', () => { - vm = mountComponent(SidebarComponent, { - job, - isLoading: false, - }); - - expect(vm.$el.querySelector('.js-terminal-link')).toBeNull(); - }); - }); - - describe('with terminal path', () => { - it('renders terminal link', () => { - vm = mountComponent(SidebarComponent, { - job, - isLoading: false, - terminalPath: 'job/43123/terminal', - }); - - expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull(); - }); - }); - - beforeEach(() => { - vm = mountComponent(SidebarComponent, { - job, - isLoading: false, - }); - }); - - describe('actions', () => { - it('should render link to new issue', () => { - expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual( - job.new_issue_path, - ); - expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue'); - }); - - it('should render link to retry job', () => { - expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path); - }); - - it('should render link to cancel job', () => { - expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path); - }); - }); - - describe('information', () => { - it('should render merge request link', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-mr'))).toEqual('Merge Request: !2'); - - expect(vm.$el.querySelector('.js-job-mr a').getAttribute('href')).toEqual( - job.merge_request.path, - ); - }); - - it('should render job duration', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-duration'))).toEqual( - 'Duration: 6 seconds', - ); - }); - - it('should render erased date', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-erased'))).toEqual('Erased: 3 weeks ago'); - }); - - it('should render finished date', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-finished'))).toEqual( - 'Finished: 3 weeks ago', - ); - }); - - it('should render queued date', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-queued'))).toEqual('Queued: 9 seconds'); - }); - - it('should render runner ID', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-runner'))).toEqual( - 'Runner: local ci runner (#1)', - ); - }); - - it('should render timeout information', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-timeout'))).toEqual( - 'Timeout: 1m 40s (from runner)', - ); - }); - - it('should render coverage', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-coverage'))).toEqual('Coverage: 20%'); - }); - - it('should render tags', () => { - expect(trimWhitespace(vm.$el.querySelector('.js-job-tags'))).toEqual('Tags: tag'); - }); - }); -}); diff --git a/spec/javascripts/jobs/components/sidebar_spec.js b/spec/javascripts/jobs/components/sidebar_spec.js new file mode 100644 index 00000000000..2f5c4245ced --- /dev/null +++ b/spec/javascripts/jobs/components/sidebar_spec.js @@ -0,0 +1,196 @@ +import Vue from 'vue'; +import sidebarDetailsBlock from '~/jobs/components/sidebar.vue'; +import createStore from '~/jobs/store'; +import job, { stages, jobsInStage } from '../mock_data'; +import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper'; +import { trimText } from '../../helpers/vue_component_helper'; + +describe('Sidebar details block', () => { + const SidebarComponent = Vue.extend(sidebarDetailsBlock); + let vm; + let store; + + beforeEach(() => { + store = createStore(); + }); + + afterEach(() => { + vm.$destroy(); + }); + + describe('when it is loading', () => { + it('should render a loading spinner', () => { + store.dispatch('requestJob'); + vm = mountComponentWithStore(SidebarComponent, { store }); + + expect(vm.$el.querySelector('.fa-spinner')).toBeDefined(); + }); + }); + + describe('when there is no retry path retry', () => { + it('should not render a retry button', () => { + const copy = Object.assign({}, job); + delete copy.retry_path; + + store.dispatch('receiveJobSuccess', copy); + vm = mountComponentWithStore(SidebarComponent, { + store, + }); + + expect(vm.$el.querySelector('.js-retry-job')).toBeNull(); + }); + }); + + describe('without terminal path', () => { + it('does not render terminal link', () => { + store.dispatch('receiveJobSuccess', job); + vm = mountComponentWithStore(SidebarComponent, { store }); + + expect(vm.$el.querySelector('.js-terminal-link')).toBeNull(); + }); + }); + + describe('with terminal path', () => { + it('renders terminal link', () => { + store.dispatch('receiveJobSuccess', job); + vm = mountComponentWithStore(SidebarComponent, { + store, + props: { + terminalPath: 'job/43123/terminal', + }, + }); + + expect(vm.$el.querySelector('.js-terminal-link')).not.toBeNull(); + }); + }); + + beforeEach(() => { + store.dispatch('receiveJobSuccess', job); + vm = mountComponentWithStore(SidebarComponent, { store }); + }); + + describe('actions', () => { + it('should render link to new issue', () => { + expect(vm.$el.querySelector('.js-new-issue').getAttribute('href')).toEqual( + job.new_issue_path, + ); + expect(vm.$el.querySelector('.js-new-issue').textContent.trim()).toEqual('New issue'); + }); + + it('should render link to retry job', () => { + expect(vm.$el.querySelector('.js-retry-job').getAttribute('href')).toEqual(job.retry_path); + }); + + it('should render link to cancel job', () => { + expect(vm.$el.querySelector('.js-cancel-job').getAttribute('href')).toEqual(job.cancel_path); + }); + }); + + describe('information', () => { + it('should render merge request link', () => { + expect(trimText(vm.$el.querySelector('.js-job-mr').textContent)).toEqual('Merge Request: !2'); + + expect(vm.$el.querySelector('.js-job-mr a').getAttribute('href')).toEqual( + job.merge_request.path, + ); + }); + + it('should render job duration', () => { + expect(trimText(vm.$el.querySelector('.js-job-duration').textContent)).toEqual( + 'Duration: 6 seconds', + ); + }); + + it('should render erased date', () => { + expect(trimText(vm.$el.querySelector('.js-job-erased').textContent)).toEqual( + 'Erased: 3 weeks ago', + ); + }); + + it('should render finished date', () => { + expect(trimText(vm.$el.querySelector('.js-job-finished').textContent)).toEqual( + 'Finished: 3 weeks ago', + ); + }); + + it('should render queued date', () => { + expect(trimText(vm.$el.querySelector('.js-job-queued').textContent)).toEqual( + 'Queued: 9 seconds', + ); + }); + + it('should render runner ID', () => { + expect(trimText(vm.$el.querySelector('.js-job-runner').textContent)).toEqual( + 'Runner: local ci runner (#1)', + ); + }); + + it('should render timeout information', () => { + expect(trimText(vm.$el.querySelector('.js-job-timeout').textContent)).toEqual( + 'Timeout: 1m 40s (from runner)', + ); + }); + + it('should render coverage', () => { + expect(trimText(vm.$el.querySelector('.js-job-coverage').textContent)).toEqual( + 'Coverage: 20%', + ); + }); + + it('should render tags', () => { + expect(trimText(vm.$el.querySelector('.js-job-tags').textContent)).toEqual('Tags: tag'); + }); + }); + + describe('stages dropdown', () => { + beforeEach(() => { + store.dispatch('receiveJobSuccess', job); + }); + + describe('while fetching stages', () => { + it('renders dropdown with More label', () => { + vm = mountComponentWithStore(SidebarComponent, { store }); + + expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual('More'); + }); + }); + + describe('with stages', () => { + beforeEach(() => { + store.dispatch('receiveStagesSuccess', stages); + vm = mountComponentWithStore(SidebarComponent, { store }); + }); + + it('renders first stage as selected', () => { + expect(vm.$el.querySelector('.js-selected-stage').textContent.trim()).toEqual( + stages[0].name, + ); + }); + }); + + describe('without jobs for stages', () => { + beforeEach(() => { + store.dispatch('receiveJobSuccess', job); + store.dispatch('receiveStagesSuccess', stages); + vm = mountComponentWithStore(SidebarComponent, { store }); + }); + + it('does not render job container', () => { + expect(vm.$el.querySelector('.js-jobs-container')).toBeNull(); + }); + }); + + describe('with jobs for stages', () => { + beforeEach(() => { + store.dispatch('receiveJobSuccess', job); + store.dispatch('receiveStagesSuccess', stages); + store.dispatch('receiveJobsForStageSuccess', jobsInStage.latest_statuses); + vm = mountComponentWithStore(SidebarComponent, { store }); + }); + + it('renders list of jobs', () => { + expect(vm.$el.querySelector('.js-jobs-container')).not.toBeNull(); + }); + }); + }); +}); diff --git a/spec/javascripts/jobs/components/stages_dropdown_spec.js b/spec/javascripts/jobs/components/stages_dropdown_spec.js index 402289345aa..aa6cc0f1b1a 100644 --- a/spec/javascripts/jobs/components/stages_dropdown_spec.js +++ b/spec/javascripts/jobs/components/stages_dropdown_spec.js @@ -8,10 +8,25 @@ describe('Artifacts block', () => { beforeEach(() => { vm = mountComponent(Component, { - pipelineId: 28029444, - pipelinePath: 'pipeline/28029444', - pipelineRef: '50101-truncated-job-information', - pipelineRefPath: 'commits/50101-truncated-job-information', + pipeline: { + id: 28029444, + details: { + status: { + details_path: '/gitlab-org/gitlab-ce/pipelines/28029444', + group: 'success', + has_details: true, + icon: 'status_success', + label: 'passed', + text: 'passed', + tooltip: 'passed', + }, + }, + path: 'pipeline/28029444', + }, + ref: { + path: 'commits/50101-truncated-job-information', + name: '50101-truncated-job-information', + }, stages: [ { name: 'build', @@ -20,15 +35,6 @@ describe('Artifacts block', () => { name: 'test', }, ], - pipelineStatus: { - details_path: '/gitlab-org/gitlab-ce/pipelines/28029444', - group: 'success', - has_details: true, - icon: 'status_success', - label: 'passed', - text: 'passed', - tooltip: 'passed', - }, }); }); diff --git a/spec/javascripts/jobs/mock_data.js b/spec/javascripts/jobs/mock_data.js index 8fdd9b309b7..4269b42e8b6 100644 --- a/spec/javascripts/jobs/mock_data.js +++ b/spec/javascripts/jobs/mock_data.js @@ -20,7 +20,8 @@ export default { group: 'success', has_details: true, details_path: '/root/ci-mock/-/jobs/4757', - favicon: '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png', + favicon: + '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png', action: { icon: 'retry', title: 'Retry', @@ -37,7 +38,8 @@ export default { username: 'root', id: 1, state: 'active', - avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', web_url: 'http://localhost:3000/root', }, erase_path: '/root/ci-mock/-/jobs/4757/erase', @@ -54,7 +56,8 @@ export default { username: 'root', id: 1, state: 'active', - avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', web_url: 'http://localhost:3000/root', }, active: false, @@ -78,7 +81,8 @@ export default { group: 'success', has_details: true, details_path: '/root/ci-mock/pipelines/140', - favicon: '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png', + favicon: + '/assets/ci_favicons/favicon_status_success-308b4fc054cdd1b68d0865e6cfb7b02e92e3472f201507418f8eddb74ac11a59.png', }, duration: 6, finished_at: '2017-06-01T17:32:00.042Z', @@ -107,11 +111,14 @@ export default { username: 'root', id: 1, state: 'active', - avatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', + avatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', web_url: 'http://localhost:3000/root', }, - author_gravatar_url: 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', - commit_url: 'http://localhost:3000/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6', + author_gravatar_url: + 'https://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80\u0026d=identicon', + commit_url: + 'http://localhost:3000/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6', commit_path: '/root/ci-mock/commit/c58647773a6b5faf066d4ad6ff2c9fbba5f180f6', }, }, @@ -125,3 +132,1029 @@ export default { }, raw_path: '/root/ci-mock/builds/4757/raw', }; + +export const stages = [ + { + name: 'build', + title: 'build: running', + groups: [ + { + name: 'build:linux', + size: 1, + status: { + icon: 'status_pending', + text: 'pending', + label: 'pending', + group: 'pending', + tooltip: 'pending', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/1180', + illustration: { + image: 'illustrations/pending_job_empty.svg', + size: 'svg-430', + title: 'This job has not started yet', + content: 'This job is in pending state and is waiting to be picked by a runner', + }, + favicon: + '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel', + method: 'post', + }, + }, + jobs: [ + { + id: 1180, + name: 'build:linux', + started: false, + build_path: '/gitlab-org/gitlab-shell/-/jobs/1180', + cancel_path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel', + playable: false, + created_at: '2018-09-28T11:09:57.229Z', + updated_at: '2018-09-28T11:09:57.503Z', + status: { + icon: 'status_pending', + text: 'pending', + label: 'pending', + group: 'pending', + tooltip: 'pending', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/1180', + illustration: { + image: 'illustrations/pending_job_empty.svg', + size: 'svg-430', + title: 'This job has not started yet', + content: 'This job is in pending state and is waiting to be picked by a runner', + }, + favicon: + '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'build:osx', + size: 1, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/444', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/444/retry', + method: 'post', + }, + }, + jobs: [ + { + id: 444, + name: 'build:osx', + started: '2018-05-18T05:32:20.655Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/444', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/444/retry', + playable: false, + created_at: '2018-05-18T15:32:54.364Z', + updated_at: '2018-05-18T15:32:54.364Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/444', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/444/retry', + method: 'post', + }, + }, + }, + ], + }, + ], + status: { + icon: 'status_running', + text: 'running', + label: 'running', + group: 'running', + tooltip: 'running', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/pipelines/27#build', + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png', + }, + path: '/gitlab-org/gitlab-shell/pipelines/27#build', + dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build', + }, + { + name: 'test', + title: 'test: passed with warnings', + groups: [ + { + name: 'jenkins', + size: 1, + status: { + icon: 'status_success', + text: 'passed', + label: null, + group: 'success', + tooltip: null, + has_details: false, + details_path: null, + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + }, + jobs: [ + { + id: 459, + name: 'jenkins', + started: '2018-05-18T09:32:20.658Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/459', + playable: false, + created_at: '2018-05-18T15:32:55.330Z', + updated_at: '2018-05-18T15:32:55.330Z', + status: { + icon: 'status_success', + text: 'passed', + label: null, + group: 'success', + tooltip: null, + has_details: false, + details_path: null, + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + }, + }, + ], + }, + { + name: 'rspec:linux', + size: 3, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: false, + details_path: null, + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + }, + jobs: [ + { + id: 445, + name: 'rspec:linux 0 3', + started: '2018-05-18T07:32:20.655Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/445', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/445/retry', + playable: false, + created_at: '2018-05-18T15:32:54.425Z', + updated_at: '2018-05-18T15:32:54.425Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/445', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/445/retry', + method: 'post', + }, + }, + }, + { + id: 446, + name: 'rspec:linux 1 3', + started: '2018-05-18T07:32:20.655Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/446', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/446/retry', + playable: false, + created_at: '2018-05-18T15:32:54.506Z', + updated_at: '2018-05-18T15:32:54.506Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/446', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/446/retry', + method: 'post', + }, + }, + }, + { + id: 447, + name: 'rspec:linux 2 3', + started: '2018-05-18T07:32:20.656Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/447', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/447/retry', + playable: false, + created_at: '2018-05-18T15:32:54.572Z', + updated_at: '2018-05-18T15:32:54.572Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/447', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/447/retry', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'rspec:osx', + size: 1, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/452', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/452/retry', + method: 'post', + }, + }, + jobs: [ + { + id: 452, + name: 'rspec:osx', + started: '2018-05-18T07:32:20.657Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/452', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/452/retry', + playable: false, + created_at: '2018-05-18T15:32:54.920Z', + updated_at: '2018-05-18T15:32:54.920Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/452', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/452/retry', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'rspec:windows', + size: 3, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: false, + details_path: null, + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + }, + jobs: [ + { + id: 448, + name: 'rspec:windows 0 3', + started: '2018-05-18T07:32:20.656Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/448', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/448/retry', + playable: false, + created_at: '2018-05-18T15:32:54.639Z', + updated_at: '2018-05-18T15:32:54.639Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/448', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/448/retry', + method: 'post', + }, + }, + }, + { + id: 449, + name: 'rspec:windows 1 3', + started: '2018-05-18T07:32:20.656Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/449', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/449/retry', + playable: false, + created_at: '2018-05-18T15:32:54.703Z', + updated_at: '2018-05-18T15:32:54.703Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/449', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/449/retry', + method: 'post', + }, + }, + }, + { + id: 451, + name: 'rspec:windows 2 3', + started: '2018-05-18T07:32:20.657Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/451', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/451/retry', + playable: false, + created_at: '2018-05-18T15:32:54.853Z', + updated_at: '2018-05-18T15:32:54.853Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/451', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/451/retry', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'spinach:linux', + size: 1, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/453', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/453/retry', + method: 'post', + }, + }, + jobs: [ + { + id: 453, + name: 'spinach:linux', + started: '2018-05-18T07:32:20.657Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/453', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/453/retry', + playable: false, + created_at: '2018-05-18T15:32:54.993Z', + updated_at: '2018-05-18T15:32:54.993Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/453', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/453/retry', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'spinach:osx', + size: 1, + status: { + icon: 'status_warning', + text: 'failed', + label: 'failed (allowed to fail)', + group: 'failed_with_warnings', + tooltip: 'failed - (unknown failure) (allowed to fail)', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/454', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/454/retry', + method: 'post', + }, + }, + jobs: [ + { + id: 454, + name: 'spinach:osx', + started: '2018-05-18T07:32:20.657Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/454', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/454/retry', + playable: false, + created_at: '2018-05-18T15:32:55.053Z', + updated_at: '2018-05-18T15:32:55.053Z', + status: { + icon: 'status_warning', + text: 'failed', + label: 'failed (allowed to fail)', + group: 'failed_with_warnings', + tooltip: 'failed - (unknown failure) (allowed to fail)', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/454', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_failed-41304d7f7e3828808b0c26771f0309e55296819a9beea3ea9fbf6689d9857c12.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/454/retry', + method: 'post', + }, + }, + callout_message: 'There is an unknown failure, please try again', + recoverable: true, + }, + ], + }, + ], + status: { + icon: 'status_warning', + text: 'passed', + label: 'passed with warnings', + group: 'success_with_warnings', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/pipelines/27#test', + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + }, + path: '/gitlab-org/gitlab-shell/pipelines/27#test', + dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=test', + }, + { + name: 'deploy', + title: 'deploy: running', + groups: [ + { + name: 'production', + size: 1, + status: { + icon: 'status_created', + text: 'created', + label: 'created', + group: 'created', + tooltip: 'created', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/457', + illustration: { + image: 'illustrations/job_not_triggered.svg', + size: 'svg-306', + title: 'This job has not been triggered yet', + content: + 'This job depends on upstream jobs that need to succeed in order for this job to be triggered', + }, + favicon: + '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel', + method: 'post', + }, + }, + jobs: [ + { + id: 457, + name: 'production', + started: false, + build_path: '/gitlab-org/gitlab-shell/-/jobs/457', + cancel_path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel', + playable: false, + created_at: '2018-05-18T15:32:55.259Z', + updated_at: '2018-09-28T11:09:57.454Z', + status: { + icon: 'status_created', + text: 'created', + label: 'created', + group: 'created', + tooltip: 'created', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/457', + illustration: { + image: 'illustrations/job_not_triggered.svg', + size: 'svg-306', + title: 'This job has not been triggered yet', + content: + 'This job depends on upstream jobs that need to succeed in order for this job to be triggered', + }, + favicon: + '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/457/cancel', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'staging', + size: 1, + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/455', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/455/retry', + method: 'post', + }, + }, + jobs: [ + { + id: 455, + name: 'staging', + started: '2018-05-18T09:32:20.658Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/455', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/455/retry', + playable: false, + created_at: '2018-05-18T15:32:55.119Z', + updated_at: '2018-05-18T15:32:55.119Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/455', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/455/retry', + method: 'post', + }, + }, + }, + ], + }, + { + name: 'stop staging', + size: 1, + status: { + icon: 'status_created', + text: 'created', + label: 'created', + group: 'created', + tooltip: 'created', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/456', + illustration: { + image: 'illustrations/job_not_triggered.svg', + size: 'svg-306', + title: 'This job has not been triggered yet', + content: + 'This job depends on upstream jobs that need to succeed in order for this job to be triggered', + }, + favicon: + '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel', + method: 'post', + }, + }, + jobs: [ + { + id: 456, + name: 'stop staging', + started: false, + build_path: '/gitlab-org/gitlab-shell/-/jobs/456', + cancel_path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel', + playable: false, + created_at: '2018-05-18T15:32:55.205Z', + updated_at: '2018-09-28T11:09:57.396Z', + status: { + icon: 'status_created', + text: 'created', + label: 'created', + group: 'created', + tooltip: 'created', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/456', + illustration: { + image: 'illustrations/job_not_triggered.svg', + size: 'svg-306', + title: 'This job has not been triggered yet', + content: + 'This job depends on upstream jobs that need to succeed in order for this job to be triggered', + }, + favicon: + '/assets/ci_favicons/favicon_status_created-4b975aa976d24e5a3ea7cd9a5713e6ce2cd9afd08b910415e96675de35f64955.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/456/cancel', + method: 'post', + }, + }, + }, + ], + }, + ], + status: { + icon: 'status_running', + text: 'running', + label: 'running', + group: 'running', + tooltip: 'running', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/pipelines/27#deploy', + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png', + }, + path: '/gitlab-org/gitlab-shell/pipelines/27#deploy', + dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=deploy', + }, + { + name: 'notify', + title: 'notify: manual action', + groups: [ + { + name: 'slack', + size: 1, + status: { + icon: 'status_manual', + text: 'manual', + label: 'manual play action', + group: 'manual', + tooltip: 'manual action', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/458', + illustration: { + image: 'illustrations/manual_action.svg', + size: 'svg-394', + title: 'This job requires a manual action', + content: + 'This job depends on a user to trigger its process. Often they are used to deploy code to production environments', + }, + favicon: + '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png', + action: { + icon: 'play', + title: 'Play', + path: '/gitlab-org/gitlab-shell/-/jobs/458/play', + method: 'post', + }, + }, + jobs: [ + { + id: 458, + name: 'slack', + started: null, + build_path: '/gitlab-org/gitlab-shell/-/jobs/458', + play_path: '/gitlab-org/gitlab-shell/-/jobs/458/play', + playable: true, + created_at: '2018-05-18T15:32:55.303Z', + updated_at: '2018-05-18T15:34:08.535Z', + status: { + icon: 'status_manual', + text: 'manual', + label: 'manual play action', + group: 'manual', + tooltip: 'manual action', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/458', + illustration: { + image: 'illustrations/manual_action.svg', + size: 'svg-394', + title: 'This job requires a manual action', + content: + 'This job depends on a user to trigger its process. Often they are used to deploy code to production environments', + }, + favicon: + '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png', + action: { + icon: 'play', + title: 'Play', + path: '/gitlab-org/gitlab-shell/-/jobs/458/play', + method: 'post', + }, + }, + }, + ], + }, + ], + status: { + icon: 'status_manual', + text: 'manual', + label: 'manual action', + group: 'manual', + tooltip: 'manual action', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/pipelines/27#notify', + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_manual-829a0804612cef47d9efc1618dba38325483657c847dba0546c3b9f0295bb36c.png', + }, + path: '/gitlab-org/gitlab-shell/pipelines/27#notify', + dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=notify', + }, +]; + +export const jobsInStage = { + name: 'build', + title: 'build: running', + latest_statuses: [ + { + id: 1180, + name: 'build:linux', + started: false, + build_path: '/gitlab-org/gitlab-shell/-/jobs/1180', + cancel_path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel', + playable: false, + created_at: '2018-09-28T11:09:57.229Z', + updated_at: '2018-09-28T11:09:57.503Z', + status: { + icon: 'status_pending', + text: 'pending', + label: 'pending', + group: 'pending', + tooltip: 'pending', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/1180', + illustration: { + image: 'illustrations/pending_job_empty.svg', + size: 'svg-430', + title: 'This job has not started yet', + content: 'This job is in pending state and is waiting to be picked by a runner', + }, + favicon: + '/assets/ci_favicons/favicon_status_pending-5bdf338420e5221ca24353b6bff1c9367189588750632e9a871b7af09ff6a2ae.png', + action: { + icon: 'cancel', + title: 'Cancel', + path: '/gitlab-org/gitlab-shell/-/jobs/1180/cancel', + method: 'post', + }, + }, + }, + { + id: 444, + name: 'build:osx', + started: '2018-05-18T05:32:20.655Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/444', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/444/retry', + playable: false, + created_at: '2018-05-18T15:32:54.364Z', + updated_at: '2018-05-18T15:32:54.364Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/444', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/444/retry', + method: 'post', + }, + }, + }, + ], + retried: [ + { + id: 443, + name: 'build:linux', + started: '2018-05-18T06:32:20.655Z', + build_path: '/gitlab-org/gitlab-shell/-/jobs/443', + retry_path: '/gitlab-org/gitlab-shell/-/jobs/443/retry', + playable: false, + created_at: '2018-05-18T15:32:54.296Z', + updated_at: '2018-05-18T15:32:54.296Z', + status: { + icon: 'status_success', + text: 'passed', + label: 'passed', + group: 'success', + tooltip: 'passed (retried)', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/-/jobs/443', + illustration: { + image: 'illustrations/skipped-job_empty.svg', + size: 'svg-430', + title: 'This job does not have a trace.', + }, + favicon: + '/assets/ci_favicons/favicon_status_success-8451333011eee8ce9f2ab25dc487fe24a8758c694827a582f17f42b0a90446a2.png', + action: { + icon: 'retry', + title: 'Retry', + path: '/gitlab-org/gitlab-shell/-/jobs/443/retry', + method: 'post', + }, + }, + }, + ], + status: { + icon: 'status_running', + text: 'running', + label: 'running', + group: 'running', + tooltip: 'running', + has_details: true, + details_path: '/gitlab-org/gitlab-shell/pipelines/27#build', + illustration: null, + favicon: + '/assets/ci_favicons/favicon_status_running-9c635b2419a8e1ec991c993061b89cc5aefc0743bb238ecd0c381e7741a70e8c.png', + }, + path: '/gitlab-org/gitlab-shell/pipelines/27#build', + dropdown_path: '/gitlab-org/gitlab-shell/pipelines/27/stage.json?stage=build', +}; diff --git a/spec/javascripts/jobs/store/actions_spec.js b/spec/javascripts/jobs/store/actions_spec.js index 5042718dfa0..5ab1f75d0d6 100644 --- a/spec/javascripts/jobs/store/actions_spec.js +++ b/spec/javascripts/jobs/store/actions_spec.js @@ -27,7 +27,6 @@ import { receiveStagesSuccess, receiveStagesError, requestJobsForStage, - setSelectedStage, fetchJobsForStage, receiveJobsForStageSuccess, receiveJobsForStageError, @@ -236,7 +235,8 @@ describe('Job State actions', () => { }, { payload: { - html: 'I, [2018-08-17T22:57:45.707325 #1841] INFO -- :', complete: true, + html: 'I, [2018-08-17T22:57:45.707325 #1841] INFO -- :', + complete: true, }, type: 'receiveTraceSuccess', }, @@ -421,7 +421,9 @@ describe('Job State actions', () => { let mock; beforeEach(() => { - mockedState.stagesEndpoint = `${TEST_HOST}/endpoint.json`; + mockedState.job.pipeline = { + path: `${TEST_HOST}/endpoint.json/stages`, + }; mock = new MockAdapter(axios); }); @@ -430,8 +432,10 @@ describe('Job State actions', () => { }); describe('success', () => { - it('dispatches requestStages and receiveStagesSuccess ', done => { - mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]); + it('dispatches requestStages and receiveStagesSuccess, fetchJobsForStage ', done => { + mock + .onGet(`${TEST_HOST}/endpoint.json/stages`) + .replyOnce(200, { details: { stages: [{ id: 121212, name: 'build' }] } }); testAction( fetchStages, @@ -446,6 +450,10 @@ describe('Job State actions', () => { payload: [{ id: 121212, name: 'build' }], type: 'receiveStagesSuccess', }, + { + payload: { id: 121212, name: 'build' }, + type: 'fetchJobsForStage', + }, ], done, ); @@ -516,24 +524,10 @@ describe('Job State actions', () => { }); }); - describe('setSelectedStage', () => { - it('should commit SET_SELECTED_STAGE mutation ', done => { - testAction( - setSelectedStage, - { name: 'build' }, - mockedState, - [{ type: types.SET_SELECTED_STAGE, payload: { name: 'build' } }], - [], - done, - ); - }); - }); - describe('fetchJobsForStage', () => { let mock; beforeEach(() => { - mockedState.stageJobsEndpoint = `${TEST_HOST}/endpoint.json`; mock = new MockAdapter(axios); }); @@ -542,20 +536,18 @@ describe('Job State actions', () => { }); describe('success', () => { - it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageSuccess ', done => { - mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]); + it('dispatches requestJobsForStage and receiveJobsForStageSuccess ', done => { + mock + .onGet(`${TEST_HOST}/jobs.json`) + .replyOnce(200, { latest_statuses: [{ id: 121212, name: 'build' }], retried: [] }); testAction( fetchJobsForStage, - null, + { dropdown_path: `${TEST_HOST}/jobs.json` }, mockedState, [], [ { - type: 'setSelectedStage', - payload: null, - }, - { type: 'requestJobsForStage', }, { @@ -570,21 +562,17 @@ describe('Job State actions', () => { describe('error', () => { beforeEach(() => { - mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500); + mock.onGet(`${TEST_HOST}/jobs.json`).reply(500); }); - it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageError', done => { + it('dispatches requestJobsForStage and receiveJobsForStageError', done => { testAction( fetchJobsForStage, - null, + { dropdown_path: `${TEST_HOST}/jobs.json` }, mockedState, [], [ { - payload: null, - type: 'setSelectedStage', - }, - { type: 'requestJobsForStage', }, { diff --git a/spec/javascripts/jobs/store/getters_spec.js b/spec/javascripts/jobs/store/getters_spec.js new file mode 100644 index 00000000000..160b2f4b34a --- /dev/null +++ b/spec/javascripts/jobs/store/getters_spec.js @@ -0,0 +1,213 @@ +import * as getters from '~/jobs/store/getters'; +import state from '~/jobs/store/state'; + +describe('Job Store Getters', () => { + let localState; + + beforeEach(() => { + localState = state(); + }); + + describe('headerActions', () => { + describe('with new issue path', () => { + it('returns an array with action to create a new issue', () => { + localState.job.new_issue_path = 'issues/new'; + + expect(getters.headerActions(localState)).toEqual([ + { + label: 'New issue', + path: localState.job.new_issue_path, + cssClass: + 'js-new-issue btn btn-success btn-inverted d-none d-md-block d-lg-block d-xl-block', + type: 'link', + }, + ]); + }); + }); + + describe('without new issue path', () => { + it('returns an empty array', () => { + expect(getters.headerActions(localState)).toEqual([]); + }); + }); + }); + + describe('headerTime', () => { + describe('when the job has started key', () => { + it('returns started key', () => { + const started = '2018-08-31T16:20:49.023Z'; + localState.job.started = started; + + expect(getters.headerTime(localState)).toEqual(started); + }); + }); + + describe('when the job does not have started key', () => { + it('returns created_at key', () => { + const created = '2018-08-31T16:20:49.023Z'; + localState.job.created_at = created; + expect(getters.headerTime(localState)).toEqual(created); + }); + }); + }); + + describe('shouldRenderCalloutMessage', () => { + describe('with status and callout message', () => { + it('returns true', () => { + localState.job.callout_message = 'Callout message'; + localState.job.status = { icon: 'passed' }; + + expect(getters.shouldRenderCalloutMessage(localState)).toEqual(true); + }); + }); + + describe('without status & with callout message', () => { + it('returns false', () => { + localState.job.callout_message = 'Callout message'; + expect(getters.shouldRenderCalloutMessage(localState)).toEqual(false); + }); + }); + + describe('with status & without callout message', () => { + it('returns false', () => { + localState.job.status = { icon: 'passed' }; + + expect(getters.shouldRenderCalloutMessage(localState)).toEqual(false); + }); + }); + }); + + describe('jobHasStarted', () => { + describe('when started equals false', () => { + it('returns false', () => { + localState.job.started = false; + expect(getters.jobHasStarted(localState)).toEqual(false); + }); + }); + + describe('when started equals string', () => { + it('returns true', () => { + localState.job.started = '2018-08-31T16:20:49.023Z'; + expect(getters.jobHasStarted(localState)).toEqual(true); + }); + }); + }); + + describe('hasEnvironment', () => { + describe('without `deployment_status`', () => { + it('returns false', () => { + expect(getters.hasEnvironment(localState)).toEqual(false); + }); + }); + + describe('with an empty object for `deployment_status`', () => { + it('returns false', () => { + localState.job.deployment_status = {}; + expect(getters.hasEnvironment(localState)).toEqual(false); + }); + }); + + describe('when `deployment_status` is defined and not empty', () => { + it('returns true', () => { + localState.job.deployment_status = { + status: 'creating', + environment: { + last_deployment: {}, + }, + }; + + expect(getters.hasEnvironment(localState)).toEqual(true); + }); + }); + }); + + describe('hasTrace', () => { + describe('when has_trace is true', () => { + it('returns true', () => { + localState.job.has_trace = true; + localState.job.status = {}; + + expect(getters.hasTrace(localState)).toEqual(true); + }); + }); + + describe('when job is running', () => { + it('returns true', () => { + localState.job.has_trace = false; + localState.job.status = { group: 'running' }; + + expect(getters.hasTrace(localState)).toEqual(true); + }); + }); + + describe('when has_trace is false and job is not running', () => { + it('returns false', () => { + localState.job.has_trace = false; + localState.job.status = { group: 'pending' }; + + expect(getters.hasTrace(localState)).toEqual(false); + }); + }); + }); + + describe('emptyStateIllustration', () => { + describe('with defined illustration', () => { + it('returns the state illustration object', () => { + localState.job.status = { + illustration: { + path: 'foo', + }, + }; + + expect(getters.emptyStateIllustration(localState)).toEqual({ path: 'foo' }); + }); + }); + + describe('when illustration is not defined', () => { + it('returns an empty object', () => { + expect(getters.emptyStateIllustration(localState)).toEqual({}); + }); + }); + }); + + describe('isJobStuck', () => { + describe('when job is pending and runners are not available', () => { + it('returns true', () => { + localState.job.status = { + group: 'pending', + }; + localState.job.runners = { + available: false, + }; + + expect(getters.isJobStuck(localState)).toEqual(true); + }); + }); + + describe('when job is not pending', () => { + it('returns false', () => { + localState.job.status = { + group: 'running', + }; + localState.job.runners = { + available: false, + }; + + expect(getters.isJobStuck(localState)).toEqual(false); + }); + }); + + describe('when runners are available', () => { + it('returns false', () => { + localState.job.status = { + group: 'pending', + }; + localState.job.runners = { + available: true, + }; + + expect(getters.isJobStuck(localState)).toEqual(false); + }); + }); + }); +}); diff --git a/spec/javascripts/lazy_loader_spec.js b/spec/javascripts/lazy_loader_spec.js index c177d79b9e0..eac4756e8a9 100644 --- a/spec/javascripts/lazy_loader_spec.js +++ b/spec/javascripts/lazy_loader_spec.js @@ -1,57 +1,214 @@ import LazyLoader from '~/lazy_loader'; +import { TEST_HOST } from './test_constants'; let lazyLoader = null; +const execImmediately = callback => { + callback(); +}; + describe('LazyLoader', function() { preloadFixtures('issues/issue_with_comment.html.raw'); - beforeEach(function() { - loadFixtures('issues/issue_with_comment.html.raw'); - lazyLoader = new LazyLoader({ - observerNode: 'body', + describe('with IntersectionObserver disabled', () => { + beforeEach(function() { + loadFixtures('issues/issue_with_comment.html.raw'); + + lazyLoader = new LazyLoader({ + observerNode: 'foobar', + }); + + spyOn(LazyLoader, 'supportsIntersectionObserver').and.callFake(() => false); + + spyOn(LazyLoader, 'loadImage').and.callThrough(); + + spyOn(window, 'requestAnimationFrame').and.callFake(execImmediately); + spyOn(window, 'requestIdleCallback').and.callFake(execImmediately); + + // Doing everything that happens normally in onload + lazyLoader.register(); + }); + + afterEach(() => { + lazyLoader.unregister(); + }); + + it('should copy value from data-src to src for img 1', function(done) { + const img = document.querySelectorAll('img[data-src]')[0]; + const originalDataSrc = img.getAttribute('data-src'); + img.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(img.getAttribute('src')).toBe(originalDataSrc); + expect(img).toHaveClass('js-lazy-loaded'); + done(); + }, 50); + }); + + it('should lazy load dynamically added data-src images', function(done) { + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.className = 'lazy'; + newImg.setAttribute('data-src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg.getAttribute('src')).toBe(testPath); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }, 50); + }); + + it('should not alter normal images', function(done) { + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.setAttribute('src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }, 50); + }); + + it('should not load dynamically added pictures if content observer is turned off', done => { + lazyLoader.stopContentObserver(); + + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.className = 'lazy'; + newImg.setAttribute('data-src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }, 50); + }); + + it('should load dynamically added pictures if content observer is turned off and on again', done => { + lazyLoader.stopContentObserver(); + lazyLoader.startContentObserver(); + + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.className = 'lazy'; + newImg.setAttribute('data-src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }, 50); }); - // Doing everything that happens normally in onload - lazyLoader.loadCheck(); }); - describe('behavior', function() { + + describe('with IntersectionObserver enabled', () => { + beforeEach(function() { + loadFixtures('issues/issue_with_comment.html.raw'); + + lazyLoader = new LazyLoader({ + observerNode: 'foobar', + }); + + spyOn(LazyLoader, 'loadImage').and.callThrough(); + + spyOn(window, 'requestAnimationFrame').and.callFake(execImmediately); + spyOn(window, 'requestIdleCallback').and.callFake(execImmediately); + + // Doing everything that happens normally in onload + lazyLoader.register(); + }); + + afterEach(() => { + lazyLoader.unregister(); + }); + it('should copy value from data-src to src for img 1', function(done) { const img = document.querySelectorAll('img[data-src]')[0]; const originalDataSrc = img.getAttribute('data-src'); img.scrollIntoView(); setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); expect(img.getAttribute('src')).toBe(originalDataSrc); - expect(document.getElementsByClassName('js-lazy-loaded').length).toBeGreaterThan(0); + expect(img).toHaveClass('js-lazy-loaded'); done(); - }, 100); + }, 50); }); it('should lazy load dynamically added data-src images', function(done) { const newImg = document.createElement('img'); - const testPath = '/img/testimg.png'; + const testPath = `${TEST_HOST}/img/testimg.png`; newImg.className = 'lazy'; newImg.setAttribute('data-src', testPath); document.body.appendChild(newImg); newImg.scrollIntoView(); setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); expect(newImg.getAttribute('src')).toBe(testPath); - expect(document.getElementsByClassName('js-lazy-loaded').length).toBeGreaterThan(0); + expect(newImg).toHaveClass('js-lazy-loaded'); done(); - }, 100); + }, 50); }); it('should not alter normal images', function(done) { const newImg = document.createElement('img'); - const testPath = '/img/testimg.png'; + const testPath = `${TEST_HOST}/img/testimg.png`; newImg.setAttribute('src', testPath); document.body.appendChild(newImg); newImg.scrollIntoView(); setTimeout(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); + expect(newImg).not.toHaveClass('js-lazy-loaded'); + done(); + }, 50); + }); + + it('should not load dynamically added pictures if content observer is turned off', done => { + lazyLoader.stopContentObserver(); + + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.className = 'lazy'; + newImg.setAttribute('data-src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).not.toHaveBeenCalled(); expect(newImg).not.toHaveClass('js-lazy-loaded'); done(); - }, 100); + }, 50); + }); + + it('should load dynamically added pictures if content observer is turned off and on again', done => { + lazyLoader.stopContentObserver(); + lazyLoader.startContentObserver(); + + const newImg = document.createElement('img'); + const testPath = `${TEST_HOST}/img/testimg.png`; + newImg.className = 'lazy'; + newImg.setAttribute('data-src', testPath); + document.body.appendChild(newImg); + newImg.scrollIntoView(); + + setTimeout(() => { + expect(LazyLoader.loadImage).toHaveBeenCalled(); + expect(newImg).toHaveClass('js-lazy-loaded'); + done(); + }, 50); }); }); }); diff --git a/spec/javascripts/lib/utils/text_markdown_spec.js b/spec/javascripts/lib/utils/text_markdown_spec.js index ca0e7c395a0..043dd018e0c 100644 --- a/spec/javascripts/lib/utils/text_markdown_spec.js +++ b/spec/javascripts/lib/utils/text_markdown_spec.js @@ -21,7 +21,7 @@ describe('init markdown', () => { textArea.selectionStart = 0; textArea.selectionEnd = 0; - insertMarkdownText(textArea, textArea.value, '*', null, '', false); + insertMarkdownText({ textArea, text: textArea.value, tag: '*', blockTag: null, selected: '', wrap: false }); expect(textArea.value).toEqual(`${initialValue}* `); }); @@ -32,7 +32,7 @@ describe('init markdown', () => { textArea.value = initialValue; textArea.setSelectionRange(initialValue.length, initialValue.length); - insertMarkdownText(textArea, textArea.value, '*', null, '', false); + insertMarkdownText({ textArea, text: textArea.value, tag: '*', blockTag: null, selected: '', wrap: false }); expect(textArea.value).toEqual(`${initialValue}\n* `); }); @@ -43,7 +43,7 @@ describe('init markdown', () => { textArea.value = initialValue; textArea.setSelectionRange(initialValue.length, initialValue.length); - insertMarkdownText(textArea, textArea.value, '*', null, '', false); + insertMarkdownText({ textArea, text: textArea.value, tag: '*', blockTag: null, selected: '', wrap: false }); expect(textArea.value).toEqual(`${initialValue}* `); }); @@ -54,9 +54,70 @@ describe('init markdown', () => { textArea.value = initialValue; textArea.setSelectionRange(initialValue.length, initialValue.length); - insertMarkdownText(textArea, textArea.value, '*', null, '', false); + insertMarkdownText({ textArea, text: textArea.value, tag: '*', blockTag: null, selected: '', wrap: false }); expect(textArea.value).toEqual(`${initialValue}* `); }); }); + + describe('with selection', () => { + const text = 'initial selected value'; + const selected = 'selected'; + beforeEach(() => { + textArea.value = text; + const selectedIndex = text.indexOf(selected); + textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length); + }); + + it('applies the tag to the selected value', () => { + insertMarkdownText({ textArea, text: textArea.value, tag: '*', blockTag: null, selected, wrap: true }); + + expect(textArea.value).toEqual(text.replace(selected, `*${selected}*`)); + }); + + it('replaces the placeholder in the tag', () => { + insertMarkdownText({ textArea, text: textArea.value, tag: '[{text}](url)', blockTag: null, selected, wrap: false }); + + expect(textArea.value).toEqual(text.replace(selected, `[${selected}](url)`)); + }); + + describe('and text to be selected', () => { + const tag = '[{text}](url)'; + const select = 'url'; + + it('selects the text', () => { + insertMarkdownText({ textArea, + text: textArea.value, + tag, + blockTag: null, + selected, + wrap: false, + select }); + + const expectedText = text.replace(selected, `[${selected}](url)`); + expect(textArea.value).toEqual(expectedText); + expect(textArea.selectionStart).toEqual(expectedText.indexOf(select)); + expect(textArea.selectionEnd).toEqual(expectedText.indexOf(select) + select.length); + }); + + it('selects the right text when multiple tags are present', () => { + const initialValue = `${tag} ${tag} ${selected}`; + textArea.value = initialValue; + const selectedIndex = initialValue.indexOf(selected); + textArea.setSelectionRange(selectedIndex, selectedIndex + selected.length); + insertMarkdownText({ textArea, + text: textArea.value, + tag, + blockTag: null, + selected, + wrap: false, + select }); + + const expectedText = initialValue.replace(selected, `[${selected}](url)`); + expect(textArea.value).toEqual(expectedText); + expect(textArea.selectionStart).toEqual(expectedText.lastIndexOf(select)); + expect(textArea.selectionEnd).toEqual(expectedText.lastIndexOf(select) + select.length); + }); + }); + }); }); diff --git a/spec/javascripts/notes/components/noteable_discussion_spec.js b/spec/javascripts/notes/components/noteable_discussion_spec.js index 2a01bd85520..40b5f009ceb 100644 --- a/spec/javascripts/notes/components/noteable_discussion_spec.js +++ b/spec/javascripts/notes/components/noteable_discussion_spec.js @@ -133,4 +133,29 @@ describe('noteable_discussion component', () => { }); }); }); + + describe('componentData', () => { + it('should return first note object for placeholder note', () => { + const data = { + isPlaceholderNote: true, + notes: [ + { body: 'hello world!' }, + ], + }; + + const note = vm.componentData(data); + expect(note).toEqual(data.notes[0]); + }); + + it('should return given note for nonplaceholder notes', () => { + const data = { + notes: [ + { id: 12 }, + ], + }; + + const note = vm.componentData(data); + expect(note).toEqual(data); + }); + }); }); diff --git a/spec/javascripts/notes/mock_data.js b/spec/javascripts/notes/mock_data.js index 1f030e5af28..9a0e7f34a9c 100644 --- a/spec/javascripts/notes/mock_data.js +++ b/spec/javascripts/notes/mock_data.js @@ -1177,10 +1177,8 @@ export const discussion1 = { file_path: 'about.md', }, position: { - formatter: { - new_line: 50, - old_line: null, - }, + new_line: 50, + old_line: null, }, notes: [ { @@ -1197,10 +1195,8 @@ export const resolvedDiscussion1 = { file_path: 'about.md', }, position: { - formatter: { - new_line: 50, - old_line: null, - }, + new_line: 50, + old_line: null, }, notes: [ { @@ -1217,10 +1213,8 @@ export const discussion2 = { file_path: 'README.md', }, position: { - formatter: { - new_line: null, - old_line: 20, - }, + new_line: null, + old_line: 20, }, notes: [ { @@ -1237,10 +1231,8 @@ export const discussion3 = { file_path: 'README.md', }, position: { - formatter: { - new_line: 21, - old_line: null, - }, + new_line: 21, + old_line: null, }, notes: [ { diff --git a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js index 9dff52a9d49..0e30759c41d 100644 --- a/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js +++ b/spec/javascripts/sidebar/components/time_tracking/time_tracker_spec.js @@ -8,7 +8,10 @@ describe('Issuable Time Tracker', () => { let initialData; let vm; - const initTimeTrackingComponent = opts => { + const initTimeTrackingComponent = ({ timeEstimate, + timeSpent, + timeEstimateHumanReadable, + timeSpentHumanReadable }) => { setFixtures(` <div> <div id="mock-container"></div> @@ -16,10 +19,10 @@ describe('Issuable Time Tracker', () => { `); initialData = { - time_estimate: opts.timeEstimate, - time_spent: opts.timeSpent, - human_time_estimate: opts.timeEstimateHumanReadable, - human_time_spent: opts.timeSpentHumanReadable, + timeEstimate, + timeSpent, + humanTimeEstimate: timeEstimateHumanReadable, + humanTimeSpent: timeSpentHumanReadable, rootPath: '/', }; @@ -43,8 +46,8 @@ describe('Issuable Time Tracker', () => { describe('Initialization', () => { beforeEach(() => { initTimeTrackingComponent({ - timeEstimate: 100000, - timeSpent: 5000, + timeEstimate: 10000, // 2h 46m + timeSpent: 5000, // 1h 23m timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m', }); @@ -56,14 +59,14 @@ describe('Issuable Time Tracker', () => { it('should correctly set timeEstimate', done => { Vue.nextTick(() => { - expect(vm.timeEstimate).toBe(initialData.time_estimate); + expect(vm.timeEstimate).toBe(initialData.timeEstimate); done(); }); }); it('should correctly set time_spent', done => { Vue.nextTick(() => { - expect(vm.timeSpent).toBe(initialData.time_spent); + expect(vm.timeSpent).toBe(initialData.timeSpent); done(); }); }); @@ -74,8 +77,8 @@ describe('Issuable Time Tracker', () => { describe('Comparison pane', () => { beforeEach(() => { initTimeTrackingComponent({ - timeEstimate: 100000, - timeSpent: 5000, + timeEstimate: 100000, // 1d 3h + timeSpent: 5000, // 1h 23m timeEstimateHumanReadable: '', timeSpentHumanReadable: '', }); @@ -106,8 +109,8 @@ describe('Issuable Time Tracker', () => { }); it('should display the remaining meter with the correct background color when over estimate', done => { - vm.time_estimate = 100000; - vm.time_spent = 20000000; + vm.timeEstimate = 10000; // 2h 46m + vm.timeSpent = 20000000; // 231 days Vue.nextTick(() => { expect(vm.$el.querySelector('.time-tracking-comparison-pane .progress[variant="danger"]')).not.toBeNull(); done(); @@ -119,7 +122,7 @@ describe('Issuable Time Tracker', () => { describe('Estimate only pane', () => { beforeEach(() => { initTimeTrackingComponent({ - timeEstimate: 100000, + timeEstimate: 10000, // 2h 46m timeSpent: 0, timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '', @@ -142,7 +145,7 @@ describe('Issuable Time Tracker', () => { beforeEach(() => { initTimeTrackingComponent({ timeEstimate: 0, - timeSpent: 5000, + timeSpent: 5000, // 1h 23m timeEstimateHumanReadable: '2h 46m', timeSpentHumanReadable: '1h 23m', }); diff --git a/spec/javascripts/ide/components/changed_file_icon_spec.js b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js index 7308219f705..5b1038840c7 100644 --- a/spec/javascripts/ide/components/changed_file_icon_spec.js +++ b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js @@ -1,8 +1,8 @@ import Vue from 'vue'; -import changedFileIcon from '~/ide/components/changed_file_icon.vue'; +import changedFileIcon from '~/vue_shared/components/changed_file_icon.vue'; import createComponent from 'spec/helpers/vue_mount_component_helper'; -describe('IDE changed file icon', () => { +describe('Changed file icon', () => { let vm; beforeEach(() => { @@ -33,14 +33,14 @@ describe('IDE changed file icon', () => { }); describe('changedIconClass', () => { - it('includes ide-file-modified when not a temp file', () => { - expect(vm.changedIconClass).toContain('ide-file-modified'); + it('includes file-modified when not a temp file', () => { + expect(vm.changedIconClass).toContain('file-modified'); }); - it('includes ide-file-addition when a temp file', () => { + it('includes file-addition when a temp file', () => { vm.file.tempFile = true; - expect(vm.changedIconClass).toContain('ide-file-addition'); + expect(vm.changedIconClass).toContain('file-addition'); }); }); }); diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js index 69034975422..0dea9278cc2 100644 --- a/spec/javascripts/vue_shared/components/markdown/field_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js @@ -153,7 +153,7 @@ describe('Markdown field component', () => { const textarea = vm.$el.querySelector('textarea'); textarea.setSelectionRange(0, 0); - vm.$el.querySelectorAll('.js-md')[4].click(); + vm.$el.querySelectorAll('.js-md')[5].click(); Vue.nextTick(() => { expect( @@ -168,7 +168,7 @@ describe('Markdown field component', () => { const textarea = vm.$el.querySelector('textarea'); textarea.setSelectionRange(0, 50); - vm.$el.querySelectorAll('.js-md')[4].click(); + vm.$el.querySelectorAll('.js-md')[5].click(); Vue.nextTick(() => { expect( diff --git a/spec/javascripts/vue_shared/components/markdown/header_spec.js b/spec/javascripts/vue_shared/components/markdown/header_spec.js index 488575df401..bc934afe7a4 100644 --- a/spec/javascripts/vue_shared/components/markdown/header_spec.js +++ b/spec/javascripts/vue_shared/components/markdown/header_spec.js @@ -18,7 +18,7 @@ describe('Markdown field header component', () => { }); it('renders markdown buttons', () => { - expect(vm.$el.querySelectorAll('.js-md').length).toBe(7); + expect(vm.$el.querySelectorAll('.js-md').length).toBe(8); }); it('renders `write` link as active when previewMarkdown is false', () => { |