Merge branch...

Merge branch '370540-replace-finding-components-with-find-findall-in-spec-frontend-notes' into 'master'

Replace finding components with find/findAll in spec/frontend/notes

See merge request !95202

spec/frontend/notes/components/comment_field_layout_spec.js

@@ -22,8 +22,8 @@ describe('Comment Field Layout Component', () => {
     confidential_issues_docs_path: CONFIDENTIAL_ISSUES_DOCS_PATH,
   };
 
-  const findIssuableNoteWarning = () => wrapper.find(NoteableWarning);
-  const findEmailParticipantsWarning = () => wrapper.find(EmailParticipantsWarning);
+  const findIssuableNoteWarning = () => wrapper.findComponent(NoteableWarning);
+  const findEmailParticipantsWarning = () => wrapper.findComponent(EmailParticipantsWarning);
   const findErrorAlert = () => wrapper.findByTestId('comment-field-alert-container');
 
   const createWrapper = (props = {}, slots = {}) => {

spec/frontend/notes/components/diff_discussion_header_spec.js

@@ -28,8 +28,8 @@ describe('diff_discussion_header component', () => {
 
   describe('Avatar', () => {
     const firstNoteAuthor = discussionMock.notes[0].author;
-    const findAvatarLink = () => wrapper.find(GlAvatarLink);
-    const findAvatar = () => wrapper.find(GlAvatar);
+    const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+    const findAvatar = () => wrapper.findComponent(GlAvatar);
 
     it('should render user avatar and user avatar link', () => {
       expect(findAvatar().exists()).toBe(true);

spec/frontend/notes/components/discussion_actions_spec.js

@@ -47,9 +47,9 @@ describe('DiscussionActions', () => {
 
     it('renders reply placeholder, resolve discussion button, resolve with issue button and jump to next discussion button', () => {
       createComponent();
-      expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true);
-      expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(true);
-      expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(true);
+      expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true);
+      expect(wrapper.findComponent(ResolveDiscussionButton).exists()).toBe(true);
+      expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(true);
     });
 
     it('only renders reply placholder if disccusion is not resolvable', () => {
@@ -57,15 +57,15 @@ describe('DiscussionActions', () => {
       discussion.resolvable = false;
       createComponent({ discussion });
 
-      expect(wrapper.find(ReplyPlaceholder).exists()).toBe(true);
-      expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(false);
-      expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(false);
+      expect(wrapper.findComponent(ReplyPlaceholder).exists()).toBe(true);
+      expect(wrapper.findComponent(ResolveDiscussionButton).exists()).toBe(false);
+      expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(false);
     });
 
     it('does not render resolve with issue button if resolveWithIssuePath is falsy', () => {
       createComponent({ resolveWithIssuePath: '' });
 
-      expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(false);
+      expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(false);
     });
 
     describe.each`
@@ -82,8 +82,8 @@ describe('DiscussionActions', () => {
       });
 
       it(shouldRender ? 'renders resolve buttons' : 'does not render resolve buttons', () => {
-        expect(wrapper.find(ResolveDiscussionButton).exists()).toBe(shouldRender);
-        expect(wrapper.find(ResolveWithIssueButton).exists()).toBe(shouldRender);
+        expect(wrapper.findComponent(ResolveDiscussionButton).exists()).toBe(shouldRender);
+        expect(wrapper.findComponent(ResolveWithIssueButton).exists()).toBe(shouldRender);
       });
     });
   });
@@ -95,7 +95,7 @@ describe('DiscussionActions', () => {
       createComponent({}, { attachTo: document.body });
 
       jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find(ReplyPlaceholder).find('textarea').trigger('focus');
+      wrapper.findComponent(ReplyPlaceholder).find('textarea').trigger('focus');
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('showReplyForm');
     });
 
@@ -103,7 +103,7 @@ describe('DiscussionActions', () => {
       createComponent();
 
       jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find(ResolveDiscussionButton).find('button').trigger('click');
+      wrapper.findComponent(ResolveDiscussionButton).find('button').trigger('click');
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('resolve');
     });
   });

spec/frontend/notes/components/discussion_counter_spec.js

@@ -47,7 +47,7 @@ describe('DiscussionCounter component', () => {
     it('does not render', () => {
       wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
 
-      expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'discussionCounter' }).exists()).toBe(false);
     });
   });
 
@@ -57,7 +57,7 @@ describe('DiscussionCounter component', () => {
       store.dispatch('updateResolvableDiscussionsCounts');
       wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
 
-      expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(false);
+      expect(wrapper.findComponent({ ref: 'discussionCounter' }).exists()).toBe(false);
     });
   });
 
@@ -77,7 +77,7 @@ describe('DiscussionCounter component', () => {
       updateStore();
       wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
 
-      expect(wrapper.find({ ref: 'discussionCounter' }).exists()).toBe(true);
+      expect(wrapper.findComponent({ ref: 'discussionCounter' }).exists()).toBe(true);
     });
 
     it.each`
@@ -103,7 +103,7 @@ describe('DiscussionCounter component', () => {
       updateStore({ resolvable: true, resolved });
       wrapper = shallowMount(DiscussionCounter, { store, propsData: { blocksMerge: true } });
 
-      expect(wrapper.findAll(GlButton)).toHaveLength(groupLength);
+      expect(wrapper.findAllComponents(GlButton)).toHaveLength(groupLength);
     });
   });
 

spec/frontend/notes/components/discussion_filter_note_spec.js

@@ -31,14 +31,14 @@ describe('DiscussionFilterNote component', () => {
 
   it('emits `dropdownSelect` event with 0 parameter on clicking Show all activity button', () => {
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-    wrapper.findAll(GlButton).at(0).vm.$emit('click');
+    wrapper.findAllComponents(GlButton).at(0).vm.$emit('click');
 
     expect(eventHub.$emit).toHaveBeenCalledWith('dropdownSelect', 0);
   });
 
   it('emits `dropdownSelect` event with 1 parameter on clicking Show comments only button', () => {
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
-    wrapper.findAll(GlButton).at(1).vm.$emit('click');
+    wrapper.findAllComponents(GlButton).at(1).vm.$emit('click');
 
     expect(eventHub.$emit).toHaveBeenCalledWith('dropdownSelect', 1);
   });

spec/frontend/notes/components/discussion_notes_spec.js

@@ -61,13 +61,13 @@ describe('DiscussionNotes', () => {
     it('renders an element for each note in the discussion', () => {
       createComponent();
       const notesCount = discussionMock.notes.length;
-      const els = wrapper.findAll(NoteableNote);
+      const els = wrapper.findAllComponents(NoteableNote);
       expect(els.length).toBe(notesCount);
     });
 
     it('renders one element if replies groupping is enabled', () => {
       createComponent({ shouldGroupReplies: true });
-      const els = wrapper.findAll(NoteableNote);
+      const els = wrapper.findAllComponents(NoteableNote);
       expect(els.length).toBe(1);
     });
 

spec/frontend/notes/components/discussion_reply_placeholder_spec.js

@@ -15,7 +15,7 @@ describe('ReplyPlaceholder', () => {
     });
   };
 
-  const findTextarea = () => wrapper.find({ ref: 'textarea' });
+  const findTextarea = () => wrapper.findComponent({ ref: 'textarea' });
 
   afterEach(() => {
     wrapper.destroy();

spec/frontend/notes/components/discussion_resolve_button_spec.js

@@ -28,7 +28,7 @@ describe('resolveDiscussionButton', () => {
   });
 
   it('should emit a onClick event on button click', async () => {
-    const button = wrapper.find(GlButton);
+    const button = wrapper.findComponent(GlButton);
 
     button.vm.$emit('click');
 
@@ -39,7 +39,7 @@ describe('resolveDiscussionButton', () => {
   });
 
   it('should contain the provided button title', () => {
-    const button = wrapper.find(GlButton);
+    const button = wrapper.findComponent(GlButton);
 
     expect(button.text()).toContain(buttonTitle);
   });
@@ -52,7 +52,7 @@ describe('resolveDiscussionButton', () => {
       },
     });
 
-    const button = wrapper.find(GlButton);
+    const button = wrapper.findComponent(GlButton);
 
     expect(button.props('loading')).toEqual(true);
   });
@@ -65,7 +65,7 @@ describe('resolveDiscussionButton', () => {
       },
     });
 
-    const button = wrapper.find(GlButton);
+    const button = wrapper.findComponent(GlButton);
 
     await nextTick();
     expect(button.props('loading')).toEqual(false);

spec/frontend/notes/components/discussion_resolve_with_issue_button_spec.js

@@ -20,7 +20,7 @@ describe('ResolveWithIssueButton', () => {
   });
 
   it('it should have a link with the provided link property as href', () => {
-    const button = wrapper.find(GlButton);
+    const button = wrapper.findComponent(GlButton);
 
     expect(button.attributes().href).toBe(url);
   });

spec/frontend/notes/components/note_actions/reply_button_spec.js

@@ -15,7 +15,7 @@ describe('ReplyButton', () => {
   });
 
   it('emits startReplying on click', () => {
-    wrapper.find(GlButton).vm.$emit('click');
+    wrapper.findComponent(GlButton).vm.$emit('click');
 
     expect(wrapper.emitted('startReplying')).toEqual([[]]);
   });

spec/frontend/notes/components/note_actions_spec.js

@@ -16,7 +16,7 @@ describe('noteActions', () => {
   let actions;
   let axiosMock;
 
-  const findUserAccessRoleBadge = (idx) => wrapper.findAll(UserAccessRoleBadge).at(idx);
+  const findUserAccessRoleBadge = (idx) => wrapper.findAllComponents(UserAccessRoleBadge).at(idx);
   const findUserAccessRoleBadgeText = (idx) => findUserAccessRoleBadge(idx).text().trim();
 
   const mountNoteActions = (propsData, computed) => {
@@ -266,7 +266,7 @@ describe('noteActions', () => {
     });
 
     it('shows a reply button', () => {
-      const replyButton = wrapper.find({ ref: 'replyButton' });
+      const replyButton = wrapper.findComponent({ ref: 'replyButton' });
 
       expect(replyButton.exists()).toBe(true);
     });
@@ -281,7 +281,7 @@ describe('noteActions', () => {
     });
 
     it('does not show a reply button', () => {
-      const replyButton = wrapper.find({ ref: 'replyButton' });
+      const replyButton = wrapper.findComponent({ ref: 'replyButton' });
 
       expect(replyButton.exists()).toBe(false);
     });
@@ -295,7 +295,7 @@ describe('noteActions', () => {
     });
 
     it('should render the right resolve button title', () => {
-      const resolveButton = wrapper.find({ ref: 'resolveButton' });
+      const resolveButton = wrapper.findComponent({ ref: 'resolveButton' });
 
       expect(resolveButton.exists()).toBe(true);
       expect(resolveButton.attributes('title')).toBe('Thread stays unresolved');

spec/frontend/notes/components/note_attachment_spec.js

@@ -4,8 +4,8 @@ import NoteAttachment from '~/notes/components/note_attachment.vue';
 describe('Issue note attachment', () => {
   let wrapper;
 
-  const findImage = () => wrapper.find({ ref: 'attachmentImage' });
-  const findUrl = () => wrapper.find({ ref: 'attachmentUrl' });
+  const findImage = () => wrapper.findComponent({ ref: 'attachmentImage' });
+  const findUrl = () => wrapper.findComponent({ ref: 'attachmentUrl' });
 
   const createComponent = (attachment) => {
     wrapper = shallowMount(NoteAttachment, {

spec/frontend/notes/components/note_body_spec.js

@@ -143,7 +143,7 @@ describe('issue_note_body component', () => {
     });
 
     it('passes the correct default placeholder commit message for a suggestion to the suggestions component', () => {
-      const commitMessage = wrapper.find(Suggestions).attributes('defaultcommitmessage');
+      const commitMessage = wrapper.findComponent(Suggestions).attributes('defaultcommitmessage');
 
       expect(commitMessage).toBe('branch/pathnameuseruser usertonabc11');
     });

spec/frontend/notes/components/note_form_spec.js

@@ -92,7 +92,7 @@ describe('issue_note_form component', () => {
 
       expect(conflictWarning.exists()).toBe(true);
       expect(conflictWarning.text().replace(/\s+/g, ' ').trim()).toBe(message);
-      expect(conflictWarning.find(GlLink).attributes('href')).toBe('#note_545');
+      expect(conflictWarning.findComponent(GlLink).attributes('href')).toBe('#note_545');
     });
   });
 
@@ -134,7 +134,7 @@ describe('issue_note_form component', () => {
 
     it('should link to markdown docs', () => {
       const { markdownDocsPath } = notesDataMock;
-      const markdownField = wrapper.find(MarkdownField);
+      const markdownField = wrapper.findComponent(MarkdownField);
       const markdownFieldProps = markdownField.props();
 
       expect(markdownFieldProps.markdownDocsPath).toBe(markdownDocsPath);

spec/frontend/notes/components/note_header_spec.js

@@ -15,15 +15,15 @@ const actions = {
 describe('NoteHeader component', () => {
   let wrapper;
 
-  const findActionsWrapper = () => wrapper.find({ ref: 'discussionActions' });
+  const findActionsWrapper = () => wrapper.findComponent({ ref: 'discussionActions' });
   const findToggleThreadButton = () => wrapper.findByTestId('thread-toggle');
-  const findChevronIcon = () => wrapper.find({ ref: 'chevronIcon' });
-  const findActionText = () => wrapper.find({ ref: 'actionText' });
-  const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
-  const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
+  const findChevronIcon = () => wrapper.findComponent({ ref: 'chevronIcon' });
+  const findActionText = () => wrapper.findComponent({ ref: 'actionText' });
+  const findTimestampLink = () => wrapper.findComponent({ ref: 'noteTimestampLink' });
+  const findTimestamp = () => wrapper.findComponent({ ref: 'noteTimestamp' });
   const findInternalNoteIndicator = () => wrapper.findByTestId('internalNoteIndicator');
-  const findSpinner = () => wrapper.find({ ref: 'spinner' });
-  const findAuthorStatus = () => wrapper.find({ ref: 'authorStatus' });
+  const findSpinner = () => wrapper.findComponent({ ref: 'spinner' });
+  const findAuthorStatus = () => wrapper.findComponent({ ref: 'authorStatus' });
 
   const statusHtml =
     '"<span class="user-status-emoji has-tooltip" title="foo bar" data-html="true" data-placement="top"><gl-emoji title="basketball and hoop" data-name="basketball" data-unicode-version="6.0">🏀</gl-emoji></span>"';
@@ -228,7 +228,7 @@ describe('NoteHeader component', () => {
 
       const dispatchEvent = jest.spyOn(wrapper.vm.$refs.authorNameLink, 'dispatchEvent');
 
-      wrapper.find({ ref: 'authorUsernameLink' }).trigger('mouseenter');
+      wrapper.findComponent({ ref: 'authorUsernameLink' }).trigger('mouseenter');
 
       expect(dispatchEvent).toHaveBeenCalledWith(new Event('mouseenter'));
     });
@@ -238,7 +238,7 @@ describe('NoteHeader component', () => {
 
       const dispatchEvent = jest.spyOn(wrapper.vm.$refs.authorNameLink, 'dispatchEvent');
 
-      wrapper.find({ ref: 'authorUsernameLink' }).trigger('mouseleave');
+      wrapper.findComponent({ ref: 'authorUsernameLink' }).trigger('mouseleave');
 
       expect(dispatchEvent).toHaveBeenCalledWith(new Event('mouseleave'));
     });
@@ -266,8 +266,8 @@ describe('NoteHeader component', () => {
     it('toggles hover specific CSS classes on author name link', async () => {
       createComponent({ author });
 
-      const authorUsernameLink = wrapper.find({ ref: 'authorUsernameLink' });
-      const authorNameLink = wrapper.find({ ref: 'authorNameLink' });
+      const authorUsernameLink = wrapper.findComponent({ ref: 'authorUsernameLink' });
+      const authorNameLink = wrapper.findComponent({ ref: 'authorNameLink' });
 
       authorUsernameLink.trigger('mouseenter');
 

spec/frontend/notes/components/noteable_discussion_spec.js

@@ -73,13 +73,13 @@ describe('noteable_discussion component', () => {
 
       expect(wrapper.vm.isReplying).toEqual(false);
 
-      const replyPlaceholder = wrapper.find(ReplyPlaceholder);
+      const replyPlaceholder = wrapper.findComponent(ReplyPlaceholder);
       replyPlaceholder.vm.$emit('focus');
       await nextTick();
 
       expect(wrapper.vm.isReplying).toEqual(true);
 
-      const noteForm = wrapper.find(NoteForm);
+      const noteForm = wrapper.findComponent(NoteForm);
 
       expect(noteForm.exists()).toBe(true);
 
@@ -100,11 +100,11 @@ describe('noteable_discussion component', () => {
         wrapper.setProps({ discussion: { ...discussionMock, confidential: isNoteInternal } });
         await nextTick();
 
-        const replyPlaceholder = wrapper.find(ReplyPlaceholder);
+        const replyPlaceholder = wrapper.findComponent(ReplyPlaceholder);
         replyPlaceholder.vm.$emit('focus');
         await nextTick();
 
-        expect(wrapper.find(NoteForm).props('saveButtonTitle')).toBe(saveButtonTitle);
+        expect(wrapper.findComponent(NoteForm).props('saveButtonTitle')).toBe(saveButtonTitle);
       },
     );
 
@@ -116,7 +116,7 @@ describe('noteable_discussion component', () => {
 
       await nextTick();
 
-      wrapper.find(DiscussionNotes).vm.$emit('startReplying');
+      wrapper.findComponent(DiscussionNotes).vm.$emit('startReplying');
 
       await nextTick();
 
@@ -139,7 +139,7 @@ describe('noteable_discussion component', () => {
     });
 
     it('does not display a button to resolve with issue', () => {
-      const button = wrapper.find(ResolveWithIssueButton);
+      const button = wrapper.findComponent(ResolveWithIssueButton);
 
       expect(button.exists()).toBe(false);
     });
@@ -159,7 +159,7 @@ describe('noteable_discussion component', () => {
     });
 
     it('displays a button to resolve with issue', () => {
-      const button = wrapper.find(ResolveWithIssueButton);
+      const button = wrapper.findComponent(ResolveWithIssueButton);
 
       expect(button.exists()).toBe(true);
     });

spec/frontend/notes/components/notes_app_spec.js

@@ -356,7 +356,7 @@ describe('note_app', () => {
     });
 
     it('should listen hashchange event', () => {
-      const notesApp = wrapper.find(NotesApp);
+      const notesApp = wrapper.findComponent(NotesApp);
       const hash = 'some dummy hash';
       jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce(hash);
       const setTargetNoteHash = jest.spyOn(notesApp.vm, 'setTargetNoteHash');
@@ -436,7 +436,7 @@ describe('note_app', () => {
     });
 
     it('correctly finds only draft comments', () => {
-      const drafts = wrapper.findAll(DraftNote).wrappers;
+      const drafts = wrapper.findAllComponents(DraftNote).wrappers;
 
       expect(drafts.map((x) => x.props('draft'))).toEqual(
         mockData.draftComments.map(({ note }) => expect.objectContaining({ note })),

spec/frontend/notes/components/sort_discussion_spec.js

@@ -21,7 +21,7 @@ describe('Sort Discussion component', () => {
     });
   };
 
-  const findLocalStorageSync = () => wrapper.find(LocalStorageSync);
+  const findLocalStorageSync = () => wrapper.findComponent(LocalStorageSync);
 
   beforeEach(() => {
     store = createStore();

spec/frontend/notes/components/timeline_toggle_spec.js

@@ -27,7 +27,7 @@ describe('Timeline toggle', () => {
     });
   };
 
-  const findGlButton = () => wrapper.find(GlButton);
+  const findGlButton = () => wrapper.findComponent(GlButton);
 
   beforeEach(() => {
     store = createStore();