Replace usage of find/findAll in misc ee components (4/5)

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/oncall_schedule/add_edit_schedule_form_spec.js

@@ -45,10 +45,10 @@ describe('AddEditScheduleForm', () => {
     wrapper.destroy();
   });
 
-  const findTimezoneDropdown = () => wrapper.find(GlDropdown);
+  const findTimezoneDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownOptions = () => wrapper.findAllComponents(GlDropdownItem);
-  const findTimezoneSearchBox = () => wrapper.find(GlSearchBoxByType);
-  const findScheduleName = () => wrapper.find(GlFormGroup);
+  const findTimezoneSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
+  const findScheduleName = () => wrapper.findComponent(GlFormGroup);
 
   it('renders form layout', () => {
     createComponent({

ee/spec/frontend/oncall_schedule/mocks/mock_rotation.json

-[{
+[
+  {
     "id": "gid://gitlab/IncidentManagement::OncallRotation/2",
     "name": "Rotation 242",
     "startsAt": "2021-01-13T11:04:56.333Z",
@@ -180,65 +181,66 @@
         }
       ]
     }
-},
-{
-  "id": "gid://gitlab/IncidentManagement::OncallRotation/5",
-  "name": "Rotation 247",
-  "startsAt": "2021-01-06T10:04:56.333Z",
-  "endsAt": "2021-01-11T10:04:56.333Z",
-  "length": 1,
-  "lengthUnit": "WEEKS",
-  "activePeriod": {
-    "startTime": "02:00",
-    "endTime": "10:00"
-  },
-  "participants": {
-    "nodes": [
-      {
-        "id": "51",
-        "user": {
-          "id": "gid://gitlab/IncidentManagement::OncallParticipant/51",
-          "username": "oregand",
-          "avatarUrl": "/url",
-          "name": "david"
-        },
-        "colorWeight": "600",
-        "colorPalette": "orange"
-      }
-    ]
   },
-  "shifts": {
-    "nodes": [
-      {
-        "participant": {
-          "id": "43",
-          "colorWeight": "600",
-          "colorPalette": "orange",
+  {
+    "id": "gid://gitlab/IncidentManagement::OncallRotation/5",
+    "name": "Rotation 247",
+    "startsAt": "2021-01-06T10:04:56.333Z",
+    "endsAt": "2021-01-11T10:04:56.333Z",
+    "length": 1,
+    "lengthUnit": "WEEKS",
+    "activePeriod": {
+      "startTime": "02:00",
+      "endTime": "10:00"
+    },
+    "participants": {
+      "nodes": [
+        {
+          "id": "51",
           "user": {
-            "id": "gid://gitlab/User/43",
-            "avatarUrl": "url",
+            "id": "gid://gitlab/IncidentManagement::OncallParticipant/51",
             "username": "oregand",
+            "avatarUrl": "/url",
             "name": "david"
-          }
-        },
-        "startsAt": "2021-01-12T10:04:56.333Z",
-        "endsAt": "2021-01-15T10:04:56.333Z"
-      },
-      {
-        "participant": {
-          "id": "44",
+          },
           "colorWeight": "600",
-          "colorPalette": "aqua",
-          "user": {
-            "id": "gid://gitlab/User/44",
-            "avatarUrl": "url",
-            "username": "sarah.w",
-            "name": "sarah"
-          }
+          "colorPalette": "orange"
+        }
+      ]
+    },
+    "shifts": {
+      "nodes": [
+        {
+          "participant": {
+            "id": "43",
+            "colorWeight": "600",
+            "colorPalette": "orange",
+            "user": {
+              "id": "gid://gitlab/User/43",
+              "avatarUrl": "url",
+              "username": "oregand",
+              "name": "david"
+            }
+          },
+          "startsAt": "2021-01-12T10:04:56.333Z",
+          "endsAt": "2021-01-15T10:04:56.333Z"
         },
-        "startsAt": "2021-01-16T10:04:56.333Z",
-        "endsAt": "2021-01-30T10:04:56.333Z"
-      }
-    ]
+        {
+          "participant": {
+            "id": "44",
+            "colorWeight": "600",
+            "colorPalette": "aqua",
+            "user": {
+              "id": "gid://gitlab/User/44",
+              "avatarUrl": "url",
+              "username": "sarah.w",
+              "name": "sarah"
+            }
+          },
+          "startsAt": "2021-01-16T10:04:56.333Z",
+          "endsAt": "2021-01-30T10:04:56.333Z"
+        }
+      ]
+    }
   }
-}]
+]

ee/spec/frontend/oncall_schedule/oncall_schedule_spec.js

@@ -96,9 +96,9 @@ describe('On-call schedule', () => {
   const findScheduleDescription = () => findSchedule().text();
   const findRotations = () => wrapper.findByTestId('rotationsBody');
   const findRotationsShiftPreset = () => wrapper.findByTestId('shift-preset-change');
-  const findAddRotationsBtn = () => findRotationsHeader().find(GlButton);
-  const findScheduleTimeline = () => findRotations().find(ScheduleTimelineSection);
-  const findRotationsList = () => findRotations().find(RotationsListSection);
+  const findAddRotationsBtn = () => findRotationsHeader().findComponent(GlButton);
+  const findScheduleTimeline = () => findRotations().findComponent(ScheduleTimelineSection);
+  const findRotationsList = () => findRotations().findComponent(RotationsListSection);
   const findLoadPreviousTimeframeBtn = () => wrapper.findByTestId('previous-timeframe-btn');
   const findLoadNextTimeframeBtn = () => wrapper.findByTestId('next-timeframe-btn');
   const findCollapsible = () => wrapper.findComponent(GlCollapse);

ee/spec/frontend/oncall_schedule/rotations/components/add_edit_rotation_form_spec.js

@@ -49,9 +49,9 @@ describe('AddEditRotationForm', () => {
   const findRotationLength = () => wrapper.find('[id="rotation-length"]');
   const findRotationStartTime = () => wrapper.find('[data-testid="rotation-start-time"]');
   const findRotationEndsContainer = () => wrapper.find('[data-testid="rotation-ends-on"]');
-  const findEndDateToggle = () => wrapper.find(GlToggle);
+  const findEndDateToggle = () => wrapper.findComponent(GlToggle);
   const findRotationEndTime = () => wrapper.find('[data-testid="rotation-end-time"]');
-  const findUserSelector = () => wrapper.find(GlTokenSelector);
+  const findUserSelector = () => wrapper.findComponent(GlTokenSelector);
   const findRotationFormGroups = () => wrapper.findAllComponents(GlFormGroup);
   const findStartsOnTimeOptions = () => findRotationStartTime().findAllComponents(GlDropdownItem);
   const findEndsOnTimeOptions = () => findRotationEndTime().findAllComponents(GlDropdownItem);

ee/spec/frontend/oncall_schedule/schedule/components/rotations_list_section_spec.js

@@ -77,7 +77,7 @@ describe('RotationsListSectionComponent', () => {
     });
 
     it('renders current day indicator in the first timeline cell', () => {
-      expect(findTimelineCells().at(0).find(CurrentDayIndicator).exists()).toBe(true);
+      expect(findTimelineCells().at(0).findComponent(CurrentDayIndicator).exists()).toBe(true);
     });
 
     it('render the correct amount of rotation assignees with their related information', () => {

ee/spec/frontend/operations/components/dashboard/dashboard_spec.js

@@ -36,7 +36,7 @@ describe('dashboard component', () => {
       stubs,
     });
 
-  const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const findAddProjectButton = () => wrapper.find('[data-testid=add-projects-button]');
 
   beforeEach(() => {
@@ -85,7 +85,7 @@ describe('dashboard component', () => {
           .then(waitForPromises)
           .then(() => {
             expect(store.state.projects.length).toEqual(2);
-            expect(wrapper.findAll(Project).length).toEqual(2);
+            expect(wrapper.findAllComponents(Project).length).toEqual(2);
           });
       });
     });
@@ -102,14 +102,14 @@ describe('dashboard component', () => {
       });
 
       it('includes a dashboard project component for each project', () => {
-        const projectComponents = wrapper.findAll(Project);
+        const projectComponents = wrapper.findAllComponents(Project);
 
         expect(projectComponents).toHaveLength(projectCount);
       });
 
       it('passes each project to the dashboard project component', () => {
         const [oneProject] = store.state.projects;
-        const projectComponent = wrapper.find(Project);
+        const projectComponent = wrapper.findComponent(Project);
 
         expect(projectComponent.props().project).toEqual(oneProject);
       });
@@ -133,7 +133,7 @@ describe('dashboard component', () => {
 
           return waitForPromises().then(() => {
             expect(store.state.projects.length).toEqual(0);
-            expect(wrapper.findAll(Project).length).toEqual(0);
+            expect(wrapper.findAllComponents(Project).length).toEqual(0);
           });
         });
       });

ee/spec/frontend/operations/components/dashboard/project_header_spec.js

@@ -60,11 +60,11 @@ describe('project header component', () => {
   describe('wrapped components', () => {
     describe('project avatar', () => {
       it('renders', () => {
-        expect(wrapper.findAll(ProjectAvatar)).toHaveLength(1);
+        expect(wrapper.findAllComponents(ProjectAvatar)).toHaveLength(1);
       });
 
       it('binds project', () => {
-        expect(wrapper.find(ProjectAvatar).props('project')).toEqual(mockOneProject);
+        expect(wrapper.findComponent(ProjectAvatar).props('project')).toEqual(mockOneProject);
       });
     });
   });

ee/spec/frontend/operations/components/dashboard/project_spec.js

@@ -50,7 +50,7 @@ describe('project component', () => {
       });
 
       it('shows project title', () => {
-        const header = wrapper.find(ProjectHeader);
+        const header = wrapper.findComponent(ProjectHeader);
 
         expect(header.props('project')).toEqual(project);
       });
@@ -61,7 +61,9 @@ describe('project component', () => {
 
       it('shows upgrade license text', () => {
         expect(findDashboardCard().text()).toContain('upgrade its group plan to Premium');
-        expect(findDashboardCard().find(GlLink).attributes('href')).toBe(project.upgrade_path);
+        expect(findDashboardCard().findComponent(GlLink).attributes('href')).toBe(
+          project.upgrade_path,
+        );
       });
 
       it('hides commit info', () => {
@@ -96,7 +98,7 @@ describe('project component', () => {
 
     describe('project header', () => {
       it('binds project', () => {
-        const header = wrapper.find(ProjectHeader);
+        const header = wrapper.findComponent(ProjectHeader);
 
         expect(header.props('project')).toEqual(mockOneProject);
       });
@@ -104,7 +106,7 @@ describe('project component', () => {
 
     describe('alerts', () => {
       it('binds alert count to count', () => {
-        const alert = wrapper.find(Alerts);
+        const alert = wrapper.findComponent(Alerts);
 
         expect(alert.props('count')).toBe(mockOneProject.alert_count);
       });
@@ -114,7 +116,7 @@ describe('project component', () => {
       let commit;
 
       beforeEach(() => {
-        commit = wrapper.find(Commit);
+        commit = wrapper.findComponent(Commit);
       });
 
       it('binds commitRef', () => {

ee/spec/frontend/pages/admin/users/reset_button_spec.js

@@ -32,7 +32,7 @@ describe('Reset pipeline minutes button', () => {
     wrapper = null;
   });
 
-  const findResetButton = () => wrapper.find(GlButton);
+  const findResetButton = () => wrapper.findComponent(GlButton);
 
   it('should contain a button with the "Reset pipeline minutes" text', () => {
     const button = findResetButton();

ee/spec/frontend/pages/groups/new/components/credit_card_verification_spec.js

@@ -66,7 +66,7 @@ describe('Verification page', () => {
         .spyOn(wrapper.find('iframe').element.contentWindow, 'postMessage')
         .mockImplementation(dispatchWindowMessageEvent);
 
-      wrapper.find(GlButton).vm.$emit('click');
+      wrapper.findComponent(GlButton).vm.$emit('click');
     });
 
     it('triggers postMessage on the Zuora iframe', () => {

ee/spec/frontend/pages/groups/saml_providers/saml_members/index_spec.js

@@ -48,7 +48,7 @@ describe('SAML providers members app', () => {
     });
 
     it('renders loader', () => {
-      expect(wrapper.find(GlSkeletonLoading).exists()).toBe(true);
+      expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(true);
     });
   });
 
@@ -60,15 +60,15 @@ describe('SAML providers members app', () => {
     });
 
     it('does not render loader', () => {
-      expect(wrapper.find(GlSkeletonLoading).exists()).toBe(false);
+      expect(wrapper.findComponent(GlSkeletonLoading).exists()).toBe(false);
     });
 
     it('renders table', () => {
-      expect(wrapper.find(GlTable).exists()).toBe(true);
+      expect(wrapper.findComponent(GlTable).exists()).toBe(true);
     });
 
     it('requests next page when pagination component performs change', () => {
-      const changeFn = wrapper.find(TablePagination).props('change');
+      const changeFn = wrapper.findComponent(TablePagination).props('change');
       changeFn(2);
       return wrapper.vm.$nextTick(() => {
         expect(fetchPageMock).toHaveBeenCalledWith(expect.anything(), 2);

ee/spec/frontend/pending_members/components/app_spec.js

@@ -82,6 +82,6 @@ describe('PendingMembersApp', () => {
       initialGetters: { tableItems: () => [mockInvitedApprovedMember] },
       initialState: { members: [mockInvitedApprovedMember] },
     });
-    expect(wrapper.find(GlBadge).text()).toEqual('Awaiting member signup');
+    expect(wrapper.findComponent(GlBadge).text()).toEqual('Awaiting member signup');
   });
 });

ee/spec/frontend/projects/components/project_adjourned_delete_button_spec.js

@@ -8,7 +8,7 @@ jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId');
 describe('Project remove modal', () => {
   let wrapper;
 
-  const findSharedDeleteButton = () => wrapper.find(SharedDeleteButton);
+  const findSharedDeleteButton = () => wrapper.findComponent(SharedDeleteButton);
 
   const defaultProps = {
     adjournedRemovalDate: '2020-12-12',

ee/spec/frontend/projects/merge_requests/blocking_mr_input_root_spec.js

@@ -5,7 +5,7 @@ import RelatedIssuableInput from '~/related_issues/components/related_issuable_i
 describe('blocking mr input root', () => {
   let wrapper;
 
-  const getInput = () => wrapper.find(RelatedIssuableInput);
+  const getInput = () => wrapper.findComponent(RelatedIssuableInput);
   const addTokenizedInput = (input) => {
     getInput().vm.$emit('addIssuableFormInput', {
       untouchedRawReferences: [input],

ee/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js

@@ -26,7 +26,7 @@ describe('projects/settings/components/shared_runners', () => {
     });
   };
 
-  const findSharedRunnersToggle = () => wrapper.find(GlToggle);
+  const findSharedRunnersToggle = () => wrapper.findComponent(GlToggle);
   const findCcValidationRequiredAlert = () => wrapper.findComponent(CcValidationRequiredAlert);
   const getToggleValue = () => findSharedRunnersToggle().props('value');
   const isToggleDisabled = () => findSharedRunnersToggle().props('disabled');

ee/spec/frontend/registrations/groups_projects/new/components/credit_card_verification_spec.js

@@ -25,11 +25,11 @@ describe('CreditCardVerification', () => {
   };
 
   const verifyToggleEnabled = () =>
-    wrapper.find({ ref: 'verifyToggle' }).attributes('enabled') === 'true';
+    wrapper.findComponent({ ref: 'verifyToggle' }).attributes('enabled') === 'true';
   const createToggleEnabled = () =>
-    wrapper.find({ ref: 'createToggle' }).attributes('enabled') === 'true';
-  const findZuora = () => wrapper.find({ ref: 'zuora' });
-  const findSubmitButton = () => wrapper.find({ ref: 'submitButton' });
+    wrapper.findComponent({ ref: 'createToggle' }).attributes('enabled') === 'true';
+  const findZuora = () => wrapper.findComponent({ ref: 'zuora' });
+  const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
   const toggleContainerHidden = () =>
     document.querySelector('.js-toggle-container').classList.contains('gl-display-none');
 

ee/spec/frontend/registrations/verifications/components/verification_spec.js

@@ -34,12 +34,12 @@ describe('Verification', () => {
     });
   };
 
-  const findSubmitButton = () => wrapper.find({ ref: 'submitButton' });
-  const findZuora = () => wrapper.find({ ref: 'zuora' });
-  const findSkipLink = () => wrapper.find({ ref: 'skipLink' });
-  const findPopover = () => wrapper.find({ ref: 'popover' });
-  const findPopoverClose = () => wrapper.find({ ref: 'popoverClose' });
-  const findSkipConfirmationLink = () => wrapper.find({ ref: 'skipConfirmationLink' });
+  const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
+  const findZuora = () => wrapper.findComponent({ ref: 'zuora' });
+  const findSkipLink = () => wrapper.findComponent({ ref: 'skipLink' });
+  const findPopover = () => wrapper.findComponent({ ref: 'popover' });
+  const findPopoverClose = () => wrapper.findComponent({ ref: 'popoverClose' });
+  const findSkipConfirmationLink = () => wrapper.findComponent({ ref: 'skipConfirmationLink' });
 
   const expectRedirect = () => expect(redirectTo).toHaveBeenCalledWith(NEXT_STEP_URL);
   const expectTrackingOfEvent = (event) => {