Merge branch 'xanf/introduce-stub-component' into 'master'

Introduce stubComponent helper

See merge request gitlab-org/gitlab!50103

ee/spec/frontend/integrations/jira/issues_list/components/jira_issues_list_root_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
 
 import JiraIssuesListRoot from 'ee/integrations/jira/issues_list/components/jira_issues_list_root.vue';
+import { stubComponent } from 'helpers/stub_component';
 
 import createFlash from '~/flash';
 import IssuableList from '~/issuable_list/components/issuable_list_root.vue';
@@ -25,6 +26,9 @@ const createComponent = ({ provide = mockProvide, initialFilterParams = {} } = {
       initialFilterParams,
     },
     provide,
+    stubs: {
+      IssuableList: stubComponent(IssuableList),
+    },
   });
 
 describe('JiraIssuesListRoot', () => {

spec/frontend/helpers/stub_component.js

+export function stubComponent(Component, options = {}) {
+  return {
+    props: Component.props,
+    model: Component.model,
+    // Do not render any slots/scoped slots except default
+    // This differs from VTU behavior which renders all slots
+    template: '<div><slot></slot></div>',
+    // allows wrapper.find(Component) to work for stub
+    $_vueTestUtils_original: Component,
+    ...options,
+  };
+}

spec/frontend/invite_members/components/members_token_select_spec.js

@@ -2,6 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { GlTokenSelector } from '@gitlab/ui';
 import waitForPromises from 'helpers/wait_for_promises';
+import { stubComponent } from 'helpers/stub_component';
 import Api from '~/api';
 import MembersTokenSelect from '~/invite_members/components/members_token_select.vue';
 
@@ -17,6 +18,9 @@ const createComponent = () => {
       ariaLabelledby: label,
       placeholder,
     },
+    stubs: {
+      GlTokenSelector: stubComponent(GlTokenSelector),
+    },
   });
 };
 

spec/frontend/monitoring/components/group_empty_state_spec.js

 import { GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import GroupEmptyState from '~/monitoring/components/group_empty_state.vue';
 import { metricStates } from '~/monitoring/constants';
 
-const MockGlEmptyState = {
-  props: GlEmptyState.props,
-  template: '<div><slot name="description"></slot></div>',
-};
-
 function createComponent(props) {
   return shallowMount(GroupEmptyState, {
     propsData: {
@@ -17,7 +13,9 @@ function createComponent(props) {
       svgPath: '/path/to/empty-group-illustration.svg',
     },
     stubs: {
-      GlEmptyState: MockGlEmptyState,
+      GlEmptyState: stubComponent(GlEmptyState, {
+        template: '<div><slot name="description"></slot></div>',
+      }),
     },
   });
 }
@@ -47,7 +45,7 @@ describe('GroupEmptyState', () => {
     });
 
     it('passes the expected props to GlEmptyState', () => {
-      expect(wrapper.find(MockGlEmptyState).props()).toMatchSnapshot();
+      expect(wrapper.find(GlEmptyState).props()).toMatchSnapshot();
     });
   });
 });

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

 import { shallowMount } from '@vue/test-utils';
 import { GlLink, GlSprintf } from '@gitlab/ui';
+import { stubComponent } from 'helpers/stub_component';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import HistoryItem from '~/vue_shared/components/registry/history_item.vue';
 import { HISTORY_PIPELINES_LIMIT } from '~/packages/details/constants';
@@ -21,10 +22,9 @@ describe('Package History', () => {
     wrapper = shallowMount(component, {
       propsData: { ...defaultProps, ...props },
       stubs: {
-        HistoryItem: {
-          props: HistoryItem.props,
+        HistoryItem: stubComponent(HistoryItem, {
           template: '<div data-testid="history-element"><slot></slot></div>',
-        },
+        }),
         GlSprintf,
       },
     });

spec/frontend/pipelines/tokens/pipeline_status_token_spec.js

 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlIcon } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import PipelineStatusToken from '~/pipelines/components/pipelines_list/tokens/pipeline_status_token.vue';
 
 describe('Pipeline Status Token', () => {
   let wrapper;
 
-  const stubs = {
-    GlFilteredSearchToken: {
-      props: GlFilteredSearchToken.props,
-      template: `<div><slot name="suggestions"></slot></div>`,
-    },
-  };
-
-  const findFilteredSearchToken = () => wrapper.find(stubs.GlFilteredSearchToken);
+  const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
   const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
   const findAllGlIcons = () => wrapper.findAll(GlIcon);
 
@@ -33,7 +27,11 @@ describe('Pipeline Status Token', () => {
       propsData: {
         ...defaultProps,
       },
-      stubs,
+      stubs: {
+        GlFilteredSearchToken: stubComponent(GlFilteredSearchToken, {
+          template: `<div><slot name="suggestions"></slot></div>`,
+        }),
+      },
     });
   };
 

spec/frontend/pipelines/tokens/pipeline_trigger_author_token_spec.js

 import { GlFilteredSearchToken, GlFilteredSearchSuggestion, GlLoadingIcon } from '@gitlab/ui';
+import { stubComponent } from 'helpers/stub_component';
 import { shallowMount } from '@vue/test-utils';
 import Api from '~/api';
 import PipelineTriggerAuthorToken from '~/pipelines/components/pipelines_list/tokens/pipeline_trigger_author_token.vue';
@@ -7,14 +8,7 @@ import { users } from '../mock_data';
 describe('Pipeline Trigger Author Token', () => {
   let wrapper;
 
-  const stubs = {
-    GlFilteredSearchToken: {
-      props: GlFilteredSearchToken.props,
-      template: `<div><slot name="suggestions"></slot></div>`,
-    },
-  };
-
-  const findFilteredSearchToken = () => wrapper.find(stubs.GlFilteredSearchToken);
+  const findFilteredSearchToken = () => wrapper.find(GlFilteredSearchToken);
   const findAllFilteredSearchSuggestions = () => wrapper.findAll(GlFilteredSearchSuggestion);
   const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
 
@@ -42,7 +36,11 @@ describe('Pipeline Trigger Author Token', () => {
           ...data,
         };
       },
-      stubs,
+      stubs: {
+        GlFilteredSearchToken: stubComponent(GlFilteredSearchToken, {
+          template: `<div><slot name="suggestions"></slot></div>`,
+        }),
+      },
     });
   };
 

spec/frontend/registry/explorer/components/details_page/__snapshots__/tags_loader_spec.js.snap

@@ -2,9 +2,7 @@
 
 exports[`TagsLoader component has the correct markup 1`] = `
 <div>
-  <div
-    preserve-aspect-ratio="xMinYMax meet"
-  >
+  <div>
     <rect
       height="15"
       rx="4"

spec/frontend/registry/explorer/components/list_page/__snapshots__/group_empty_state_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Registry Group Empty state to match the default snapshot 1`] = `
-<div
-  svg-path="foo"
-  title="There are no container images available in this group"
->
+<div>
   <p>
     With the Container Registry, every project can have its own space to store its Docker images. Push at least one Docker image in one of this group's projects in order to show up here. 
     <gl-link-stub

spec/frontend/registry/explorer/components/list_page/__snapshots__/project_empty_state_spec.js.snap

 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Registry Project Empty state to match the default snapshot 1`] = `
-<div
-  svg-path="bazFoo"
-  title="There are no container images stored for this project"
->
+<div>
   <p>
     With the Container Registry, every project can have its own space to store its Docker images. 
     <gl-link-stub

spec/frontend/registry/explorer/pages/list_spec.js

@@ -135,13 +135,13 @@ describe('List Page', () => {
     it('empty state should have an svg-path', () => {
       mountComponent({ config });
 
-      expect(findEmptyState().attributes('svg-path')).toBe(config.containersErrorImage);
+      expect(findEmptyState().props('svgPath')).toBe(config.containersErrorImage);
     });
 
     it('empty state should have a description', () => {
       mountComponent({ config });
 
-      expect(findEmptyState().html()).toContain('connection error');
+      expect(findEmptyState().props('title')).toContain('connection error');
     });
 
     it('should not show the loading or default state', () => {

spec/frontend/registry/explorer/stubs.js

+import {
+  GlModal as RealGlModal,
+  GlEmptyState as RealGlEmptyState,
+  GlSkeletonLoader as RealGlSkeletonLoader,
+} from '@gitlab/ui';
+import { RouterLinkStub } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import RealDeleteModal from '~/registry/explorer/components/details_page/delete_modal.vue';
 import RealListItem from '~/vue_shared/components/registry/list_item.vue';
 
-export const GlModal = {
+export const GlModal = stubComponent(RealGlModal, {
   template: '<div><slot name="modal-title"></slot><slot></slot><slot name="modal-ok"></slot></div>',
   methods: {
     show: jest.fn(),
   },
-};
+});
 
-export const GlEmptyState = {
+export const GlEmptyState = stubComponent(RealGlEmptyState, {
   template: '<div><slot name="description"></slot></div>',
-  name: 'GlEmptyStateSTub',
-};
+});
 
-export const RouterLink = {
-  template: `<div><slot></slot></div>`,
-  props: ['to'],
-};
+export const RouterLink = RouterLinkStub;
 
-export const DeleteModal = {
-  template: '<div></div>',
+export const DeleteModal = stubComponent(RealDeleteModal, {
   methods: {
     show: jest.fn(),
   },
-  props: RealDeleteModal.props,
-};
+});
 
-export const GlSkeletonLoader = {
-  template: `<div><slot></slot></div>`,
-  props: ['width', 'height'],
-};
+export const GlSkeletonLoader = stubComponent(RealGlSkeletonLoader);
 
 export const ListItem = {
   ...RealListItem,