Merge branch 'dmishunov/ide_spec-async-jest' into 'master'

Stubbed async components for Jest

See merge request gitlab-org/gitlab!47757

doc/development/testing_guide/frontend_testing.md

@@ -115,6 +115,37 @@ describe('Component', () => {
 
 Remember that the performance of each test depends on the environment.
 
+### Timout error due to async components
+
+If your component is fetching some other components asynchroneously based on some conditions, it might happen so that your Jest suite for this component will become flaky timing out from time to time. 
+
+```javascript
+// ide.vue
+export default {
+  components: {
+    'error-message': () => import('./error_message.vue'),
+    'gl-button': () => import('@gitlab/ui/src/components/base/button/button.vue'),
+    ...
+};
+```
+
+To address this issue, you can "help" Jest by stubbing the async components so that Jest would not need to fetch those asynchroneously at the run-time.
+
+```javascript
+// ide_spec.js
+import { GlButton } from '@gitlab/ui';
+import ErrorMessage from '~/ide/components/error_message.vue';
+...
+return shallowMount(ide, {
+  ...
+  stubs: {
+    ErrorMessage,
+    GlButton,
+    ...
+  },
+})
+```
+
 ## What and how to test
 
 Before jumping into more gritty details about Jest-specific workflows like mocks and spies, we should briefly cover what to test with Jest.

spec/frontend/ide/components/ide_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton, GlLoadingIcon } from '@gitlab/ui';
 import { createStore } from '~/ide/stores';
 import ErrorMessage from '~/ide/components/error_message.vue';
+import FindFile from '~/vue_shared/components/file_finder/index.vue';
+import CommitEditorHeader from '~/ide/components/commit_sidebar/editor_header.vue';
+import RepoTabs from '~/ide/components/repo_tabs.vue';
+import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
+import RightPane from '~/ide/components/panes/right.vue';
+import NewModal from '~/ide/components/new_dropdown/modal.vue';
+
 import ide from '~/ide/components/ide.vue';
 import { file } from '../helpers';
 import { projectData } from '../mock_data';
@@ -14,7 +22,7 @@ describe('WebIDE', () => {
 
   let wrapper;
 
-  function createComponent({ projData = emptyProjData, state = {}, mockStubs = {} } = {}) {
+  function createComponent({ projData = emptyProjData, state = {} } = {}) {
     const store = createStore();
 
     store.state.currentProjectId = 'abcproject';
@@ -31,7 +39,17 @@ describe('WebIDE', () => {
     return shallowMount(ide, {
       store,
       localVue,
-      stubs: mockStubs,
+      stubs: {
+        ErrorMessage,
+        GlButton,
+        GlLoadingIcon,
+        CommitEditorHeader,
+        RepoTabs,
+        IdeStatusBar,
+        FindFile,
+        RightPane,
+        NewModal,
+      },
     });
   }
 
@@ -61,9 +79,6 @@ describe('WebIDE', () => {
           state: {
             errorMessage: null,
           },
-          mockStubs: {
-            ErrorMessage,
-          },
         });
 
         expect(wrapper.find(ErrorMessage).exists()).toBe(false);
@@ -76,9 +91,6 @@ describe('WebIDE', () => {
               text: 'error',
             },
           },
-          mockStubs: {
-            ErrorMessage,
-          },
         });
 
         expect(wrapper.find(ErrorMessage).exists()).toBe(true);