Vue-test-utils: Slots are not rendered in snapshot when they are in v-expansion-panel of Vuetify

[trollepierre]

Version

1.0.0-beta.22

Reproduction link

https://codesandbox.io/s/43k3520wmw

Steps to reproduce

Slots are not rendered in snapshot when they are in v-expansion-panel of Vuetify

<template>
  <div id="my-component">
    <v-expansion-panel>
      <v-expansion-panel-content>
        Outside slot
        <div slot="header">Pierre</div>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </div>
</template>

What is expected?

<div
  id="my-component"
>
  <v-expansion-panel-stub>
    <v-expansion-panel-content-stub
      expandicon="$vuetify.icons.expand"
    >

        Outside slot
        <div slot="header">Header</div>
    </v-expansion-panel-content-stub>
  </v-expansion-panel-stub>
</div>

What is actually happening?

<div
  id="my-component"
>
  <v-expansion-panel-stub>
    <v-expansion-panel-content-stub
      expandicon="$vuetify.icons.expand"
    >

      Outside slot

    </v-expansion-panel-content-stub>
  </v-expansion-panel-stub>
</div>

[eddyerburgh]

We currently only render default slots for stubbed components

The change you're requesting would mean that we render every named slot component. I'll investigate.

[ferm10n]

I was interested in this myself, and here was my solution:

Modifying https://github.com/vuejs/vue-test-utils/blob/dev/packages/shared/stub-components.js#L96

export function createBlankStub (
  originalComponent: Component,
  name: string
): Component {
  const componentOptions = typeof originalComponent === 'function'
    ? originalComponent.extendOptions
    : originalComponent
  const tagName = `${name}-stub`

  // ignoreElements does not exist in Vue 2.0.x
  if (Vue.config.ignoredElements) {
    Vue.config.ignoredElements.push(tagName)
  }

  return {
    ...getCoreProperties(componentOptions),
    render (h, context) {
      let innerContent = null
      if (context) {
        innerContent = context.children
      } else {
        innerContent = Object.keys(this.$slots).map(slotName => {
          const slot = this.$slots[slotName]
          if (slotName !== 'default') {
            return slot
          } else {
            const element = h('div', { class: `${slotName}-slot` }, slot)
            return element
          }
        })
      }
      return h(
        tagName,
        {
          attrs: componentOptions.functional ? {
            ...context.props,
            ...context.data.attrs,
            class: createClassString(
              context.data.staticClass,
              context.data.class
            )
          } : {
            ...this.$props
          }
        },
        innerContent
      )
    }
  }
}

Thoughts??

[eddyerburgh]

@ferm10n yes that looks good 👍

Do you want to make a PR?

[tbsvttr]

This issue causes huge problems for me, because most of my component tests are broken or useless because of this. I have Vuetify components nested into each other and I also want to test if the correct content is rendered is into them.