Replace usage of find/findAll in ee/spec/frontend/vulnerabilities

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/vulnerabilities/footer_spec.js

@@ -226,8 +226,8 @@ describe('Vulnerability Footer', () => {
       const properties = { remediations: [{ diff: [{}] }], solution: 'some solution' };
       createWrapper({ properties, discussionsHandler: discussionsHandler({ discussions: [] }) });
 
-      expect(wrapper.find(SolutionCard).exists()).toBe(true);
-      expect(wrapper.find(SolutionCard).props()).toEqual({
+      expect(wrapper.findComponent(SolutionCard).exists()).toBe(true);
+      expect(wrapper.findComponent(SolutionCard).props()).toEqual({
         solution: properties.solution,
         remediation: properties.remediations[0],
         hasDownload: true,
@@ -237,7 +237,7 @@ describe('Vulnerability Footer', () => {
 
     it('does not show solution card when there is not one', () => {
       createWrapper();
-      expect(wrapper.find(SolutionCard).exists()).toBe(false);
+      expect(wrapper.findComponent(SolutionCard).exists()).toBe(false);
     });
   });
 
@@ -305,7 +305,7 @@ describe('Vulnerability Footer', () => {
 
   describe('detection note', () => {
     const detectionNote = () => wrapper.find('[data-testid="detection-note"]');
-    const statusDescription = () => wrapper.find(StatusDescription);
+    const statusDescription = () => wrapper.findComponent(StatusDescription);
     const vulnerabilityStates = Object.keys(VULNERABILITY_STATES);
 
     it.each(vulnerabilityStates)(

ee/spec/frontend/vulnerabilities/header_spec.js

@@ -82,11 +82,11 @@ describe('Vulnerability Header', () => {
     return user;
   };
 
-  const findGlButton = () => wrapper.find(GlButton);
-  const findSplitButton = () => wrapper.find(SplitButton);
-  const findBadge = () => wrapper.find(GlBadge);
-  const findResolutionAlert = () => wrapper.find(ResolutionAlert);
-  const findStatusDescription = () => wrapper.find(StatusDescription);
+  const findGlButton = () => wrapper.findComponent(GlButton);
+  const findSplitButton = () => wrapper.findComponent(SplitButton);
+  const findBadge = () => wrapper.findComponent(GlBadge);
+  const findResolutionAlert = () => wrapper.findComponent(ResolutionAlert);
+  const findStatusDescription = () => wrapper.findComponent(StatusDescription);
 
   const createWrapper = ({ vulnerability = {}, apolloProvider }) => {
     wrapper = shallowMount(Header, {
@@ -139,7 +139,7 @@ describe('Vulnerability Header', () => {
       });
 
       it(`emits the updated vulnerability properly - ${action}`, async () => {
-        const dropdown = wrapper.find(VulnerabilityStateDropdown);
+        const dropdown = wrapper.findComponent(VulnerabilityStateDropdown);
         dropdown.vm.$emit('change', { action });
 
         await waitForPromises();
@@ -149,7 +149,7 @@ describe('Vulnerability Header', () => {
       });
 
       it(`emits an event when the state is changed - ${action}`, async () => {
-        const dropdown = wrapper.find(VulnerabilityStateDropdown);
+        const dropdown = wrapper.findComponent(VulnerabilityStateDropdown);
         dropdown.vm.$emit('change', { action });
 
         await waitForPromises();
@@ -175,7 +175,7 @@ describe('Vulnerability Header', () => {
       });
 
       it('when the vulnerability state changes but the API call fails, an error message is displayed', async () => {
-        const dropdown = wrapper.find(VulnerabilityStateDropdown);
+        const dropdown = wrapper.findComponent(VulnerabilityStateDropdown);
         dropdown.vm.$emit('change', { action });
 
         await waitForPromises();

ee/spec/frontend/vulnerabilities/history_comment_editor_spec.js

@@ -11,9 +11,9 @@ describe('History Comment Editor', () => {
     });
   };
 
-  const textarea = () => wrapper.find(GlFormTextarea);
-  const saveButton = () => wrapper.find({ ref: 'saveButton' });
-  const cancelButton = () => wrapper.find({ ref: 'cancelButton' });
+  const textarea = () => wrapper.findComponent(GlFormTextarea);
+  const saveButton = () => wrapper.findComponent({ ref: 'saveButton' });
+  const cancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
 
   afterEach(() => wrapper.destroy());
 

ee/spec/frontend/vulnerabilities/history_comment_spec.js

@@ -74,13 +74,13 @@ describe('History Comment', () => {
       .mockResolvedValue(createMutationResponse({ queryName: UPDATE_NOTE, note }));
   });
 
-  const addCommentButton = () => wrapper.find({ ref: 'addCommentButton' });
+  const addCommentButton = () => wrapper.findComponent({ ref: 'addCommentButton' });
   const commentEditor = () => wrapper.findComponent(HistoryCommentEditor);
   const eventItem = () => wrapper.findComponent(EventItem);
   const editButton = () => wrapper.find('[title="Edit Comment"]');
   const deleteButton = () => wrapper.find('[title="Delete Comment"]');
-  const confirmDeleteButton = () => wrapper.find({ ref: 'confirmDeleteButton' });
-  const cancelDeleteButton = () => wrapper.find({ ref: 'cancelDeleteButton' });
+  const confirmDeleteButton = () => wrapper.findComponent({ ref: 'confirmDeleteButton' });
+  const cancelDeleteButton = () => wrapper.findComponent({ ref: 'cancelDeleteButton' });
 
   // Check that the passed-in elements exist, and that everything else does not exist.
   const expectExists = (...expectedElements) => {

ee/spec/frontend/vulnerabilities/related_issues_spec.js

@@ -53,10 +53,10 @@ describe('Vulnerability related issues component', () => {
     }
   };
 
-  const relatedIssuesBlock = () => wrapper.find(RelatedIssuesBlock);
+  const relatedIssuesBlock = () => wrapper.findComponent(RelatedIssuesBlock);
   const blockProp = (prop) => relatedIssuesBlock().props(prop);
   const blockEmit = (eventName, data) => relatedIssuesBlock().vm.$emit(eventName, data);
-  const findCreateIssueButton = () => wrapper.find({ ref: 'createIssue' });
+  const findCreateIssueButton = () => wrapper.findComponent({ ref: 'createIssue' });
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/vulnerabilities/remediated_badge_spec.js

@@ -9,7 +9,7 @@ const POPOVER_CONTENT =
 describe('Remediated badge component', () => {
   let wrapper;
 
-  const findBadge = () => wrapper.find(GlBadge);
+  const findBadge = () => wrapper.findComponent(GlBadge);
 
   const createWrapper = () => {
     return shallowMount(RemediatedBadge);
@@ -26,12 +26,12 @@ describe('Remediated badge component', () => {
   });
 
   it('should link the badge and the popover', () => {
-    const popover = wrapper.find({ ref: 'popover' });
+    const popover = wrapper.findComponent({ ref: 'popover' });
     expect(popover.props('target')()).toEqual(findBadge().element);
   });
 
   it('should pass down the data to the popover', () => {
-    const popoverAttributes = wrapper.find(GlPopover).attributes();
+    const popoverAttributes = wrapper.findComponent(GlPopover).attributes();
 
     expect(popoverAttributes.title).toEqual(POPOVER_TITLE);
     expect(popoverAttributes.content).toEqual(POPOVER_CONTENT);

ee/spec/frontend/vulnerabilities/resolution_alert_spec.js

@@ -12,7 +12,7 @@ describe('Vulnerability list component', () => {
     wrapper = shallowMount(ResolutionAlert, options);
   };
 
-  const findAlert = () => wrapper.find(GlAlert);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/vulnerabilities/status_description_spec.js

@@ -22,11 +22,11 @@ describe('Vulnerability status description component', () => {
     wrapper.destroy();
   });
 
-  const timeAgo = () => wrapper.find(TimeAgoTooltip);
-  const pipelineLink = () => wrapper.find(GlLink);
-  const userAvatar = () => wrapper.find(UserAvatarLink);
-  const userLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const skeletonLoader = () => wrapper.find(GlSkeletonLoading);
+  const timeAgo = () => wrapper.findComponent(TimeAgoTooltip);
+  const pipelineLink = () => wrapper.findComponent(GlLink);
+  const userAvatar = () => wrapper.findComponent(UserAvatarLink);
+  const userLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const skeletonLoader = () => wrapper.findComponent(GlSkeletonLoading);
   const statusEl = () => wrapper.find('[data-testid="status"]');
 
   // Create a date using the passed-in string, or just use the current time if nothing was passed in.

ee/spec/frontend/vulnerabilities/vulnerability_details_spec.js

@@ -38,7 +38,7 @@ describe('Vulnerability Details', () => {
   it('shows the properties that should always be shown', () => {
     createWrapper();
     expect(getById('description').html()).toContain(vulnerability.descriptionHtml);
-    expect(wrapper.find(SeverityBadge).props('severity')).toBe(vulnerability.severity);
+    expect(wrapper.findComponent(SeverityBadge).props('severity')).toBe(vulnerability.severity);
     expect(getText('reportType')).toBe(`Tool: ${vulnerability.reportType}`);
 
     expect(getById('title').exists()).toBe(false);
@@ -202,7 +202,7 @@ describe('Vulnerability Details', () => {
   });
 
   describe('file link', () => {
-    const file = () => getById('file').find(GlLink);
+    const file = () => getById('file').findComponent(GlLink);
 
     it('shows only the file name if there is no start line', () => {
       createWrapper({ location: { file: 'test.txt', blobPath: 'blob_path.txt' } });

ee/spec/frontend/vulnerabilities/vulnerability_state_dropdown_spec.js

@@ -24,9 +24,9 @@ describe('Vulnerability state dropdown component', () => {
   const dropdownItems = () => wrapper.findAll('.dropdown-item');
   const firstUnselectedItem = () => wrapper.find('.dropdown-item:not(.selected)');
   const selectedItem = () => wrapper.find('.dropdown-item.selected');
-  const saveButton = () => wrapper.find({ ref: 'save-button' });
-  const cancelButton = () => wrapper.find({ ref: 'cancel-button' });
-  const innerDropdown = () => wrapper.find({ ref: 'dropdown' });
+  const saveButton = () => wrapper.findComponent({ ref: 'save-button' });
+  const cancelButton = () => wrapper.findComponent({ ref: 'cancel-button' });
+  const innerDropdown = () => wrapper.findComponent({ ref: 'dropdown' });
   const dropdownItemFor = (state) => wrapper.findByTestId(state);
 
   afterEach(() => wrapper.destroy());