diff options
Diffstat (limited to 'spec/javascripts/diffs/components')
10 files changed, 502 insertions, 26 deletions
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js index bce6113f75a..d81c433cca6 100644 --- a/spec/javascripts/diffs/components/app_spec.js +++ b/spec/javascripts/diffs/components/app_spec.js @@ -1,11 +1,19 @@ import Vuex from 'vuex'; import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlLoadingIcon } from '@gitlab/ui'; import { TEST_HOST } from 'spec/test_constants'; import App from '~/diffs/components/app.vue'; import NoChanges from '~/diffs/components/no_changes.vue'; import DiffFile from '~/diffs/components/diff_file.vue'; import Mousetrap from 'mousetrap'; +import CompareVersions from '~/diffs/components/compare_versions.vue'; +import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue'; +import CommitWidget from '~/diffs/components/commit_widget.vue'; +import TreeList from '~/diffs/components/tree_list.vue'; import createDiffsStore from '../create_diffs_store'; +import diffsMockData from '../mock_data/merge_request_diffs'; + +const mergeRequestDiff = { version_index: 1 }; describe('diffs/components/app', () => { const oldMrTabs = window.mrTabs; @@ -49,6 +57,21 @@ describe('diffs/components/app', () => { wrapper.destroy(); }); + it('displays loading icon on loading', () => { + createComponent({}, ({ state }) => { + state.diffs.isLoading = true; + }); + + expect(wrapper.contains(GlLoadingIcon)).toBe(true); + }); + + it('displays diffs container when not loading', () => { + createComponent(); + + expect(wrapper.contains(GlLoadingIcon)).toBe(false); + expect(wrapper.contains('#diffs')).toBe(true); + }); + it('does not show commit info', () => { createComponent(); @@ -134,8 +157,8 @@ describe('diffs/components/app', () => { }); it('does not render empty state when diff files exist', () => { - createComponent({}, () => { - store.state.diffs.diffFiles.push({ + createComponent({}, ({ state }) => { + state.diffs.diffFiles.push({ id: 1, }); }); @@ -145,9 +168,9 @@ describe('diffs/components/app', () => { }); it('does not render empty state when versions match', () => { - createComponent({}, () => { - store.state.diffs.startVersion = { version_index: 1 }; - store.state.diffs.mergeRequestDiff = { version_index: 1 }; + createComponent({}, ({ state }) => { + state.diffs.startVersion = mergeRequestDiff; + state.diffs.mergeRequestDiff = mergeRequestDiff; }); expect(wrapper.contains(NoChanges)).toBe(false); @@ -307,4 +330,71 @@ describe('diffs/components/app', () => { .catch(done.fail); }); }); + + describe('diffs', () => { + it('should render compare versions component', () => { + createComponent({}, ({ state }) => { + state.diffs.mergeRequestDiffs = diffsMockData; + state.diffs.targetBranchName = 'target-branch'; + state.diffs.mergeRequestDiff = mergeRequestDiff; + }); + + expect(wrapper.contains(CompareVersions)).toBe(true); + expect(wrapper.find(CompareVersions).props()).toEqual( + jasmine.objectContaining({ + targetBranch: { + branchName: 'target-branch', + versionIndex: -1, + path: '', + }, + mergeRequestDiffs: diffsMockData, + mergeRequestDiff, + }), + ); + }); + + it('should render hidden files warning if render overflow warning is present', () => { + createComponent({}, ({ state }) => { + state.diffs.renderOverflowWarning = true; + state.diffs.realSize = '5'; + state.diffs.plainDiffPath = 'plain diff path'; + state.diffs.emailPatchPath = 'email patch path'; + state.diffs.size = 1; + }); + + expect(wrapper.contains(HiddenFilesWarning)).toBe(true); + expect(wrapper.find(HiddenFilesWarning).props()).toEqual( + jasmine.objectContaining({ + total: '5', + plainDiffPath: 'plain diff path', + emailPatchPath: 'email patch path', + visible: 1, + }), + ); + }); + + it('should display commit widget if store has a commit', () => { + createComponent({}, () => { + store.state.diffs.commit = { + author: 'John Doe', + }; + }); + + expect(wrapper.contains(CommitWidget)).toBe(true); + }); + + it('should display diff file if there are diff files', () => { + createComponent({}, ({ state }) => { + state.diffs.diffFiles.push({ sha: '123' }); + }); + + expect(wrapper.contains(DiffFile)).toBe(true); + }); + + it('should render tree list', () => { + createComponent(); + + expect(wrapper.find(TreeList).exists()).toBe(true); + }); + }); }); diff --git a/spec/javascripts/diffs/components/changed_files_dropdown_spec.js b/spec/javascripts/diffs/components/changed_files_dropdown_spec.js deleted file mode 100644 index 7237274eb43..00000000000 --- a/spec/javascripts/diffs/components/changed_files_dropdown_spec.js +++ /dev/null @@ -1 +0,0 @@ -// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034 diff --git a/spec/javascripts/diffs/components/compare_versions_dropdown_spec.js b/spec/javascripts/diffs/components/compare_versions_dropdown_spec.js index 53b9ac22fc0..8a3834d542f 100644 --- a/spec/javascripts/diffs/components/compare_versions_dropdown_spec.js +++ b/spec/javascripts/diffs/components/compare_versions_dropdown_spec.js @@ -1,34 +1,161 @@ -// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034 import { shallowMount, createLocalVue } from '@vue/test-utils'; import CompareVersionsDropdown from '~/diffs/components/compare_versions_dropdown.vue'; import diffsMockData from '../mock_data/merge_request_diffs'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; + +const localVue = createLocalVue(); +const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 }; +const startVersion = { version_index: 4 }; +const mergeRequestVersion = { + version_path: '123', +}; +const baseVersionPath = '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37'; describe('CompareVersionsDropdown', () => { let wrapper; - const targetBranch = { branchName: 'tmp-wine-dev', versionIndex: -1 }; - const factory = (options = {}) => { - const localVue = createLocalVue(); + const findSelectedVersion = () => wrapper.find('.dropdown-menu-toggle'); + const findVersionsListElements = () => wrapper.findAll('li'); + const findLinkElement = index => + findVersionsListElements() + .at(index) + .find('a'); + const findLastLink = () => findLinkElement(findVersionsListElements().length - 1); - wrapper = shallowMount(CompareVersionsDropdown, { localVue, ...options }); + const createComponent = (props = {}) => { + wrapper = shallowMount(localVue.extend(CompareVersionsDropdown), { + localVue, + sync: false, + propsData: { ...props }, + }); }; afterEach(() => { wrapper.destroy(); }); - it('should render a correct base version link', () => { - factory({ - propsData: { - baseVersionPath: '/gnuwget/wget2/merge_requests/6/diffs?diff_id=37', + describe('selected version name', () => { + it('shows latest version when latest is selected', () => { + createComponent({ + mergeRequestVersion, + startVersion, + otherVersions: diffsMockData, + }); + + expect(findSelectedVersion().text()).toBe('latest version'); + }); + + it('shows target branch name for base branch', () => { + createComponent({ + targetBranch, + }); + + expect(findSelectedVersion().text()).toBe('tmp-wine-dev'); + }); + + it('shows correct version for non-base and non-latest branches', () => { + createComponent({ + startVersion, + targetBranch, + }); + + expect(findSelectedVersion().text()).toBe(`version ${startVersion.version_index}`); + }); + }); + + describe('target versions list', () => { + it('should have the same length as otherVersions if merge request version is present', () => { + createComponent({ + mergeRequestVersion, + otherVersions: diffsMockData, + }); + + expect(findVersionsListElements().length).toEqual(diffsMockData.length); + }); + + it('should have an otherVersions length plus 1 if no merge request version is present', () => { + createComponent({ + targetBranch, + otherVersions: diffsMockData, + }); + + expect(findVersionsListElements().length).toEqual(diffsMockData.length + 1); + }); + + it('should have base branch link as active on base branch', () => { + createComponent({ + targetBranch, + otherVersions: diffsMockData, + }); + + expect(findLastLink().classes()).toContain('is-active'); + }); + + it('should have correct branch link as active if start version present', () => { + createComponent({ + targetBranch, + startVersion, + otherVersions: diffsMockData, + }); + + expect(findLinkElement(0).classes()).toContain('is-active'); + }); + + it('should render a correct base version link', () => { + createComponent({ + baseVersionPath, otherVersions: diffsMockData.slice(1), targetBranch, - }, + }); + + expect(findLastLink().attributes('href')).toEqual(baseVersionPath); + expect(findLastLink().text()).toContain('(base)'); + }); + + it('should not render commits count if no showCommitsCount is passed', () => { + createComponent({ + otherVersions: diffsMockData, + targetBranch, + }); + + const commitsCount = diffsMockData[0].commits_count; + + expect(findLinkElement(0).text()).not.toContain(`${commitsCount} commit`); + }); + + it('should render correct commits count if showCommitsCount is passed', () => { + createComponent({ + otherVersions: diffsMockData, + targetBranch, + showCommitCount: true, + }); + + const commitsCount = diffsMockData[0].commits_count; + + expect(findLinkElement(0).text()).toContain(`${commitsCount} commit`); + }); + + it('should render correct commit sha', () => { + createComponent({ + otherVersions: diffsMockData, + targetBranch, + }); + + const commitShaElement = findLinkElement(0).find('.commit-sha'); + + expect(commitShaElement.text()).toBe(diffsMockData[0].short_commit_sha); }); - const links = wrapper.findAll('a'); - const lastLink = links.wrappers[links.length - 1]; + it('should render correct time-ago ', () => { + createComponent({ + otherVersions: diffsMockData, + targetBranch, + }); + + const timeAgoElement = findLinkElement(0).find(TimeAgo); - expect(lastLink.attributes('href')).toEqual(wrapper.props('baseVersionPath')); + expect(timeAgoElement.exists()).toBe(true); + expect(timeAgoElement.props('time')).toBe(diffsMockData[0].created_at); + }); }); }); diff --git a/spec/javascripts/diffs/components/diff_content_spec.js b/spec/javascripts/diffs/components/diff_content_spec.js index a1bb51963d6..bc9288e4150 100644 --- a/spec/javascripts/diffs/components/diff_content_spec.js +++ b/spec/javascripts/diffs/components/diff_content_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import DiffContentComponent from '~/diffs/components/diff_content.vue'; -import { createStore } from '~/mr_notes/stores'; +import { createStore } from 'ee_else_ce/mr_notes/stores'; import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import { GREEN_BOX_IMAGE_URL, RED_BOX_IMAGE_URL } from 'spec/test_constants'; import '~/behaviors/markdown/render_gfm'; diff --git a/spec/javascripts/diffs/components/diff_file_header_spec.js b/spec/javascripts/diffs/components/diff_file_header_spec.js index 005a4751ea1..66c5b17b825 100644 --- a/spec/javascripts/diffs/components/diff_file_header_spec.js +++ b/spec/javascripts/diffs/components/diff_file_header_spec.js @@ -23,6 +23,9 @@ describe('diff_file_header', () => { }); beforeEach(() => { + gon.features = { + expandDiffFullFile: true, + }; const diffFile = diffDiscussionMock.diff_file; diffFile.added_lines = 2; @@ -382,7 +385,7 @@ describe('diff_file_header', () => { props.diffFile.edit_path = '/'; vm = mountComponentWithStore(Component, { props, store }); - expect(vm.$el.querySelector('.js-edit-blob')).toContainText('Edit'); + expect(vm.$el.querySelector('.js-edit-blob')).not.toBe(null); }); it('should not show edit button when file is deleted', () => { @@ -491,5 +494,151 @@ describe('diff_file_header', () => { }); }); }); + + describe('file actions', () => { + it('should not render if diff file has a submodule', () => { + props.diffFile.submodule = 'submodule'; + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.file-actions')).toEqual(null); + }); + + it('should not render if add merge request buttons is false', () => { + props.addMergeRequestButtons = false; + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.file-actions')).toEqual(null); + }); + + describe('with add merge request buttons enabled', () => { + beforeEach(() => { + props.addMergeRequestButtons = true; + props.diffFile.edit_path = 'edit-path'; + }); + + const viewReplacedFileButton = () => vm.$el.querySelector('.js-view-replaced-file'); + const viewFileButton = () => vm.$el.querySelector('.js-view-file-button'); + const externalUrl = () => vm.$el.querySelector('.js-external-url'); + + it('should render if add merge request buttons is true and diff file does not have a submodule', () => { + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.file-actions')).not.toEqual(null); + }); + + it('should not render view replaced file button if no replaced view path is present', () => { + vm = mountComponentWithStore(Component, { props, store }); + + expect(viewReplacedFileButton()).toEqual(null); + }); + + it('should render view replaced file button if replaced view path is present', () => { + props.diffFile.replaced_view_path = 'replaced-view-path'; + vm = mountComponentWithStore(Component, { props, store }); + + expect(viewReplacedFileButton()).not.toEqual(null); + expect(viewReplacedFileButton().getAttribute('href')).toBe('replaced-view-path'); + }); + + it('should render correct file view button path', () => { + props.diffFile.view_path = 'view-path'; + vm = mountComponentWithStore(Component, { props, store }); + + expect(viewFileButton().getAttribute('href')).toBe('view-path'); + }); + + it('should not render external url view link if diff file has no external url', () => { + vm = mountComponentWithStore(Component, { props, store }); + + expect(externalUrl()).toEqual(null); + }); + + it('should render external url view link if diff file has external url', () => { + props.diffFile.external_url = 'external_url'; + vm = mountComponentWithStore(Component, { props, store }); + + expect(externalUrl()).not.toEqual(null); + expect(externalUrl().getAttribute('href')).toBe('external_url'); + }); + }); + + describe('without file blob', () => { + beforeEach(() => { + props.diffFile.blob = null; + props.addMergeRequestButtons = true; + vm = mountComponentWithStore(Component, { props, store }); + }); + + it('should not render toggle discussions button', () => { + expect(vm.$el.querySelector('.js-btn-vue-toggle-comments')).toEqual(null); + }); + + it('should not render edit button', () => { + expect(vm.$el.querySelector('.js-edit-blob')).toEqual(null); + }); + }); + }); + }); + + describe('expand full file button', () => { + beforeEach(() => { + props.addMergeRequestButtons = true; + props.diffFile.edit_path = '/'; + }); + + it('does not render button', () => { + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.js-expand-file')).toBe(null); + }); + + it('renders button', () => { + props.diffFile.is_fully_expanded = false; + + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.js-expand-file')).not.toBe(null); + }); + + it('shows fully expanded text', () => { + props.diffFile.is_fully_expanded = false; + props.diffFile.isShowingFullFile = true; + + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show changes only'); + }); + + it('shows expand text', () => { + props.diffFile.is_fully_expanded = false; + + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.js-expand-file').textContent).toContain('Show full file'); + }); + + it('renders loading icon', () => { + props.diffFile.is_fully_expanded = false; + props.diffFile.isLoadingFullFile = true; + + vm = mountComponentWithStore(Component, { props, store }); + + expect(vm.$el.querySelector('.js-expand-file .loading-container')).not.toBe(null); + }); + + it('calls toggleFullDiff on click', () => { + props.diffFile.is_fully_expanded = false; + + vm = mountComponentWithStore(Component, { props, store }); + + spyOn(vm.$store, 'dispatch').and.stub(); + + vm.$el.querySelector('.js-expand-file').click(); + + expect(vm.$store.dispatch).toHaveBeenCalledWith( + 'diffs/toggleFullDiff', + props.diffFile.file_path, + ); + }); }); }); diff --git a/spec/javascripts/diffs/components/diff_file_spec.js b/spec/javascripts/diffs/components/diff_file_spec.js index 65a1c9b8f15..ba04c8c4a4c 100644 --- a/spec/javascripts/diffs/components/diff_file_spec.js +++ b/spec/javascripts/diffs/components/diff_file_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import DiffFileComponent from '~/diffs/components/diff_file.vue'; import { diffViewerModes, diffViewerErrors } from '~/ide/constants'; -import store from '~/mr_notes/stores'; +import store from 'ee_else_ce/mr_notes/stores'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import diffFileMockData from '../mock_data/diff_file'; diff --git a/spec/javascripts/diffs/components/edit_button_spec.js b/spec/javascripts/diffs/components/edit_button_spec.js index 7237274eb43..ccdae4cb312 100644 --- a/spec/javascripts/diffs/components/edit_button_spec.js +++ b/spec/javascripts/diffs/components/edit_button_spec.js @@ -1 +1,61 @@ -// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034 +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import EditButton from '~/diffs/components/edit_button.vue'; + +const localVue = createLocalVue(); +const editPath = 'test-path'; + +describe('EditButton', () => { + let wrapper; + + const createComponent = (props = {}) => { + wrapper = shallowMount(EditButton, { + localVue, + sync: false, + propsData: { ...props }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('has correct href attribute', () => { + createComponent({ + editPath, + canCurrentUserFork: false, + }); + + expect(wrapper.attributes('href')).toBe(editPath); + }); + + it('emits a show fork message event if current user can fork', () => { + createComponent({ + editPath, + canCurrentUserFork: true, + }); + wrapper.trigger('click'); + + expect(wrapper.emitted('showForkMessage')).toBeTruthy(); + }); + + it('doesnt emit a show fork message event if current user cannot fork', () => { + createComponent({ + editPath, + canCurrentUserFork: false, + }); + wrapper.trigger('click'); + + expect(wrapper.emitted('showForkMessage')).toBeFalsy(); + }); + + it('doesnt emit a show fork message event if current user can modify blob', () => { + createComponent({ + editPath, + canCurrentUserFork: true, + canModifyBlob: true, + }); + wrapper.trigger('click'); + + expect(wrapper.emitted('showForkMessage')).toBeFalsy(); + }); +}); diff --git a/spec/javascripts/diffs/components/hidden_files_warning_spec.js b/spec/javascripts/diffs/components/hidden_files_warning_spec.js index 7237274eb43..5bf5ddd27bd 100644 --- a/spec/javascripts/diffs/components/hidden_files_warning_spec.js +++ b/spec/javascripts/diffs/components/hidden_files_warning_spec.js @@ -1 +1,48 @@ -// TODO: https://gitlab.com/gitlab-org/gitlab-ce/issues/48034 +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import HiddenFilesWarning from '~/diffs/components/hidden_files_warning.vue'; + +const localVue = createLocalVue(); +const propsData = { + total: '10', + visible: 5, + plainDiffPath: 'plain-diff-path', + emailPatchPath: 'email-patch-path', +}; + +describe('HiddenFilesWarning', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMount(HiddenFilesWarning, { + localVue, + sync: false, + propsData, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('has a correct plain diff URL', () => { + const plainDiffLink = wrapper.findAll('a').wrappers.filter(x => x.text() === 'Plain diff')[0]; + + expect(plainDiffLink.attributes('href')).toBe(propsData.plainDiffPath); + }); + + it('has a correct email patch URL', () => { + const emailPatchLink = wrapper.findAll('a').wrappers.filter(x => x.text() === 'Email patch')[0]; + + expect(emailPatchLink.attributes('href')).toBe(propsData.emailPatchPath); + }); + + it('has a correct visible/total files text', () => { + const filesText = wrapper.find('strong'); + + expect(filesText.text()).toBe('5 of 10'); + }); +}); diff --git a/spec/javascripts/diffs/components/inline_diff_view_spec.js b/spec/javascripts/diffs/components/inline_diff_view_spec.js index 2316ee29106..4452106580a 100644 --- a/spec/javascripts/diffs/components/inline_diff_view_spec.js +++ b/spec/javascripts/diffs/components/inline_diff_view_spec.js @@ -1,7 +1,7 @@ import Vue from 'vue'; import '~/behaviors/markdown/render_gfm'; import InlineDiffView from '~/diffs/components/inline_diff_view.vue'; -import store from '~/mr_notes/stores'; +import store from 'ee_else_ce/mr_notes/stores'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import diffFileMockData from '../mock_data/diff_file'; import discussionsMockData from '../mock_data/diff_discussions'; diff --git a/spec/javascripts/diffs/components/parallel_diff_view_spec.js b/spec/javascripts/diffs/components/parallel_diff_view_spec.js index 6f6b1c41915..236bda96145 100644 --- a/spec/javascripts/diffs/components/parallel_diff_view_spec.js +++ b/spec/javascripts/diffs/components/parallel_diff_view_spec.js @@ -1,6 +1,6 @@ import Vue from 'vue'; import ParallelDiffView from '~/diffs/components/parallel_diff_view.vue'; -import store from '~/mr_notes/stores'; +import store from 'ee_else_ce/mr_notes/stores'; import * as constants from '~/diffs/constants'; import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper'; import diffFileMockData from '../mock_data/diff_file'; @@ -18,6 +18,10 @@ describe('ParallelDiffView', () => { }).$mount(); }); + afterEach(() => { + component.$destroy(); + }); + describe('assigned', () => { describe('diffLines', () => { it('should normalize lines for empty cells', () => { |