Update @vue/test-utils

I upgraded @vue/test-utils to the latest version, `v1.0.0-beta.31`.

We were previously on `v1.0.0-beta25`, here's the changelog:
 - https://github.com/vuejs/vue-test-utils/releases

This upgrade broke a bunch of tests; our tests had to refactored
to run asynchronously, here are some links regarding that:
 - vuejs/vue-test-utils#1137
 - https://vue-test-utils.vuejs.org/guides/#writing-asynchronous-tests-using-nexttick-new

Refs: #2380

Author: shaun-technovation

spec/javascript/admin/content-settings/components/Review.spec.js

@@ -178,20 +178,24 @@ describe('Admin Dashboard - MentorSection component', () => {
       expect(returningChart.find(PieChart).exists()).toBe(true)
     })
 
-    it('hides the mentors count label if the mentors total is not found', () => {
+    it('hides the mentors count label if the mentors total is not found', async () => {
       wrapper.vm.totals = {}
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
-    it('hides the mentors count label if the hideTotal prop is true', () => {
+    it('hides the mentors count label if the hideTotal prop is true', async () => {
       wrapper.setProps({
         hideTotal: true,
       })
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
   })
 
-})
+})

spec/javascript/admin/dashboard/components/MentorsSection.spec.js

@@ -178,20 +178,24 @@ describe('Admin Dashboard - StudentsSection component', () => {
       expect(returningChart.find(PieChart).exists()).toBe(true)
     })
 
-    it('hides the students count label if the students total is not found', () => {
+    it('hides the students count label if the students total is not found', async () => {
       wrapper.vm.totals = {}
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
-    it('hides the students count label if the hideTotal prop is true', () => {
+    it('hides the students count label if the hideTotal prop is true', async () => {
       wrapper.setProps({
         hideTotal: true,
       })
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
   })
 
-})
+})

spec/javascript/admin/dashboard/components/StudentsSection.spec.js

@@ -119,20 +119,24 @@ describe('Admin Dashboard - TopCountriesSection component', () => {
       expect(wrapper.find(BarChart).exists()).toBe(true)
     })
 
-    it('hides the top countries count label if the top countries total is not found', () => {
+    it('hides the top countries count label if the top countries total is not found', async () => {
       wrapper.vm.totals = {}
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
-    it('hides the top countries count label if the hideTotal prop is true', () => {
+    it('hides the top countries count label if the hideTotal prop is true', async () => {
       wrapper.setProps({
         hideTotal: true,
       })
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.find('h3 span').exists()).toBe(false)
     })
 
   })
 
-})
+})

spec/javascript/admin/dashboard/components/TopCountriesSection.spec.js

@@ -1,4 +1,4 @@
-import { TransitionStub, shallowMount } from '@vue/test-utils'
+import { enableAutoDestroy, TransitionStub, shallowMount } from '@vue/test-utils'
 
 import DropDown from 'components/DropDown'
 import Icon from 'components/Icon'
@@ -26,9 +26,6 @@ describe('DropDown Vue component', () => {
           </div>
         `,
       },
-      stubs: {
-        transition: TransitionStub,
-      },
     })
   })
 
@@ -128,7 +125,7 @@ describe('DropDown Vue component', () => {
       expect(wrapper.classes('drop-down')).toBe(true)
     })
 
-    it('contains a link that toggles the drop down open and closed', (done) => {
+    it('contains a link that toggles the drop down open and closed', async () => {
       const toggleCollapseSpy = spyOn(wrapper.vm, 'toggleCollapse')
         .and.callThrough()
       const toggleLink = wrapper.find('a')
@@ -141,42 +138,41 @@ describe('DropDown Vue component', () => {
       expect(toggleCollapseSpy).not.toHaveBeenCalled()
 
       toggleLink.element.click()
+      await wrapper.vm.$nextTick()
 
-      wrapper.vm.$nextTick(() => {
-        expect(dropDownContent.isVisible()).toBe(true)
-        expect(toggleCollapseSpy).toHaveBeenCalledTimes(1)
+      expect(dropDownContent.isVisible()).toBe(true)
+      expect(toggleCollapseSpy).toHaveBeenCalledTimes(1)
 
-        toggleLink.element.click()
+      toggleLink.element.click()
+      await wrapper.vm.$nextTick()
 
-        wrapper.vm.$nextTick(() => {
-          expect(dropDownContent.isVisible()).toBe(false)
-          expect(toggleCollapseSpy).toHaveBeenCalledTimes(2)
-          done()
-        })
-      })
+      expect(dropDownContent.isVisible()).toBe(false)
+      expect(toggleCollapseSpy).toHaveBeenCalledTimes(2)
     })
 
-    it('contains a caret icon which changes based on expanded/collpased state', () => {
+    it('contains a caret icon which changes based on expanded/collpased state', async () => {
       const caretIcon = wrapper.find(Icon)
 
       expect(caretIcon.exists()).toBe(true)
 
       wrapper.setData({ expanded: true })
+      await wrapper.vm.$nextTick()
 
       expect(caretIcon.props('title')).toEqual('Collapse')
       expect(caretIcon.props('name')).toEqual('caret-up')
       expect(caretIcon.props('color')).toEqual('000000')
       expect(caretIcon.props('size')).toEqual(12)
 
       wrapper.setData({ expanded: false })
+      await wrapper.vm.$nextTick()
 
       expect(caretIcon.props('title')).toEqual('Expand')
       expect(caretIcon.props('name')).toEqual('caret-down')
       expect(caretIcon.props('color')).toEqual('000000')
       expect(caretIcon.props('size')).toEqual(12)
     })
 
-    it('uses the v-click-outside directive to collapse the drop down', (done) => {
+    it('uses the v-click-outside directive to collapse the drop down', async () => {
       const dropDownContent = wrapper.find('.drop-down__content')
 
       const divNode = document.createElement('div')
@@ -185,19 +181,17 @@ describe('DropDown Vue component', () => {
       document.body.appendChild(divNode)
 
       wrapper.setData({ expanded: true })
+      await wrapper.vm.$nextTick()
 
       expect(dropDownContent.exists()).toBe(true)
       expect(dropDownContent.isVisible()).toBe(true)
 
       divNode.click()
+      await wrapper.vm.$nextTick()
 
-      wrapper.vm.$nextTick(() => {
-        expect(dropDownContent.isVisible()).toBe(false)
-
-        divNode.remove()
+      expect(dropDownContent.isVisible()).toBe(false)
 
-        done()
-      })
+      divNode.remove()
     })
   })
-})
+})

spec/javascript/components/DropDown.spec.js

@@ -44,21 +44,25 @@ describe('IntegerInput Vue component', () => {
     });
   });
 
-  it('sets numericValue based on the value prop passed in', () => {
+  it('sets numericValue based on the value prop passed in', async () => {
     const valueProps = [ 33, 99, 2808 ];
 
-    valueProps.forEach((value) => {
+    valueProps.forEach(async (value) => {
       wrapper.setProps({ value });
 
+      await wrapper.vm.$nextTick()
+
       expect(wrapper.vm.numericValue).toEqual(value);
     });
   });
 
-  it('sets the input name according to the input-name prop', () => {
+  it('sets the input name according to the input-name prop', async () => {
     const inputName = 'this-is-a-test-input';
 
     wrapper.setProps({ inputName });
 
+    await wrapper.vm.$nextTick()
+
     expect(wrapper.find('input').attributes().name).toEqual(inputName);
   })
 
@@ -141,7 +145,7 @@ describe('IntegerInput Vue component', () => {
         expect(wrapper.vm.numericValue).toEqual(expectedValue);
       });
 
-      it('does not change numericValue if value passed is not a number', () => {
+      it('does not change numericValue if value passed is not a number', async () => {
         const minimum = 0;
         const maximum = 99;
         const expectedValue = 34;
@@ -152,6 +156,8 @@ describe('IntegerInput Vue component', () => {
           value: expectedValue,
         });
 
+        await wrapper.vm.$nextTick()
+
         wrapper.vm.recalculateValue('test');
 
         expect(wrapper.vm.numericValue).toEqual(expectedValue);
@@ -160,4 +166,4 @@ describe('IntegerInput Vue component', () => {
 
   });
 
-});
+});

spec/javascript/components/IntegerInput.spec.js

@@ -59,19 +59,16 @@ describe('Question comments section', () => {
     })
   })
 
-  test('saves comments after changes', (done) => {
+  test('saves comments after changes', async() => {
     const storeCommitSpy = jest.spyOn(wrapper.vm.$store, 'commit')
 
     wrapper.vm.comment.text = 'hello'
+    await wrapper.vm.$nextTick()
 
-    wrapper.vm.$nextTick(() => {
-      wrapper.vm.handleCommentChange()
+    wrapper.vm.handleCommentChange()
+    await wrapper.vm.$nextTick()
 
-      setImmediate(() => {
-        expect(storeCommitSpy).toHaveBeenLastCalledWith('saveComment', 'ideation')
-        done()
-      })
-    })
+    expect(storeCommitSpy).toHaveBeenLastCalledWith('saveComment', 'ideation')
   })
 
   test('debouncedCommentWatcher calls handleCommentChange', () => {
@@ -98,21 +95,16 @@ describe('Question comments section', () => {
     expect(handleCommentChangeSpy).toHaveBeenCalled()
   })
 
-  test('it resets the word count when the text is deleted', (done) => {
-    wrapper.vm.$nextTick(() => {
-      wrapper.vm.comment.text = 'hello beautiful world'
+  test('it resets the word count when the text is deleted', async() => {
+    wrapper.vm.comment.text = 'hello beautiful world'
+    await wrapper.vm.$nextTick()
 
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.comment.word_count).toEqual(3)
+    expect(wrapper.vm.comment.word_count).toEqual(3)
 
-        wrapper.vm.comment.text = ''
+    wrapper.vm.comment.text = ''
+    await wrapper.vm.$nextTick()
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.vm.comment.word_count).toEqual(0)
-          done()
-        })
-      })
-    })
+    expect(wrapper.vm.comment.word_count).toEqual(0)
   })
 
   test('textarea should update comment text in store on change', (done) => {

spec/javascript/judge/scores/QuestionSection.spec.js

@@ -105,9 +105,11 @@ describe('location/components/LocationForm', () => {
       expect(suggestions.length).toEqual(3)
     })
 
-    it('is not visible if there are no suggestions present', () => {
+    it('is not visible if there are no suggestions present', async () => {
       wrapper.setData({ suggestions: [] })
 
+      await wrapper.vm.$nextTick()
+
       const suggestionsTable = wrapper.find({ ref: 'suggestionsTable' })
 
       expect(suggestionsTable.exists()).toBe(false)
@@ -209,9 +211,11 @@ describe('location/components/LocationForm', () => {
       expect(savedLocationText).toContain('United States')
     })
 
-    it('is not visible if there is no saved location', () => {
+    it('is not visible if there is no saved location', async () => {
       wrapper.setData({ savedLocation: null })
 
+      await wrapper.vm.$nextTick()
+
       const savedLocationTable = wrapper.find({ ref: 'savedLocationTable' })
 
       expect(savedLocationTable.exists()).toBe(false)
@@ -372,4 +376,4 @@ describe('location/components/LocationForm', () => {
       })
     })
   })
-})
+})

spec/javascript/location/LocationForm.spec.js

@@ -43,18 +43,20 @@ describe("mentor/DashboardHeader.vue", () => {
     expect(dropDown.vm.label).toEqual("More Information")
   })
 
-  it("displays the currentAccount's name", () => {
+  it("displays the currentAccount's name", async () => {
     defaultWrapper.vm.$store.commit('authenticated/htmlDataset', {
       currentAccount: '{"data":{"attributes":{"name":"Saul Goodman"}}}'
     })
 
+    await defaultWrapper.vm.$nextTick()
+
     expect(defaultWrapper.find(
       '.dashboard-notices .grid__col-sm-6:nth-child(2)'
     ).text()).toContain("Saul Goodman")
   })
 
   describe("when the RA has not provided an intro", () => {
-    it("displays the default left header", () => {
+    it("displays the default left header", async () => {
       defaultWrapper.setProps({
         defaultTitle: "Mentor Dashboard",
         resourceLinks: [
@@ -66,6 +68,8 @@ describe("mentor/DashboardHeader.vue", () => {
         ]
       })
 
+      await defaultWrapper.vm.$nextTick()
+
       expect(defaultWrapper.find(
         '.dashboard-notices .grid__col-sm-6:first-child'
       ).text()).toContain("Mentor Dashboard")
@@ -91,4 +95,4 @@ describe("mentor/DashboardHeader.vue", () => {
       expect(text).toContain("Technovation[MN]")
     })
   })
-})
+})

spec/javascript/mentor/DashboardHeader.spec.js

@@ -58,9 +58,11 @@ describe("Registration::Components::DataUseTerms.vue", () => {
     });
 
     describe('submitButtonText', () => {
-      it('sets the text on the "Next" button accoring to the prop value', () => {
+      it('sets the text on the "Next" button according to the prop value', async () => {
         defaultWrapper.setProps({ submitButtonText: 'Submit' });
 
+        await defaultWrapper.vm.$nextTick()
+
         const submitButtonText = defaultWrapper
           .find({ ref: 'dataUseTermsSubmitButton' }).text();
 
@@ -75,4 +77,4 @@ describe("Registration::Components::DataUseTerms.vue", () => {
       });
     });
   });
-});
+});