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

Ensure nextTick is called after setProps

Closes #38110

See merge request gitlab-org/gitlab!22319

ee/spec/frontend/analytics/productivity_analytics/components/metric_chart_spec.js

@@ -139,6 +139,7 @@ describe('MetricChart component', () => {
           it('should set the `invisible` class on the icon of the first dropdown item', () => {
             wrapper.setProps({ selectedMetric: 'time_to_last_commit' });
 
+            return wrapper.vm.$nextTick().then(() => {
               expect(
                 findMetricDropdownItems()
                   .at(0)
@@ -147,6 +148,7 @@ describe('MetricChart component', () => {
               ).toContain('invisible');
             });
           });
+        });
 
         describe('and a description exists', () => {
           it('renders a description', () => {

ee/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js

@@ -34,9 +34,11 @@ describe('Configure Feature Flags Modal', () => {
 
     it('should display an error if there is a rotate error', () => {
       wrapper.setProps({ hasRotateError: true });
+      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', () => {
       wrapper.setProps({ canUserRotateToken: false });

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_title_spec.js

@@ -31,26 +31,31 @@ describe('EpicsSelect', () => {
           isLoading: true,
         });
 
+        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');
         });
+      });
 
       it('should render loading icon when `isLoading` prop is true', () => {
         wrapper.setProps({
           isLoading: true,
         });
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
         });
+      });
 
       it('should render edit link when `canEdit` prop is true', () => {
         wrapper.setProps({
           canEdit: true,
         });
 
+        return wrapper.vm.$nextTick().then(() => {
           const editEl = wrapper.find(GlLink);
 
           expect(editEl.exists()).toBe(true);
@@ -59,4 +64,5 @@ describe('EpicsSelect', () => {
         });
       });
     });
+  });
 });

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_value_spec.js

@@ -36,10 +36,12 @@ describe('EpicsSelect', () => {
             epic: {},
           });
 
+          return wrapper.vm.$nextTick().then(() => {
             expect(wrapper.vm.hasEpic).toBe(false);
           });
         });
       });
+    });
 
     describe('template', () => {
       it('should render component container', () => {
@@ -60,6 +62,8 @@ describe('EpicsSelect', () => {
         wrapper.setProps({
           epic: {},
         });
+
+        return wrapper.vm.$nextTick().then(() => {
           const noValueEl = wrapper.find('span.no-value');
 
           expect(noValueEl.exists()).toBe(true);
@@ -67,4 +71,5 @@ describe('EpicsSelect', () => {
         });
       });
     });
+  });
 });

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_box_spec.js

@@ -29,12 +29,18 @@ describe('DismissalCommentBox', () => {
   it('should render the error message', () => {
     const errorMessage = 'You did something wrong';
     wrapper.setProps({ 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 });
+
+    return wrapper.vm.$nextTick(() => {
       expect(wrapper.find(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
     });
+  });
 });

ee/spec/frontend/vue_shared/security_reports/components/solution_card_spec.js

@@ -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,8 +91,10 @@ 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 });
+          return wrapper.vm.$nextTick().then(() => {
             expect(wrapper.contains('.card-footer')).toBe(false);
           });
+        });
 
         it('renders the create a merge request to implement this solution message', () => {
           expect(wrapper.find('.card-footer').text()).toContain(

spec/frontend/clusters/components/knative_domain_editor_spec.js

@@ -117,9 +117,11 @@ describe('KnativeDomainEditor', () => {
     it('displays an error banner indicating the operation failure', () => {
       wrapper.setProps({ knative: { updateFailed: true, ...knative } });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.find('.js-cluster-knative-domain-name-failure-message').exists()).toBe(true);
       });
     });
+  });
 
   describe(`when knative status is ${UPDATING}`, () => {
     beforeEach(() => {

spec/frontend/create_cluster/eks_cluster/components/cluster_form_dropdown_spec.js

@@ -20,9 +20,12 @@ describe('ClusterFormDropdown', () => {
   describe('when initial value is provided', () => {
     it('sets selectedItem to initial value', () => {
       vm.setProps({ items, value: secondItem.value });
+
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('toggleText')).toEqual(secondItem.name);
       });
     });
+  });
 
   describe('when no item is selected', () => {
     it('displays placeholder text', () => {
@@ -30,16 +33,22 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ placeholder });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('toggleText')).toEqual(placeholder);
       });
     });
+  });
 
   describe('when an item is selected', () => {
     beforeEach(() => {
       vm.setProps({ items });
+
+      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 });
+      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,17 +98,21 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ labelProperty, items: customLabelItems, value: currentValue });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('toggleText')).toEqual(label);
       });
     });
+  });
 
   describe('when loading', () => {
     it('dropdown button isLoading', () => {
       vm.setProps({ loading: true });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('isLoading')).toBe(true);
       });
     });
+  });
 
   describe('when loading and loadingText is provided', () => {
     it('uses loading text as toggle button text', () => {
@@ -103,17 +120,21 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ loading: true, loadingText });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('toggleText')).toEqual(loadingText);
       });
     });
+  });
 
   describe('when disabled', () => {
     it('dropdown button isDisabled', () => {
       vm.setProps({ disabled: true });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('isDisabled')).toBe(true);
       });
     });
+  });
 
   describe('when disabled and disabledText is provided', () => {
     it('uses disabled text as toggle button text', () => {
@@ -121,17 +142,21 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ disabled: true, disabledText });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).props('toggleText')).toBe(disabledText);
       });
     });
+  });
 
   describe('when has errors', () => {
     it('sets border-danger class selector to dropdown toggle', () => {
       vm.setProps({ hasErrors: true });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find(DropdownButton).classes('border-danger')).toBe(true);
       });
     });
+  });
 
   describe('when has errors and an error message', () => {
     it('displays error message', () => {
@@ -139,9 +164,11 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ hasErrors: true, errorMessage });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find('.js-eks-dropdown-error-message').text()).toEqual(errorMessage);
       });
     });
+  });
 
   describe('when no results are available', () => {
     it('displays empty text', () => {
@@ -149,17 +176,21 @@ describe('ClusterFormDropdown', () => {
 
       vm.setProps({ items: [], emptyText });
 
+      return vm.vm.$nextTick().then(() => {
         expect(vm.find('.js-empty-text').text()).toEqual(emptyText);
       });
     });
+  });
 
   it('displays search field placeholder', () => {
     const searchFieldPlaceholder = 'Placeholder';
 
     vm.setProps({ searchFieldPlaceholder });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find(DropdownSearchInput).props('placeholderText')).toEqual(searchFieldPlaceholder);
     });
+  });
 
   it('it filters results by search query', () => {
     const searchQuery = secondItem.name;

spec/frontend/error_tracking_settings/components/project_dropdown_spec.js

@@ -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', () => {

spec/frontend/issuable_suggestions/components/app_spec.js

@@ -27,8 +27,10 @@ describe('Issuable suggestions app component', () => {
   it('does not render with empty search', () => {
     wrapper.setProps({ search: '' });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.isVisible()).toBe(false);
     });
+  });
 
   describe('with data', () => {
     let data;

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -83,14 +83,18 @@ describe('Time series component', () => {
     it('allows user to override max value label text using prop', () => {
       timeSeriesChart.setProps({ legendMaxText: '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' });
 
+      return timeSeriesChart.vm.$nextTick().then(() => {
         expect(timeSeriesChart.props().legendAverageText).toBe('averageText');
       });
+    });
 
     describe('methods', () => {
       describe('formatTooltipText', () => {
@@ -267,8 +271,10 @@ describe('Time series component', () => {
               option: mockOption,
             });
 
+            return timeSeriesChart.vm.$nextTick().then(() => {
               expect(timeSeriesChart.vm.chartOptions).toEqual(expect.objectContaining(mockOption));
             });
+          });
 
           it('additional series', () => {
             timeSeriesChart.setProps({
@@ -281,12 +287,14 @@ describe('Time series component', () => {
               },
             });
 
+            return timeSeriesChart.vm.$nextTick().then(() => {
               const optionSeries = timeSeriesChart.vm.chartOptions.series;
 
               expect(optionSeries.length).toEqual(2);
               expect(optionSeries[0].name).toEqual(mockSeriesName);
             });
           });
+        });
 
         describe('yAxis formatter', () => {
           let format;

spec/frontend/notes/components/diff_discussion_header_spec.js

@@ -38,8 +38,10 @@ describe('diff_discussion_header component', () => {
 
     wrapper.setProps({ discussion });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.find('.user-avatar-link').exists()).toBe(true);
     });
+  });
 
   describe('action text', () => {
     const commitId = 'razupaltuff';

spec/frontend/repository/components/tree_content_spec.js

@@ -30,8 +30,10 @@ describe('Repository table component', () => {
 
     vm.setData({ entries: { blobs: [{ name: 'README.md' }] } });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find(FilePreview).exists()).toBe(true);
     });
+  });
 
   describe('normalizeData', () => {
     it('normalizes edge nodes', () => {