Properly await setProps to update component

setProps() in vue-test-utils is "partially async" and in 1.x will
become more async than previous. To be safe and to keep our tests
green after migration we need to properly await things

spec/frontend/frequent_items/components/frequent_items_list_spec.js

@@ -27,7 +27,7 @@ describe('FrequentItemsListComponent', () => {
 
   describe('computed', () => {
     describe('isListEmpty', () => {
-      it('should return `true` or `false` representing whether if `items` is empty or not with projects', () => {
+      it('should return `true` or `false` representing whether if `items` is empty or not with projects', async () => {
         createComponent({
           items: [],
         });
@@ -37,13 +37,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           items: mockFrequentProjects,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isListEmpty).toBe(false);
       });
     });
 
     describe('fetched item messages', () => {
-      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `localStorageFailed` prop with projects', async () => {
         createComponent({
           isFetchFailed: true,
         });
@@ -55,13 +56,14 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Projects you visit often will appear here');
       });
     });
 
     describe('searched item messages', () => {
-      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', () => {
+      it('should return appropriate empty list message based on value of `searchFailed` prop with projects', async () => {
         createComponent({
           hasSearchQuery: true,
           isFetchFailed: true,
@@ -72,6 +74,7 @@ describe('FrequentItemsListComponent', () => {
         wrapper.setProps({
           isFetchFailed: false,
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.listEmptyMessage).toBe('Sorry, no projects matched your search');
       });

spec/frontend/ref/components/ref_selector_spec.js

@@ -128,14 +128,17 @@ describe('Ref selector component', () => {
 
   const selectFirstBranch = () => {
     findFirstBranchDropdownItem().vm.$emit('click');
+    return wrapper.vm.$nextTick();
   };
 
   const selectFirstTag = () => {
     findFirstTagDropdownItem().vm.$emit('click');
+    return wrapper.vm.$nextTick();
   };
 
   const selectFirstCommit = () => {
     findFirstCommitDropdownItem().vm.$emit('click');
+    return wrapper.vm.$nextTick();
   };
 
   const waitForRequests = ({ andClearMocks } = { andClearMocks: false }) =>
@@ -522,75 +525,73 @@ describe('Ref selector component', () => {
         return waitForRequests();
       });
 
-      it('renders a checkmark by the selected item', () => {
+      it('renders a checkmark by the selected item', async () => {
         expect(findFirstBranchDropdownItem().find(GlIcon).element).toHaveClass(
           'gl-visibility-hidden',
         );
 
-        selectFirstBranch();
+        await selectFirstBranch();
 
-        return localVue.nextTick().then(() => {
-          expect(findFirstBranchDropdownItem().find(GlIcon).element).not.toHaveClass(
-            'gl-visibility-hidden',
-          );
-        });
+        expect(findFirstBranchDropdownItem().find(GlIcon).element).not.toHaveClass(
+          'gl-visibility-hidden',
+        );
       });
 
       describe('when a branch is seleceted', () => {
-        it("displays the branch name in the dropdown's button", () => {
+        it("displays the branch name in the dropdown's button", async () => {
           expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);
 
-          selectFirstBranch();
+          await selectFirstBranch();
 
           return localVue.nextTick().then(() => {
             expect(findButtonContent().text()).toBe(fixtures.branches[0].name);
           });
         });
 
-        it("updates the v-model binding with the branch's name", () => {
+        it("updates the v-model binding with the branch's name", async () => {
           expect(wrapper.vm.value).toEqual('');
 
-          selectFirstBranch();
+          await selectFirstBranch();
 
           expect(wrapper.vm.value).toEqual(fixtures.branches[0].name);
         });
       });
 
       describe('when a tag is seleceted', () => {
-        it("displays the tag name in the dropdown's button", () => {
+        it("displays the tag name in the dropdown's button", async () => {
           expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);
 
-          selectFirstTag();
+          await selectFirstTag();
 
           return localVue.nextTick().then(() => {
             expect(findButtonContent().text()).toBe(fixtures.tags[0].name);
           });
         });
 
-        it("updates the v-model binding with the tag's name", () => {
+        it("updates the v-model binding with the tag's name", async () => {
           expect(wrapper.vm.value).toEqual('');
 
-          selectFirstTag();
+          await selectFirstTag();
 
           expect(wrapper.vm.value).toEqual(fixtures.tags[0].name);
         });
       });
 
       describe('when a commit is selected', () => {
-        it("displays the full SHA in the dropdown's button", () => {
+        it("displays the full SHA in the dropdown's button", async () => {
           expect(findButtonContent().text()).toBe(DEFAULT_I18N.noRefSelected);
 
-          selectFirstCommit();
+          await selectFirstCommit();
 
           return localVue.nextTick().then(() => {
             expect(findButtonContent().text()).toBe(fixtures.commit.id);
           });
         });
 
-        it("updates the v-model binding with the commit's full SHA", () => {
+        it("updates the v-model binding with the commit's full SHA", async () => {
           expect(wrapper.vm.value).toEqual('');
 
-          selectFirstCommit();
+          await selectFirstCommit();
 
           expect(wrapper.vm.value).toEqual(fixtures.commit.id);
         });

spec/frontend/vue_shared/components/issue/issue_milestone_spec.js

@@ -33,28 +33,31 @@ describe('IssueMilestoneComponent', () => {
 
   describe('computed', () => {
     describe('isMilestoneStarted', () => {
-      it('should return `false` when milestoneStart prop is not defined', () => {
+      it('should return `false` when milestoneStart prop is not defined', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isMilestoneStarted).toBe(false);
       });
 
-      it('should return `true` when milestone start date is past current date', () => {
-        wrapper.setProps({
+      it('should return `true` when milestone start date is past current date', async () => {
+        await wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '1990-07-22' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isMilestoneStarted).toBe(true);
       });
     });
 
     describe('isMilestonePastDue', () => {
-      it('should return `false` when milestoneDue prop is not defined', () => {
+      it('should return `false` when milestoneDue prop is not defined', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.isMilestonePastDue).toBe(false);
       });
@@ -73,41 +76,45 @@ describe('IssueMilestoneComponent', () => {
         expect(vm.milestoneDatesAbsolute).toBe('(December 31, 2019)');
       });
 
-      it('returns string containing absolute milestone start date when due date is not present', () => {
+      it('returns string containing absolute milestone start date when due date is not present', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesAbsolute).toBe('(January 1, 2018)');
       });
 
-      it('returns empty string when both milestone start and due dates are not present', () => {
+      it('returns empty string when both milestone start and due dates are not present', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '', due_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesAbsolute).toBe('');
       });
     });
 
     describe('milestoneDatesHuman', () => {
-      it('returns string containing milestone due date when date is yet to be due', () => {
+      it('returns string containing milestone due date when date is yet to be due', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, due_date: `${new Date().getFullYear() + 10}-01-01` },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('years remaining');
       });
 
-      it('returns string containing milestone start date when date has already started and due date is not present', () => {
+      it('returns string containing milestone start date when date has already started and due date is not present', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '1990-07-22', due_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('Started');
       });
 
-      it('returns string containing milestone start date when date is yet to start and due date is not present', () => {
+      it('returns string containing milestone start date when date is yet to start and due date is not present', async () => {
         wrapper.setProps({
           milestone: {
             ...mockMilestone,
@@ -115,14 +122,16 @@ describe('IssueMilestoneComponent', () => {
             due_date: '',
           },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toContain('Starts');
       });
 
-      it('returns empty string when milestone start and due dates are not present', () => {
+      it('returns empty string when milestone start and due dates are not present', async () => {
         wrapper.setProps({
           milestone: { ...mockMilestone, start_date: '', due_date: '' },
         });
+        await wrapper.vm.$nextTick();
 
         expect(wrapper.vm.milestoneDatesHuman).toBe('');
       });

spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js

@@ -33,8 +33,8 @@ describe('BaseComponent', () => {
         expect(vm.hiddenInputName).toBe('issue[label_names][]');
       });
 
-      it('returns correct string when showCreate prop is `false`', () => {
-        wrapper.setProps({ showCreate: false });
+      it('returns correct string when showCreate prop is `false`', async () => {
+        await wrapper.setProps({ showCreate: false });
 
         expect(vm.hiddenInputName).toBe('label_id[]');
       });
@@ -45,8 +45,8 @@ describe('BaseComponent', () => {
         expect(vm.createLabelTitle).toBe('Create project label');
       });
 
-      it('return `Create group label` when `isProject` prop is false', () => {
-        wrapper.setProps({ isProject: false });
+      it('return `Create group label` when `isProject` prop is false', async () => {
+        await wrapper.setProps({ isProject: false });
 
         expect(vm.createLabelTitle).toBe('Create group label');
       });
@@ -57,8 +57,8 @@ describe('BaseComponent', () => {
         expect(vm.manageLabelsTitle).toBe('Manage project labels');
       });
 
-      it('return `Manage group labels` when `isProject` prop is false', () => {
-        wrapper.setProps({ isProject: false });
+      it('return `Manage group labels` when `isProject` prop is false', async () => {
+        await wrapper.setProps({ isProject: false });
 
         expect(vm.manageLabelsTitle).toBe('Manage group labels');
       });