Improve stubbing of components in tests

VTU 1.x changes the way of handling stubs, so we need to pass
props when we define own custom stubs

ee/spec/frontend/analytics/shared/components/tokens/user_token_spec.js

@@ -80,10 +80,13 @@ describe('UserToken', () => {
   describe('search', () => {
     describe('when no search term is given', () => {
       it('calls `fetchData` with an empty search term', () => {
-        createComponent({
-          config,
-          value,
-        });
+        createComponent(
+          {
+            config,
+            value,
+          },
+          { stubs },
+        );
 
         expect(config.fetchData).toHaveBeenCalledWith('');
       });
@@ -92,7 +95,7 @@ describe('UserToken', () => {
     describe('when the search term "Diddy Kong" is given', () => {
       const data = 'Diddy Kong';
       it('calls `fetchData` with the search term', () => {
-        createComponent({ config, value: { data } });
+        createComponent({ config, value: { data } }, { stubs });
 
         expect(config.fetchData).toHaveBeenCalledWith(data);
       });

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

 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
+import HistoryElement from '~/packages/details/components/history_element.vue';
 import component from '~/packages/details/components/package_history.vue';
 
 import { mavenPackage, mockPipelineInfo } from '../../mock_data';
@@ -16,7 +17,10 @@ describe('Package History', () => {
     wrapper = shallowMount(component, {
       propsData: { ...defaultProps, ...props },
       stubs: {
-        HistoryElement: '<div data-testid="history-element"><slot></slot></div>',
+        HistoryElement: {
+          props: HistoryElement.props,
+          template: '<div data-testid="history-element"><slot></slot></div>',
+        },
         GlSprintf,
       },
     });

spec/frontend/pipelines/tokens/pipeline_status_token_spec.js

@@ -5,16 +5,17 @@ import PipelineStatusToken from '~/pipelines/components/pipelines_list/tokens/pi
 describe('Pipeline Status Token', () => {
   let wrapper;
 
-  const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
-  const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
-  const findAllGlIcons = () => wrapper.findAll(GlIcon);
-
   const stubs = {
     GlFilteredSearchToken: {
+      props: GlFilteredSearchToken.props,
       template: `<div><slot name="suggestions"></slot></div>`,
     },
   };
 
+  const findFilteredSearchToken = () => wrapper.find(stubs.GlFilteredSearchToken);
+  const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
+  const findAllGlIcons = () => wrapper.findAll(GlIcon);
+
   const defaultProps = {
     config: {
       type: 'status',
@@ -27,12 +28,12 @@ describe('Pipeline Status Token', () => {
     },
   };
 
-  const createComponent = options => {
+  const createComponent = () => {
     wrapper = shallowMount(PipelineStatusToken, {
       propsData: {
         ...defaultProps,
       },
-      ...options,
+      stubs,
     });
   };
 
@@ -50,10 +51,6 @@ describe('Pipeline Status Token', () => {
   });
 
   describe('shows statuses correctly', () => {
-    beforeEach(() => {
-      createComponent({ stubs });
-    });
-
     it('renders all pipeline statuses available', () => {
       expect(findAllFilteredSearchSuggestions()).toHaveLength(wrapper.vm.statuses.length);
       expect(findAllGlIcons()).toHaveLength(wrapper.vm.statuses.length);

spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js

@@ -7,16 +7,17 @@ import { users } from '../mock_data';
 describe('Pipeline Trigger Author Token', () => {
   let wrapper;
 
-  const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
-  const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-
   const stubs = {
     GlFilteredSearchToken: {
+      props: GlFilteredSearchToken.props,
       template: `<div><slot name="suggestions"></slot></div>`,
     },
   };
 
+  const findFilteredSearchToken = () => wrapper.find(stubs.GlFilteredSearchToken);
+  const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
+  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+
   const defaultProps = {
     config: {
       type: 'username',
@@ -31,7 +32,7 @@ describe('Pipeline Trigger Author Token', () => {
     },
   };
 
-  const createComponent = (options, data) => {
+  const createComponent = data => {
     wrapper = shallowMount(PipelineTriggerAuthorToken, {
       propsData: {
         ...defaultProps,
@@ -41,7 +42,7 @@ describe('Pipeline Trigger Author Token', () => {
           ...data,
         };
       },
-      ...options,
+      stubs,
     });
   };
 
@@ -69,13 +70,13 @@ describe('Pipeline Trigger Author Token', () => {
 
   describe('displays loading icon correctly', () => {
     it('shows loading icon', () => {
-      createComponent({ stubs }, { loading: true });
+      createComponent({ loading: true });
 
       expect(findLoadingIcon().exists()).toBe(true);
     });
 
     it('does not show loading icon', () => {
-      createComponent({ stubs }, { loading: false });
+      createComponent({ loading: false });
 
       expect(findLoadingIcon().exists()).toBe(false);
     });
@@ -85,22 +86,17 @@ describe('Pipeline Trigger Author Token', () => {
     beforeEach(() => {});
 
     it('renders all trigger authors', () => {
-      createComponent({ stubs }, { users, loading: false });
+      createComponent({ users, loading: false });
 
       // should have length of all users plus the static 'Any' option
       expect(findAllFilteredSearchSuggestions()).toHaveLength(users.length + 1);
     });
 
     it('renders only the trigger author searched for', () => {
-      createComponent(
-        { stubs },
-        {
-          users: [
-            { name: 'Arnold', username: 'admin', state: 'active', avatar_url: 'avatar-link' },
-          ],
-          loading: false,
-        },
-      );
+      createComponent({
+        users: [{ name: 'Arnold', username: 'admin', state: 'active', avatar_url: 'avatar-link' }],
+        loading: false,
+      });
 
       expect(findAllFilteredSearchSuggestions()).toHaveLength(2);
     });