Use findComponent instead of find

find is being deprecated in VTU when searching for a
child component. We should use findComponent instead.

doc/development/fe_guide/graphql.md

@@ -1097,7 +1097,7 @@ it('renders a loading state', () => {
   const mockApollo = createMockApolloProvider();
   const wrapper = createComponent({ mockApollo });
 
-  expect(wrapper.find(LoadingSpinner).exists()).toBe(true)
+  expect(wrapper.findComponent(LoadingSpinner).exists()).toBe(true)
 });
 
 it('renders designs list', async () => {

doc/development/fe_guide/style/vue.md

@@ -463,7 +463,7 @@ Creating a global, mutable wrapper provides a number of advantages, including th
     let wrapper;
 
     // this can now be reused across tests
-    const findMyComponent = wrapper.find(MyComponent);
+    const findMyComponent = wrapper.findComponent(MyComponent);
     // ...
   })
   ```

doc/development/fe_guide/troubleshooting.md

@@ -27,15 +27,15 @@ See [this video](https://youtu.be/-BkEhghP-kM) for an in-depth overview and inve
 **Remedy - Try cloning the object that has Vue watchers**
 
 ```patch
-- expect(wrapper.find(ChildComponent).props()).toEqual(...);
-+ expect(cloneDeep(wrapper.find(ChildComponent).props())).toEqual(...)
+- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
++ expect(cloneDeep(wrapper.findComponent(ChildComponent).props())).toEqual(...)
 ```
 
 **Remedy - Try using `toMatchObject` instead of `toEqual`**
 
 ```patch
-- expect(wrapper.find(ChildComponent).props()).toEqual(...);
-+ expect(wrapper.find(ChildComponent).props()).toMatchObject(...);
+- expect(wrapper.findComponent(ChildComponent).props()).toEqual(...);
++ expect(wrapper.findComponent(ChildComponent).props()).toMatchObject(...);
 ```
 
 Please note that `toMatchObject` actually changes the nature of the assertion and won't fail if some items are **missing** from the expectation.

doc/development/fe_guide/vue.md

@@ -361,7 +361,7 @@ describe('~/todos/app.vue', () => {
     });
   };
   // Helper methods greatly help test maintainability and readability.
-  const findLoader = () => wrapper.find(GlLoadingIcon);
+  const findLoader = () => wrapper.findComponent(GlLoadingIcon);
   const findAddButton = () => wrapper.findByTestId('add-button');
   const findTextInput = () => wrapper.findByTestId('text-input');
   const findTodoData = () =>

doc/development/testing_guide/frontend_testing.md

@@ -249,7 +249,7 @@ it('exists', () => {
   wrapper.findByText(/Click Me/i)
 
   // Good (especially for unit tests)
-  wrapper.find(FooComponent);
+  wrapper.findComponent(FooComponent);
   wrapper.find('input[name=foo]');
   wrapper.find('[data-testid="my-foo-id"]');
   wrapper.findByTestId('my-foo-id'); // with shallowMountExtended or mountExtended – check below
@@ -281,7 +281,7 @@ Example:
 
 ```javascript
 it('exists', () => {
-    wrapper.find(FooComponent);
+  wrapper.findComponent(FooComponent);
 });
 ```