diff options
Diffstat (limited to 'spec/frontend/diffs')
17 files changed, 114 insertions, 192 deletions
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js index d50ac0529d6..76e4a944d87 100644 --- a/spec/frontend/diffs/components/app_spec.js +++ b/spec/frontend/diffs/components/app_spec.js @@ -69,6 +69,12 @@ describe('diffs/components/app', () => { }, provide, store, + stubs: { + DynamicScroller: { + template: `<div><slot :item="$store.state.diffs.diffFiles[0]"></slot></div>`, + }, + DynamicScrollerItem: true, + }, }); } @@ -154,22 +160,6 @@ describe('diffs/components/app', () => { }); }); - it.each` - props | state | expected - ${{ isFluidLayout: true }} | ${{ isParallelView: false }} | ${false} - ${{}} | ${{ isParallelView: false }} | ${true} - ${{}} | ${{ showTreeList: true, diffFiles: [{}], isParallelView: false }} | ${false} - ${{}} | ${{ showTreeList: false, diffFiles: [{}], isParallelView: false }} | ${true} - ${{}} | ${{ showTreeList: false, diffFiles: [], isParallelView: false }} | ${true} - `( - 'uses container-limiting classes ($expected) with state ($state) and props ($props)', - ({ props, state, expected }) => { - createComponent(props, ({ state: origState }) => Object.assign(origState.diffs, state)); - - expect(wrapper.find('.container-limited.limit-container-width').exists()).toBe(expected); - }, - ); - it('displays loading icon on loading', () => { createComponent({}, ({ state }) => { state.diffs.isLoading = true; @@ -498,7 +488,6 @@ describe('diffs/components/app', () => { expect(wrapper.find(CompareVersions).exists()).toBe(true); expect(wrapper.find(CompareVersions).props()).toEqual( expect.objectContaining({ - isLimitedContainer: false, diffFilesCountText: null, }), ); diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js index 46caeb01132..8cc342e45a7 100644 --- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js +++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js @@ -1,8 +1,8 @@ -import { shallowMount, mount, createLocalVue } from '@vue/test-utils'; -import { nextTick } from 'vue'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import CollapsedFilesWarning from '~/diffs/components/collapsed_files_warning.vue'; -import { CENTERED_LIMITED_CONTAINER_CLASSES, EVT_EXPAND_ALL_FILES } from '~/diffs/constants'; +import { EVT_EXPAND_ALL_FILES } from '~/diffs/constants'; import eventHub from '~/diffs/event_hub'; import createStore from '~/diffs/store/modules'; @@ -13,21 +13,19 @@ const propsData = { mergeable: true, resolutionPath: 'a-path', }; -const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' '); async function files(store, count) { const copies = Array(count).fill(file); store.state.diffs.diffFiles.push(...copies); - return nextTick(); + await nextTick(); } describe('CollapsedFilesWarning', () => { - const localVue = createLocalVue(); let store; let wrapper; - localVue.use(Vuex); + Vue.use(Vuex); const getAlertActionButton = () => wrapper.find(CollapsedFilesWarning).find('button.gl-alert-action:first-child'); @@ -43,7 +41,6 @@ describe('CollapsedFilesWarning', () => { wrapper = mounter(CollapsedFilesWarning, { propsData: { ...propsData, ...props }, - localVue, store, }); }; @@ -54,20 +51,6 @@ describe('CollapsedFilesWarning', () => { describe('when there is more than one file', () => { it.each` - limited | containerClasses - ${true} | ${limitedClasses} - ${false} | ${[]} - `( - 'has the correct container classes when limited is $limited', - async ({ limited, containerClasses }) => { - createComponent({ limited }); - await files(store, 2); - - expect(wrapper.classes()).toEqual(['col-12'].concat(containerClasses)); - }, - ); - - it.each` present | dismissed ${false} | ${true} ${true} | ${false} @@ -86,7 +69,7 @@ describe('CollapsedFilesWarning', () => { getAlertCloseButton().element.click(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.find('[data-testid="root"]').exists()).toBe(false); }); diff --git a/spec/frontend/diffs/components/compare_versions_spec.js b/spec/frontend/diffs/components/compare_versions_spec.js index c48935bc4f0..21f3ee26bf8 100644 --- a/spec/frontend/diffs/components/compare_versions_spec.js +++ b/spec/frontend/diffs/components/compare_versions_spec.js @@ -1,4 +1,5 @@ -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import getDiffWithCommit from 'test_fixtures/merge_request_diffs/with_commit.json'; import setWindowLocation from 'helpers/set_window_location_helper'; @@ -8,8 +9,7 @@ import CompareVersionsComponent from '~/diffs/components/compare_versions.vue'; import { createStore } from '~/mr_notes/stores'; import diffsMockData from '../mock_data/merge_request_diffs'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); const NEXT_COMMIT_URL = `${TEST_HOST}/?commit_id=next`; const PREV_COMMIT_URL = `${TEST_HOST}/?commit_id=prev`; @@ -30,7 +30,6 @@ describe('CompareVersions', () => { } wrapper = mount(CompareVersionsComponent, { - localVue, store, propsData: { mergeRequestDiffs: diffsMockData, @@ -39,7 +38,6 @@ describe('CompareVersions', () => { }, }); }; - const findLimitedContainer = () => wrapper.find('.container-limited.limit-container-width'); const findCompareSourceDropdown = () => wrapper.find('.mr-version-dropdown'); const findCompareTargetDropdown = () => wrapper.find('.mr-version-compare-dropdown'); const getCommitNavButtonsElement = () => wrapper.find('.commit-nav-buttons'); @@ -99,18 +97,6 @@ describe('CompareVersions', () => { expect(inlineBtn.html()).toContain('Inline'); expect(parallelBtn.html()).toContain('Side-by-side'); }); - - it('adds container-limiting classes when showFileTree is false with inline diffs', () => { - createWrapper({ isLimitedContainer: true }); - - expect(findLimitedContainer().exists()).toBe(true); - }); - - it('does not add container-limiting classes when showFileTree is false with inline diffs', () => { - createWrapper({ isLimitedContainer: false }); - - expect(findLimitedContainer().exists()).toBe(false); - }); }); describe('noChangedFiles', () => { @@ -233,14 +219,13 @@ describe('CompareVersions', () => { expect(link.element.getAttribute('href')).toEqual(PREV_COMMIT_URL); }); - it('triggers the correct Vuex action on click', () => { + it('triggers the correct Vuex action on click', async () => { const link = getPrevCommitNavElement(); link.trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ - direction: 'previous', - }); + await nextTick(); + expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ + direction: 'previous', }); }); @@ -268,13 +253,12 @@ describe('CompareVersions', () => { expect(link.element.getAttribute('href')).toEqual(NEXT_COMMIT_URL); }); - it('triggers the correct Vuex action on click', () => { + it('triggers the correct Vuex action on click', async () => { const link = getNextCommitNavElement(); link.trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ direction: 'next' }); - }); + await nextTick(); + expect(wrapper.vm.moveToNeighboringCommit).toHaveBeenCalledWith({ direction: 'next' }); }); it('renders a disabled button when there is no next commit', () => { diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js index 0a7dfc02c65..7d2afe105a5 100644 --- a/spec/frontend/diffs/components/diff_content_spec.js +++ b/spec/frontend/diffs/components/diff_content_spec.js @@ -1,5 +1,6 @@ import { GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import DiffContentComponent from '~/diffs/components/diff_content.vue'; import DiffDiscussions from '~/diffs/components/diff_discussions.vue'; @@ -11,8 +12,7 @@ import NoPreviewViewer from '~/vue_shared/components/diff_viewer/viewers/no_prev import NotDiffableViewer from '~/vue_shared/components/diff_viewer/viewers/not_diffable.vue'; import diffFileMockData from '../mock_data/diff_file'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('DiffContent', () => { let wrapper; @@ -88,7 +88,6 @@ describe('DiffContent', () => { ...defaultProps, ...props, }, - localVue, store: fakeStore, provide: { glFeatures }, }); diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js index 9443a441ec2..f03c0357a0e 100644 --- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js +++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js @@ -1,11 +1,11 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import DiffDiscussionReply from '~/diffs/components/diff_discussion_reply.vue'; import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue'; import NoteSignedOutWidget from '~/notes/components/note_signed_out_widget.vue'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('DiffDiscussionReply', () => { let wrapper; @@ -15,7 +15,6 @@ describe('DiffDiscussionReply', () => { const createComponent = (props = {}, slots = {}) => { wrapper = shallowMount(DiffDiscussionReply, { store, - localVue, propsData: { ...props, }, diff --git a/spec/frontend/diffs/components/diff_discussions_spec.js b/spec/frontend/diffs/components/diff_discussions_spec.js index bd6f4cd2545..2da68adddf6 100644 --- a/spec/frontend/diffs/components/diff_discussions_spec.js +++ b/spec/frontend/diffs/components/diff_discussions_spec.js @@ -1,5 +1,5 @@ import { GlIcon } from '@gitlab/ui'; -import { mount, createLocalVue } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import DiffDiscussions from '~/diffs/components/diff_discussions.vue'; import { createStore } from '~/mr_notes/stores'; import DiscussionNotes from '~/notes/components/discussion_notes.vue'; @@ -8,8 +8,6 @@ import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item import '~/behaviors/markdown/render_gfm'; import discussionsMockData from '../mock_data/diff_discussions'; -const localVue = createLocalVue(); - describe('DiffDiscussions', () => { let store; let wrapper; @@ -17,13 +15,12 @@ describe('DiffDiscussions', () => { const createComponent = (props) => { store = createStore(); - wrapper = mount(localVue.extend(DiffDiscussions), { + wrapper = mount(DiffDiscussions, { store, propsData: { discussions: getDiscussionsMockData(), ...props, }, - localVue, }); }; @@ -74,7 +71,7 @@ describe('DiffDiscussions', () => { expect(diffNotesToggle.text().trim()).toBe('1'); expect(diffNotesToggle.classes()).toEqual( - expect.arrayContaining(['btn-transparent', 'badge', 'badge-pill']), + expect.arrayContaining(['js-diff-notes-toggle', 'gl-translate-x-n50', 'design-note-pin']), ); }); @@ -90,8 +87,8 @@ describe('DiffDiscussions', () => { createComponent({ renderAvatarBadge: true }); const noteableDiscussion = wrapper.find(NoteableDiscussion); - expect(noteableDiscussion.find('.badge-pill').exists()).toBe(true); - expect(noteableDiscussion.find('.badge-pill').text().trim()).toBe('1'); + expect(noteableDiscussion.find('.design-note-pin').exists()).toBe(true); + expect(noteableDiscussion.find('.design-note-pin').text().trim()).toBe('1'); }); }); }); diff --git a/spec/frontend/diffs/components/diff_expansion_cell_spec.js b/spec/frontend/diffs/components/diff_expansion_cell_spec.js index f53f10d955d..cd472920bb9 100644 --- a/spec/frontend/diffs/components/diff_expansion_cell_spec.js +++ b/spec/frontend/diffs/components/diff_expansion_cell_spec.js @@ -91,7 +91,9 @@ describe('DiffExpansionCell', () => { }); expect(findExpandUp(wrapper).exists()).toBe(true); - expect(findExpandDown(wrapper).exists()).toBe(false); + expect(findExpandDown(wrapper).exists()).toBe(true); + expect(findExpandUp(wrapper).attributes('disabled')).not.toBeDefined(); + expect(findExpandDown(wrapper).attributes('disabled')).toBeDefined(); expect(findExpandAll(wrapper)).not.toBe(null); }); }); @@ -112,8 +114,10 @@ describe('DiffExpansionCell', () => { isBottom: true, }); - expect(findExpandUp(wrapper).exists()).toBe(false); expect(findExpandDown(wrapper).exists()).toBe(true); + expect(findExpandUp(wrapper).exists()).toBe(true); + expect(findExpandDown(wrapper).attributes('disabled')).not.toBeDefined(); + expect(findExpandUp(wrapper).attributes('disabled')).toBeDefined(); expect(findExpandAll(wrapper)).not.toBe(null); }); }); diff --git a/spec/frontend/diffs/components/diff_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js index 342b4bfcc50..f22bd312a6d 100644 --- a/spec/frontend/diffs/components/diff_file_header_spec.js +++ b/spec/frontend/diffs/components/diff_file_header_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import { cloneDeep } from 'lodash'; import Vuex from 'vuex'; @@ -37,8 +38,7 @@ const diffFile = Object.freeze( }), ); -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); describe('DiffFileHeader component', () => { let wrapper; @@ -82,7 +82,7 @@ describe('DiffFileHeader component', () => { const findExpandButton = () => wrapper.find({ ref: 'expandDiffToFullFileButton' }); const findFileActions = () => wrapper.find('.file-actions'); const findModeChangedLine = () => wrapper.find({ ref: 'fileMode' }); - const findLfsLabel = () => wrapper.find('.label-lfs'); + const findLfsLabel = () => wrapper.find('[data-testid="label-lfs"]'); const findToggleDiscussionsButton = () => wrapper.find({ ref: 'toggleDiscussionsButton' }); const findExternalLink = () => wrapper.find({ ref: 'externalLink' }); const findReplacedFileButton = () => wrapper.find({ ref: 'replacedFileButton' }); @@ -103,7 +103,6 @@ describe('DiffFileHeader component', () => { ...props, }, ...options, - localVue, store, }); }; @@ -126,30 +125,27 @@ describe('DiffFileHeader component', () => { expect(findCollapseIcon().props('name')).toBe(icon); }); - it('when header is clicked emits toggleFile', () => { + it('when header is clicked emits toggleFile', async () => { createComponent(); findHeader().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleFile).toBeDefined(); - }); + await nextTick(); + expect(wrapper.emitted().toggleFile).toBeDefined(); }); - it('when collapseIcon is clicked emits toggleFile', () => { + it('when collapseIcon is clicked emits toggleFile', async () => { createComponent({ props: { collapsible: true } }); findCollapseIcon().vm.$emit('click', new Event('click')); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleFile).toBeDefined(); - }); + await nextTick(); + expect(wrapper.emitted().toggleFile).toBeDefined(); }); - it('when other element in header is clicked does not emits toggleFile', () => { + it('when other element in header is clicked does not emits toggleFile', async () => { createComponent({ props: { collapsible: true } }); findTitleLink().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleFile).not.toBeDefined(); - }); + await nextTick(); + expect(wrapper.emitted().toggleFile).not.toBeDefined(); }); describe('copy to clipboard', () => { diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js index dc0ed621a64..a0aa4c784bf 100644 --- a/spec/frontend/diffs/components/diff_file_spec.js +++ b/spec/frontend/diffs/components/diff_file_spec.js @@ -1,6 +1,6 @@ -import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { shallowMount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; -import { nextTick } from 'vue'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import DiffContentComponent from 'jh_else_ce/diffs/components/diff_content.vue'; @@ -70,9 +70,7 @@ function markFileToBeRendered(store, index = 0) { } function createComponent({ file, first = false, last = false, options = {}, props = {} }) { - const localVue = createLocalVue(); - - localVue.use(Vuex); + Vue.use(Vuex); const store = new Vuex.Store({ ...createNotesStore(), @@ -85,7 +83,6 @@ function createComponent({ file, first = false, last = false, options = {}, prop const wrapper = shallowMount(DiffFileComponent, { store, - localVue, propsData: { file, canCurrentUserFork: false, @@ -98,7 +95,6 @@ function createComponent({ file, first = false, last = false, options = {}, prop }); return { - localVue, wrapper, store, }; @@ -164,7 +160,7 @@ describe('DiffFile', () => { last, })); - await wrapper.vm.$nextTick(); + await nextTick(); expect(eventHub.$emit).toHaveBeenCalledTimes(events.length); events.forEach((event) => { @@ -188,13 +184,13 @@ describe('DiffFile', () => { makeFileAutomaticallyCollapsed(store); - await wrapper.vm.$nextTick(); // Wait for store updates to flow into the component + await nextTick(); // Wait for store updates to flow into the component toggleFile(wrapper); - await wrapper.vm.$nextTick(); // Wait for the load to resolve - await wrapper.vm.$nextTick(); // Wait for the idleCallback - await wrapper.vm.$nextTick(); // Wait for nextTick inside postRender + await nextTick(); // Wait for the load to resolve + await nextTick(); // Wait for the idleCallback + await nextTick(); // Wait for nextTick inside postRender expect(eventHub.$emit).toHaveBeenCalledTimes(2); expect(eventHub.$emit).toHaveBeenCalledWith(EVT_PERF_MARK_FIRST_DIFF_FILE_SHOWN); @@ -218,7 +214,7 @@ describe('DiffFile', () => { markFileToBeRendered(store); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.find(DiffContentComponent).exists()).toBe(true); }); @@ -268,7 +264,7 @@ describe('DiffFile', () => { it('performs the normal file toggle when the file is collapsed', async () => { makeFileAutomaticallyCollapsed(store); - await wrapper.vm.$nextTick(); + await nextTick(); eventHub.$emit(EVT_EXPAND_ALL_FILES); @@ -278,7 +274,7 @@ describe('DiffFile', () => { it('does nothing when the file is not collapsed', async () => { eventHub.$emit(EVT_EXPAND_ALL_FILES); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.vm.handleToggle).not.toHaveBeenCalled(); }); @@ -290,7 +286,7 @@ describe('DiffFile', () => { }); it('should not have any content at all', async () => { - await wrapper.vm.$nextTick(); + await nextTick(); expect(findDiffContentArea(wrapper).element.children.length).toBe(0); }); @@ -396,7 +392,7 @@ describe('DiffFile', () => { readableText, }); - await wrapper.vm.$nextTick(); + await nextTick(); toggleFile(wrapper); }; @@ -444,7 +440,7 @@ describe('DiffFile', () => { makeFileAutomaticallyCollapsed(store); wrapper.vm.requestDiff(); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findLoader(wrapper).exists()).toBe(true); }); @@ -455,7 +451,7 @@ describe('DiffFile', () => { ({ wrapper, store } = createComponent({ file: getUnreadableFile() })); makeFileAutomaticallyCollapsed(store); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findDiffContentArea(wrapper).html()).toContain( 'Files with large changes are collapsed by default.', @@ -474,7 +470,7 @@ describe('DiffFile', () => { markFileToBeRendered(store); changeViewerType(store, mode); - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.classes('has-body')).toBe(true); expect(wrapper.find(DiffContentComponent).exists()).toBe(true); @@ -500,7 +496,7 @@ describe('DiffFile', () => { }, }); - await wrapper.vm.$nextTick(); + await nextTick(); const button = wrapper.find('[data-testid="blob-button"]'); @@ -525,7 +521,7 @@ describe('DiffFile', () => { ({ wrapper, store } = createComponent({ file, props: { viewDiffsFileByFile: true } })); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findLoader(wrapper).exists()).toBe(true); }); diff --git a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js index 5884a9ebd3a..c18f0b721da 100644 --- a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js +++ b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js @@ -1,4 +1,5 @@ import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue'; import discussionsMockData from '../mock_data/diff_discussions'; @@ -35,12 +36,11 @@ describe('DiffGutterAvatars', () => { expect(findCollapseButton().exists()).toBe(true); }); - it('should emit toggleDiscussions event on button click', () => { + it('should emit toggleDiscussions event on button click', async () => { findCollapseButton().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); - }); + await nextTick(); + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); }); }); @@ -65,20 +65,18 @@ describe('DiffGutterAvatars', () => { expect(findMoreCount().text()).toBe('+2'); }); - it('should emit toggleDiscussions event on avatars click', () => { + it('should emit toggleDiscussions event on avatars click', async () => { findUserAvatars().at(0).trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); - }); + await nextTick(); + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); }); - it('should emit toggleDiscussions event on more count text click', () => { + it('should emit toggleDiscussions event on more count text click', async () => { findMoreCount().trigger('click'); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); - }); + await nextTick(); + expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); }); }); diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js index 3af66526050..9b8f0421b7c 100644 --- a/spec/frontend/diffs/components/diff_view_spec.js +++ b/spec/frontend/diffs/components/diff_view_spec.js @@ -50,8 +50,11 @@ describe('DiffView', () => { }; it('renders a match line', () => { - const wrapper = createWrapper({ diffLines: [{ isMatchLineLeft: true }] }); + const wrapper = createWrapper({ + diffLines: [{ isMatchLineLeft: true, left: { rich_text: 'matched text', lineDraft: {} } }], + }); expect(wrapper.find(DiffExpansionCell).exists()).toBe(true); + expect(wrapper.text()).toContain('matched text'); }); it.each` diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js index 8c1a8041f6c..70191620eb6 100644 --- a/spec/frontend/diffs/components/image_diff_overlay_spec.js +++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js @@ -1,5 +1,5 @@ import { GlIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { mount } from '@vue/test-utils'; import ImageDiffOverlay from '~/diffs/components/image_diff_overlay.vue'; import { createStore } from '~/mr_notes/stores'; import { imageDiffDiscussions } from '../mock_data/diff_discussions'; @@ -19,7 +19,7 @@ describe('Diffs image diff overlay component', () => { extendStore(store); dispatch = jest.spyOn(store, 'dispatch').mockImplementation(); - wrapper = shallowMount(ImageDiffOverlay, { + wrapper = mount(ImageDiffOverlay, { store, parentComponent: { data() { diff --git a/spec/frontend/diffs/components/merge_conflict_warning_spec.js b/spec/frontend/diffs/components/merge_conflict_warning_spec.js index 2f303f25f66..4e47249f5b4 100644 --- a/spec/frontend/diffs/components/merge_conflict_warning_spec.js +++ b/spec/frontend/diffs/components/merge_conflict_warning_spec.js @@ -1,13 +1,11 @@ import { shallowMount, mount } from '@vue/test-utils'; import MergeConflictWarning from '~/diffs/components/merge_conflict_warning.vue'; -import { CENTERED_LIMITED_CONTAINER_CLASSES } from '~/diffs/constants'; const propsData = { limited: true, mergeable: true, resolutionPath: 'a-path', }; -const limitedClasses = CENTERED_LIMITED_CONTAINER_CLASSES.split(' '); function findResolveButton(wrapper) { return wrapper.find('.gl-alert-actions a.gl-button:first-child'); @@ -32,19 +30,6 @@ describe('MergeConflictWarning', () => { }); it.each` - limited | containerClasses - ${true} | ${limitedClasses} - ${false} | ${[]} - `( - 'has the correct container classes when limited is $limited', - ({ limited, containerClasses }) => { - createComponent({ limited }); - - expect(wrapper.classes()).toEqual(containerClasses); - }, - ); - - it.each` present | resolutionPath ${false} | ${''} ${true} | ${'some-path'} diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js index 164c58dc8e4..6903b844e5e 100644 --- a/spec/frontend/diffs/components/no_changes_spec.js +++ b/spec/frontend/diffs/components/no_changes_spec.js @@ -1,12 +1,12 @@ import { GlButton } from '@gitlab/ui'; -import { createLocalVue, shallowMount, mount } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue from 'vue'; import Vuex from 'vuex'; import NoChanges from '~/diffs/components/no_changes.vue'; import { createStore } from '~/mr_notes/stores'; import diffsMockData from '../mock_data/merge_request_diffs'; -const localVue = createLocalVue(); -localVue.use(Vuex); +Vue.use(Vuex); const TEST_TARGET_BRANCH = 'foo'; const TEST_SOURCE_BRANCH = 'dev/update'; @@ -17,7 +17,6 @@ describe('Diff no changes empty state', () => { function createComponent(mountFn = shallowMount) { wrapper = mountFn(NoChanges, { - localVue, store, propsData: { changesEmptyStateIllustration: '', diff --git a/spec/frontend/diffs/components/settings_dropdown_spec.js b/spec/frontend/diffs/components/settings_dropdown_spec.js index 2dd35519464..693fc5bfd8f 100644 --- a/spec/frontend/diffs/components/settings_dropdown_spec.js +++ b/spec/frontend/diffs/components/settings_dropdown_spec.js @@ -1,5 +1,6 @@ import { mount } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import SettingsDropdown from '~/diffs/components/settings_dropdown.vue'; @@ -10,7 +11,6 @@ import createDiffsStore from '../create_diffs_store'; describe('Diff settings dropdown component', () => { let wrapper; - let vm; let store; function createComponent(extendStore = () => {}) { @@ -23,7 +23,6 @@ describe('Diff settings dropdown component', () => { store, }), ); - vm = wrapper.vm; } function getFileByFileCheckbox(vueWrapper) { @@ -142,7 +141,7 @@ describe('Diff settings dropdown component', () => { checkbox.trigger('click'); - await vm.$nextTick(); + await nextTick(); expect(store.dispatch).toHaveBeenCalledWith('diffs/setShowWhitespace', { showWhitespace: !checked, @@ -185,7 +184,7 @@ describe('Diff settings dropdown component', () => { getFileByFileCheckbox(wrapper).trigger('click'); - await vm.$nextTick(); + await nextTick(); expect(store.dispatch).toHaveBeenCalledWith('diffs/setFileByFile', { fileByFile: setting, diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js index 31044b0818c..963805f4792 100644 --- a/spec/frontend/diffs/components/tree_list_spec.js +++ b/spec/frontend/diffs/components/tree_list_spec.js @@ -1,4 +1,5 @@ -import { shallowMount, mount, createLocalVue } from '@vue/test-utils'; +import { shallowMount, mount } from '@vue/test-utils'; +import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import TreeList from '~/diffs/components/tree_list.vue'; import createStore from '~/diffs/store/modules'; @@ -8,13 +9,11 @@ describe('Diffs tree list component', () => { let wrapper; let store; const getFileRows = () => wrapper.findAll('.file-row'); - const localVue = createLocalVue(); - localVue.use(Vuex); + Vue.use(Vuex); const createComponent = (mountFn = mount) => { wrapper = mountFn(TreeList, { store, - localVue, propsData: { hideFileStats: false }, }); }; @@ -92,12 +91,11 @@ describe('Diffs tree list component', () => { expect(getFileRows().at(1).html()).toContain('app'); }); - it('hides file stats', () => { + it('hides file stats', async () => { wrapper.setProps({ hideFileStats: true }); - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find('.file-row-stats').exists()).toBe(false); - }); + await nextTick(); + expect(wrapper.find('.file-row-stats').exists()).toBe(false); }); it('calls toggleTreeOpen when clicking folder', () => { @@ -118,20 +116,18 @@ describe('Diffs tree list component', () => { }); }); - it('renders as file list when renderTreeList is false', () => { + it('renders as file list when renderTreeList is false', async () => { wrapper.vm.$store.state.diffs.renderTreeList = false; - return wrapper.vm.$nextTick().then(() => { - expect(getFileRows()).toHaveLength(1); - }); + await nextTick(); + expect(getFileRows()).toHaveLength(1); }); - it('renders file paths when renderTreeList is false', () => { + it('renders file paths when renderTreeList is false', async () => { wrapper.vm.$store.state.diffs.renderTreeList = false; - return wrapper.vm.$nextTick().then(() => { - expect(wrapper.find('.file-row').html()).toContain('index.js'); - }); + await nextTick(); + expect(wrapper.find('.file-row').html()).toContain('index.js'); }); }); @@ -143,14 +139,13 @@ describe('Diffs tree list component', () => { store.state.diffs.viewedDiffFileIds = viewedDiffFileIds; }); - it('passes the viewedDiffFileIds to the FileTree', () => { + it('passes the viewedDiffFileIds to the FileTree', async () => { createComponent(shallowMount); - return wrapper.vm.$nextTick().then(() => { - // Have to use $attrs['viewed-files'] because we are passing down an object - // and attributes('') stringifies values (e.g. [object])... - expect(wrapper.find(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds); - }); + await nextTick(); + // Have to use $attrs['viewed-files'] because we are passing down an object + // and attributes('') stringifies values (e.g. [object])... + expect(wrapper.find(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds); }); }); }); diff --git a/spec/frontend/diffs/store/actions_spec.js b/spec/frontend/diffs/store/actions_spec.js index b5003a54917..d6a2aa104cd 100644 --- a/spec/frontend/diffs/store/actions_spec.js +++ b/spec/frontend/diffs/store/actions_spec.js @@ -202,7 +202,7 @@ describe('DiffsStoreActions', () => { testAction( fetchDiffFilesBatch, {}, - { endpointBatch, diffViewType: 'inline' }, + { endpointBatch, diffViewType: 'inline', diffFiles: [] }, [ { type: types.SET_BATCH_LOADING_STATE, payload: 'loading' }, { type: types.SET_RETRIEVING_BATCHES, payload: true }, @@ -544,10 +544,8 @@ describe('DiffsStoreActions', () => { [{ type: types.SET_DIFF_VIEW_TYPE, payload: INLINE_DIFF_VIEW_TYPE }], [], () => { - setImmediate(() => { - expect(Cookies.get('diff_view')).toEqual(INLINE_DIFF_VIEW_TYPE); - done(); - }); + expect(Cookies.get('diff_view')).toEqual(INLINE_DIFF_VIEW_TYPE); + done(); }, ); }); @@ -562,10 +560,8 @@ describe('DiffsStoreActions', () => { [{ type: types.SET_DIFF_VIEW_TYPE, payload: PARALLEL_DIFF_VIEW_TYPE }], [], () => { - setImmediate(() => { - expect(Cookies.get(DIFF_VIEW_COOKIE_NAME)).toEqual(PARALLEL_DIFF_VIEW_TYPE); - done(); - }); + expect(Cookies.get(DIFF_VIEW_COOKIE_NAME)).toEqual(PARALLEL_DIFF_VIEW_TYPE); + done(); }, ); }); |