Commit a384893a authored by Illya Klymov's avatar Illya Klymov

Ensure setData calls are properly handled

After `setData` component is updating in async way
Ensure `nextTick` is called for that
parent 6e39c0ad
......@@ -70,13 +70,15 @@ describe('Design management toolbar component', () => {
it('links back to designs list', () => {
createComponent();
const link = wrapper.find('a');
return wrapper.vm.$nextTick().then(() => {
const link = wrapper.find('a');
expect(link.props('to')).toEqual({
name: 'designs',
query: {
version: undefined,
},
expect(link.props('to')).toEqual({
name: 'designs',
query: {
version: undefined,
},
});
});
});
......
......@@ -29,6 +29,8 @@ describe('Design management pagination component', () => {
designs: [{ id: '1' }, { id: '2' }],
});
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
});
......@@ -50,20 +50,26 @@ describe('Design management design version dropdown component', () => {
it('renders design version dropdown button', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders design version list', () => {
createComponent();
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
describe('selected version name', () => {
it('has "latest" on most recent version item', () => {
createComponent();
expect(findVersionLink(0).text()).toContain('latest');
return wrapper.vm.$nextTick().then(() => {
expect(findVersionLink(0).text()).toContain('latest');
});
});
});
......@@ -71,29 +77,41 @@ describe('Design management design version dropdown component', () => {
it('displays latest version text by default', () => {
createComponent();
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
it('displays latest version text when only 1 version is present', () => {
createComponent({ maxVersions: 1 });
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
it('displays version text when the current version is not the latest', () => {
createComponent({ $route: designRouteFactory(PREVIOUS_VERSION_ID) });
expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe(`Showing Version #1`);
});
});
it('displays latest version text when the current version is the latest', () => {
createComponent({ $route: designRouteFactory(LATEST_VERSION_ID) });
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlDropdown).attributes('text')).toBe('Showing Latest Version');
});
});
it('should have the same length as apollo query', () => {
createComponent();
expect(wrapper.findAll(GlDropdownItem).length).toEqual(wrapper.vm.allVersions.length);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.findAll(GlDropdownItem).length).toEqual(wrapper.vm.allVersions.length);
});
});
});
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Design management design index page renders design index 1`] = `
<div
class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
>
<div
class="d-flex overflow-hidden flex-lg-grow-1 flex-column"
>
<designdestroyer-stub
filenames="test.jpg"
iid="1"
projectpath=""
/>
<div
class="d-flex flex-column h-100 mh-100 position-relative"
>
<div
class="p-3"
>
<!---->
</div>
<designimage-stub
image="test.jpg"
name="test.jpg"
/>
<designoverlay-stub
notes="[object Object]"
position="[object Object]"
/>
</div>
</div>
<div
class="image-notes"
>
<designdiscussion-stub
designid="1"
discussion="[object Object]"
discussionindex="1"
markdownpreviewpath="//preview_markdown?target_type=Issue"
noteableid="design-id"
/>
<!---->
</div>
</div>
`;
exports[`Design management design index page sets loading state 1`] = `
<div
class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
>
<glloadingicon-stub
class="align-self-center"
color="orange"
label="Loading"
size="xl"
/>
</div>
`;
exports[`Design management design index page with error GlAlert is rendered in correct position with correct content 1`] = `
<div
class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
......@@ -60,29 +123,3 @@ exports[`Design management design index page with error GlAlert is rendered in c
</div>
</div>
`;
exports[`Design management design index page renders design index 1`] = `
<div
class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
>
<glloadingicon-stub
class="align-self-center"
color="orange"
label="Loading"
size="xl"
/>
</div>
`;
exports[`Design management design index page sets loading state 1`] = `
<div
class="design-detail fixed-top w-100 position-bottom-0 d-flex justify-content-center flex-column flex-lg-row"
>
<glloadingicon-stub
class="align-self-center"
color="orange"
label="Loading"
size="xl"
/>
</div>
`;
......@@ -81,7 +81,9 @@ describe('Design management design index page', () => {
it('sets loading state', () => {
createComponent(true);
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders design index', () => {
......@@ -91,8 +93,10 @@ describe('Design management design index page', () => {
design,
});
expect(wrapper.element).toMatchSnapshot();
expect(wrapper.find(GlAlert).exists()).toBe(false);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
expect(wrapper.find(GlAlert).exists()).toBe(false);
});
});
describe('when has no discussions', () => {
......
......@@ -110,7 +110,9 @@ describe('Design management index page', () => {
it('renders loading icon', () => {
createComponent({ loading: true });
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('renders error', () => {
......@@ -153,13 +155,15 @@ describe('Design management index page', () => {
createComponent();
});
it('renders empty text', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('renders empty text', () =>
wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
}));
it('does not render a toolbar with buttons', () => {
expect(findToolbar().exists()).toBe(false);
});
it('does not render a toolbar with buttons', () =>
wrapper.vm.$nextTick().then(() => {
expect(findToolbar().exists()).toBe(false);
}));
});
describe('uploading designs', () => {
......
......@@ -132,7 +132,9 @@ describe('packages_list', () => {
it('deleteItemConfirmation emit package:delete', () => {
wrapper.setData({ itemToBeDeleted: { id: 2 } });
wrapper.vm.deleteItemConfirmation();
expect(wrapper.emitted('package:delete')).toEqual([[2]]);
return wrapper.vm.$nextTick(() => {
expect(wrapper.emitted('package:delete')).toEqual([[2]]);
});
});
it('deleteItemCanceled resets itemToBeDeleted', () => {
......
......@@ -72,7 +72,9 @@ describe('EpicsSelect', () => {
query: 'foo',
});
expect(wrapper.classes()).toContain('has-value');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.classes()).toContain('has-value');
});
});
it('should render input element', () => {
......@@ -89,10 +91,13 @@ describe('EpicsSelect', () => {
wrapper.setData({
query: 'foo',
});
const iconEl = wrapper.find(Icon);
expect(iconEl.exists()).toBe(true);
expect(iconEl.attributes('name')).toBe('search');
return wrapper.vm.$nextTick().then(() => {
const iconEl = wrapper.find(Icon);
expect(iconEl.exists()).toBe(true);
expect(iconEl.attributes('name')).toBe('search');
});
});
it('should render input clear button', () => {
......
......@@ -25,6 +25,7 @@ describe('KnativeDomainEditor', () => {
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('knative has an assigned IP address', () => {
......@@ -101,11 +102,15 @@ describe('KnativeDomainEditor', () => {
describe('when knative domain name input changes', () => {
it('emits "set" event with updated domain name', () => {
createComponent({ knative });
const newHostname = 'newhostname.com';
wrapper.setData({ knativeHostname: newHostname });
expect(wrapper.emitted('set')[0]).toEqual([newHostname]);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.emitted('set')[0]).toEqual([newHostname]);
});
});
});
......
......@@ -167,8 +167,10 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ items });
vm.setData({ searchQuery });
expect(vm.findAll('.js-dropdown-item').length).toEqual(1);
expect(vm.find('.js-dropdown-item').text()).toEqual(secondItem.name);
return vm.vm.$nextTick().then(() => {
expect(vm.findAll('.js-dropdown-item').length).toEqual(1);
expect(vm.find('.js-dropdown-item').text()).toEqual(secondItem.name);
});
});
it('focuses dropdown search input when dropdown is displayed', () => {
......
......@@ -72,7 +72,9 @@ describe('ServiceCredentialsForm', () => {
it('enables submit button when role ARN is not provided', () => {
vm.setData({ roleArn: '123' });
expect(findSubmitButton().attributes('disabled')).toBeFalsy();
return vm.vm.$nextTick().then(() => {
expect(findSubmitButton().attributes('disabled')).toBeFalsy();
});
});
it('dispatches createRole action when form is submitted', () => {
......@@ -86,6 +88,8 @@ describe('ServiceCredentialsForm', () => {
vm.setData({ roleArn: '123' }); // set role ARN to enable button
state.isCreatingRole = true;
return vm.vm.$nextTick();
});
it('disables submit button', () => {
......
......@@ -40,14 +40,18 @@ describe('Issuable suggestions app component', () => {
it('renders component', () => {
wrapper.setData(data);
expect(wrapper.isEmpty()).toBe(false);
return wrapper.vm.$nextTick(() => {
expect(wrapper.isEmpty()).toBe(false);
});
});
it('does not render with empty search', () => {
wrapper.setProps({ search: '' });
wrapper.setData(data);
expect(wrapper.isVisible()).toBe(false);
return wrapper.vm.$nextTick(() => {
expect(wrapper.isVisible()).toBe(false);
});
});
it('does not render when loading', () => {
......@@ -56,13 +60,17 @@ describe('Issuable suggestions app component', () => {
loading: 1,
});
expect(wrapper.isVisible()).toBe(false);
return wrapper.vm.$nextTick(() => {
expect(wrapper.isVisible()).toBe(false);
});
});
it('does not render with empty issues data', () => {
wrapper.setData({ issues: [] });
expect(wrapper.isVisible()).toBe(false);
return wrapper.vm.$nextTick(() => {
expect(wrapper.isVisible()).toBe(false);
});
});
it('renders list of issues', () => {
......
......@@ -41,7 +41,9 @@ describe('MR Popover', () => {
},
});
expect(wrapper.element).toMatchSnapshot();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.element).toMatchSnapshot();
});
});
it('does not show CI Icon if there is no pipeline data', () => {
......@@ -55,7 +57,9 @@ describe('MR Popover', () => {
},
});
expect(wrapper.contains('ciicon-stub')).toBe(false);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.contains('ciicon-stub')).toBe(false);
});
});
});
});
......@@ -162,6 +162,7 @@ describe('table registry', () => {
describe('delete registry', () => {
beforeEach(() => {
wrapper.setData({ selectedItems: [0] });
return wrapper.vm.$nextTick();
});
it('should be possible to delete a registry', () => {
......@@ -317,6 +318,7 @@ describe('table registry', () => {
describe('single tag delete', () => {
beforeEach(() => {
wrapper.setData({ itemsToBeDeleted: [0] });
return wrapper.vm.$nextTick();
});
it('send an event when delete button is clicked', () => {
......@@ -345,6 +347,7 @@ describe('table registry', () => {
beforeEach(() => {
const items = [0, 1, 2];
wrapper.setData({ itemsToBeDeleted: items, selectedItems: items });
return wrapper.vm.$nextTick();
});
it('send an event when delete button is clicked', () => {
......
......@@ -49,7 +49,9 @@ describe('Repository breadcrumbs component', () => {
vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
expect(vm.find(GlDropdown).exists()).toBe(false);
return vm.vm.$nextTick(() => {
expect(vm.find(GlDropdown).exists()).toBe(false);
});
});
it('renders add to tree dropdown when permissions are true', () => {
......@@ -57,6 +59,8 @@ describe('Repository breadcrumbs component', () => {
vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
expect(vm.find(GlDropdown).exists()).toBe(true);
return vm.vm.$nextTick(() => {
expect(vm.find(GlDropdown).exists()).toBe(true);
});
});
});
......@@ -58,7 +58,9 @@ describe('Repository last commit component', () => {
`('$label when loading icon $loading is true', ({ loading }) => {
factory(createCommitData(), loading);
expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
return vm.vm.$nextTick(() => {
expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
});
});
it('renders commit widget', () => {
......
......@@ -33,7 +33,9 @@ describe('Repository file preview component', () => {
vm.setData({ readme: { html: '<div class="blob">test</div>' } });
expect(vm.element).toMatchSnapshot();
return vm.vm.$nextTick(() => {
expect(vm.element).toMatchSnapshot();
});
});
it('renders loading icon', () => {
......@@ -44,6 +46,8 @@ describe('Repository file preview component', () => {
vm.setData({ loading: 1 });
expect(vm.find(GlLoadingIcon).exists()).toBe(true);
return vm.vm.$nextTick(() => {
expect(vm.find(GlLoadingIcon).exists()).toBe(true);
});
});
});
......@@ -53,9 +53,11 @@ describe('Repository table component', () => {
vm.setData({ ref });
expect(vm.find('.table').attributes('aria-label')).toEqual(
`Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
);
return vm.vm.$nextTick(() => {
expect(vm.find('.table').attributes('aria-label')).toEqual(
`Files, directories, and submodules in the path ${path} for commit reference ${ref}`,
);
});
});
it('shows loading icon', () => {
......
......@@ -46,7 +46,9 @@ describe('Repository table row component', () => {
currentPath: '/',
});
expect(vm.element).toMatchSnapshot();
return vm.vm.$nextTick().then(() => {
expect(vm.element).toMatchSnapshot();
});
});
it.each`
......@@ -63,7 +65,9 @@ describe('Repository table row component', () => {
currentPath: '/',
});
expect(vm.find(component).exists()).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(component).exists()).toBe(true);
});
});
it.each`
......@@ -80,13 +84,15 @@ describe('Repository table row component', () => {
currentPath: '/',
});
vm.trigger('click');
return vm.vm.$nextTick().then(() => {
vm.trigger('click');
if (pushes) {
expect($router.push).toHaveBeenCalledWith({ path: '/tree/master/test' });
} else {
expect($router.push).not.toHaveBeenCalled();
}
if (pushes) {
expect($router.push).toHaveBeenCalledWith({ path: '/tree/master/test' });
} else {
expect($router.push).not.toHaveBeenCalled();
}
});
});
it.each`
......@@ -103,15 +109,17 @@ describe('Repository table row component', () => {
currentPath: '/',
});
vm.trigger('click');
return vm.vm.$nextTick().then(() => {
vm.trigger('click');
if (pushes) {
expect(visitUrl).not.toHaveBeenCalled();
} else {
const [url, external] = visitUrl.mock.calls[0];
expect(url).toBe('https://test.com');
expect(external).toBeFalsy();
}
if (pushes) {
expect(visitUrl).not.toHaveBeenCalled();
} else {
const [url, external] = visitUrl.mock.calls[0];
expect(url).toBe('https://test.com');
expect(external).toBeFalsy();
}
});
});
it('renders commit ID for submodule', () => {
......@@ -123,7 +131,9 @@ describe('Repository table row component', () => {
currentPath: '/',
});
expect(vm.find('.commit-sha').text()).toContain('1');
return vm.vm.$nextTick().then(() => {
expect(vm.find('.commit-sha').text()).toContain('1');
});
});
it('renders link with href', () => {
......@@ -136,7 +146,9 @@ describe('Repository table row component', () => {
currentPath: '/',
});
expect(vm.find('a').attributes('href')).toEqual('https://test.com');
return vm.vm.$nextTick().then(() => {
expect(vm.find('a').attributes('href')).toEqual('https://test.com');
});
});
it('renders LFS badge', () => {
......@@ -149,7 +161,9 @@ describe('Repository table row component', () => {
lfsOid: '1',
});
expect(vm.find(GlBadge).exists()).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(GlBadge).exists()).toBe(true);
});
});
it('renders commit and web links with href for submodule', () => {
......@@ -163,8 +177,10 @@ describe('Repository table row component', () => {
currentPath: '/',
});
expect(vm.find('a').attributes('href')).toEqual('https://test.com');
expect(vm.find(GlLink).attributes('href')).toEqual('https://test.com/commit');
return vm.vm.$nextTick().then(() => {
expect(vm.find('a').attributes('href')).toEqual('https://test.com');
expect(vm.find(GlLink).attributes('href')).toEqual('https://test.com/commit');
});
});
it('renders lock icon', () => {
......@@ -178,6 +194,8 @@ describe('Repository table row component', () => {
vm.setData({ commit: { lockLabel: 'Locked by Root', committedDate: '2019-01-01' } });
expect(vm.find(Icon).exists()).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(Icon).exists()).toBe(true);
});
});
});
......@@ -78,21 +78,29 @@ describe('Confidential Issue Sidebar Block', () => {
it('displays the edit form when editable', () => {
wrapper.setData({ edit: false });
wrapper.find({ ref: 'editLink' }).trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(EditForm).exists()).toBe(true);
});
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.find({ ref: 'editLink' }).trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.find(EditForm).exists()).toBe(true);
});
});
it('displays the edit form when opened from collapsed state', () => {
wrapper.setData({ edit: false });
wrapper.find({ ref: 'collapseIcon' }).trigger('click');
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(EditForm).exists()).toBe(true);
});
return wrapper.vm
.$nextTick()
.then(() => {
wrapper.find({ ref: 'collapseIcon' }).trigger('click');
return wrapper.vm.$nextTick();
})
.then(() => {
expect(wrapper.find(EditForm).exists()).toBe(true);
});
});
it('tracks the event when "Edit" is clicked', () => {
......
......@@ -64,7 +64,9 @@ describe('Commits header component', () => {
createComponent();
wrapper.setData({ expanded: false });
expect(findIcon().props('name')).toBe('chevron-right');
return wrapper.vm.$nextTick().then(() => {
expect(findIcon().props('name')).toBe('chevron-right');
});
});
describe('when squash is disabled', () => {
......
......@@ -43,7 +43,10 @@ describe('Error Tracking directive', () => {
wrapper.setData({ trackingOptions });
const { category, action, label, property, value } = trackingOptions;
button.trigger('click');
expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
return wrapper.vm.$nextTick(() => {
button.trigger('click');
expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
});
});
});
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