enforce consistent sort order of named slots in shallowMount output

Author: Chris Waddell

packages/create-instance/create-component-stubs.js

@@ -110,37 +110,48 @@ export function createStubFromComponent(
   // ignoreElements does not exist in Vue 2.0.x
   if (Vue.config.ignoredElements) {
     Vue.config.ignoredElements.push(tagName)
+    if (Vue.config.ignoredElements.indexOf('template-stub') === -1) {
+      Vue.config.ignoredElements.push('template-stub')
+    }
   }
 
   return {
     ...getCoreProperties(componentOptions),
     $_vueTestUtils_original: originalComponent,
     $_doNotStubChildren: true,
     render(h, context) {
-      return h(
-        tagName,
-        {
-          ref: componentOptions.functional ? context.data.ref : undefined,
-          attrs: componentOptions.functional
-            ? {
-                ...context.props,
-                ...context.data.attrs,
-                class: createClassString(
-                  context.data.staticClass,
-                  context.data.class
-                )
-              }
-            : {
-                ...this.$props
-              }
-        },
-        context
-          ? context.children
-          : this.$options._renderChildren ||
-              getScopedSlotRenderFunctions(this).map(x =>
-                this.$options.parent._vnode.data.scopedSlots[x]()
-              )
+      const attrs = componentOptions.functional
+        ? {
+            ...context.props,
+            ...context.data.attrs,
+            class: createClassString(
+              context.data.staticClass,
+              context.data.class
+            )
+          }
+        : {
+            ...this.$props
+          }
+
+      const slots = context ? context.slots() : this._renderProxy.$slots
+
+      // ensure consistent ordering of slots (default first, then alphabetical)
+      const sortedSlotEntries = Object.entries(slots)
+      sortedSlotEntries.sort(([slotNameA], [slotNameB]) =>
+        slotNameA === 'default'
+          ? -1
+          : slotNameB === 'default'
+          ? 1
+          : slotNameA.localeCompare(slotNameB)
+      )
+
+      const children = sortedSlotEntries.map(([slotName, slotChildren]) =>
+        slotName === 'default'
+          ? slotChildren
+          : h('template-stub', { attrs: { slot: slotName } }, slotChildren)
       )
+
+      return h(tagName, { attrs }, children)
     }
   }
 }

test/specs/shallow-mount.spec.js

@@ -1,6 +1,6 @@
 import { compileToFunctions } from 'vue-template-compiler'
 import Vue from 'vue'
-import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
+import { mount, shallowMount, createLocalVue } from '~vue/test-utils'
 import Component from '~resources/components/component.vue'
 import ComponentWithChild from '~resources/components/component-with-child.vue'
 import ComponentWithNestedChildren from '~resources/components/component-with-nested-children.vue'
@@ -82,8 +82,9 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     const TestComponent = {
       template: `
         <child>
-          <p slot="header">Hello</p>
-          <p slot="footer">World</p>
+          default slot content
+          <template slot="header">Hello</template>
+          <template slot="footer"><child /></template>
         </child>
       `
     }
@@ -92,8 +93,11 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     })
     expect(wrapper.html()).to.equal(
       '<child-stub>\n' +
-        '  <p>Hello</p>\n' +
-        '  <p>World</p>\n' +
+        '  default slot content\n' +
+        '  <template-stub slot="footer">\n' +
+        '    <child-stub></child-stub>\n' +
+        '  </template-stub>\n' +
+        '  <template-stub slot="header">Hello</template-stub>\n' +
         '</child-stub>'
     )
   })