enforce consistent sort order of named slots in shallowMount output

vuejs · Sep 13, 2019 · ce76b17 · ce76b17
1 parent 9b819ac
commit ce76b17
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/create-instance/create-component-stubs.js b/packages/create-instance/create-component-stubs.js
@@ -111,7 +111,17 @@ export function createStubFromComponent(
 
       const slots = context ? context.slots() : this._renderProxy.$slots
 
-      const children = Object.entries(slots).map(([slotName, slotChildren]) =>
+      // 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)

diff --git a/test/specs/shallow-mount.spec.js b/test/specs/shallow-mount.spec.js
@@ -92,10 +92,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     expect(wrapper.html()).to.equal(
       '<child-stub>\n' +
         '  default slot content\n' +
-        '  <template-stub slot="header">Hello</template-stub>\n' +
         '  <template-stub slot="footer">\n' +
         '    <child-stub></child-stub>\n' +
         '  </template-stub>\n' +
+        '  <template-stub slot="header">Hello</template-stub>\n' +
         '</child-stub>'
     )
   })
@@ -121,10 +121,10 @@ describeRunIf(process.env.TEST_ENV !== 'node', 'shallowMount', () => {
     expect(wrapper.html()).to.equal(
       '<child-stub>\n' +
         '  default slot content\n' +
-        '  <template-stub slot="header">Hello</template-stub>\n' +
         '  <template-stub slot="footer">\n' +
         '    <child-stub></child-stub>\n' +
         '  </template-stub>\n' +
+        '  <template-stub slot="header">Hello</template-stub>\n' +
         '</child-stub>'
     )
   })