diff options
Diffstat (limited to 'spec/frontend/diffs/components')
8 files changed, 231 insertions, 417 deletions
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js index cd3a6aa0e28..86560470ada 100644 --- a/spec/frontend/diffs/components/app_spec.js +++ b/spec/frontend/diffs/components/app_spec.js @@ -699,7 +699,7 @@ describe('diffs/components/app', () => { describe('collapsed files', () => { it('should render the collapsed files warning if there are any collapsed files', () => { createComponent({}, ({ state }) => { - state.diffs.diffFiles = [{ viewer: { collapsed: true } }]; + state.diffs.diffFiles = [{ viewer: { automaticallyCollapsed: true } }]; }); expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true); @@ -707,7 +707,7 @@ describe('diffs/components/app', () => { it('should not render the collapsed files warning if the user has dismissed the alert already', async () => { createComponent({}, ({ state }) => { - state.diffs.diffFiles = [{ viewer: { collapsed: true } }]; + state.diffs.diffFiles = [{ viewer: { automaticallyCollapsed: true } }]; }); expect(getCollapsedFilesWarning(wrapper).exists()).toBe(true); diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js index 670eab5472f..7bbffb7a1cd 100644 --- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js +++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js @@ -50,7 +50,7 @@ describe('CollapsedFilesWarning', () => { ({ limited, containerClasses }) => { createComponent({ limited }); - expect(wrapper.classes()).toEqual(containerClasses); + expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses)); }, ); diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js index c48445790f7..9e4fcddd1b4 100644 --- a/spec/frontend/diffs/components/commit_item_spec.js +++ b/spec/frontend/diffs/components/commit_item_spec.js @@ -25,7 +25,7 @@ describe('diffs/components/commit_item', () => { const getTitleElement = () => wrapper.find('.commit-row-message.item-title'); const getDescElement = () => wrapper.find('pre.commit-row-description'); const getDescExpandElement = () => wrapper.find('.commit-content .js-toggle-button'); - const getShaElement = () => wrapper.find('.commit-sha-group'); + const getShaElement = () => wrapper.find('[data-testid="commit-sha-group"]'); const getAvatarElement = () => wrapper.find('.user-avatar-link'); const getCommitterElement = () => wrapper.find('.committer'); const getCommitActionsElement = () => wrapper.find('.commit-actions'); @@ -84,8 +84,8 @@ describe('diffs/components/commit_item', () => { it('renders commit sha', () => { const shaElement = getShaElement(); - const labelElement = shaElement.find('.label'); - const buttonElement = shaElement.find('button'); + const labelElement = shaElement.find('[data-testid="commit-sha-group"] button'); + const buttonElement = shaElement.find('button.input-group-text'); expect(labelElement.text()).toEqual(commit.short_id); expect(buttonElement.props('text')).toBe(commit.id); diff --git a/spec/frontend/diffs/components/diff_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js index a0cad32b9fb..3a236228c40 100644 --- a/spec/frontend/diffs/components/diff_file_header_spec.js +++ b/spec/frontend/diffs/components/diff_file_header_spec.js @@ -1,9 +1,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; -import { GlIcon } from '@gitlab/ui'; import { cloneDeep } from 'lodash'; import DiffFileHeader from '~/diffs/components/diff_file_header.vue'; -import EditButton from '~/diffs/components/edit_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import diffDiscussionsMockData from '../mock_data/diff_discussions'; import { truncateSha } from '~/lib/utils/text_utility'; @@ -76,15 +74,7 @@ describe('DiffFileHeader component', () => { const findReplacedFileButton = () => wrapper.find({ ref: 'replacedFileButton' }); const findViewFileButton = () => wrapper.find({ ref: 'viewButton' }); const findCollapseIcon = () => wrapper.find({ ref: 'collapseIcon' }); - - const findIconByName = iconName => { - const icons = wrapper.findAll(GlIcon).filter(w => w.props('name') === iconName); - if (icons.length === 0) return icons; - if (icons.length > 1) { - throw new Error(`Multiple icons found for ${iconName}`); - } - return icons.at(0); - }; + const findEditButton = () => wrapper.find({ ref: 'editButton' }); const createComponent = props => { mockStoreConfig = cloneDeep(defaultMockStoreConfig); @@ -203,16 +193,6 @@ describe('DiffFileHeader component', () => { describe('for any file', () => { const otherModes = Object.keys(diffViewerModes).filter(m => m !== 'mode_changed'); - it('when edit button emits showForkMessage event it is re-emitted', () => { - createComponent({ - addMergeRequestButtons: true, - }); - wrapper.find(EditButton).vm.$emit('showForkMessage'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().showForkMessage).toBeDefined(); - }); - }); - it('for mode_changed file mode displays mode changes', () => { createComponent({ diffFile: { @@ -271,16 +251,16 @@ describe('DiffFileHeader component', () => { }); it('should not render edit button', () => { createComponent({ addMergeRequestButtons: false }); - expect(wrapper.find(EditButton).exists()).toBe(false); + expect(findEditButton().exists()).toBe(false); }); }); describe('when addMergeRequestButtons is true', () => { describe('without discussions', () => { - it('renders a disabled toggle discussions button', () => { + it('does not render a toggle discussions button', () => { diffHasDiscussionsResultMock.mockReturnValue(false); createComponent({ addMergeRequestButtons: true }); - expect(findToggleDiscussionsButton().attributes('disabled')).toBe('true'); + expect(findToggleDiscussionsButton().exists()).toBe(false); }); }); @@ -288,7 +268,7 @@ describe('DiffFileHeader component', () => { it('dispatches toggleFileDiscussionWrappers when user clicks on toggle discussions button', () => { diffHasDiscussionsResultMock.mockReturnValue(true); createComponent({ addMergeRequestButtons: true }); - expect(findToggleDiscussionsButton().attributes('disabled')).toBeFalsy(); + expect(findToggleDiscussionsButton().exists()).toBe(true); findToggleDiscussionsButton().vm.$emit('click'); expect( mockStoreConfig.modules.diffs.actions.toggleFileDiscussionWrappers, @@ -300,7 +280,7 @@ describe('DiffFileHeader component', () => { createComponent({ addMergeRequestButtons: true, }); - expect(wrapper.find(EditButton).exists()).toBe(true); + expect(findEditButton().exists()).toBe(true); }); describe('view on environment button', () => { @@ -334,7 +314,7 @@ describe('DiffFileHeader component', () => { }); it('should not render edit button', () => { - expect(wrapper.find(EditButton).exists()).toBe(false); + expect(findEditButton().exists()).toBe(false); }); }); describe('with file blob', () => { @@ -345,7 +325,7 @@ describe('DiffFileHeader component', () => { addMergeRequestButtons: true, }); expect(findViewFileButton().attributes('href')).toBe(viewPath); - expect(findViewFileButton().attributes('title')).toEqual( + expect(findViewFileButton().text()).toEqual( `View file @ ${diffFile.content_sha.substr(0, 8)}`, ); }); @@ -375,21 +355,6 @@ describe('DiffFileHeader component', () => { addMergeRequestButtons: true, }; - it.each` - iconName | isShowingFullFile - ${'doc-expand'} | ${false} - ${'doc-changes'} | ${true} - `( - 'shows $iconName when isShowingFullFile set to $isShowingFullFile', - ({ iconName, isShowingFullFile }) => { - createComponent({ - ...fullyNotExpandedFileProps, - diffFile: { ...fullyNotExpandedFileProps.diffFile, isShowingFullFile }, - }); - expect(findIconByName(iconName).exists()).toBe(true); - }, - ); - it('renders expand to full file button if not showing full file already', () => { createComponent(fullyNotExpandedFileProps); expect(findExpandButton().exists()).toBe(true); @@ -455,7 +420,7 @@ describe('DiffFileHeader component', () => { it('does not show edit button', () => { createComponent({ diffFile: { ...diffFile, deleted_file: true } }); - expect(wrapper.find(EditButton).exists()).toBe(false); + expect(findEditButton().exists()).toBe(false); }); }); diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js index 79f0f6bc327..a6f0d2bf11d 100644 --- a/spec/frontend/diffs/components/diff_file_spec.js +++ b/spec/frontend/diffs/components/diff_file_spec.js @@ -37,7 +37,7 @@ describe('DiffFile', () => { expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0); expect(el.querySelector('.js-file-title')).toBeDefined(); - expect(el.querySelector('.btn-clipboard')).toBeDefined(); + expect(el.querySelector('[data-testid="diff-file-copy-clipboard"]')).toBeDefined(); expect(el.querySelector('.file-title-name').innerText.indexOf(file_path)).toBeGreaterThan(-1); expect(el.querySelector('.js-syntax-highlight')).toBeDefined(); @@ -47,7 +47,7 @@ describe('DiffFile', () => { .then(() => { expect(el.querySelectorAll('.line_content').length).toBe(8); expect(el.querySelectorAll('.js-line-expansion-content').length).toBe(1); - triggerEvent('.btn-clipboard'); + triggerEvent('[data-testid="diff-file-copy-clipboard"]'); }) .then(done) .catch(done.fail); @@ -56,11 +56,11 @@ describe('DiffFile', () => { it('should track a click event on copy to clip board button', done => { const el = vm.$el; - expect(el.querySelector('.btn-clipboard')).toBeDefined(); + expect(el.querySelector('[data-testid="diff-file-copy-clipboard"]')).toBeDefined(); vm.file.renderIt = true; vm.$nextTick() .then(() => { - triggerEvent('.btn-clipboard'); + triggerEvent('[data-testid="diff-file-copy-clipboard"]'); expect(trackingSpy).toHaveBeenCalledWith('_category_', 'click_copy_file_button', { label: 'diff_copy_file_path_button', @@ -90,8 +90,8 @@ describe('DiffFile', () => { vm.isCollapsed = true; vm.$nextTick(() => { - expect(vm.$el.innerText).toContain('This file is collapsed.'); - expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy(); + expect(vm.$el.innerText).toContain('This diff is collapsed'); + expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1); done(); }); @@ -102,8 +102,8 @@ describe('DiffFile', () => { vm.isCollapsed = true; vm.$nextTick(() => { - expect(vm.$el.innerText).toContain('This file is collapsed.'); - expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy(); + expect(vm.$el.innerText).toContain('This diff is collapsed'); + expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1); done(); }); @@ -121,8 +121,8 @@ describe('DiffFile', () => { vm.isCollapsed = true; vm.$nextTick(() => { - expect(vm.$el.innerText).toContain('This file is collapsed.'); - expect(vm.$el.querySelector('[data-testid="expandButton"]')).not.toBeFalsy(); + expect(vm.$el.innerText).toContain('This diff is collapsed'); + expect(vm.$el.querySelectorAll('.js-click-to-expand').length).toEqual(1); done(); }); @@ -135,7 +135,7 @@ describe('DiffFile', () => { vm.file.viewer.name = diffViewerModes.renamed; vm.$nextTick(() => { - expect(vm.$el.innerText).not.toContain('This file is collapsed.'); + expect(vm.$el.innerText).not.toContain('This diff is collapsed'); done(); }); @@ -148,7 +148,7 @@ describe('DiffFile', () => { vm.file.viewer.name = diffViewerModes.mode_changed; vm.$nextTick(() => { - expect(vm.$el.innerText).not.toContain('This file is collapsed.'); + expect(vm.$el.innerText).not.toContain('This diff is collapsed'); done(); }); @@ -181,7 +181,7 @@ describe('DiffFile', () => { }); it('updates local state when changing file state', done => { - vm.file.viewer.collapsed = true; + vm.file.viewer.automaticallyCollapsed = true; vm.$nextTick(() => { expect(vm.isCollapsed).toBe(true); diff --git a/spec/frontend/diffs/components/diff_row_utils_spec.js b/spec/frontend/diffs/components/diff_row_utils_spec.js new file mode 100644 index 00000000000..394b6cb1914 --- /dev/null +++ b/spec/frontend/diffs/components/diff_row_utils_spec.js @@ -0,0 +1,203 @@ +import * as utils from '~/diffs/components/diff_row_utils'; +import { + MATCH_LINE_TYPE, + CONTEXT_LINE_TYPE, + OLD_NO_NEW_LINE_TYPE, + NEW_NO_NEW_LINE_TYPE, + EMPTY_CELL_TYPE, +} from '~/diffs/constants'; + +const LINE_CODE = 'abc123'; + +describe('isHighlighted', () => { + it('should return true if line is highlighted', () => { + const state = { diffs: { highlightedRow: LINE_CODE } }; + const line = { line_code: LINE_CODE }; + const isCommented = false; + expect(utils.isHighlighted(state, line, isCommented)).toBe(true); + }); + + it('should return false if line is not highlighted', () => { + const state = { diffs: { highlightedRow: 'xxx' } }; + const line = { line_code: LINE_CODE }; + const isCommented = false; + expect(utils.isHighlighted(state, line, isCommented)).toBe(false); + }); + + it('should return true if isCommented is true', () => { + const state = { diffs: { highlightedRow: 'xxx' } }; + const line = { line_code: LINE_CODE }; + const isCommented = true; + expect(utils.isHighlighted(state, line, isCommented)).toBe(true); + }); +}); + +describe('isContextLine', () => { + it('return true if line type is context', () => { + expect(utils.isContextLine(CONTEXT_LINE_TYPE)).toBe(true); + }); + + it('return false if line type is not context', () => { + expect(utils.isContextLine('xxx')).toBe(false); + }); +}); + +describe('isMatchLine', () => { + it('return true if line type is match', () => { + expect(utils.isMatchLine(MATCH_LINE_TYPE)).toBe(true); + }); + + it('return false if line type is not match', () => { + expect(utils.isMatchLine('xxx')).toBe(false); + }); +}); + +describe('isMetaLine', () => { + it.each` + type | expectation + ${OLD_NO_NEW_LINE_TYPE} | ${true} + ${NEW_NO_NEW_LINE_TYPE} | ${true} + ${EMPTY_CELL_TYPE} | ${true} + ${'xxx'} | ${false} + `('should return $expectation if type is $type', ({ type, expectation }) => { + expect(utils.isMetaLine(type)).toBe(expectation); + }); +}); + +describe('shouldRenderCommentButton', () => { + it('should return false if comment button is not rendered', () => { + expect(utils.shouldRenderCommentButton(true, false)).toBe(false); + }); + + it('should return false if not logged in', () => { + expect(utils.shouldRenderCommentButton(false, true)).toBe(false); + }); + + it('should return true logged in and rendered', () => { + expect(utils.shouldRenderCommentButton(true, true)).toBe(true); + }); +}); + +describe('hasDiscussions', () => { + it('should return false if line is undefined', () => { + expect(utils.hasDiscussions()).toBe(false); + }); + + it('should return false if discussions is undefined', () => { + expect(utils.hasDiscussions({})).toBe(false); + }); + + it('should return false if discussions has legnth of 0', () => { + expect(utils.hasDiscussions({ discussions: [] })).toBe(false); + }); + + it('should return true if discussions has legnth > 0', () => { + expect(utils.hasDiscussions({ discussions: [1] })).toBe(true); + }); +}); + +describe('lineHref', () => { + it(`should return #${LINE_CODE}`, () => { + expect(utils.lineHref({ line_code: LINE_CODE })).toEqual(`#${LINE_CODE}`); + }); + + it(`should return '#' if line is undefined`, () => { + expect(utils.lineHref()).toEqual('#'); + }); + + it(`should return '#' if line_code is undefined`, () => { + expect(utils.lineHref({})).toEqual('#'); + }); +}); + +describe('lineCode', () => { + it(`should return undefined if line_code is undefined`, () => { + expect(utils.lineCode()).toEqual(undefined); + expect(utils.lineCode({ left: {} })).toEqual(undefined); + expect(utils.lineCode({ right: {} })).toEqual(undefined); + }); + + it(`should return ${LINE_CODE}`, () => { + expect(utils.lineCode({ line_code: LINE_CODE })).toEqual(LINE_CODE); + expect(utils.lineCode({ left: { line_code: LINE_CODE } })).toEqual(LINE_CODE); + expect(utils.lineCode({ right: { line_code: LINE_CODE } })).toEqual(LINE_CODE); + }); +}); + +describe('classNameMapCell', () => { + it.each` + line | hll | loggedIn | hovered | expectation + ${undefined} | ${true} | ${true} | ${true} | ${[]} + ${{ type: 'new' }} | ${false} | ${false} | ${false} | ${['new', { hll: false, 'is-over': false }]} + ${{ type: 'new' }} | ${true} | ${true} | ${false} | ${['new', { hll: true, 'is-over': false }]} + ${{ type: 'new' }} | ${true} | ${false} | ${true} | ${['new', { hll: true, 'is-over': false }]} + ${{ type: 'new' }} | ${true} | ${true} | ${true} | ${['new', { hll: true, 'is-over': true }]} + `('should return $expectation', ({ line, hll, loggedIn, hovered, expectation }) => { + const classes = utils.classNameMapCell(line, hll, loggedIn, hovered); + expect(classes).toEqual(expectation); + }); +}); + +describe('addCommentTooltip', () => { + const brokenSymLinkTooltip = + 'Commenting on symbolic links that replace or are replaced by files is currently not supported.'; + const brokenRealTooltip = + 'Commenting on files that replace or are replaced by symbolic links is currently not supported.'; + it('should return default tooltip', () => { + expect(utils.addCommentTooltip()).toBeUndefined(); + }); + + it('should return broken symlink tooltip', () => { + expect(utils.addCommentTooltip({ commentsDisabled: { wasSymbolic: true } })).toEqual( + brokenSymLinkTooltip, + ); + expect(utils.addCommentTooltip({ commentsDisabled: { isSymbolic: true } })).toEqual( + brokenSymLinkTooltip, + ); + }); + + it('should return broken real tooltip', () => { + expect(utils.addCommentTooltip({ commentsDisabled: { wasReal: true } })).toEqual( + brokenRealTooltip, + ); + expect(utils.addCommentTooltip({ commentsDisabled: { isReal: true } })).toEqual( + brokenRealTooltip, + ); + }); +}); + +describe('parallelViewLeftLineType', () => { + it(`should return ${OLD_NO_NEW_LINE_TYPE}`, () => { + expect(utils.parallelViewLeftLineType({ right: { type: NEW_NO_NEW_LINE_TYPE } })).toEqual( + OLD_NO_NEW_LINE_TYPE, + ); + }); + + it(`should return 'new'`, () => { + expect(utils.parallelViewLeftLineType({ left: { type: 'new' } })).toContain('new'); + }); + + it(`should return ${EMPTY_CELL_TYPE}`, () => { + expect(utils.parallelViewLeftLineType({})).toContain(EMPTY_CELL_TYPE); + }); + + it(`should return hll:true`, () => { + expect(utils.parallelViewLeftLineType({}, true)[1]).toEqual({ hll: true }); + }); +}); + +describe('shouldShowCommentButton', () => { + it.each` + hover | context | meta | discussions | expectation + ${true} | ${false} | ${false} | ${false} | ${true} + ${false} | ${false} | ${false} | ${false} | ${false} + ${true} | ${true} | ${false} | ${false} | ${false} + ${true} | ${true} | ${true} | ${false} | ${false} + ${true} | ${true} | ${true} | ${true} | ${false} + `( + 'should return $expectation when hover is $hover', + ({ hover, context, meta, discussions, expectation }) => { + expect(utils.shouldShowCommentButton(hover, context, meta, discussions)).toBe(expectation); + }, + ); +}); diff --git a/spec/frontend/diffs/components/diff_table_cell_spec.js b/spec/frontend/diffs/components/diff_table_cell_spec.js deleted file mode 100644 index 02f5c27eecb..00000000000 --- a/spec/frontend/diffs/components/diff_table_cell_spec.js +++ /dev/null @@ -1,279 +0,0 @@ -import { createLocalVue, shallowMount } from '@vue/test-utils'; -import Vuex from 'vuex'; -import { TEST_HOST } from 'helpers/test_constants'; -import DiffTableCell from '~/diffs/components/diff_table_cell.vue'; -import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue'; -import { LINE_POSITION_RIGHT } from '~/diffs/constants'; -import { createStore } from '~/mr_notes/stores'; -import discussionsMockData from '../mock_data/diff_discussions'; -import diffFileMockData from '../mock_data/diff_file'; - -const localVue = createLocalVue(); -localVue.use(Vuex); - -const TEST_USER_ID = 'abc123'; -const TEST_USER = { id: TEST_USER_ID }; -const TEST_LINE_NUMBER = 1; -const TEST_LINE_CODE = 'LC_42'; -const TEST_FILE_HASH = diffFileMockData.file_hash; - -describe('DiffTableCell', () => { - const symlinkishFileTooltip = - 'Commenting on symbolic links that replace or are replaced by files is currently not supported.'; - const realishFileTooltip = - 'Commenting on files that replace or are replaced by symbolic links is currently not supported.'; - const otherFileTooltip = 'Add a comment to this line'; - - let wrapper; - let line; - let store; - - beforeEach(() => { - store = createStore(); - store.state.notes.userData = TEST_USER; - - line = { - line_code: TEST_LINE_CODE, - type: 'new', - old_line: null, - new_line: 1, - discussions: [{ ...discussionsMockData }], - discussionsExpanded: true, - text: '+<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', - rich_text: '+<span id="LC1" class="line" lang="plaintext"> - Bad dates</span>\n', - meta_data: null, - }; - }); - - afterEach(() => { - wrapper.destroy(); - }); - - const setWindowLocation = value => { - Object.defineProperty(window, 'location', { - writable: true, - value, - }); - }; - - const createComponent = (props = {}) => { - wrapper = shallowMount(DiffTableCell, { - localVue, - store, - propsData: { - line, - fileHash: TEST_FILE_HASH, - contextLinesPath: '/context/lines/path', - isHighlighted: false, - ...props, - }, - }); - }; - - const findTd = () => wrapper.find({ ref: 'td' }); - const findNoteButton = () => wrapper.find({ ref: 'addDiffNoteButton' }); - const findLineNumber = () => wrapper.find({ ref: 'lineNumberRef' }); - const findTooltip = () => wrapper.find({ ref: 'addNoteTooltip' }); - const findAvatars = () => wrapper.find(DiffGutterAvatars); - - describe('td', () => { - it('highlights when isHighlighted true', () => { - createComponent({ isHighlighted: true }); - - expect(findTd().classes()).toContain('hll'); - }); - - it('does not highlight when isHighlighted false', () => { - createComponent({ isHighlighted: false }); - - expect(findTd().classes()).not.toContain('hll'); - }); - }); - - describe('comment button', () => { - it.each` - showCommentButton | userData | query | mergeRefHeadComments | expectation - ${true} | ${TEST_USER} | ${'diff_head=false'} | ${false} | ${true} - ${true} | ${TEST_USER} | ${'diff_head=true'} | ${true} | ${true} - ${true} | ${TEST_USER} | ${'diff_head=true'} | ${false} | ${false} - ${false} | ${TEST_USER} | ${'diff_head=true'} | ${true} | ${false} - ${false} | ${TEST_USER} | ${'bogus'} | ${true} | ${false} - ${true} | ${null} | ${''} | ${true} | ${false} - `( - 'exists is $expectation - with showCommentButton ($showCommentButton) userData ($userData) query ($query)', - ({ showCommentButton, userData, query, mergeRefHeadComments, expectation }) => { - store.state.notes.userData = userData; - gon.features = { mergeRefHeadComments }; - setWindowLocation({ href: `${TEST_HOST}?${query}` }); - createComponent({ showCommentButton }); - - wrapper.setData({ isCommentButtonRendered: showCommentButton }); - - return wrapper.vm.$nextTick().then(() => { - expect(findNoteButton().exists()).toBe(expectation); - }); - }, - ); - - it.each` - isHover | otherProps | discussions | expectation - ${true} | ${{}} | ${[]} | ${true} - ${false} | ${{}} | ${[]} | ${false} - ${true} | ${{ line: { ...line, type: 'context' } }} | ${[]} | ${false} - ${true} | ${{ line: { ...line, type: 'old-nonewline' } }} | ${[]} | ${false} - ${true} | ${{}} | ${[{}]} | ${false} - `( - 'visible is $expectation - with isHover ($isHover), discussions ($discussions), otherProps ($otherProps)', - ({ isHover, otherProps, discussions, expectation }) => { - line.discussions = discussions; - createComponent({ - showCommentButton: true, - isHover, - ...otherProps, - }); - - wrapper.setData({ - isCommentButtonRendered: true, - }); - - return wrapper.vm.$nextTick().then(() => { - expect(findNoteButton().isVisible()).toBe(expectation); - }); - }, - ); - - it.each` - disabled | commentsDisabled - ${'disabled'} | ${true} - ${undefined} | ${false} - `( - 'has attribute disabled=$disabled when the outer component has prop commentsDisabled=$commentsDisabled', - ({ disabled, commentsDisabled }) => { - line.commentsDisabled = commentsDisabled; - - createComponent({ - showCommentButton: true, - isHover: true, - }); - - wrapper.setData({ isCommentButtonRendered: true }); - - return wrapper.vm.$nextTick().then(() => { - expect(findNoteButton().attributes('disabled')).toBe(disabled); - }); - }, - ); - - it.each` - tooltip | commentsDisabled - ${symlinkishFileTooltip} | ${{ wasSymbolic: true }} - ${symlinkishFileTooltip} | ${{ isSymbolic: true }} - ${realishFileTooltip} | ${{ wasReal: true }} - ${realishFileTooltip} | ${{ isReal: true }} - ${otherFileTooltip} | ${false} - `( - 'has the correct tooltip when commentsDisabled=$commentsDisabled', - ({ tooltip, commentsDisabled }) => { - line.commentsDisabled = commentsDisabled; - - createComponent({ - showCommentButton: true, - isHover: true, - }); - - wrapper.setData({ isCommentButtonRendered: true }); - - return wrapper.vm.$nextTick().then(() => { - expect(findTooltip().attributes('title')).toBe(tooltip); - }); - }, - ); - }); - - describe('line number', () => { - describe('without lineNumber prop', () => { - it('does not render', () => { - createComponent({ lineType: 'old' }); - - expect(findLineNumber().exists()).toBe(false); - }); - }); - - describe('with lineNumber prop', () => { - describe.each` - lineProps | expectedHref | expectedClickArg - ${{ line_code: TEST_LINE_CODE }} | ${`#${TEST_LINE_CODE}`} | ${TEST_LINE_CODE} - ${{ line_code: undefined }} | ${'#'} | ${undefined} - ${{ line_code: undefined, left: { line_code: TEST_LINE_CODE } }} | ${'#'} | ${TEST_LINE_CODE} - ${{ line_code: undefined, right: { line_code: TEST_LINE_CODE } }} | ${'#'} | ${TEST_LINE_CODE} - `('with line ($lineProps)', ({ lineProps, expectedHref, expectedClickArg }) => { - beforeEach(() => { - jest.spyOn(store, 'dispatch').mockImplementation(); - Object.assign(line, lineProps); - createComponent({ lineNumber: TEST_LINE_NUMBER }); - }); - - it('renders', () => { - expect(findLineNumber().exists()).toBe(true); - expect(findLineNumber().attributes()).toEqual({ - href: expectedHref, - 'data-linenumber': TEST_LINE_NUMBER.toString(), - }); - }); - - it('on click, dispatches setHighlightedRow', () => { - expect(store.dispatch).not.toHaveBeenCalled(); - - findLineNumber().trigger('click'); - - expect(store.dispatch).toHaveBeenCalledWith('diffs/setHighlightedRow', expectedClickArg); - }); - }); - }); - }); - - describe('diff-gutter-avatars', () => { - describe('with showCommentButton', () => { - beforeEach(() => { - jest.spyOn(store, 'dispatch').mockImplementation(); - - createComponent({ showCommentButton: true }); - }); - - it('renders', () => { - expect(findAvatars().props()).toEqual({ - discussions: line.discussions, - discussionsExpanded: line.discussionsExpanded, - }); - }); - - it('toggles line discussion', () => { - expect(store.dispatch).not.toHaveBeenCalled(); - - findAvatars().vm.$emit('toggleLineDiscussions'); - - expect(store.dispatch).toHaveBeenCalledWith('diffs/toggleLineDiscussions', { - lineCode: TEST_LINE_CODE, - fileHash: TEST_FILE_HASH, - expanded: !line.discussionsExpanded, - }); - }); - }); - - it.each` - props | lineProps | expectation - ${{ showCommentButton: true }} | ${{}} | ${true} - ${{ showCommentButton: false }} | ${{}} | ${false} - ${{ showCommentButton: true, linePosition: LINE_POSITION_RIGHT }} | ${{ type: null }} | ${false} - ${{ showCommentButton: true }} | ${{ discussions: [] }} | ${false} - `( - 'exists is $expectation - with props ($props), line ($lineProps)', - ({ props, lineProps, expectation }) => { - Object.assign(line, lineProps); - createComponent(props); - - expect(findAvatars().exists()).toBe(expectation); - }, - ); - }); -}); diff --git a/spec/frontend/diffs/components/edit_button_spec.js b/spec/frontend/diffs/components/edit_button_spec.js deleted file mode 100644 index 71512c1c4af..00000000000 --- a/spec/frontend/diffs/components/edit_button_spec.js +++ /dev/null @@ -1,75 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import { GlDeprecatedButton } from '@gitlab/ui'; -import EditButton from '~/diffs/components/edit_button.vue'; - -const editPath = 'test-path'; - -describe('EditButton', () => { - let wrapper; - - const createComponent = (props = {}) => { - wrapper = shallowMount(EditButton, { - propsData: { ...props }, - }); - }; - - afterEach(() => { - wrapper.destroy(); - }); - - it('has correct href attribute', () => { - createComponent({ - editPath, - canCurrentUserFork: false, - }); - - expect(wrapper.find(GlDeprecatedButton).attributes('href')).toBe(editPath); - }); - - it('emits a show fork message event if current user can fork', () => { - createComponent({ - editPath, - canCurrentUserFork: true, - }); - wrapper.find(GlDeprecatedButton).trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted('showForkMessage')).toBeTruthy(); - }); - }); - - it('doesnt emit a show fork message event if current user cannot fork', () => { - createComponent({ - editPath, - canCurrentUserFork: false, - }); - wrapper.find(GlDeprecatedButton).trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - 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.find(GlDeprecatedButton).trigger('click'); - - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted('showForkMessage')).toBeFalsy(); - }); - }); - - it('disables button if editPath is empty', () => { - createComponent({ - editPath: '', - canCurrentUserFork: true, - canModifyBlob: true, - }); - - expect(wrapper.find(GlDeprecatedButton).attributes('disabled')).toBe('true'); - }); -}); |