Commit 72b6861d authored by Martin Wortschack's avatar Martin Wortschack

Merge branch 'xanf-vtu-30-set-props' into 'master'

Ensure nextTick is called after setProps

Closes #38110

See merge request gitlab-org/gitlab!22319
parents 7213dc5f 35e1b11a
......@@ -139,12 +139,14 @@ describe('MetricChart component', () => {
it('should set the `invisible` class on the icon of the first dropdown item', () => {
wrapper.setProps({ selectedMetric: 'time_to_last_commit' });
expect(
findMetricDropdownItems()
.at(0)
.find(Icon)
.classes(),
).toContain('invisible');
return wrapper.vm.$nextTick().then(() => {
expect(
findMetricDropdownItems()
.at(0)
.find(Icon)
.classes(),
).toContain('invisible');
});
});
});
......
......@@ -34,8 +34,10 @@ describe('Configure Feature Flags Modal', () => {
it('should display an error if there is a rotate error', () => {
wrapper.setProps({ hasRotateError: true });
expect(wrapper.find('.text-danger')).toExist();
expect(wrapper.find('[name="warning"]')).toExist();
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.text-danger')).toExist();
expect(wrapper.find('[name="warning"]')).toExist();
});
});
it('should be hidden if the user cannot rotate tokens', () => {
......
......@@ -31,11 +31,13 @@ describe('EpicsSelect', () => {
isLoading: true,
});
const titleEl = wrapper.find('.flex-grow-1');
return wrapper.vm.$nextTick().then(() => {
const titleEl = wrapper.find('.flex-grow-1');
expect(titleEl.exists()).toBe(true);
expect(titleEl.find('span').classes()).toContain('align-text-top');
expect(titleEl.find('span').text()).toBe('Epic');
expect(titleEl.exists()).toBe(true);
expect(titleEl.find('span').classes()).toContain('align-text-top');
expect(titleEl.find('span').text()).toBe('Epic');
});
});
it('should render loading icon when `isLoading` prop is true', () => {
......@@ -43,7 +45,9 @@ describe('EpicsSelect', () => {
isLoading: true,
});
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
});
it('should render edit link when `canEdit` prop is true', () => {
......@@ -51,11 +55,13 @@ describe('EpicsSelect', () => {
canEdit: true,
});
const editEl = wrapper.find(GlLink);
return wrapper.vm.$nextTick().then(() => {
const editEl = wrapper.find(GlLink);
expect(editEl.exists()).toBe(true);
expect(editEl.classes()).toContain('sidebar-dropdown-toggle');
expect(editEl.text()).toBe('Edit');
expect(editEl.exists()).toBe(true);
expect(editEl.classes()).toContain('sidebar-dropdown-toggle');
expect(editEl.text()).toBe('Edit');
});
});
});
});
......
......@@ -36,7 +36,9 @@ describe('EpicsSelect', () => {
epic: {},
});
expect(wrapper.vm.hasEpic).toBe(false);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.vm.hasEpic).toBe(false);
});
});
});
});
......@@ -60,10 +62,13 @@ describe('EpicsSelect', () => {
wrapper.setProps({
epic: {},
});
const noValueEl = wrapper.find('span.no-value');
expect(noValueEl.exists()).toBe(true);
expect(noValueEl.text()).toBe('None');
return wrapper.vm.$nextTick().then(() => {
const noValueEl = wrapper.find('span.no-value');
expect(noValueEl.exists()).toBe(true);
expect(noValueEl.text()).toBe('None');
});
});
});
});
......
......@@ -29,12 +29,18 @@ describe('DismissalCommentBox', () => {
it('should render the error message', () => {
const errorMessage = 'You did something wrong';
wrapper.setProps({ errorMessage });
expect(wrapper.find('.js-error').text()).toBe(errorMessage);
return wrapper.vm.$nextTick(() => {
expect(wrapper.find('.js-error').text()).toBe(errorMessage);
});
});
it('should render the placeholder', () => {
const placeholder = 'Please type into the box';
wrapper.setProps({ placeholder });
expect(wrapper.find(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
return wrapper.vm.$nextTick(() => {
expect(wrapper.find(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
});
});
});
......@@ -80,6 +80,7 @@ describe('Solution Card', () => {
describe('with download patch', () => {
beforeEach(() => {
wrapper.setProps({ hasDownload: true });
return wrapper.vm.$nextTick();
});
it('renders the learn more about remediation solutions', () => {
......@@ -90,7 +91,9 @@ describe('Solution Card', () => {
it('does not render the download and apply solution message when there is a file download and a merge request already exists', () => {
wrapper.setProps({ hasMr: true });
expect(wrapper.contains('.card-footer')).toBe(false);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.contains('.card-footer')).toBe(false);
});
});
it('renders the create a merge request to implement this solution message', () => {
......
......@@ -117,7 +117,9 @@ describe('KnativeDomainEditor', () => {
it('displays an error banner indicating the operation failure', () => {
wrapper.setProps({ knative: { updateFailed: true, ...knative } });
expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true);
});
});
});
......
......@@ -20,7 +20,10 @@ describe('ClusterFormDropdown', () => {
describe('when initial value is provided', () => {
it('sets selectedItem to initial value', () => {
vm.setProps({ items, value: secondItem.value });
expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
});
});
});
......@@ -30,16 +33,22 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ placeholder });
expect(vm.find(DropdownButton).props('toggleText')).toEqual(placeholder);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('toggleText')).toEqual(placeholder);
});
});
});
describe('when an item is selected', () => {
beforeEach(() => {
vm.setProps({ items });
vm.findAll('.js-dropdown-item')
.at(1)
.trigger('click');
return vm.vm.$nextTick().then(() => {
vm.findAll('.js-dropdown-item')
.at(1)
.trigger('click');
return vm.vm.$nextTick();
});
});
it('emits input event with selected item', () => {
......@@ -52,12 +61,15 @@ describe('ClusterFormDropdown', () => {
beforeEach(() => {
vm.setProps({ items, multiple: true, value });
vm.findAll('.js-dropdown-item')
.at(0)
.trigger('click');
vm.findAll('.js-dropdown-item')
.at(1)
.trigger('click');
return vm.vm.$nextTick().then(() => {
vm.findAll('.js-dropdown-item')
.at(0)
.trigger('click');
vm.findAll('.js-dropdown-item')
.at(1)
.trigger('click');
return vm.vm.$nextTick();
});
});
it('emits input event with an array of selected items', () => {
......@@ -68,6 +80,7 @@ describe('ClusterFormDropdown', () => {
describe('when multiple items can be selected', () => {
beforeEach(() => {
vm.setProps({ items, multiple: true, value: firstItem.value });
return vm.vm.$nextTick();
});
it('displays a checked GlIcon next to the item', () => {
......@@ -85,7 +98,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ labelProperty, items: customLabelItems, value: currentValue });
expect(vm.find(DropdownButton).props('toggleText')).toEqual(label);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('toggleText')).toEqual(label);
});
});
});
......@@ -93,7 +108,9 @@ describe('ClusterFormDropdown', () => {
it('dropdown button isLoading', () => {
vm.setProps({ loading: true });
expect(vm.find(DropdownButton).props('isLoading')).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('isLoading')).toBe(true);
});
});
});
......@@ -103,7 +120,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ loading: true, loadingText });
expect(vm.find(DropdownButton).props('toggleText')).toEqual(loadingText);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('toggleText')).toEqual(loadingText);
});
});
});
......@@ -111,7 +130,9 @@ describe('ClusterFormDropdown', () => {
it('dropdown button isDisabled', () => {
vm.setProps({ disabled: true });
expect(vm.find(DropdownButton).props('isDisabled')).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('isDisabled')).toBe(true);
});
});
});
......@@ -121,7 +142,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ disabled: true, disabledText });
expect(vm.find(DropdownButton).props('toggleText')).toBe(disabledText);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).props('toggleText')).toBe(disabledText);
});
});
});
......@@ -129,7 +152,9 @@ describe('ClusterFormDropdown', () => {
it('sets border-danger class selector to dropdown toggle', () => {
vm.setProps({ hasErrors: true });
expect(vm.find(DropdownButton).classes('border-danger')).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownButton).classes('border-danger')).toBe(true);
});
});
});
......@@ -139,7 +164,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ hasErrors: true, errorMessage });
expect(vm.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
return vm.vm.$nextTick().then(() => {
expect(vm.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
});
});
});
......@@ -149,7 +176,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ items: [], emptyText });
expect(vm.find('.js-empty-text').text()).toEqual(emptyText);
return vm.vm.$nextTick().then(() => {
expect(vm.find('.js-empty-text').text()).toEqual(emptyText);
});
});
});
......@@ -158,7 +187,9 @@ describe('ClusterFormDropdown', () => {
vm.setProps({ searchFieldPlaceholder });
expect(vm.find(DropdownSearchInput).props('placeholderText')).toEqual(searchFieldPlaceholder);
return vm.vm.$nextTick().then(() => {
expect(vm.find(DropdownSearchInput).props('placeholderText')).toEqual(searchFieldPlaceholder);
});
});
it('it filters results by search query', () => {
......
......@@ -66,6 +66,8 @@ describe('error tracking settings project dropdown', () => {
describe('populated project list', () => {
beforeEach(() => {
wrapper.setProps({ projects: _.clone(projectList), hasProjects: true });
return wrapper.vm.$nextTick();
});
it('renders the dropdown', () => {
......@@ -84,6 +86,7 @@ describe('error tracking settings project dropdown', () => {
beforeEach(() => {
wrapper.setProps({ projects: _.clone(projectList), selectedProject, hasProjects: true });
return wrapper.vm.$nextTick();
});
it('does not show helper text', () => {
......@@ -99,6 +102,7 @@ describe('error tracking settings project dropdown', () => {
selectedProject: staleProject,
isProjectInvalid: true,
});
return wrapper.vm.$nextTick();
});
it('displays a error', () => {
......
......@@ -27,7 +27,9 @@ describe('Issuable suggestions app component', () => {
it('does not render with empty search', () => {
wrapper.setProps({ search: '' });
expect(wrapper.isVisible()).toBe(false);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.isVisible()).toBe(false);
});
});
describe('with data', () => {
......
......@@ -83,13 +83,17 @@ describe('Time series component', () => {
it('allows user to override max value label text using prop', () => {
timeSeriesChart.setProps({ legendMaxText: 'legendMaxText' });
expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText');
return timeSeriesChart.vm.$nextTick().then(() => {
expect(timeSeriesChart.props().legendMaxText).toBe('legendMaxText');
});
});
it('allows user to override average value label text using prop', () => {
timeSeriesChart.setProps({ legendAverageText: 'averageText' });
expect(timeSeriesChart.props().legendAverageText).toBe('averageText');
return timeSeriesChart.vm.$nextTick().then(() => {
expect(timeSeriesChart.props().legendAverageText).toBe('averageText');
});
});
describe('methods', () => {
......@@ -267,7 +271,9 @@ describe('Time series component', () => {
option: mockOption,
});
expect(timeSeriesChart.vm.chartOptions).toEqual(expect.objectContaining(mockOption));
return timeSeriesChart.vm.$nextTick().then(() => {
expect(timeSeriesChart.vm.chartOptions).toEqual(expect.objectContaining(mockOption));
});
});
it('additional series', () => {
......@@ -281,10 +287,12 @@ describe('Time series component', () => {
},
});
const optionSeries = timeSeriesChart.vm.chartOptions.series;
return timeSeriesChart.vm.$nextTick().then(() => {
const optionSeries = timeSeriesChart.vm.chartOptions.series;
expect(optionSeries.length).toEqual(2);
expect(optionSeries[0].name).toEqual(mockSeriesName);
expect(optionSeries.length).toEqual(2);
expect(optionSeries[0].name).toEqual(mockSeriesName);
});
});
});
......
......@@ -38,7 +38,9 @@ describe('diff_discussion_header component', () => {
wrapper.setProps({ discussion });
expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
return wrapper.vm.$nextTick().then(() => {
expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
});
});
describe('action text', () => {
......
......@@ -30,7 +30,9 @@ describe('Repository table component', () => {
vm.setData({ entries: { blobs: [{ name: 'README.md' }] } });
expect(vm.find(FilePreview).exists()).toBe(true);
return vm.vm.$nextTick().then(() => {
expect(vm.find(FilePreview).exists()).toBe(true);
});
});
describe('normalizeData', () => {
......
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