Ensure setData calls are properly handled

After `setData` component is updating in async way
Ensure `nextTick` is called for that

ee/spec/frontend/design_management/components/toolbar/index_spec.js

@@ -70,6 +70,7 @@ describe('Design management toolbar component', () => {
   it('links back to designs list', () => {
     createComponent();
 
+    return wrapper.vm.$nextTick().then(() => {
       const link = wrapper.find('a');
 
       expect(link.props('to')).toEqual({
@@ -79,6 +80,7 @@ describe('Design management toolbar component', () => {
         },
       });
     });
+  });
 
   it('renders delete button on latest designs version with logged in user', () => {
     createComponent();

ee/spec/frontend/design_management/components/toolbar/pagination_spec.js

@@ -29,6 +29,8 @@ describe('Design management pagination component', () => {
       designs: [{ id: '1' }, { id: '2' }],
     });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
+  });
 });

ee/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js

@@ -50,50 +50,68 @@ describe('Design management design version dropdown component', () => {
   it('renders design version dropdown button', () => {
     createComponent();
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
+  });
 
   it('renders design version list', () => {
     createComponent();
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
+  });
 
   describe('selected version name', () => {
     it('has "latest" on most recent version item', () => {
       createComponent();
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(findVersionLink(0).text()).toContain('latest');
       });
     });
+  });
 
   describe('versions list', () => {
     it('displays latest version text by default', () => {
       createComponent();
 
+      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 });
 
+      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) });
+
+      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) });
+
+      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();
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.findAll(GlDropdownItem).length).toEqual(wrapper.vm.allVersions.length);
       });
     });
+  });
 });

ee/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap

 // 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>
-`;

ee/spec/frontend/design_management/pages/design/index_spec.js

@@ -81,8 +81,10 @@ describe('Design management design index page', () => {
   it('sets loading state', () => {
     createComponent(true);
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
     });
+  });
 
   it('renders design index', () => {
     setDesign();
@@ -91,9 +93,11 @@ describe('Design management design index page', () => {
       design,
     });
 
+    return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.element).toMatchSnapshot();
       expect(wrapper.find(GlAlert).exists()).toBe(false);
     });
+  });
 
   describe('when has no discussions', () => {
     beforeEach(() => {

ee/spec/frontend/design_management/pages/index_spec.js

@@ -110,8 +110,10 @@ describe('Design management index page', () => {
     it('renders loading icon', () => {
       createComponent({ loading: true });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
       });
+    });
 
     it('renders error', () => {
       createComponent();
@@ -153,13 +155,15 @@ describe('Design management index page', () => {
       createComponent();
     });
 
-    it('renders empty text', () => {
+    it('renders empty text', () =>
+      wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
-    });
+      }));
 
-    it('does not render a toolbar with buttons', () => {
+    it('does not render a toolbar with buttons', () =>
+      wrapper.vm.$nextTick().then(() => {
         expect(findToolbar().exists()).toBe(false);
-    });
+      }));
   });
 
   describe('uploading designs', () => {

ee/spec/frontend/packages/list/components/packages_list_spec.js

@@ -132,8 +132,10 @@ describe('packages_list', () => {
     it('deleteItemConfirmation emit package:delete', () => {
       wrapper.setData({ itemToBeDeleted: { id: 2 } });
       wrapper.vm.deleteItemConfirmation();
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.emitted('package:delete')).toEqual([[2]]);
       });
+    });
 
     it('deleteItemCanceled resets itemToBeDeleted', () => {
       wrapper.setData({ itemToBeDeleted: 1 });

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

@@ -72,8 +72,10 @@ describe('EpicsSelect', () => {
           query: 'foo',
         });
 
+        return wrapper.vm.$nextTick().then(() => {
           expect(wrapper.classes()).toContain('has-value');
         });
+      });
 
       it('should render input element', () => {
         const inputEl = wrapper.find('input');
@@ -89,11 +91,14 @@ describe('EpicsSelect', () => {
         wrapper.setData({
           query: 'foo',
         });
+
+        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', () => {
         const clearButtonEl = wrapper.find(GlButton);

spec/frontend/clusters/components/knative_domain_editor_spec.js

@@ -25,6 +25,7 @@ describe('KnativeDomainEditor', () => {
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   describe('knative has an assigned IP address', () => {
@@ -101,13 +102,17 @@ 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 });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted('set')[0]).toEqual([newHostname]);
       });
     });
+  });
 
   describe('when updating knative domain name failed', () => {
     beforeEach(() => {

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

@@ -167,9 +167,11 @@ describe('ClusterFormDropdown', () => {
     vm.setProps({ items });
     vm.setData({ searchQuery });
 
+    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', () => {
     const dropdownEl = vm.find('.dropdown').element;

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

@@ -72,8 +72,10 @@ describe('ServiceCredentialsForm', () => {
   it('enables submit button when role ARN is not provided', () => {
     vm.setData({ roleArn: '123' });
 
+    return vm.vm.$nextTick().then(() => {
       expect(findSubmitButton().attributes('disabled')).toBeFalsy();
     });
+  });
 
   it('dispatches createRole action when form is submitted', () => {
     findForm().trigger('submit');
@@ -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', () => {

spec/frontend/issuable_suggestions/components/app_spec.js

@@ -40,15 +40,19 @@ describe('Issuable suggestions app component', () => {
     it('renders component', () => {
       wrapper.setData(data);
 
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.isEmpty()).toBe(false);
       });
+    });
 
     it('does not render with empty search', () => {
       wrapper.setProps({ search: '' });
       wrapper.setData(data);
 
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.isVisible()).toBe(false);
       });
+    });
 
     it('does not render when loading', () => {
       wrapper.setData({
@@ -56,14 +60,18 @@ describe('Issuable suggestions app component', () => {
         loading: 1,
       });
 
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.isVisible()).toBe(false);
       });
+    });
 
     it('does not render with empty issues data', () => {
       wrapper.setData({ issues: [] });
 
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.isVisible()).toBe(false);
       });
+    });
 
     it('renders list of issues', () => {
       wrapper.setData(data);

spec/frontend/mr_popover/mr_popover_spec.js

@@ -41,8 +41,10 @@ describe('MR Popover', () => {
         },
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.element).toMatchSnapshot();
       });
+    });
 
     it('does not show CI Icon if there is no pipeline data', () => {
       wrapper.setData({
@@ -55,7 +57,9 @@ describe('MR Popover', () => {
         },
       });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.contains('ciicon-stub')).toBe(false);
       });
     });
+  });
 });

spec/frontend/registry/list/components/table_registry_spec.js

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

spec/frontend/repository/components/breadcrumbs_spec.js

@@ -49,14 +49,18 @@ describe('Repository breadcrumbs component', () => {
 
     vm.setData({ userPermissions: { forkProject: false, createMergeRequestIn: false } });
 
+    return vm.vm.$nextTick(() => {
       expect(vm.find(GlDropdown).exists()).toBe(false);
     });
+  });
 
   it('renders add to tree dropdown when permissions are true', () => {
     factory('/', { canCollaborate: true });
 
     vm.setData({ userPermissions: { forkProject: true, createMergeRequestIn: true } });
 
+    return vm.vm.$nextTick(() => {
       expect(vm.find(GlDropdown).exists()).toBe(true);
     });
+  });
 });

spec/frontend/repository/components/last_commit_spec.js

@@ -58,8 +58,10 @@ describe('Repository last commit component', () => {
   `('$label when loading icon $loading is true', ({ loading }) => {
     factory(createCommitData(), loading);
 
+    return vm.vm.$nextTick(() => {
       expect(vm.find(GlLoadingIcon).exists()).toBe(loading);
     });
+  });
 
   it('renders commit widget', () => {
     factory();

spec/frontend/repository/components/preview/index_spec.js

@@ -33,8 +33,10 @@ describe('Repository file preview component', () => {
 
     vm.setData({ readme: { html: '<div class="blob">test</div>' } });
 
+    return vm.vm.$nextTick(() => {
       expect(vm.element).toMatchSnapshot();
     });
+  });
 
   it('renders loading icon', () => {
     factory({
@@ -44,6 +46,8 @@ describe('Repository file preview component', () => {
 
     vm.setData({ loading: 1 });
 
+    return vm.vm.$nextTick(() => {
       expect(vm.find(GlLoadingIcon).exists()).toBe(true);
     });
+  });
 });

spec/frontend/repository/components/table/index_spec.js

@@ -53,10 +53,12 @@ describe('Repository table component', () => {
 
     vm.setData({ 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', () => {
     factory({ path: '/', isLoading: true });

spec/frontend/repository/components/table/row_spec.js

@@ -46,8 +46,10 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.element).toMatchSnapshot();
     });
+  });
 
   it.each`
     type        | component         | componentName
@@ -63,8 +65,10 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find(component).exists()).toBe(true);
     });
+  });
 
   it.each`
     type        | pushes
@@ -80,6 +84,7 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       vm.trigger('click');
 
       if (pushes) {
@@ -88,6 +93,7 @@ describe('Repository table row component', () => {
         expect($router.push).not.toHaveBeenCalled();
       }
     });
+  });
 
   it.each`
     type        | pushes
@@ -103,6 +109,7 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       vm.trigger('click');
 
       if (pushes) {
@@ -113,6 +120,7 @@ describe('Repository table row component', () => {
         expect(external).toBeFalsy();
       }
     });
+  });
 
   it('renders commit ID for submodule', () => {
     factory({
@@ -123,8 +131,10 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find('.commit-sha').text()).toContain('1');
     });
+  });
 
   it('renders link with href', () => {
     factory({
@@ -136,8 +146,10 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find('a').attributes('href')).toEqual('https://test.com');
     });
+  });
 
   it('renders LFS badge', () => {
     factory({
@@ -149,8 +161,10 @@ describe('Repository table row component', () => {
       lfsOid: '1',
     });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find(GlBadge).exists()).toBe(true);
     });
+  });
 
   it('renders commit and web links with href for submodule', () => {
     factory({
@@ -163,9 +177,11 @@ describe('Repository table row component', () => {
       currentPath: '/',
     });
 
+    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', () => {
     factory({
@@ -178,6 +194,8 @@ describe('Repository table row component', () => {
 
     vm.setData({ commit: { lockLabel: 'Locked by Root', committedDate: '2019-01-01' } });
 
+    return vm.vm.$nextTick().then(() => {
       expect(vm.find(Icon).exists()).toBe(true);
     });
+  });
 });

spec/frontend/sidebar/confidential_issue_sidebar_spec.js

@@ -78,9 +78,13 @@ describe('Confidential Issue Sidebar Block', () => {
     it('displays the edit form when editable', () => {
       wrapper.setData({ edit: false });
 
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
           wrapper.find({ ref: 'editLink' }).trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
           expect(wrapper.find(EditForm).exists()).toBe(true);
         });
     });
@@ -88,9 +92,13 @@ describe('Confidential Issue Sidebar Block', () => {
     it('displays the edit form when opened from collapsed state', () => {
       wrapper.setData({ edit: false });
 
+      return wrapper.vm
+        .$nextTick()
+        .then(() => {
           wrapper.find({ ref: 'collapseIcon' }).trigger('click');
-
-      return wrapper.vm.$nextTick().then(() => {
+          return wrapper.vm.$nextTick();
+        })
+        .then(() => {
           expect(wrapper.find(EditForm).exists()).toBe(true);
         });
     });

spec/frontend/vue_mr_widget/components/states/mr_widget_commits_header_spec.js

@@ -64,8 +64,10 @@ describe('Commits header component', () => {
       createComponent();
       wrapper.setData({ expanded: false });
 
+      return wrapper.vm.$nextTick().then(() => {
         expect(findIcon().props('name')).toBe('chevron-right');
       });
+    });
 
     describe('when squash is disabled', () => {
       beforeEach(() => {

spec/frontend/vue_shared/directives/track_event_spec.js

@@ -43,7 +43,10 @@ describe('Error Tracking directive', () => {
 
     wrapper.setData({ trackingOptions });
     const { category, action, label, property, value } = trackingOptions;
+
+    return wrapper.vm.$nextTick(() => {
       button.trigger('click');
       expect(Tracking.event).toHaveBeenCalledWith(category, action, { label, property, value });
     });
+  });
 });