Merge branch 'xanf/fix-async-props' into 'master'

Properly await setProps to update component

See merge request gitlab-org/gitlab!50099

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',
         );
       });
-      });
 
       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');
       });