Async import more IDE things

Also update spec to await for errorMessage
component to be loaded.

app/assets/javascripts/ide/components/ide.vue

@@ -13,10 +13,7 @@ import { performanceMarkAndMeasure } from '~/performance/utils';
 import { modalTypes } from '../constants';
 import eventHub from '../eventhub';
 import IdeSidebar from './ide_side_bar.vue';
-import ErrorMessage from './error_message.vue';
-import CommitEditorHeader from './commit_sidebar/editor_header.vue';
-import RepoTabs from './repo_tabs.vue';
-import IdeStatusBar from './ide_status_bar.vue';
+import RepoEditor from './repo_editor.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 
 import { measurePerformance } from '../utils';
@@ -32,13 +29,14 @@ eventHub.$on(WEBIDE_MEASURE_FILE_AFTER_INTERACTION, () =>
 export default {
   components: {
     IdeSidebar,
-    ErrorMessage,
+    RepoEditor,
     GlButton,
     GlLoadingIcon,
-    CommitEditorHeader,
-    RepoTabs,
-    IdeStatusBar,
-    RepoEditor: () => import(/* webpackChunkName: 'ide_runtime' */ './repo_editor.vue'),
+    ErrorMessage: () => import(/* webpackChunkName: 'ide_runtime' */ './error_message.vue'),
+    CommitEditorHeader: () =>
+      import(/* webpackChunkName: 'ide_runtime' */ './commit_sidebar/editor_header.vue'),
+    RepoTabs: () => import(/* webpackChunkName: 'ide_runtime' */ './repo_tabs.vue'),
+    IdeStatusBar: () => import(/* webpackChunkName: 'ide_runtime' */ './ide_status_bar.vue'),
     FindFile: () =>
       import(/* webpackChunkName: 'ide_runtime' */ '~/vue_shared/components/file_finder/index.vue'),
     RightPane: () => import(/* webpackChunkName: 'ide_runtime' */ './panes/right.vue'),

spec/frontend/ide/components/ide_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import waitForPromises from 'helpers/wait_for_promises';
 import { createStore } from '~/ide/stores';
 import ErrorMessage from '~/ide/components/error_message.vue';
 import ide from '~/ide/components/ide.vue';
@@ -55,27 +56,24 @@ describe('WebIDE', () => {
 
   describe('ide component, non-empty repo', () => {
     describe('error message', () => {
-      it('does not show error message when it is not set', () => {
-        wrapper = createComponent({
-          state: {
-            errorMessage: null,
-          },
-        });
-
-        expect(wrapper.find(ErrorMessage).exists()).toBe(false);
-      });
-
-      it('shows error message when set', () => {
-        wrapper = createComponent({
-          state: {
-            errorMessage: {
-              text: 'error',
+      it.each`
+        errorMessage         | exists
+        ${null}              | ${false}
+        ${{ text: 'error' }} | ${true}
+      `(
+        'should error message exists=$exists when errorMessage=$errorMessage',
+        async ({ errorMessage, exists }) => {
+          wrapper = createComponent({
+            state: {
+              errorMessage,
             },
-          },
-        });
+          });
 
-        expect(wrapper.find(ErrorMessage).exists()).toBe(true);
-      });
+          await waitForPromises();
+
+          expect(wrapper.find(ErrorMessage).exists()).toBe(exists);
+        },
+      );
     });
 
     describe('onBeforeUnload', () => {