Merge branch 'xanf-remove-contains' into 'master'

Remove advanced usages of deprecated .contains() method

See merge request gitlab-org/gitlab!40661

ee/spec/frontend/analytics/cycle_analytics/components/base_spec.js

@@ -146,7 +146,7 @@ describe('Cycle Analytics component', () => {
   };
 
   const displaysMetrics = flag => {
-    expect(wrapper.contains(Metrics)).toBe(flag);
+    expect(wrapper.find(Metrics).exists()).toBe(flag);
   };
 
   const displaysStageTable = flag => {

ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js

@@ -130,8 +130,16 @@ describe('GroupsDropdownFilter component', () => {
       selectDropdownAtIndex(1);
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(findDropdownButton().contains('img.gl-avatar')).toBe(false);
-        expect(findDropdownButton().contains('.gl-avatar-identicon')).toBe(true);
+        expect(
+          findDropdownButton()
+            .find('img.gl-avatar')
+            .exists(),
+        ).toBe(false);
+        expect(
+          findDropdownButton()
+            .find('.gl-avatar-identicon')
+            .exists(),
+        ).toBe(true);
       });
     });
   });

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

@@ -118,12 +118,28 @@ describe('ProjectsDropdownFilter component', () => {
       });
 
       it('renders an avatar when the project has an avatar_url', () => {
-        expect(findDropdownAtIndex(0).contains('img.gl-avatar')).toBe(true);
-        expect(findDropdownAtIndex(0).contains('div.gl-avatar-identicon')).toBe(false);
+        expect(
+          findDropdownAtIndex(0)
+            .find('img.gl-avatar')
+            .exists(),
+        ).toBe(true);
+        expect(
+          findDropdownAtIndex(0)
+            .find('div.gl-avatar-identicon')
+            .exists(),
+        ).toBe(false);
       });
       it("renders an identicon when the project doesn't have an avatar_url", () => {
-        expect(findDropdownAtIndex(1).contains('img.gl-avatar')).toBe(false);
-        expect(findDropdownAtIndex(1).contains('div.gl-avatar-identicon')).toBe(true);
+        expect(
+          findDropdownAtIndex(1)
+            .find('img.gl-avatar')
+            .exists(),
+        ).toBe(false);
+        expect(
+          findDropdownAtIndex(1)
+            .find('div.gl-avatar-identicon')
+            .exists(),
+        ).toBe(true);
       });
     });
 
@@ -151,8 +167,16 @@ describe('ProjectsDropdownFilter component', () => {
         selectDropdownItemAtIndex(0);
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(findDropdownButton().contains('img.gl-avatar')).toBe(true);
-          expect(findDropdownButton().contains('.gl-avatar-identicon')).toBe(false);
+          expect(
+            findDropdownButton()
+              .find('img.gl-avatar')
+              .exists(),
+          ).toBe(true);
+          expect(
+            findDropdownButton()
+              .find('.gl-avatar-identicon')
+              .exists(),
+          ).toBe(false);
         });
       });
 
@@ -160,8 +184,16 @@ describe('ProjectsDropdownFilter component', () => {
         selectDropdownItemAtIndex(1);
 
         return wrapper.vm.$nextTick().then(() => {
-          expect(findDropdownButton().contains('img.gl-avatar')).toBe(false);
-          expect(findDropdownButton().contains('.gl-avatar-identicon')).toBe(true);
+          expect(
+            findDropdownButton()
+              .find('img.gl-avatar')
+              .exists(),
+          ).toBe(false);
+          expect(
+            findDropdownButton()
+              .find('.gl-avatar-identicon')
+              .exists(),
+          ).toBe(true);
         });
       });
     });
@@ -178,13 +210,29 @@ describe('ProjectsDropdownFilter component', () => {
       });
 
       it('renders an avatar when the project has an avatar_url', () => {
-        expect(findDropdownAtIndex(0).contains('img.gl-avatar')).toBe(true);
-        expect(findDropdownAtIndex(0).contains('div.gl-avatar-identicon')).toBe(false);
+        expect(
+          findDropdownAtIndex(0)
+            .find('img.gl-avatar')
+            .exists(),
+        ).toBe(true);
+        expect(
+          findDropdownAtIndex(0)
+            .find('div.gl-avatar-identicon')
+            .exists(),
+        ).toBe(false);
       });
 
       it("renders an identicon when the project doesn't have an avatar_url", () => {
-        expect(findDropdownAtIndex(1).contains('img.gl-avatar')).toBe(false);
-        expect(findDropdownAtIndex(1).contains('div.gl-avatar-identicon')).toBe(true);
+        expect(
+          findDropdownAtIndex(1)
+            .find('img.gl-avatar')
+            .exists(),
+        ).toBe(false);
+        expect(
+          findDropdownAtIndex(1)
+            .find('div.gl-avatar-identicon')
+            .exists(),
+        ).toBe(true);
       });
     });
 

ee/spec/frontend/approvals/components/mr_edit/app_spec.js

@@ -47,7 +47,12 @@ describe('EE Approvals MREditApp', () => {
     });
 
     it('renders hidden inputs', () => {
-      expect(wrapper.find('.js-approval-rules').contains(MRRulesHiddenInputs)).toBe(true);
+      expect(
+        wrapper
+          .find('.js-approval-rules')
+          .find(MRRulesHiddenInputs)
+          .exists(),
+      ).toBe(true);
     });
   });
 
@@ -62,7 +67,12 @@ describe('EE Approvals MREditApp', () => {
     });
 
     it('renders hidden inputs', () => {
-      expect(wrapper.find('.js-approval-rules').contains(MRRulesHiddenInputs)).toBe(true);
+      expect(
+        wrapper
+          .find('.js-approval-rules')
+          .find(MRRulesHiddenInputs)
+          .exists(),
+      ).toBe(true);
     });
   });
 });

ee/spec/frontend/feature_flags/components/strategy_spec.js

@@ -102,8 +102,16 @@ describe('Feature flags strategy', () => {
     });
 
     it('should not show inputs for other parameters', () => {
-      expect(findStrategy().contains(GlFormTextarea)).toBe(false);
-      expect(findStrategy().contains(GlFormInput)).toBe(false);
+      expect(
+        findStrategy()
+          .find(GlFormTextarea)
+          .exists(),
+      ).toBe(false);
+      expect(
+        findStrategy()
+          .find(GlFormInput)
+          .exists(),
+      ).toBe(false);
     });
 
     it('should show the input for userListId with the correct value', () => {

ee/spec/frontend/feature_flags/components/user_lists_table_spec.js

@@ -43,9 +43,9 @@ describe('User Lists Table', () => {
     const lists = wrapper.findAll('[data-testid="ffUserList"]');
     expect(lists).toHaveLength(5);
     lists.wrappers.forEach(list => {
-      expect(list.contains('[data-testid="ffUserListName"]')).toBe(true);
-      expect(list.contains('[data-testid="ffUserListIds"]')).toBe(true);
-      expect(list.contains('[data-testid="ffUserListTimestamp"]')).toBe(true);
+      expect(list.find('[data-testid="ffUserListName"]').exists()).toBe(true);
+      expect(list.find('[data-testid="ffUserListIds"]').exists()).toBe(true);
+      expect(list.find('[data-testid="ffUserListTimestamp"]').exists()).toBe(true);
     });
   });
 

ee/spec/frontend/requirements/components/requirement_item_spec.js

@@ -243,7 +243,7 @@ describe('RequirementItem', () => {
       });
 
       return wrapperArchived.vm.$nextTick(() => {
-        expect(wrapperArchived.contains('.controls .requirement-reopen')).toBe(false);
+        expect(wrapperArchived.find('.controls .requirement-reopen').exists()).toBe(false);
       });
     });
   });

ee/spec/frontend/requirements/components/requirement_status_badge_spec.js

@@ -73,7 +73,7 @@ describe('RequirementStatusBadge', () => {
       expect(badgeEl.exists()).toBe(true);
       expect(badgeEl.props('variant')).toBe('success');
       expect(badgeEl.text()).toBe('satisfied');
-      expect(badgeEl.contains(GlIcon)).toBe(true);
+      expect(badgeEl.find(GlIcon).exists()).toBe(true);
       expect(badgeEl.find(GlIcon).props('name')).toBe('status_success');
     });
 

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -238,7 +238,11 @@ describe('VulnerabilityDetails component', () => {
       });
 
       it('should render link', () => {
-        expect(findLink('scanner').contains('a')).toBe(true);
+        expect(
+          findLink('scanner')
+            .find('a')
+            .exists(),
+        ).toBe(true);
       });
     });
 

ee/spec/frontend/vulnerabilities/vulnerability_state_dropdown_spec.js

@@ -17,9 +17,9 @@ describe('Vulnerability state dropdown component', () => {
     wrapper.vm.$refs.dropdown.hide = jest.fn();
   };
 
-  // A selected item has a selected icon as its child. We don't use .classes('.selected') here
-  // because it only works with .find(), whereas item.contains() works with .find() and .findAll().
-  const isSelected = items => items.contains('.selected-icon');
+  // isSelected is designed to work with both single VueWrapper or WrapperArray
+  const isSelected = items =>
+    Boolean((items.wrappers ?? [items]).find(w => w.find('.selected-icon').exists()));
   const isDisabled = item => item.attributes('disabled') === 'true';
   const dropdownItems = () => wrapper.findAll('.dropdown-item');
   const firstUnselectedItem = () => wrapper.find('.dropdown-item:not(.selected)');

spec/frontend/alert_management/components/alert_management_table_spec.js

@@ -218,7 +218,11 @@ describe('AlertManagementTable', () => {
         data: { alerts: { list: mockAlerts }, alertsCount, hasError: false },
         loading: false,
       });
-      expect(findStatusDropdown().contains('.dropdown-title')).toBe(false);
+      expect(
+        findStatusDropdown()
+          .find('.dropdown-title')
+          .exists(),
+      ).toBe(false);
     });
 
     it('shows correct severity icons', () => {
@@ -517,7 +521,11 @@ describe('AlertManagementTable', () => {
       await selectFirstStatusOption();
 
       expect(findAlertError().exists()).toBe(true);
-      expect(findAlertError().contains('[data-testid="htmlError"]')).toBe(true);
+      expect(
+        findAlertError()
+          .find('[data-testid="htmlError"]')
+          .exists(),
+      ).toBe(true);
     });
   });
 

spec/frontend/alert_management/components/sidebar/alert_sidebar_status_spec.js

@@ -56,7 +56,11 @@ describe('Alert Details Sidebar Status', () => {
     });
 
     it('displays the dropdown status header', () => {
-      expect(findStatusDropdown().contains('.dropdown-title')).toBe(true);
+      expect(
+        findStatusDropdown()
+          .find('.dropdown-title')
+          .exists(),
+      ).toBe(true);
     });
 
     describe('updating the alert status', () => {

spec/frontend/boards/components/issue_count_spec.js

@@ -29,7 +29,7 @@ describe('IssueCount', () => {
     });
 
     it('does not contains maxIssueCount in the template', () => {
-      expect(vm.contains('.js-max-issue-size')).toBe(false);
+      expect(vm.find('.js-max-issue-size').exists()).toBe(false);
     });
   });
 

spec/frontend/diffs/components/no_changes_spec.js

@@ -36,7 +36,7 @@ describe('Diff no changes empty state', () => {
       };
     });
 
-    expect(vm.contains('script')).toBe(false);
+    expect(vm.find('script').exists()).toBe(false);
   });
 
   describe('Renders', () => {

spec/frontend/error_tracking/components/error_tracking_list_spec.js

@@ -163,7 +163,7 @@ describe('ErrorTrackingList', () => {
 
     it('each error in the list should have an action button set', () => {
       findErrorListRows().wrappers.forEach(row => {
-        expect(row.contains(ErrorTrackingActions)).toBe(true);
+        expect(row.find(ErrorTrackingActions).exists()).toBe(true);
       });
     });
 

spec/frontend/jobs/components/log/log_spec.js

@@ -62,7 +62,11 @@ describe('Job Log', () => {
     });
 
     it('renders an icon with the open state', () => {
-      expect(findCollapsibleLine().contains('[data-testid="angle-down-icon"]')).toBe(true);
+      expect(
+        findCollapsibleLine()
+          .find('[data-testid="angle-down-icon"]')
+          .exists(),
+      ).toBe(true);
     });
 
     describe('on click header section', () => {

spec/frontend/monitoring/alert_widget_spec.js

@@ -84,7 +84,7 @@ describe('AlertWidget', () => {
       },
     });
   };
-  const hasLoadingIcon = () => wrapper.contains(GlLoadingIcon);
+  const hasLoadingIcon = () => wrapper.find(GlLoadingIcon).exists();
   const findWidgetForm = () => wrapper.find({ ref: 'widgetForm' });
   const findAlertErrorMessage = () => wrapper.find({ ref: 'alertErrorMessage' });
   const findCurrentSettingsText = () =>

spec/frontend/packages/details/components/package_title_spec.js

@@ -146,7 +146,11 @@ describe('PackageTitle', () => {
     it('correctly shows the package ref if there is one', () => {
       createComponent({ packageEntity: npmPackage });
 
-      expect(packageRef().contains('gl-icon-stub')).toBe(true);
+      expect(
+        packageRef()
+          .find('gl-icon-stub')
+          .exists(),
+      ).toBe(true);
       expect(packageRef().text()).toBe(npmPackage.pipeline.ref);
     });
   });

spec/frontend/pages/projects/graphs/code_coverage_spec.js

@@ -124,7 +124,7 @@ describe('Code Coverage', () => {
     });
 
     it('renders the dropdown with all custom names as options', () => {
-      expect(wrapper.contains(GlDeprecatedDropdown)).toBeDefined();
+      expect(wrapper.find(GlDeprecatedDropdown).exists()).toBeDefined();
       expect(findAllDropdownItems()).toHaveLength(codeCoverageMockData.length);
       expect(findFirstDropdownItem().text()).toBe(codeCoverageMockData[0].group_name);
     });
@@ -150,7 +150,11 @@ describe('Code Coverage', () => {
           .find(GlIcon)
           .exists(),
       ).toBe(false);
-      expect(findSecondDropdownItem().contains(GlIcon)).toBe(true);
+      expect(
+        findSecondDropdownItem()
+          .find(GlIcon)
+          .exists(),
+      ).toBe(true);
     });
 
     it('updates the graph data when selecting a different option in dropdown', async () => {

spec/frontend/reports/codequality_report/grouped_codequality_reports_app_spec.js

@@ -126,7 +126,11 @@ describe('Grouped code quality reports app', () => {
     });
 
     it('renders a help icon with more information', () => {
-      expect(findWidget().contains('[data-testid="question-icon"]')).toBe(true);
+      expect(
+        findWidget()
+          .find('[data-testid="question-icon"]')
+          .exists(),
+      ).toBe(true);
     });
   });
 
@@ -140,7 +144,11 @@ describe('Grouped code quality reports app', () => {
     });
 
     it('does not render a help icon', () => {
-      expect(findWidget().contains('[data-testid="question-icon"]')).toBe(false);
+      expect(
+        findWidget()
+          .find('[data-testid="question-icon"]')
+          .exists(),
+      ).toBe(false);
     });
   });
 });

spec/frontend/snippets/components/snippet_visibility_edit_spec.js

@@ -96,7 +96,11 @@ describe('Snippet Visibility Edit component', () => {
     it('when helpLink is not defined, does not render label help link', () => {
       createComponent({ helpLink: null });
 
-      expect(findLabel().contains(GlLink)).toBe(false);
+      expect(
+        findLabel()
+          .find(GlLink)
+          .exists(),
+      ).toBe(false);
     });
   });
 

spec/frontend/vue_mr_widget/components/states/mr_widget_conflicts_spec.js

@@ -148,8 +148,8 @@ describe('MRWidgetConflicts', () => {
         },
       });
 
-      expect(vm.contains('.js-resolve-conflicts-button')).toBe(false);
-      expect(vm.contains('.js-merge-locally-button')).toBe(false);
+      expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false);
+      expect(vm.find('.js-merge-locally-button').exists()).toBe(false);
     });
 
     it('should not have resolve button when no conflict resolution path', () => {
@@ -161,7 +161,7 @@ describe('MRWidgetConflicts', () => {
         },
       });
 
-      expect(vm.contains('.js-resolve-conflicts-button')).toBe(false);
+      expect(vm.find('.js-resolve-conflicts-button').exists()).toBe(false);
     });
   });
 

spec/frontend/vue_shared/components/clone_dropdown_spec.js

@@ -40,7 +40,7 @@ describe('Clone Dropdown Button', () => {
       createComponent();
       const group = wrapper.findAll(GlFormInputGroup).at(index);
       expect(group.props('value')).toBe(value);
-      expect(group.contains(GlFormInputGroup)).toBe(true);
+      expect(group.find(GlFormInputGroup).exists()).toBe(true);
     });
 
     it.each`

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

@@ -63,10 +63,10 @@ describe('FilteredSearchBarRoot', () => {
 
       expect(wrapperNoSort.vm.filterValue).toEqual([]);
       expect(wrapperNoSort.vm.selectedSortOption).toBe(undefined);
-      expect(wrapperNoSort.contains(GlButtonGroup)).toBe(false);
-      expect(wrapperNoSort.contains(GlButton)).toBe(false);
-      expect(wrapperNoSort.contains(GlDropdown)).toBe(false);
-      expect(wrapperNoSort.contains(GlDropdownItem)).toBe(false);
+      expect(wrapperNoSort.find(GlButtonGroup).exists()).toBe(false);
+      expect(wrapperNoSort.find(GlButton).exists()).toBe(false);
+      expect(wrapperNoSort.find(GlDropdown).exists()).toBe(false);
+      expect(wrapperNoSort.find(GlDropdownItem).exists()).toBe(false);
     });
   });