Commit 31e525db authored by Martin Wortschack's avatar Martin Wortschack

Merge branch 'winh-jestify-related_items_tree_app_spec' into 'master'

Move related_items_tree_app_spec.js to Jest

See merge request gitlab-org/gitlab!21816
parents 3d6bf72c 5c99861c
...@@ -9,7 +9,10 @@ import AddItemForm from 'ee/related_issues/components/add_issuable_form.vue'; ...@@ -9,7 +9,10 @@ import AddItemForm from 'ee/related_issues/components/add_issuable_form.vue';
import CreateIssueForm from 'ee/related_items_tree/components/create_issue_form.vue'; import CreateIssueForm from 'ee/related_items_tree/components/create_issue_form.vue';
import IssueActionsSplitButton from 'ee/related_items_tree/components/issue_actions_split_button.vue'; import IssueActionsSplitButton from 'ee/related_items_tree/components/issue_actions_split_button.vue';
import { mockInitialConfig, mockParentItem } from '../mock_data'; import {
mockInitialConfig,
mockParentItem,
} from '../../../javascripts/related_items_tree/mock_data';
const localVue = createLocalVue(); const localVue = createLocalVue();
...@@ -54,7 +57,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -54,7 +57,7 @@ describe('RelatedItemsTreeApp', () => {
describe('handlePendingItemRemove', () => { describe('handlePendingItemRemove', () => {
it('calls `removePendingReference` action with provided `index` param', () => { it('calls `removePendingReference` action with provided `index` param', () => {
spyOn(wrapper.vm, 'removePendingReference'); jest.spyOn(wrapper.vm, 'removePendingReference').mockImplementation();
wrapper.vm.handlePendingItemRemove(0); wrapper.vm.handlePendingItemRemove(0);
...@@ -67,7 +70,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -67,7 +70,7 @@ describe('RelatedItemsTreeApp', () => {
const touchedReference = '&2'; const touchedReference = '&2';
it('calls `addPendingReferences` action with provided `untouchedRawReferences` param', () => { it('calls `addPendingReferences` action with provided `untouchedRawReferences` param', () => {
spyOn(wrapper.vm, 'addPendingReferences'); jest.spyOn(wrapper.vm, 'addPendingReferences').mockImplementation();
wrapper.vm.handleAddItemFormInput({ untouchedRawReferences, touchedReference }); wrapper.vm.handleAddItemFormInput({ untouchedRawReferences, touchedReference });
...@@ -75,7 +78,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -75,7 +78,7 @@ describe('RelatedItemsTreeApp', () => {
}); });
it('calls `setItemInputValue` action with provided `touchedReference` param', () => { it('calls `setItemInputValue` action with provided `touchedReference` param', () => {
spyOn(wrapper.vm, 'setItemInputValue'); jest.spyOn(wrapper.vm, 'setItemInputValue').mockImplementation();
wrapper.vm.handleAddItemFormInput({ untouchedRawReferences, touchedReference }); wrapper.vm.handleAddItemFormInput({ untouchedRawReferences, touchedReference });
...@@ -87,7 +90,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -87,7 +90,7 @@ describe('RelatedItemsTreeApp', () => {
const newValue = '&1 &2'; const newValue = '&1 &2';
it('calls `addPendingReferences` action with provided `newValue` param', () => { it('calls `addPendingReferences` action with provided `newValue` param', () => {
spyOn(wrapper.vm, 'addPendingReferences'); jest.spyOn(wrapper.vm, 'addPendingReferences').mockImplementation();
wrapper.vm.handleAddItemFormBlur(newValue); wrapper.vm.handleAddItemFormBlur(newValue);
...@@ -95,7 +98,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -95,7 +98,7 @@ describe('RelatedItemsTreeApp', () => {
}); });
it('calls `setItemInputValue` action with empty string', () => { it('calls `setItemInputValue` action with empty string', () => {
spyOn(wrapper.vm, 'setItemInputValue'); jest.spyOn(wrapper.vm, 'setItemInputValue').mockImplementation();
wrapper.vm.handleAddItemFormBlur(newValue); wrapper.vm.handleAddItemFormBlur(newValue);
...@@ -106,7 +109,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -106,7 +109,7 @@ describe('RelatedItemsTreeApp', () => {
describe('handleAddItemFormSubmit', () => { describe('handleAddItemFormSubmit', () => {
it('calls `addItem` action when `pendingReferences` prop in state is not empty', () => { it('calls `addItem` action when `pendingReferences` prop in state is not empty', () => {
const newValue = '&1 &2'; const newValue = '&1 &2';
spyOn(wrapper.vm, 'addItem'); jest.spyOn(wrapper.vm, 'addItem').mockImplementation();
wrapper.vm.handleAddItemFormSubmit(newValue); wrapper.vm.handleAddItemFormSubmit(newValue);
...@@ -117,7 +120,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -117,7 +120,7 @@ describe('RelatedItemsTreeApp', () => {
describe('handleCreateEpicFormSubmit', () => { describe('handleCreateEpicFormSubmit', () => {
it('calls `createItem` action with `itemTitle` param', () => { it('calls `createItem` action with `itemTitle` param', () => {
const newValue = 'foo'; const newValue = 'foo';
spyOn(wrapper.vm, 'createItem'); jest.spyOn(wrapper.vm, 'createItem').mockImplementation();
wrapper.vm.handleCreateEpicFormSubmit(newValue); wrapper.vm.handleCreateEpicFormSubmit(newValue);
...@@ -129,7 +132,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -129,7 +132,7 @@ describe('RelatedItemsTreeApp', () => {
describe('handleAddItemFormCancel', () => { describe('handleAddItemFormCancel', () => {
it('calls `toggleAddItemForm` actions with params `toggleState` as `false`', () => { it('calls `toggleAddItemForm` actions with params `toggleState` as `false`', () => {
spyOn(wrapper.vm, 'toggleAddItemForm'); jest.spyOn(wrapper.vm, 'toggleAddItemForm').mockImplementation();
wrapper.vm.handleAddItemFormCancel(); wrapper.vm.handleAddItemFormCancel();
...@@ -137,7 +140,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -137,7 +140,7 @@ describe('RelatedItemsTreeApp', () => {
}); });
it('calls `setPendingReferences` action with empty array', () => { it('calls `setPendingReferences` action with empty array', () => {
spyOn(wrapper.vm, 'setPendingReferences'); jest.spyOn(wrapper.vm, 'setPendingReferences').mockImplementation();
wrapper.vm.handleAddItemFormCancel(); wrapper.vm.handleAddItemFormCancel();
...@@ -145,7 +148,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -145,7 +148,7 @@ describe('RelatedItemsTreeApp', () => {
}); });
it('calls `setItemInputValue` action with empty string', () => { it('calls `setItemInputValue` action with empty string', () => {
spyOn(wrapper.vm, 'setItemInputValue'); jest.spyOn(wrapper.vm, 'setItemInputValue').mockImplementation();
wrapper.vm.handleAddItemFormCancel(); wrapper.vm.handleAddItemFormCancel();
...@@ -155,7 +158,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -155,7 +158,7 @@ describe('RelatedItemsTreeApp', () => {
describe('handleCreateEpicFormCancel', () => { describe('handleCreateEpicFormCancel', () => {
it('calls `toggleCreateEpicForm` actions with params `toggleState`', () => { it('calls `toggleCreateEpicForm` actions with params `toggleState`', () => {
spyOn(wrapper.vm, 'toggleCreateEpicForm'); jest.spyOn(wrapper.vm, 'toggleCreateEpicForm').mockImplementation();
wrapper.vm.handleCreateEpicFormCancel(); wrapper.vm.handleCreateEpicFormCancel();
...@@ -163,7 +166,7 @@ describe('RelatedItemsTreeApp', () => { ...@@ -163,7 +166,7 @@ describe('RelatedItemsTreeApp', () => {
}); });
it('calls `setItemInputValue` action with empty string', () => { it('calls `setItemInputValue` action with empty string', () => {
spyOn(wrapper.vm, 'setItemInputValue'); jest.spyOn(wrapper.vm, 'setItemInputValue').mockImplementation();
wrapper.vm.handleCreateEpicFormCancel(); wrapper.vm.handleCreateEpicFormCancel();
...@@ -182,50 +185,43 @@ describe('RelatedItemsTreeApp', () => { ...@@ -182,50 +185,43 @@ describe('RelatedItemsTreeApp', () => {
}); });
}); });
it('renders loading icon when `state.itemsFetchInProgress` prop is true', done => { it('renders loading icon when `state.itemsFetchInProgress` prop is true', () => {
wrapper.vm.$store.dispatch('requestItems', { wrapper.vm.$store.dispatch('requestItems', {
parentItem: mockParentItem, parentItem: mockParentItem,
isSubItem: false, isSubItem: false,
}); });
wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true); expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
done();
}); });
}); });
it('renders tree container element when `state.itemsFetchInProgress` prop is false', done => { it('renders tree container element when `state.itemsFetchInProgress` prop is false', () =>
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.related-items-tree').isVisible()).toBe(true); expect(wrapper.find('.related-items-tree').isVisible()).toBe(true);
done(); }));
});
});
it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', done => { it('renders tree container element with `disabled-content` class when `state.itemsFetchInProgress` prop is false and `state.itemAddInProgress` or `state.itemCreateInProgress` is true', () => {
wrapper.vm.$store.dispatch('requestAddItem'); wrapper.vm.$store.dispatch('requestAddItem');
wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.related-items-tree.disabled-content').isVisible()).toBe(true); expect(wrapper.find('.related-items-tree.disabled-content').isVisible()).toBe(true);
done();
}); });
}); });
it('renders tree header component', done => { it('renders tree header component', () =>
wrapper.vm.$nextTick(() => { wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(RelatedItemsTreeHeader).isVisible()).toBe(true); expect(wrapper.find(RelatedItemsTreeHeader).isVisible()).toBe(true);
done(); }));
});
});
it('renders item add/create form container element', done => { it('renders item add/create form container element', () => {
wrapper.vm.$store.dispatch('toggleAddItemForm', { wrapper.vm.$store.dispatch('toggleAddItemForm', {
toggleState: true, toggleState: true,
issuableType: issuableTypesMap.Epic, issuableType: issuableTypesMap.Epic,
}); });
wrapper.vm.$nextTick(() => { return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.add-item-form-container').isVisible()).toBe(true); expect(wrapper.find('.add-item-form-container').isVisible()).toBe(true);
done();
}); });
}); });
...@@ -239,14 +235,11 @@ describe('RelatedItemsTreeApp', () => { ...@@ -239,14 +235,11 @@ describe('RelatedItemsTreeApp', () => {
}); });
describe('with epicNewIssue feature flag enabled', () => { describe('with epicNewIssue feature flag enabled', () => {
beforeEach(done => { beforeEach(() => {
window.gon.features = { epicNewIssue: true }; window.gon.features = { epicNewIssue: true };
wrapper = createComponent(); wrapper = createComponent();
wrapper.vm.$store.state.itemsFetchInProgress = false; wrapper.vm.$store.state.itemsFetchInProgress = false;
wrapper.vm return wrapper.vm.$nextTick();
.$nextTick()
.then(done)
.catch(done.fail);
}); });
afterEach(() => { afterEach(() => {
...@@ -258,59 +251,44 @@ describe('RelatedItemsTreeApp', () => { ...@@ -258,59 +251,44 @@ describe('RelatedItemsTreeApp', () => {
}); });
describe('after split button emitted showAddIssueForm event', () => { describe('after split button emitted showAddIssueForm event', () => {
it('shows add item form', done => { it('shows add item form', () => {
expect(findAddItemForm().exists()).toBe(false); expect(findAddItemForm().exists()).toBe(false);
findIssueActionsSplitButton().vm.$emit('showAddIssueForm'); findIssueActionsSplitButton().vm.$emit('showAddIssueForm');
wrapper.vm return wrapper.vm.$nextTick().then(() => {
.$nextTick()
.then(() => {
expect(findAddItemForm().exists()).toBe(true); expect(findAddItemForm().exists()).toBe(true);
}) });
.then(done)
.catch(done.fail);
}); });
}); });
describe('after split button emitted showCreateIssueForm event', () => { describe('after split button emitted showCreateIssueForm event', () => {
it('shows create item form', done => { it('shows create item form', () => {
expect(findCreateIssueForm().exists()).toBe(false); expect(findCreateIssueForm().exists()).toBe(false);
findIssueActionsSplitButton().vm.$emit('showCreateIssueForm'); findIssueActionsSplitButton().vm.$emit('showCreateIssueForm');
wrapper.vm return wrapper.vm.$nextTick().then(() => {
.$nextTick()
.then(() => {
expect(findCreateIssueForm().exists()).toBe(true); expect(findCreateIssueForm().exists()).toBe(true);
}) });
.then(done)
.catch(done.fail);
}); });
}); });
describe('after create issue form emitted cancel event', () => { describe('after create issue form emitted cancel event', () => {
beforeEach(done => { beforeEach(() => {
findIssueActionsSplitButton().vm.$emit('showCreateIssueForm'); findIssueActionsSplitButton().vm.$emit('showCreateIssueForm');
wrapper.vm return wrapper.vm.$nextTick();
.$nextTick()
.then(done)
.catch(done.fail);
}); });
it('hides the form', done => { it('hides the form', () => {
expect(findCreateIssueForm().exists()).toBe(true); expect(findCreateIssueForm().exists()).toBe(true);
findCreateIssueForm().vm.$emit('cancel'); findCreateIssueForm().vm.$emit('cancel');
wrapper.vm return wrapper.vm.$nextTick().then(() => {
.$nextTick()
.then(() => {
expect(findCreateIssueForm().exists()).toBe(false); expect(findCreateIssueForm().exists()).toBe(false);
}) });
.then(done)
.catch(done.fail);
}); });
}); });
}); });
......
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