@vue/test-utils 1.0.0

Prior to the 1.0.0 release, @vue/test-utils made a few breaking changes:

* The "sync mode" was removed in vuejs/vue-test-utils#1137,
meaning that we have to explicitly call nextTick() before checking if something has
changed in the DOM
* transition is no longer automatically stubbed, we have to create our own transitionStub.

Author: sandbergja

package.json

@@ -146,7 +146,7 @@
     "@babel/preset-env": "7.1.6",
     "@babel/register": "7.0.0",
     "@vue/runtime-dom": "^3.2.47",
-    "@vue/test-utils": "1.0.0-beta.26",
+    "@vue/test-utils": "1.0.0",
     "autoprefixer": "^9.3.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",

test/unit/specs/components/alert.spec.js

@@ -4,6 +4,12 @@ import Alert from "@/elements/Alert.vue"
 // create an extended `Vue` constructor
 const localVue = createLocalVue()
 
+const transitionStub = () => ({
+  render: function(h) {
+    return this.$options._renderChildren
+  },
+})
+
 describe("Alert.vue", () => {
   let wrapper
 
@@ -13,6 +19,9 @@ describe("Alert.vue", () => {
       slots: {
         default: "Here's some info for you.",
       },
+      stubs: {
+        transition: transitionStub(),
+      },
       // if props are set here, buttons aren't rendered
       // props: {
       //   dismissible: true,
@@ -25,17 +34,20 @@ describe("Alert.vue", () => {
     expect(el.text()).toBe("Here's some info for you.")
   })
 
-  it("should have a button when dismissible", () => {
+  it("should have a button when dismissible", async () => {
     wrapper.setProps({ dismissible: true })
+    await localVue.nextTick()
     const button = wrapper.find("button")
     expect(wrapper.vm.dismissible).toBe(true)
     expect(button.is("button")).toBe(true)
   })
 
-  it("should be dismissible on click", () => {
+  it("should be dismissible on click", async () => {
     wrapper.setProps({ dismissible: true })
+    await localVue.nextTick()
     const button = wrapper.find("button")
     button.trigger("click")
+    await localVue.nextTick()
     expect(wrapper.isEmpty()).toBe(true)
   })
 
@@ -54,8 +66,9 @@ describe("Alert.vue", () => {
     expect(wrapper.vm.show).toBe(false)
   })
 
-  it("should hide after 2 seconds when autoclear is true", () => {
+  it("should hide after 2 seconds when autoclear is true", async () => {
     wrapper.setProps({ autoclear: true })
+    await localVue.nextTick()
     const el = wrapper.find(".lux-alert")
     expect(wrapper.vm.show).toBe(true)
     // wait 3 seconds and see if it's hidden
@@ -64,7 +77,7 @@ describe("Alert.vue", () => {
     }, 3000)
   })
 
-  it("has the expected html structure", () => {
+  it("has the expected html structure", async () => {
     expect(wrapper.element).toMatchSnapshot()
   })
 })

test/unit/specs/components/banner.spec.js

@@ -22,17 +22,20 @@ describe("Banner.vue", () => {
     expect(el.text()).toBe("Here's some info for you.")
   })
 
-  it("should have a button when dismissible", () => {
+  it("should have a button when dismissible", async () => {
     wrapper.setProps({ dismissible: true })
+    await localVue.nextTick()
     const button = wrapper.find("button")
     expect(wrapper.vm.dismissible).toBe(true)
     expect(button.is("button")).toBe(true)
   })
 
-  it("should be dismissible on click", () => {
+  it("should be dismissible on click", async () => {
     wrapper.setProps({ dismissible: true })
+    await localVue.nextTick()
     const button = wrapper.find("button")
     button.trigger("click")
+    await localVue.nextTick()
     expect(wrapper.isEmpty()).toBe(true)
   })
 

test/unit/specs/components/datatable.spec.js

@@ -85,8 +85,9 @@ describe("DataTable.vue", () => {
     expect(wrapper.vm.isRight("right")).toBe(true)
   })
 
-  it("should show tfoot if summaryLabel is present", () => {
+  it("should show tfoot if summaryLabel is present", async () => {
     wrapper.setProps({ summaryLabel: "Average" })
+    await localVue.nextTick()
     const th = wrapper.find("tfoot th")
     expect(th.text()).toBe("Average")
   })

test/unit/specs/components/gallery.spec.js

@@ -60,8 +60,9 @@ describe("Gallery.vue", () => {
   //   expect(wrapper.vm.items[0].id).toBe(3)
   // })
 
-  it("sizes the card correctly", () => {
+  it("sizes the card correctly", async () => {
     wrapper.setProps({ cardPixelWidth: 200 })
+    await localVue.nextTick()
     const card = wrapper.find(".lux-galleryCard")
     expect(card.attributes().cardpixelwidth).toBe("200")
   })

test/unit/specs/components/gridItem.spec.js

@@ -16,14 +16,16 @@ describe("GridItem.vue", () => {
     })
   })
 
-  it("should have the appropriate class to define the columns", () => {
+  it("should have the appropriate class to define the columns", async () => {
     wrapper.setProps({ columns: "lg-9 sm-6" })
+    await localVue.nextTick()
     const gridItem = wrapper.find(".lux-col")
     expect(gridItem.is(".lg-9.sm-6")).toBe(true)
   })
 
-  it("should have the appropriate class to define the vertical alignment", () => {
+  it("should have the appropriate class to define the vertical alignment", async () => {
     wrapper.setProps({ vertical: "start" })
+    await localVue.nextTick()
     const gridItem = wrapper.find(".lux-col")
     expect(gridItem.is(".start")).toBe(true)
   })

test/unit/specs/components/inputAutocomplete.spec.js

@@ -61,9 +61,10 @@ describe("InputAutocomplete.vue", () => {
     expect(wrapper.vm.inputValue).toBe("Foo")
   })
 
-  it("should have a label if passed in", () => {
+  it("should have a label if passed in", async () => {
     expect(wrapper.find("label").exists()).toBe(false)
     wrapper.setProps({ label: "Fill in the blank:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").exists()).toBe(true)
     expect(wrapper.find("label").text()).toBe("Fill in the blank:")
   })

test/unit/specs/components/inputCheckbox.spec.js

@@ -54,23 +54,26 @@ describe("InputCheckbox.vue", () => {
     expect(label.attributes().for).toBe("checkbox-opt2")
   })
 
-  it("should stack if vertical is true", () => {
+  it("should stack if vertical is true", async () => {
     const checkbox = wrapper.findAll(".lux-checkbox").at(0)
     expect(checkbox.classes()).toContain("lux-inline")
     wrapper.setProps({ vertical: true })
+    await localVue.nextTick()
     expect(checkbox.classes()).not.toContain("lux-inline")
   })
 
-  it("should display an errormessage with the proper role when passed in as a prop", () => {
+  it("should display an errormessage with the proper role when passed in as a prop", async () => {
     expect(wrapper.find(".lux-error").exists()).toBe(false)
     wrapper.setProps({ errormessage: "Something went wrong." })
+    await localVue.nextTick()
     expect(wrapper.find(".lux-error").exists()).toBe(true)
     expect(wrapper.find(".lux-error").attributes().role).toBe("alert")
   })
 
-  it("should display a legend if groupLabel is passed in as a prop", () => {
+  it("should display a legend if groupLabel is passed in as a prop", async () => {
     expect(wrapper.find("legend").exists()).toBe(false)
     wrapper.setProps({ groupLabel: "Multiple choice:" })
+    await localVue.nextTick()
     expect(wrapper.find("legend").exists()).toBe(true)
   })
 

test/unit/specs/components/inputDataList.spec.js

@@ -41,16 +41,18 @@ describe("InputText.vue", () => {
     expect(Object.prototype.hasOwnProperty.call(emitted, "inputblur")).toBe(true)
   })
 
-  it("should have a label if passed in", () => {
+  it("should have a label if passed in", async () => {
     expect(wrapper.find("label").exists()).toBe(false)
     wrapper.setProps({ label: "Fill in the blank:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").exists()).toBe(true)
     expect(wrapper.find("label").text()).toBe("Fill in the blank:")
   })
 
-  it("should display an errormessage with the proper role when passed in as a prop", () => {
+  it("should display an errormessage with the proper role when passed in as a prop", async () => {
     expect(wrapper.find(".lux-error").exists()).toBe(false)
     wrapper.setProps({ errormessage: "Something went wrong." })
+    await localVue.nextTick()
     expect(wrapper.find(".lux-error").exists()).toBe(true)
     expect(wrapper.find(".lux-error").attributes().role).toBe("alert")
   })

test/unit/specs/components/inputRadio.spec.js

@@ -55,23 +55,26 @@ describe("InputRadio.vue", () => {
     expect(label.attributes().for).toBe("radio-opt2")
   })
 
-  it("should stack if vertical is true", () => {
+  it("should stack if vertical is true", async () => {
     const radio = wrapper.findAll(".lux-radio").at(0)
     expect(radio.classes()).toContain("lux-inline")
     wrapper.setProps({ vertical: true })
+    await localVue.nextTick()
     expect(radio.classes()).not.toContain("lux-inline")
   })
 
-  it("should display an errormessage with the proper role when passed in as a prop", () => {
+  it("should display an errormessage with the proper role when passed in as a prop", async () => {
     expect(wrapper.find(".lux-error").exists()).toBe(false)
     wrapper.setProps({ errormessage: "Something went wrong." })
+    await localVue.nextTick()
     expect(wrapper.find(".lux-error").exists()).toBe(true)
     expect(wrapper.find(".lux-error").attributes().role).toBe("alert")
   })
 
-  it("should display a legend if groupLabel is passed in as a prop", () => {
+  it("should display a legend if groupLabel is passed in as a prop", async () => {
     expect(wrapper.find("legend").exists()).toBe(false)
     wrapper.setProps({ groupLabel: "Multiple choice:" })
+    await localVue.nextTick()
     expect(wrapper.find("legend").exists()).toBe(true)
   })
 

test/unit/specs/components/inputSelect.spec.js

@@ -46,16 +46,18 @@ describe("InputSelect.vue", () => {
     expect(Object.prototype.hasOwnProperty.call(emitted, "inputblur")).toBe(true)
   })
 
-  it("should have a label if passed in", () => {
+  it("should have a label if passed in", async () => {
     expect(wrapper.find("label").exists()).toBe(false)
     wrapper.setProps({ label: "Multiple choice:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").exists()).toBe(true)
     expect(wrapper.find("label").text()).toBe("Multiple choice:")
   })
 
-  it("should display an errormessage with the proper role when passed in as a prop", () => {
+  it("should display an errormessage with the proper role when passed in as a prop", async () => {
     expect(wrapper.find(".lux-error").exists()).toBe(false)
     wrapper.setProps({ errormessage: "Something went wrong." })
+    await localVue.nextTick()
     expect(wrapper.find(".lux-error").exists()).toBe(true)
     expect(wrapper.find(".lux-error").attributes().role).toBe("alert")
   })

test/unit/specs/components/inputText.spec.js

@@ -41,16 +41,18 @@ describe("InputText.vue", () => {
     expect(Object.prototype.hasOwnProperty.call(emitted, "inputblur")).toBe(true)
   })
 
-  it("should have a label if passed in", () => {
+  it("should have a label if passed in", async () => {
     expect(wrapper.find("label").exists()).toBe(false)
     wrapper.setProps({ label: "Fill in the blank:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").exists()).toBe(true)
     expect(wrapper.find("label").text()).toBe("Fill in the blank:")
   })
 
-  it("should display an errormessage with the proper role when passed in as a prop", () => {
+  it("should display an errormessage with the proper role when passed in as a prop", async () => {
     expect(wrapper.find(".lux-error").exists()).toBe(false)
     wrapper.setProps({ errormessage: "Something went wrong." })
+    await localVue.nextTick()
     expect(wrapper.find(".lux-error").exists()).toBe(true)
     expect(wrapper.find(".lux-error").attributes().role).toBe("alert")
   })

test/unit/specs/components/loader.spec.js

@@ -13,10 +13,11 @@ describe("Loader.vue", () => {
     })
   })
 
-  it("should be full screen when fullscreen prop is true", () => {
+  it("should be full screen when fullscreen prop is true", async () => {
     const overlay = wrapper.find(".lux-overlay")
     expect(overlay.classes()).not.toContain("lux-fullscreen")
     wrapper.setProps({ fullscreen: true })
+    await localVue.nextTick()
     const fs_overlay = wrapper.find(".lux-overlay")
     expect(fs_overlay.classes()).toContain("lux-fullscreen")
   })

test/unit/specs/components/luxDatePicker.spec.js

@@ -4,13 +4,19 @@ import LuxDatePicker from "@/elements/LuxDatePicker.vue"
 // create an extended `Vue` constructor
 const localVue = createLocalVue()
 
+const transitionStub = () => ({
+  render: function(h) {
+    return this.$options._renderChildren
+  },
+})
+
 describe("LuxDatePicker.vue", () => {
   let wrapper
 
   beforeEach(() => {
     wrapper = mount(LuxDatePicker, {
       localVue,
-      stubs: ["wrapper", "input-text"],
+      stubs: { wrapper: true, "input-text": true, transition: transitionStub() },
       propsData: {
         id: "startDate",
         label: "Start Date",

test/unit/specs/components/luxSelect2.spec.js

@@ -23,15 +23,17 @@ describe("LuxSelect2.vue", () => {
     })
   })
 
-  it("should accept an optional label", () => {
+  it("should accept an optional label", async () => {
     expect(wrapper.find("label").exists()).toBe(false)
     wrapper.setProps({ inputLabel: "Multiple choice:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").exists()).toBe(true)
     expect(wrapper.find("label").text()).toBe("Multiple choice:")
   })
 
-  it("should connect the label to the field using the id", () => {
+  it("should connect the label to the field using the id", async () => {
     wrapper.setProps({ inputLabel: "Multiple choice:" })
+    await localVue.nextTick()
     expect(wrapper.find("label").attributes("for")).toBe("test_id")
     expect(wrapper.find("input").attributes("id")).toBe("test_id")
   })
@@ -55,11 +57,12 @@ describe("LuxSelect2.vue", () => {
     expect(selected_hash.text().includes('code": "js"')).toBe(true)
   })
 
-  it("should have an optional placeholder with a default", () => {
+  it("should have an optional placeholder with a default", async () => {
     var placeholder = wrapper.find("input").attributes("placeholder")
 
     expect(placeholder).toBe("Search or add a tag")
     wrapper.setProps({ placeholder: "Search or add an accessibility need" })
+    await localVue.nextTick()
     var placeholder = wrapper.find("input").attributes("placeholder")
     expect(placeholder).toBe("Search or add an accessibility need")
   })

test/unit/specs/components/menuBar.spec.js

@@ -25,10 +25,11 @@ describe("MenuBar.vue", () => {
     })
   })
 
-  it("should be a nav element if the type prop value is 'links'", () => {
+  it("should be a nav element if the type prop value is 'links'", async () => {
     expect(wrapper.find("nav").exists()).toBe(true)
     expect(wrapper.find("div").exists()).toBe(false)
     wrapper.setProps({ type: "buttons" })
+    await localVue.nextTick()
     expect(wrapper.find("nav").exists()).toBe(false)
     expect(wrapper.find("div").exists()).toBe(true)
   })
@@ -40,8 +41,9 @@ describe("MenuBar.vue", () => {
     expect(Object.prototype.hasOwnProperty.call(emitted1, "menu-item-clicked")).toBe(true)
   })
 
-  it("should emit the correct event when menu-item is clicked", () => {
+  it("should emit the correct event when menu-item is clicked", async () => {
     wrapper.setProps({ type: "buttons" })
+    await localVue.nextTick()
     const menuItem = wrapper.find(".lux-menu-item")
     menuItem.trigger("click")
     const emitted2 = wrapper.emitted()

test/unit/specs/components/tag.spec.js

@@ -20,10 +20,11 @@ describe("Tag.vue", () => {
     })
   })
 
-  it("should render the correct type", () => {
+  it("should render the correct type", async () => {
     const tag = wrapper.find(".lux-tag.tag")
     expect(tag.is("ul")).toBe(true)
     wrapper.setProps({ type: "filter" })
+    await localVue.nextTick()
     const filter = wrapper.find(".lux-tag.filter")
     expect(filter.is("ul")).toBe(true)
   })