diff options
Diffstat (limited to 'spec/frontend/diffs/components')
21 files changed, 157 insertions, 89 deletions
diff --git a/spec/frontend/diffs/components/app_spec.js b/spec/frontend/diffs/components/app_spec.js index 96f2ac1692c..b88206c3b9a 100644 --- a/spec/frontend/diffs/components/app_spec.js +++ b/spec/frontend/diffs/components/app_spec.js @@ -30,7 +30,7 @@ const UPDATED_COMMIT_URL = `${TEST_HOST}/COMMIT/NEW`; Vue.use(Vuex); function getCollapsedFilesWarning(wrapper) { - return wrapper.find(CollapsedFilesWarning); + return wrapper.findComponent(CollapsedFilesWarning); } describe('diffs/components/app', () => { @@ -167,7 +167,7 @@ describe('diffs/components/app', () => { state.diffs.isLoading = true; }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('displays loading icon on batch loading', () => { @@ -175,13 +175,13 @@ describe('diffs/components/app', () => { state.diffs.batchLoadingState = 'loading'; }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); it('displays diffs container when not loading', () => { createComponent(); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(false); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); expect(wrapper.find('#diffs').exists()).toBe(true); }); @@ -263,7 +263,7 @@ describe('diffs/components/app', () => { it('renders empty state when no diff files exist', () => { createComponent(); - expect(wrapper.find(NoChanges).exists()).toBe(true); + expect(wrapper.findComponent(NoChanges).exists()).toBe(true); }); it('does not render empty state when diff files exist', () => { @@ -273,8 +273,8 @@ describe('diffs/components/app', () => { }); }); - expect(wrapper.find(NoChanges).exists()).toBe(false); - expect(wrapper.findAll(DiffFile).length).toBe(1); + expect(wrapper.findComponent(NoChanges).exists()).toBe(false); + expect(wrapper.findAllComponents(DiffFile).length).toBe(1); }); }); @@ -487,8 +487,8 @@ describe('diffs/components/app', () => { state.diffs.mergeRequestDiff = mergeRequestDiff; }); - expect(wrapper.find(CompareVersions).exists()).toBe(true); - expect(wrapper.find(CompareVersions).props()).toEqual( + expect(wrapper.findComponent(CompareVersions).exists()).toBe(true); + expect(wrapper.findComponent(CompareVersions).props()).toEqual( expect.objectContaining({ diffFilesCountText: null, }), @@ -506,8 +506,8 @@ describe('diffs/components/app', () => { state.diffs.size = 1; }); - expect(wrapper.find(HiddenFilesWarning).exists()).toBe(true); - expect(wrapper.find(HiddenFilesWarning).props()).toEqual( + expect(wrapper.findComponent(HiddenFilesWarning).exists()).toBe(true); + expect(wrapper.findComponent(HiddenFilesWarning).props()).toEqual( expect.objectContaining({ total: '5', plainDiffPath: 'plain diff path', @@ -547,7 +547,7 @@ describe('diffs/components/app', () => { }; }); - expect(wrapper.find(CommitWidget).exists()).toBe(true); + expect(wrapper.findComponent(CommitWidget).exists()).toBe(true); }); it('should display diff file if there are diff files', () => { @@ -555,13 +555,13 @@ describe('diffs/components/app', () => { state.diffs.diffFiles.push({ sha: '123' }); }); - expect(wrapper.find(DiffFile).exists()).toBe(true); + expect(wrapper.findComponent(DiffFile).exists()).toBe(true); }); it("doesn't render tree list when no changes exist", () => { createComponent(); - expect(wrapper.find(TreeList).exists()).toBe(false); + expect(wrapper.findComponent(TreeList).exists()).toBe(false); }); it('should render tree list', () => { @@ -569,7 +569,7 @@ describe('diffs/components/app', () => { state.diffs.diffFiles = [{ file_hash: '111', file_path: '111.js' }]; }); - expect(wrapper.find(TreeList).exists()).toBe(true); + expect(wrapper.findComponent(TreeList).exists()).toBe(true); }); }); @@ -636,12 +636,12 @@ describe('diffs/components/app', () => { await nextTick(); - expect(wrapper.findAll(DiffFile).length).toBe(1); + expect(wrapper.findAllComponents(DiffFile).length).toBe(1); }); describe('pagination', () => { const fileByFileNav = () => wrapper.find('[data-testid="file-by-file-navigation"]'); - const paginator = () => fileByFileNav().find(GlPagination); + const paginator = () => fileByFileNav().findComponent(GlPagination); it('sets previous button as disabled', async () => { createComponent({ fileByFileUserPreference: true }, ({ state }) => { @@ -682,7 +682,7 @@ describe('diffs/components/app', () => { ${'123'} | ${2} ${'312'} | ${1} `( - 'it calls navigateToDiffFileIndex with $index when $link is clicked', + 'calls navigateToDiffFileIndex with $index when $link is clicked', async ({ currentDiffFileId, targetFile }) => { createComponent({ fileByFileUserPreference: true }, ({ state }) => { state.diffs.diffFiles.push({ file_hash: '123' }, { file_hash: '312' }); diff --git a/spec/frontend/diffs/components/collapsed_files_warning_spec.js b/spec/frontend/diffs/components/collapsed_files_warning_spec.js index cc4f13ab0cf..eca5b536a35 100644 --- a/spec/frontend/diffs/components/collapsed_files_warning_spec.js +++ b/spec/frontend/diffs/components/collapsed_files_warning_spec.js @@ -28,8 +28,8 @@ describe('CollapsedFilesWarning', () => { Vue.use(Vuex); const getAlertActionButton = () => - wrapper.find(CollapsedFilesWarning).find('button.gl-alert-action:first-child'); - const getAlertCloseButton = () => wrapper.find(CollapsedFilesWarning).find('button'); + wrapper.findComponent(CollapsedFilesWarning).find('button.gl-alert-action:first-child'); + const getAlertCloseButton = () => wrapper.findComponent(CollapsedFilesWarning).find('button'); const createComponent = (props = {}, { full } = { full: false }) => { const mounter = full ? mount : shallowMount; diff --git a/spec/frontend/diffs/components/commit_item_spec.js b/spec/frontend/diffs/components/commit_item_spec.js index e52c5abbc7b..440f169be86 100644 --- a/spec/frontend/diffs/components/commit_item_spec.js +++ b/spec/frontend/diffs/components/commit_item_spec.js @@ -27,7 +27,7 @@ describe('diffs/components/commit_item', () => { const getAvatarElement = () => wrapper.find('.user-avatar-link'); const getCommitterElement = () => wrapper.find('.committer'); const getCommitActionsElement = () => wrapper.find('.commit-actions'); - const getCommitPipelineStatus = () => wrapper.find(CommitPipelineStatus); + const getCommitPipelineStatus = () => wrapper.findComponent(CommitPipelineStatus); const mountComponent = (propsData) => { wrapper = mount(Component, { @@ -111,8 +111,8 @@ describe('diffs/components/commit_item', () => { const descElement = getDescElement(); const descExpandElement = getDescExpandElement(); - expect(descElement.exists()).toBeFalsy(); - expect(descExpandElement.exists()).toBeFalsy(); + expect(descElement.exists()).toBe(false); + expect(descExpandElement.exists()).toBe(false); }); }); diff --git a/spec/frontend/diffs/components/commit_widget_spec.js b/spec/frontend/diffs/components/commit_widget_spec.js index fbff473e4df..f650ead6f83 100644 --- a/spec/frontend/diffs/components/commit_widget_spec.js +++ b/spec/frontend/diffs/components/commit_widget_spec.js @@ -12,7 +12,7 @@ describe('diffs/components/commit_widget', () => { }); it('renders commit item', () => { - const commitElement = wrapper.find(CommitItem); + const commitElement = wrapper.findComponent(CommitItem); expect(commitElement.exists()).toBe(true); }); diff --git a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js index 98f88226742..09128b04caa 100644 --- a/spec/frontend/diffs/components/compare_dropdown_layout_spec.js +++ b/spec/frontend/diffs/components/compare_dropdown_layout_spec.js @@ -34,7 +34,7 @@ describe('CompareDropdownLayout', () => { findListItems().wrappers.map((listItem) => ({ href: listItem.find('a').attributes('href'), text: trimText(listItem.text()), - createdAt: listItem.findAll(TimeAgo).wrappers[0]?.props('time'), + createdAt: listItem.findAllComponents(TimeAgo).wrappers[0]?.props('time'), isActive: listItem.classes().includes('is-active'), })); diff --git a/spec/frontend/diffs/components/diff_code_quality_spec.js b/spec/frontend/diffs/components/diff_code_quality_spec.js index 81a817c47dc..b5dce4fc924 100644 --- a/spec/frontend/diffs/components/diff_code_quality_spec.js +++ b/spec/frontend/diffs/components/diff_code_quality_spec.js @@ -17,7 +17,6 @@ describe('DiffCodeQuality', () => { return mountFunction(DiffCodeQuality, { propsData: { expandedLines: [], - line: 1, codeQuality, }, }); @@ -28,9 +27,7 @@ describe('DiffCodeQuality', () => { expect(wrapper.findByTestId('diff-codequality').exists()).toBe(true); await wrapper.findByTestId('diff-codequality-close').trigger('click'); - expect(wrapper.emitted('hideCodeQualityFindings').length).toBe(1); - expect(wrapper.emitted().hideCodeQualityFindings[0][0]).toBe(wrapper.props('line')); }); it('renders correct amount of list items for codequality array and their description', async () => { diff --git a/spec/frontend/diffs/components/diff_comment_cell_spec.js b/spec/frontend/diffs/components/diff_comment_cell_spec.js index b636a178593..2acfc2c6d7e 100644 --- a/spec/frontend/diffs/components/diff_comment_cell_spec.js +++ b/spec/frontend/diffs/components/diff_comment_cell_spec.js @@ -20,24 +20,24 @@ describe('DiffCommentCell', () => { it('renders discussions if line has discussions', () => { const wrapper = createWrapper({ renderDiscussion: true }); - expect(wrapper.find(DiffDiscussions).exists()).toBe(true); + expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(true); }); it('does not render discussions if line has no discussions', () => { const wrapper = createWrapper(); - expect(wrapper.find(DiffDiscussions).exists()).toBe(false); + expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(false); }); it('renders discussion reply if line has no draft', () => { const wrapper = createWrapper(); - expect(wrapper.find(DiffDiscussionReply).exists()).toBe(true); + expect(wrapper.findComponent(DiffDiscussionReply).exists()).toBe(true); }); it('does not render discussion reply if line has draft', () => { const wrapper = createWrapper({ hasDraft: true }); - expect(wrapper.find(DiffDiscussionReply).exists()).toBe(false); + expect(wrapper.findComponent(DiffDiscussionReply).exists()).toBe(false); }); }); diff --git a/spec/frontend/diffs/components/diff_content_spec.js b/spec/frontend/diffs/components/diff_content_spec.js index 6844e6e497a..9f593ee0d49 100644 --- a/spec/frontend/diffs/components/diff_content_spec.js +++ b/spec/frontend/diffs/components/diff_content_spec.js @@ -110,13 +110,13 @@ describe('DiffContent', () => { props: { diffFile: textDiffFile }, }); - expect(wrapper.find(DiffView).exists()).toBe(true); + expect(wrapper.findComponent(DiffView).exists()).toBe(true); }); it('renders rendering more lines loading icon', () => { createComponent({ props: { diffFile: { ...textDiffFile, renderingLines: true } } }); - expect(wrapper.find(GlLoadingIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); }); }); @@ -133,7 +133,7 @@ describe('DiffContent', () => { props: { diffFile: { ...emptyDiffFile, viewer: { name: diffViewerModes.no_preview } } }, }); - expect(wrapper.find(NoPreviewViewer).exists()).toBe(true); + expect(wrapper.findComponent(NoPreviewViewer).exists()).toBe(true); }); it('should render not diffable view if viewer set to non_diffable', () => { @@ -141,7 +141,7 @@ describe('DiffContent', () => { props: { diffFile: { ...emptyDiffFile, viewer: { name: diffViewerModes.not_diffable } } }, }); - expect(wrapper.find(NotDiffableViewer).exists()).toBe(true); + expect(wrapper.findComponent(NotDiffableViewer).exists()).toBe(true); }); }); @@ -156,7 +156,7 @@ describe('DiffContent', () => { }, }); - expect(wrapper.find(DiffDiscussions).exists()).toBe(true); + expect(wrapper.findComponent(DiffDiscussions).exists()).toBe(true); }); it('emits saveDiffDiscussion when note-form emits `handleFormUpdate`', () => { @@ -169,7 +169,7 @@ describe('DiffContent', () => { }, }); - wrapper.find(NoteForm).vm.$emit('handleFormUpdate', noteStub); + wrapper.findComponent(NoteForm).vm.$emit('handleFormUpdate', noteStub); expect(saveDiffDiscussionMock).toHaveBeenCalledWith(expect.any(Object), { note: noteStub, formData: { diff --git a/spec/frontend/diffs/components/diff_discussion_reply_spec.js b/spec/frontend/diffs/components/diff_discussion_reply_spec.js index f03c0357a0e..5ccd2002462 100644 --- a/spec/frontend/diffs/components/diff_discussion_reply_spec.js +++ b/spec/frontend/diffs/components/diff_discussion_reply_spec.js @@ -64,7 +64,7 @@ describe('DiffDiscussionReply', () => { hasForm: false, }); - expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true); + expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true); }); }); @@ -83,6 +83,6 @@ describe('DiffDiscussionReply', () => { hasForm: false, }); - expect(wrapper.find(NoteSignedOutWidget).exists()).toBe(true); + expect(wrapper.findComponent(NoteSignedOutWidget).exists()).toBe(true); }); }); diff --git a/spec/frontend/diffs/components/diff_discussions_spec.js b/spec/frontend/diffs/components/diff_discussions_spec.js index 2da68adddf6..e9a0e0745fd 100644 --- a/spec/frontend/diffs/components/diff_discussions_spec.js +++ b/spec/frontend/diffs/components/diff_discussions_spec.js @@ -32,11 +32,11 @@ describe('DiffDiscussions', () => { it('should have notes list', () => { createComponent(); - expect(wrapper.find(NoteableDiscussion).exists()).toBe(true); - expect(wrapper.find(DiscussionNotes).exists()).toBe(true); - expect(wrapper.find(DiscussionNotes).findAll(TimelineEntryItem).length).toBe( - discussionsMockData.notes.length, - ); + expect(wrapper.findComponent(NoteableDiscussion).exists()).toBe(true); + expect(wrapper.findComponent(DiscussionNotes).exists()).toBe(true); + expect( + wrapper.findComponent(DiscussionNotes).findAllComponents(TimelineEntryItem).length, + ).toBe(discussionsMockData.notes.length); }); }); @@ -48,7 +48,7 @@ describe('DiffDiscussions', () => { const diffNotesToggle = findDiffNotesToggle(); expect(diffNotesToggle.exists()).toBe(true); - expect(diffNotesToggle.find(GlIcon).exists()).toBe(true); + expect(diffNotesToggle.findComponent(GlIcon).exists()).toBe(true); expect(diffNotesToggle.classes('diff-notes-collapse')).toBe(true); }); @@ -80,12 +80,12 @@ describe('DiffDiscussions', () => { discussions[0].expanded = false; createComponent({ discussions, shouldCollapseDiscussions: true }); - expect(wrapper.find(NoteableDiscussion).isVisible()).toBe(false); + expect(wrapper.findComponent(NoteableDiscussion).isVisible()).toBe(false); }); it('renders badge on avatar', () => { createComponent({ renderAvatarBadge: true }); - const noteableDiscussion = wrapper.find(NoteableDiscussion); + const noteableDiscussion = wrapper.findComponent(NoteableDiscussion); 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_file_header_spec.js b/spec/frontend/diffs/components/diff_file_header_spec.js index 92b8b2d4aa3..c23eb2f3d24 100644 --- a/spec/frontend/diffs/components/diff_file_header_spec.js +++ b/spec/frontend/diffs/components/diff_file_header_spec.js @@ -76,18 +76,19 @@ describe('DiffFileHeader component', () => { wrapper.destroy(); }); - const findHeader = () => wrapper.find({ ref: 'header' }); - const findTitleLink = () => wrapper.find({ ref: 'titleWrapper' }); - const findExpandButton = () => wrapper.find({ ref: 'expandDiffToFullFileButton' }); + const findHeader = () => wrapper.findComponent({ ref: 'header' }); + const findTitleLink = () => wrapper.findComponent({ ref: 'titleWrapper' }); + const findExpandButton = () => wrapper.findComponent({ ref: 'expandDiffToFullFileButton' }); const findFileActions = () => wrapper.find('.file-actions'); - const findModeChangedLine = () => wrapper.find({ ref: 'fileMode' }); + const findModeChangedLine = () => wrapper.findComponent({ ref: 'fileMode' }); 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' }); - const findViewFileButton = () => wrapper.find({ ref: 'viewButton' }); - const findCollapseIcon = () => wrapper.find({ ref: 'collapseIcon' }); - const findEditButton = () => wrapper.find({ ref: 'editButton' }); + const findToggleDiscussionsButton = () => + wrapper.findComponent({ ref: 'toggleDiscussionsButton' }); + const findExternalLink = () => wrapper.findComponent({ ref: 'externalLink' }); + const findReplacedFileButton = () => wrapper.findComponent({ ref: 'replacedFileButton' }); + const findViewFileButton = () => wrapper.findComponent({ ref: 'viewButton' }); + const findCollapseIcon = () => wrapper.findComponent({ ref: 'collapseIcon' }); + const findEditButton = () => wrapper.findComponent({ ref: 'editButton' }); const findReviewFileCheckbox = () => wrapper.find("[data-testid='fileReviewCheckbox']"); const createComponent = ({ props, options = {} } = {}) => { @@ -153,7 +154,7 @@ describe('DiffFileHeader component', () => { }); it('displays a copy to clipboard button', () => { - expect(wrapper.find(ClipboardButton).exists()).toBe(true); + expect(wrapper.findComponent(ClipboardButton).exists()).toBe(true); }); it('triggers the copy to clipboard tracking event', () => { diff --git a/spec/frontend/diffs/components/diff_file_row_spec.js b/spec/frontend/diffs/components/diff_file_row_spec.js index 1d1c5fec293..c5b76551fcc 100644 --- a/spec/frontend/diffs/components/diff_file_row_spec.js +++ b/spec/frontend/diffs/components/diff_file_row_spec.js @@ -32,7 +32,7 @@ describe('Diff File Row component', () => { ...diffFileRowProps, }); - expect(wrapper.find(FileRow).props()).toEqual( + expect(wrapper.findComponent(FileRow).props()).toEqual( expect.objectContaining({ ...sharedProps, }), @@ -47,7 +47,7 @@ describe('Diff File Row component', () => { showTooltip: true, }); - expect(wrapper.find(ChangedFileIcon).props()).toEqual( + expect(wrapper.findComponent(ChangedFileIcon).props()).toEqual( expect.objectContaining({ file: {}, size: 16, @@ -74,7 +74,7 @@ describe('Diff File Row component', () => { hideFileStats: false, viewedFiles: isViewed ? { '#123456789': true } : {}, }); - expect(wrapper.find(FileRow).props('fileClasses')).toBe(expected); + expect(wrapper.findComponent(FileRow).props('fileClasses')).toBe(expected); }, ); @@ -92,7 +92,7 @@ describe('Diff File Row component', () => { }, hideFileStats, }); - expect(wrapper.find(FileRowStats).exists()).toEqual(value); + expect(wrapper.findComponent(FileRowStats).exists()).toEqual(value); }); }); diff --git a/spec/frontend/diffs/components/diff_file_spec.js b/spec/frontend/diffs/components/diff_file_spec.js index 9e8d9e1ca29..944cec77efb 100644 --- a/spec/frontend/diffs/components/diff_file_spec.js +++ b/spec/frontend/diffs/components/diff_file_spec.js @@ -100,7 +100,7 @@ function createComponent({ file, first = false, last = false, options = {}, prop }; } -const findDiffHeader = (wrapper) => wrapper.find(DiffFileHeaderComponent); +const findDiffHeader = (wrapper) => wrapper.findComponent(DiffFileHeaderComponent); const findDiffContentArea = (wrapper) => wrapper.find('[data-testid="content-area"]'); const findLoader = (wrapper) => wrapper.find('[data-testid="loader-icon"]'); const findToggleButton = (wrapper) => wrapper.find('[data-testid="expand-button"]'); @@ -209,14 +209,14 @@ describe('DiffFile', () => { expect(el.querySelectorAll('.diff-content.hidden').length).toEqual(0); expect(el.querySelector('.js-file-title')).toBeDefined(); - expect(wrapper.find(DiffFileHeaderComponent).exists()).toBe(true); + expect(wrapper.findComponent(DiffFileHeaderComponent).exists()).toBe(true); expect(el.querySelector('.js-syntax-highlight')).toBeDefined(); markFileToBeRendered(store); await nextTick(); - expect(wrapper.find(DiffContentComponent).exists()).toBe(true); + expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true); }); }); @@ -320,7 +320,7 @@ describe('DiffFile', () => { }); it('should have the file content', async () => { - expect(wrapper.find(DiffContentComponent).exists()).toBe(true); + expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true); }); it('should style the component so that it `.has-body` for layout purposes', () => { @@ -473,8 +473,8 @@ describe('DiffFile', () => { await nextTick(); expect(wrapper.classes('has-body')).toBe(true); - expect(wrapper.find(DiffContentComponent).exists()).toBe(true); - expect(wrapper.find(DiffContentComponent).isVisible()).toBe(true); + expect(wrapper.findComponent(DiffContentComponent).exists()).toBe(true); + expect(wrapper.findComponent(DiffContentComponent).isVisible()).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 c18f0b721da..f13988fc11f 100644 --- a/spec/frontend/diffs/components/diff_gutter_avatars_spec.js +++ b/spec/frontend/diffs/components/diff_gutter_avatars_spec.js @@ -1,6 +1,7 @@ import { shallowMount } from '@vue/test-utils'; import { nextTick } from 'vue'; import DiffGutterAvatars from '~/diffs/components/diff_gutter_avatars.vue'; +import { HIDE_COMMENTS } from '~/diffs/i18n'; import discussionsMockData from '../mock_data/diff_discussions'; const getDiscussionsMockData = () => [{ ...discussionsMockData }]; @@ -40,7 +41,12 @@ describe('DiffGutterAvatars', () => { findCollapseButton().trigger('click'); await nextTick(); - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + expect(wrapper.emitted().toggleLineDiscussions).toBeDefined(); + }); + + it('renders the proper title and aria-label', () => { + expect(findCollapseButton().attributes('title')).toBe(HIDE_COMMENTS); + expect(findCollapseButton().attributes('aria-label')).toBe(HIDE_COMMENTS); }); }); @@ -69,14 +75,14 @@ describe('DiffGutterAvatars', () => { findUserAvatars().at(0).trigger('click'); await nextTick(); - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + expect(wrapper.emitted().toggleLineDiscussions).toBeDefined(); }); it('should emit toggleDiscussions event on more count text click', async () => { findMoreCount().trigger('click'); await nextTick(); - expect(wrapper.emitted().toggleLineDiscussions).toBeTruthy(); + expect(wrapper.emitted().toggleLineDiscussions).toBeDefined(); }); }); diff --git a/spec/frontend/diffs/components/diff_line_note_form_spec.js b/spec/frontend/diffs/components/diff_line_note_form_spec.js index 542d61c4680..9493dc8855e 100644 --- a/spec/frontend/diffs/components/diff_line_note_form_spec.js +++ b/spec/frontend/diffs/components/diff_line_note_form_spec.js @@ -82,7 +82,7 @@ describe('DiffLineNoteForm', () => { }); it('shows note form', () => { - expect(wrapper.find(NoteForm).exists()).toBe(true); + expect(wrapper.findComponent(NoteForm).exists()).toBe(true); }); it('passes the provided range of lines to comment form', () => { diff --git a/spec/frontend/diffs/components/diff_line_spec.js b/spec/frontend/diffs/components/diff_line_spec.js new file mode 100644 index 00000000000..37368eb1461 --- /dev/null +++ b/spec/frontend/diffs/components/diff_line_spec.js @@ -0,0 +1,65 @@ +import { shallowMount } from '@vue/test-utils'; +import DiffLine from '~/diffs/components/diff_line.vue'; +import DiffCodeQuality from '~/diffs/components/diff_code_quality.vue'; + +const EXAMPLE_LINE_NUMBER = 3; +const EXAMPLE_DESCRIPTION = 'example description'; +const EXAMPLE_SEVERITY = 'example severity'; + +const left = { + line: { + left: { + codequality: [ + { + line: EXAMPLE_LINE_NUMBER, + description: EXAMPLE_DESCRIPTION, + severity: EXAMPLE_SEVERITY, + }, + ], + }, + }, +}; + +const right = { + line: { + right: { + codequality: [ + { + line: EXAMPLE_LINE_NUMBER, + description: EXAMPLE_DESCRIPTION, + severity: EXAMPLE_SEVERITY, + }, + ], + }, + }, +}; + +const mockData = [right, left]; + +describe('DiffLine', () => { + const createWrapper = (propsData) => { + return shallowMount(DiffLine, { propsData }); + }; + + it('should emit event when hideCodeQualityFindings is called', () => { + const wrapper = createWrapper(right); + + wrapper.findComponent(DiffCodeQuality).vm.$emit('hideCodeQualityFindings'); + expect(wrapper.emitted()).toEqual({ + hideCodeQualityFindings: [[EXAMPLE_LINE_NUMBER]], + }); + }); + + mockData.forEach((element) => { + it('should set correct props for DiffCodeQuality', () => { + const wrapper = createWrapper(element); + expect(wrapper.findComponent(DiffCodeQuality).props('codeQuality')).toEqual([ + { + line: EXAMPLE_LINE_NUMBER, + description: EXAMPLE_DESCRIPTION, + severity: EXAMPLE_SEVERITY, + }, + ]); + }); + }); +}); diff --git a/spec/frontend/diffs/components/diff_stats_spec.js b/spec/frontend/diffs/components/diff_stats_spec.js index 09fe69e97de..3a04547fa69 100644 --- a/spec/frontend/diffs/components/diff_stats_spec.js +++ b/spec/frontend/diffs/components/diff_stats_spec.js @@ -87,7 +87,7 @@ describe('diff_stats', () => { describe('files changes', () => { const findIcon = (name) => wrapper - .findAll(GlIcon) + .findAllComponents(GlIcon) .filter((c) => c.attributes('name') === name) .at(0).element.parentNode; diff --git a/spec/frontend/diffs/components/diff_view_spec.js b/spec/frontend/diffs/components/diff_view_spec.js index 15923a1c6de..1dd4a2f6c23 100644 --- a/spec/frontend/diffs/components/diff_view_spec.js +++ b/spec/frontend/diffs/components/diff_view_spec.js @@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import DiffView from '~/diffs/components/diff_view.vue'; -import DiffCodeQuality from '~/diffs/components/diff_code_quality.vue'; +import DiffLine from '~/diffs/components/diff_line.vue'; import { diffCodeQuality } from '../mock_data/diff_code_quality'; describe('DiffView', () => { @@ -51,28 +51,27 @@ describe('DiffView', () => { return shallowMount(DiffView, { propsData, store, stubs, provide }); }; - it('does not render a codeQuality diff view when there is no finding', () => { + it('does not render a diff-line component when there is no finding', () => { const wrapper = createWrapper(); - expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(false); + expect(wrapper.findComponent(DiffLine).exists()).toBe(false); }); - it('does render a codeQuality diff view with the correct props when there is a finding & refactorCodeQualityInlineFindings flag is true ', async () => { + it('does render a diff-line component with the correct props when there is a finding & refactorCodeQualityInlineFindings flag is true', async () => { const wrapper = createWrapper(diffCodeQuality, { glFeatures: { refactorCodeQualityInlineFindings: true }, }); wrapper.findComponent(DiffRow).vm.$emit('toggleCodeQualityFindings', 2); await nextTick(); - expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(true); - expect(wrapper.findComponent(DiffCodeQuality).props().codeQuality.length).not.toBe(0); + expect(wrapper.findComponent(DiffLine).props('line')).toBe(diffCodeQuality.diffLines[2]); }); - it('does not render a codeQuality diff view when there is a finding & refactorCodeQualityInlineFindings flag is false ', async () => { + it('does not render a diff-line component when there is a finding & refactorCodeQualityInlineFindings flag is false', async () => { const wrapper = createWrapper(diffCodeQuality, { glFeatures: { refactorCodeQualityInlineFindings: false }, }); wrapper.findComponent(DiffRow).vm.$emit('toggleCodeQualityFindings', 2); await nextTick(); - expect(wrapper.findComponent(DiffCodeQuality).exists()).toBe(false); + expect(wrapper.findComponent(DiffLine).exists()).toBe(false); }); it.each` @@ -89,8 +88,8 @@ describe('DiffView', () => { diffLines: [{ renderCommentRow: true, ...sides }], inline: type === 'inline', }); - expect(wrapper.findAll(DiffCommentCell).length).toBe(total); - expect(wrapper.find(container).find(DiffCommentCell).exists()).toBe(true); + expect(wrapper.findAllComponents(DiffCommentCell).length).toBe(total); + expect(wrapper.find(container).findComponent(DiffCommentCell).exists()).toBe(true); }, ); @@ -98,7 +97,7 @@ describe('DiffView', () => { const wrapper = createWrapper({ diffLines: [{ renderCommentRow: true, left: { lineDraft: { isDraft: true } } }], }); - expect(wrapper.find(DraftNote).exists()).toBe(true); + expect(wrapper.findComponent(DraftNote).exists()).toBe(true); }); describe('drag operations', () => { diff --git a/spec/frontend/diffs/components/image_diff_overlay_spec.js b/spec/frontend/diffs/components/image_diff_overlay_spec.js index 70191620eb6..ccf942bdcef 100644 --- a/spec/frontend/diffs/components/image_diff_overlay_spec.js +++ b/spec/frontend/diffs/components/image_diff_overlay_spec.js @@ -57,7 +57,7 @@ describe('Diffs image diff overlay component', () => { it('renders icon when showCommentIcon is true', () => { createComponent({ showCommentIcon: true }); - expect(wrapper.find(GlIcon).exists()).toBe(true); + expect(wrapper.findComponent(GlIcon).exists()).toBe(true); }); it('sets badge comment positions', () => { diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js index 6903b844e5e..dbfe9770e07 100644 --- a/spec/frontend/diffs/components/no_changes_spec.js +++ b/spec/frontend/diffs/components/no_changes_spec.js @@ -56,7 +56,7 @@ describe('Diff no changes empty state', () => { it('Show create commit button', () => { createComponent(); - expect(wrapper.find(GlButton).exists()).toBe(true); + expect(wrapper.findComponent(GlButton).exists()).toBe(true); }); it.each` diff --git a/spec/frontend/diffs/components/tree_list_spec.js b/spec/frontend/diffs/components/tree_list_spec.js index 931a9562d36..ca7de8fd751 100644 --- a/spec/frontend/diffs/components/tree_list_spec.js +++ b/spec/frontend/diffs/components/tree_list_spec.js @@ -106,7 +106,7 @@ describe('Diffs tree list component', () => { ${'index.js'} | ${1} ${'app/*.js'} | ${1} ${'*.js, *.rb'} | ${2} - `('it returns $itemSize item for $extension', async ({ extension, itemSize }) => { + `('returns $itemSize item for $extension', async ({ extension, itemSize }) => { wrapper.find('[data-testid="diff-tree-search"]').setValue(extension); await nextTick(); @@ -175,7 +175,7 @@ describe('Diffs tree list component', () => { 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); + expect(wrapper.findComponent(FileTree).vm.$attrs['viewed-files']).toBe(viewedDiffFileIds); }); }); }); |