Commit 08bfc7fc authored by Paul Slaughter's avatar Paul Slaughter

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

This reverts commit b76d58ac, reversing
changes made to 6592ee22.
parent ce1a7c46
......@@ -104,37 +104,6 @@ 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.
......
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';
......@@ -22,7 +14,7 @@ describe('WebIDE', () => {
let wrapper;
function createComponent({ projData = emptyProjData, state = {} } = {}) {
function createComponent({ projData = emptyProjData, state = {}, mockStubs = {} } = {}) {
const store = createStore();
store.state.currentProjectId = 'abcproject';
......@@ -39,17 +31,7 @@ describe('WebIDE', () => {
return shallowMount(ide, {
store,
localVue,
stubs: {
ErrorMessage,
GlButton,
GlLoadingIcon,
CommitEditorHeader,
RepoTabs,
IdeStatusBar,
FindFile,
RightPane,
NewModal,
},
stubs: mockStubs,
});
}
......@@ -79,6 +61,9 @@ describe('WebIDE', () => {
state: {
errorMessage: null,
},
mockStubs: {
ErrorMessage,
},
});
expect(wrapper.find(ErrorMessage).exists()).toBe(false);
......@@ -91,6 +76,9 @@ describe('WebIDE', () => {
text: 'error',
},
},
mockStubs: {
ErrorMessage,
},
});
expect(wrapper.find(ErrorMessage).exists()).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment