vue/test/unit/features/component/component-scoped-slot.spec.ts

import Vue from 'vue'

describe('Component scoped slot', () => {
  it('default slot', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot-scope="props">
            <span>{{ props.msg }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot :msg="msg"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
    vm.$refs.test.msg = 'world'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>world</span>')
    }).then(done)
  })

  it('default slot (plain element)', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <span slot-scope="props">{{ props.msg }}</span>
        </test>
      `,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot :msg="msg"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
    vm.$refs.test.msg = 'world'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>world</span>')
    }).then(done)
  })

  it('with v-bind', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot-scope="props">
            <span>{{ props.msg }} {{ props.msg2 }} {{ props.msg3 }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              msg: 'hello',
              obj: { msg2: 'world', msg3: '.' }
            }
          },
          template: `
            <div>
              <slot :msg="msg" v-bind="obj" msg3="!"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>hello world !</span>')
    vm.$refs.test.msg = 'bye'
    vm.$refs.test.obj.msg2 = 'bye'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>bye bye !</span>')
    }).then(done)
  })

  it('should warn when using v-bind with no object', () => {
    new Vue({
      template: `
        <test ref="test">
          <template scope="props">
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              text: 'some text'
            }
          },
          template: `
            <div>
              <slot v-bind="text"></slot>
            </div>
          `
        }
      }
    }).$mount()
    expect('slot v-bind without argument expects an Object').toHaveBeenWarned()
  })

  it('should not warn when using v-bind with object', () => {
    new Vue({
      template: `
        <test ref="test">
          <template scope="props">
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              foo: {
                text: 'some text'
              }
            }
          },
          template: `
            <div>
              <slot v-bind="foo"></slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(
      'slot v-bind without argument expects an Object'
    ).not.toHaveBeenWarned()
  })

  it('named scoped slot', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot="item" slot-scope="props">
            <span>{{ props.foo }}</span><span>{{ props.bar }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return { foo: 'FOO', bar: 'BAR' }
          },
          template: `
            <div>
              <slot name="item" :foo="foo" :bar="bar"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>FOO</span><span>BAR</span>')
    vm.$refs.test.foo = 'BAZ'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>BAZ</span><span>BAR</span>')
    }).then(done)
  })

  it('named scoped slot (plain element)', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <span slot="item" slot-scope="props">{{ props.foo }} {{ props.bar }}</span>
        </test>
      `,
      components: {
        test: {
          data() {
            return { foo: 'FOO', bar: 'BAR' }
          },
          template: `
            <div>
              <slot name="item" :foo="foo" :bar="bar"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>FOO BAR</span>')
    vm.$refs.test.foo = 'BAZ'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>BAZ BAR</span>')
    }).then(done)
  })

  it('fallback content', () => {
    const vm = new Vue({
      template: `<test></test>`,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot name="item" :text="msg">
                <span>{{ msg }} fallback</span>
              </slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>hello fallback</span>')
  })

  it('slot with v-for', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot="item" slot-scope="props">
            <span>{{ props.text }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              items: ['foo', 'bar', 'baz']
            }
          },
          template: `
            <div>
              <slot v-for="item in items" name="item" :text="item"></slot>
            </div>
          `
        }
      }
    }).$mount()

    function assertOutput() {
      expect(vm.$el.innerHTML).toBe(
        vm.$refs.test.items
          .map(item => {
            return `<span>${item}</span>`
          })
          .join('')
      )
    }

    assertOutput()
    vm.$refs.test.items.reverse()
    waitForUpdate(assertOutput)
      .then(() => {
        vm.$refs.test.items.push('qux')
      })
      .then(assertOutput)
      .then(done)
  })

  it('slot inside v-for', done => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot="item" slot-scope="props">
            <span>{{ props.text }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              items: ['foo', 'bar', 'baz']
            }
          },
          template: `
            <ul>
              <li v-for="item in items">
                <slot name="item" :text="item"></slot>
              </li>
            </ul>
          `
        }
      }
    }).$mount()

    function assertOutput() {
      expect(vm.$el.innerHTML).toBe(
        vm.$refs.test.items
          .map(item => {
            return `<li><span>${item}</span></li>`
          })
          .join('')
      )
    }

    assertOutput()
    vm.$refs.test.items.reverse()
    waitForUpdate(assertOutput)
      .then(() => {
        vm.$refs.test.items.push('qux')
      })
      .then(assertOutput)
      .then(done)
  })

  it('scoped slot without scope alias', () => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <span slot="item">I am static</span>
        </test>
      `,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot name="item" :text="msg"></slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>I am static</span>')
  })

  it('non-scoped slot with scope alias', () => {
    const vm = new Vue({
      template: `
        <test ref="test">
          <template slot="item" slot-scope="props">
            <span>{{ props.text || 'meh' }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot name="item"></slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>meh</span>')
  })

  it('warn key on slot', () => {
    new Vue({
      template: `
        <test ref="test">
          <template slot="item" slot-scope="props">
            <span>{{ props.text }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return {
              items: ['foo', 'bar', 'baz']
            }
          },
          template: `
            <div>
              <slot v-for="item in items" name="item" :text="item" :key="item"></slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(`\`key\` does not work on <slot>`).toHaveBeenWarned()
  })

  it('render function usage (named, via data)', done => {
    const vm = new Vue({
      render(h) {
        return h('test', {
          ref: 'test',
          scopedSlots: {
            item: props => h('span', props.text)
          }
        })
      },
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          render(h) {
            return h(
              'div',
              this.$scopedSlots.item({
                text: this.msg
              })
            )
          }
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
    vm.$refs.test.msg = 'world'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<span>world</span>')
    }).then(done)
  })

  it('render function usage (default, as children)', () => {
    const vm = new Vue({
      render(h) {
        return h('test', [props => h('span', [props.msg])])
      },
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          render(h) {
            return h('div', this.$scopedSlots.default({ msg: this.msg }))
          }
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>hello</span>')
  })

  it('render function usage (default, as root)', () => {
    const vm = new Vue({
      render(h) {
        return h('test', [props => h('span', [props.msg])])
      },
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          render(h) {
            const res = this.$scopedSlots.default({ msg: this.msg })
            // all scoped slots should be normalized into arrays
            expect(Array.isArray(res)).toBe(true)
            return res
          }
        }
      }
    }).$mount()
    expect(vm.$el.outerHTML).toBe('<span>hello</span>')
  })

  // new in 2.6, unifying all slots as functions
  it('non-scoped slots should also be available on $scopedSlots', () => {
    const vm = new Vue({
      template: `<foo>before <div slot="bar" slot-scope="scope">{{ scope.msg }}</div> after</foo>`,
      components: {
        foo: {
          render(h) {
            return h('div', [
              this.$scopedSlots.default(),
              this.$scopedSlots.bar({ msg: 'hi' })
            ])
          }
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe(`before  after<div>hi</div>`)
  })

  // #4779
  it('should support dynamic slot target', done => {
    const Child = {
      template: `
        <div>
          <slot name="a" msg="a" />
          <slot name="b" msg="b" />
        </div>
      `
    }

    const vm = new Vue({
      data: {
        a: 'a',
        b: 'b'
      },
      template: `
        <child>
          <template :slot="a" slot-scope="props">A {{ props.msg }}</template>
          <template :slot="b" slot-scope="props">B {{ props.msg }}</template>
        </child>
      `,
      components: { Child }
    }).$mount()

    expect(vm.$el.textContent.trim()).toBe('A a B b')

    // switch slots
    vm.a = 'b'
    vm.b = 'a'
    waitForUpdate(() => {
      expect(vm.$el.textContent.trim()).toBe('B a A b')
    }).then(done)
  })

  // it('render function usage (JSX)', () => {
  //   const vm = new Vue({
  //     render (h) {
  //       return (<test>{
  //         props => <span>{props.msg}</span>
  //       }</test>)
  //     },
  //     components: {
  //       test: {
  //         data () {
  //           return { msg: 'hello' }
  //         },
  //         render (h) {
  //           return <div>
  //             {this.$scopedSlots.default({ msg: this.msg })}
  //           </div>
  //         }
  //       }
  //     }
  //   }).$mount()
  //   expect(vm.$el.innerHTML).toBe('<span>hello</span>')
  // })

  // #5615
  it('scoped slot with v-for', done => {
    const vm = new Vue({
      data: { names: ['foo', 'bar'] },
      template: `
        <test ref="test">
          <template v-for="n in names" :slot="n" slot-scope="props">
            <span>{{ props.msg }}</span>
          </template>
          <template slot="abc" slot-scope="props">
            <span>{{ props.msg }}</span>
          </template>
        </test>
      `,
      components: {
        test: {
          data: () => ({ msg: 'hello' }),
          template: `
            <div>
              <slot name="foo" :msg="msg + ' foo'"></slot>
              <slot name="bar" :msg="msg + ' bar'"></slot>
              <slot name="abc" :msg="msg + ' abc'"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe(
      '<span>hello foo</span> <span>hello bar</span> <span>hello abc</span>'
    )
    vm.$refs.test.msg = 'world'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe(
        '<span>world foo</span> <span>world bar</span> <span>world abc</span>'
      )
    }).then(done)
  })

  it('scoped slot with v-for (plain elements)', done => {
    const vm = new Vue({
      data: { names: ['foo', 'bar'] },
      template: `
        <test ref="test">
          <span v-for="n in names" :slot="n" slot-scope="props">{{ props.msg }}</span>
          <span slot="abc" slot-scope="props">{{ props.msg }}</span>
        </test>
      `,
      components: {
        test: {
          data: () => ({ msg: 'hello' }),
          template: `
            <div>
              <slot name="foo" :msg="msg + ' foo'"></slot>
              <slot name="bar" :msg="msg + ' bar'"></slot>
              <slot name="abc" :msg="msg + ' abc'"></slot>
            </div>
          `
        }
      }
    }).$mount()

    expect(vm.$el.innerHTML).toBe(
      '<span>hello foo</span> <span>hello bar</span> <span>hello abc</span>'
    )
    vm.$refs.test.msg = 'world'
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe(
        '<span>world foo</span> <span>world bar</span> <span>world abc</span>'
      )
    }).then(done)
  })

  // #6725
  it('scoped slot with v-if', done => {
    const vm = new Vue({
      data: {
        ok: false
      },
      template: `
        <test>
          <template v-if="ok" slot-scope="foo">
            <p>{{ foo.text }}</p>
          </template>
        </test>
      `,
      components: {
        test: {
          data() {
            return { msg: 'hello' }
          },
          template: `
            <div>
              <slot :text="msg">
                <span>{{ msg }} fallback</span>
              </slot>
            </div>
          `
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toBe('<span>hello fallback</span>')

    vm.ok = true
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toBe('<p>hello</p>')
    }).then(done)
  })

  // #9422
  // the behavior of the new syntax is slightly different.
  it('scoped slot v-if using slot-scope value', () => {
    const Child = {
      template: '<div><slot value="foo"/></div>'
    }
    const vm = new Vue({
      components: { Child },
      template: `
        <child>
          <template slot-scope="{ value }" v-if="value">
            foo {{ value }}
          </template>
        </child>
      `
    }).$mount()
    expect(vm.$el.textContent).toMatch(`foo foo`)
  })

  // 2.6 new slot syntax
  describe('v-slot syntax', () => {
    const Foo = {
      render(h) {
        return h('div', [
          this.$scopedSlots.default &&
            this.$scopedSlots.default('from foo default'),
          this.$scopedSlots.one && this.$scopedSlots.one('from foo one'),
          this.$scopedSlots.two && this.$scopedSlots.two('from foo two')
        ])
      }
    }

    const Bar = {
      render(h) {
        return (
          this.$scopedSlots.default && this.$scopedSlots.default('from bar')
        )
      }
    }

    const Baz = {
      render(h) {
        return (
          this.$scopedSlots.default && this.$scopedSlots.default('from baz')
        )
      }
    }

    const toNamed = (syntax, name) =>
      syntax[0] === '#'
        ? `#${name}` // shorthand
        : `${syntax}:${name}` // full syntax

    function runSuite(syntax) {
      it('default slot', () => {
        const vm = new Vue({
          template: `<foo ${syntax}="foo">{{ foo }}<div>{{ foo }}</div></foo>`,
          components: { Foo }
        }).$mount()
        expect(vm.$el.innerHTML).toBe(
          `from foo default<div>from foo default</div>`
        )
      })

      it('nested default slots', () => {
        const vm = new Vue({
          template: `
            <foo ${syntax}="foo">
              <bar ${syntax}="bar">
                <baz ${syntax}="baz">
                  {{ foo }} | {{ bar }} | {{ baz }}
                </baz>
              </bar>
            </foo>
          `,
          components: { Foo, Bar, Baz }
        }).$mount()
        expect(vm.$el.innerHTML.trim()).toBe(
          `from foo default | from bar | from baz`
        )
      })

      it('named slots', () => {
        const vm = new Vue({
          template: `
            <foo>
              <template ${toNamed(syntax, 'default')}="foo">
                {{ foo }}
              </template>
              <template ${toNamed(syntax, 'one')}="one">
                {{ one }}
              </template>
              <template ${toNamed(syntax, 'two')}="two">
                {{ two }}
              </template>
            </foo>
          `,
          components: { Foo }
        }).$mount()
        expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(
          `from foo default from foo one from foo two`
        )
      })

      it('nested + named + default slots', () => {
        const vm = new Vue({
          template: `
            <foo>
              <template ${toNamed(syntax, 'one')}="one">
                <bar ${syntax}="bar">
                  {{ one }} {{ bar }}
                </bar>
              </template>
              <template ${toNamed(syntax, 'two')}="two">
                <baz ${syntax}="baz">
                  {{ two }} {{ baz }}
                </baz>
              </template>
            </foo>
          `,
          components: { Foo, Bar, Baz }
        }).$mount()
        expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(
          `from foo one from bar from foo two from baz`
        )
      })

      it('should warn v-slot usage on non-component elements', () => {
        new Vue({
          template: `<div ${syntax}="foo"/>`
        }).$mount()
        expect(
          `v-slot can only be used on components or <template>`
        ).toHaveBeenWarned()
      })

      it('should warn mixed usage', () => {
        new Vue({
          template: `<foo><bar slot="one" slot-scope="bar" ${syntax}="bar"></bar></foo>`,
          components: { Foo, Bar }
        }).$mount()
        expect(
          `Unexpected mixed usage of different slot syntaxes`
        ).toHaveBeenWarned()
      })

      it('should warn invalid parameter expression', () => {
        new Vue({
          template: `<foo ${syntax}="1"></foo>`,
          components: { Foo }
        }).$mount()
        expect('invalid function parameter expression').toHaveBeenWarned()
      })

      it('should allow destructuring props with default value', () => {
        new Vue({
          template: `<foo ${syntax}="{ foo = { bar: '1' } }"></foo>`,
          components: { Foo }
        }).$mount()
        expect('invalid function parameter expression').not.toHaveBeenWarned()
      })
    }

    // run tests for both full syntax and shorthand
    runSuite('v-slot')
    runSuite('#default')

    it('shorthand named slots', () => {
      const vm = new Vue({
        template: `
          <foo>
            <template #default="foo">
              {{ foo }}
            </template>
            <template #one="one">
              {{ one }}
            </template>
            <template #two="two">
              {{ two }}
            </template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(
        `from foo default from foo one from foo two`
      )
    })

    it('should warn mixed root-default and named slots', () => {
      new Vue({
        template: `
          <foo #default="foo">
            {{ foo }}
            <template #one="one">
              {{ one }}
            </template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(`default slot should also use <template>`).toHaveBeenWarned()
    })

    it('shorthand without scope variable', () => {
      const vm = new Vue({
        template: `
          <foo>
            <template #one>one</template>
            <template #two>two</template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`onetwo`)
    })

    it('shorthand named slots on root', () => {
      const vm = new Vue({
        template: `
          <foo #one="one">
            {{ one }}
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(`from foo one`)
    })

    it('dynamic slot name', done => {
      const vm = new Vue({
        data: {
          a: 'one',
          b: 'two'
        },
        template: `
          <foo>
            <template #[a]="one">a {{ one }} </template>
            <template v-slot:[b]="two">b {{ two }} </template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(
        `a from foo one b from foo two`
      )
      vm.a = 'two'
      vm.b = 'one'
      waitForUpdate(() => {
        expect(vm.$el.innerHTML.replace(/\s+/g, ' ')).toMatch(
          `b from foo one a from foo two `
        )
      }).then(done)
    })

    it('should work with v-if/v-else', done => {
      const vm = new Vue({
        data: { flag: true },
        template: `
          <foo>
            <template v-if="flag" v-slot:one="one">a {{ one }} </template>
            <template v-else v-slot:two="two">b {{ two }} </template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(vm.$el.innerHTML).toBe(`a from foo one `)
      vm.flag = false
      waitForUpdate(() => {
        expect(vm.$el.innerHTML).toBe(`b from foo two `)
      }).then(done)
    })

    it('warn when v-slot used on non-root <template>', () => {
      // @ts-ignore unused
      const vm = new Vue({
        template: `
          <foo>
            <template v-if="true">
              <template v-slot:one>foo</template>
            </template>
          </foo>
        `,
        components: { Foo }
      }).$mount()
      expect(
        `<template v-slot> can only appear at the root level`
      ).toHaveBeenWarned()
    })
  })

  // 2.6 scoped slot perf optimization
  it('should have accurate tracking for scoped slots', done => {
    const parentUpdate = vi.fn()
    const childUpdate = vi.fn()
    const vm = new Vue({
      template: `
        <div>{{ parentCount }}<foo #default>{{ childCount }}</foo></div>
      `,
      data: {
        parentCount: 0,
        childCount: 0
      },
      updated: parentUpdate,
      components: {
        foo: {
          template: `<div><slot/></div>`,
          updated: childUpdate
        }
      }
    }).$mount()
    expect(vm.$el.innerHTML).toMatch(`0<div>0</div>`)

    vm.parentCount++
    waitForUpdate(() => {
      expect(vm.$el.innerHTML).toMatch(`1<div>0</div>`)
      // should only trigger parent update
      expect(parentUpdate.mock.calls.length).toBe(1)
      expect(childUpdate.mock.calls.length).toBe(0)

      vm.childCount++
    })
      .then(() => {
        expect(vm.$el.innerHTML).toMatch(`1<div>1</div>`)
        // should only trigger child update
        expect(parentUpdate.mock.calls.length).toBe(1)
        expect(childUpdate.mock.calls.length).toBe(1)
      })
      .then(done)
  })

  // #9432: async components inside a scoped slot should trigger update of the
  // component that invoked the scoped slot, not the lexical context component.
  it('async component inside scoped slot', done => {
    const vm = new Vue({
      template: `
        <foo>
          <template #default>
            <bar />
          </template>
        </foo>
      `,
      components: {
        foo: {
          template: `<div>foo<slot/></div>`
        },
        bar: resolve => {
          setTimeout(() => {
            resolve({
              template: `<div>bar</div>`
            })
            next()
          }, 0)
        }
      }
    }).$mount()

    function next() {
      waitForUpdate(() => {
        expect(vm.$el.textContent).toBe(`foobar`)
      }).then(done)
    }
  })

  // regression #9396
  it('should not force update child with no slot content', done => {
    const Child = {
      updated: vi.fn(),
      template: `<div></div>`
    }

    const parent = new Vue({
      template: `<div>{{ count }}<child/></div>`,
      data: {
        count: 0
      },
      components: { Child }
    }).$mount()

    expect(parent.$el.textContent).toBe(`0`)
    parent.count++
    waitForUpdate(() => {
      expect(parent.$el.textContent).toBe(`1`)
      expect(Child.updated).not.toHaveBeenCalled()
    }).then(done)
  })

  // regression #9438
  it('nested scoped slots update', done => {
    const Wrapper = {
      template: `<div><slot/></div>`
    }

    const Inner = {
      props: ['foo'],
      template: `<div>{{ foo }}</div>`
    }

    const Outer = {
      data: () => ({ foo: 1 }),
      template: `<div><slot :foo="foo" /></div>`
    }

    const vm = new Vue({
      components: { Outer, Wrapper, Inner },
      template: `
        <outer ref="outer" v-slot="props">
          <wrapper v-slot>
            <inner :foo="props.foo"/>
          </wrapper>
        </outer>
      `
    }).$mount()

    expect(vm.$el.textContent).toBe(`1`)

    vm.$refs.outer.foo++
    waitForUpdate(() => {
      expect(vm.$el.textContent).toBe(`2`)
    }).then(done)
  })

  it('dynamic v-bind arguments on <slot>', done => {
    const Foo = {
      data() {
        return {
          key: 'msg'
        }
      },
      template: `<div><slot :[key]="'hello'"/></div>`
    }

    const vm = new Vue({
      components: { Foo },
      template: `
        <foo ref="foo" v-slot="props">{{ props }}</foo>
      `
    }).$mount()

    expect(vm.$el.textContent).toBe(JSON.stringify({ msg: 'hello' }, null, 2))

    vm.$refs.foo.key = 'changed'
    waitForUpdate(() => {
      expect(vm.$el.textContent).toBe(
        JSON.stringify({ changed: 'hello' }, null, 2)
      )
    }).then(done)
  })

  // #9452
  it('fallback for scoped slots passed multiple levels down', () => {
    const inner = {
      template: `<div><slot>fallback</slot></div>`
    }

    const wrapper = {
      template: `
        <inner>
          <template #default>
            <slot/>
          </template>
        </inner>
      `,
      components: { inner }
    }

    const vm = new Vue({
      components: { wrapper, inner },
      template: `<wrapper/>`
    }).$mount()

    expect(vm.$el.textContent).toBe(`fallback`)
  })

  it('should expose v-slot without scope on this.$slots', () => {
    const vm = new Vue({
      template: `<foo><template v-slot>hello</template></foo>`,
      components: {
        foo: {
          render(h) {
            return h('div', this.$slots.default)
          }
        }
      }
    }).$mount()
    expect(vm.$el.textContent).toBe('hello')
  })

  it('should not expose legacy syntax scoped slot on this.$slots', () => {
    const vm = new Vue({
      template: `<foo><template slot-scope="foo">hello</template></foo>`,
      components: {
        foo: {
          render(h) {
            expect(this.$slots.default).toBeUndefined()
            return h('div', this.$slots.default)
          }
        }
      }
    }).$mount()
    expect(vm.$el.textContent).toBe('')
  })

  it('should expose v-slot without scope on ctx.slots() in functional', () => {
    const vm = new Vue({
      template: `<foo><template v-slot>hello</template></foo>`,
      components: {
        foo: {
          functional: true,
          render(h, ctx) {
            return h('div', ctx.slots().default)
          }
        }
      }
    }).$mount()
    expect(vm.$el.textContent).toBe('hello')
  })

  it('should not cache scoped slot normalization when there are a mix of normal and scoped slots', done => {
    const foo = {
      template: `<div><slot name="foo" /> <slot name="bar" /></div>`
    }

    const vm = new Vue({
      data: {
        msg: 'foo'
      },
      template: `
        <foo>
          <div slot="foo">{{ msg }}</div>
          <template #bar><div>bar</div></template>
        </foo>
      `,
      components: { foo }
    }).$mount()

    expect(vm.$el.textContent).toBe(`foo bar`)
    vm.msg = 'baz'
    waitForUpdate(() => {
      expect(vm.$el.textContent).toBe(`baz bar`)
    }).then(done)
  })

  // #9468
  it('should support passing multiple args to scoped slot function', () => {
    const foo = {
      render() {
        return this.$scopedSlots.default('foo', 'bar')
      }
    }

    const vm = new Vue({
      template: `<foo v-slot="foo, bar">{{ foo }} {{ bar }}</foo>`,
      components: { foo }
    }).$mount()

    expect(vm.$el.textContent).toBe('foo bar')
  })

  it('should not skip updates when a scoped slot contains parent <slot/> content', done => {
    const inner = {
      template: `<div><slot/></div>`
    }

    const wrapper = {
      template: `<inner v-slot><slot/></inner>`,
      components: { inner }
    }

    const vm = new Vue({
      data() {
        return {
          ok: true
        }
      },
      components: { wrapper },
      template: `<wrapper><div>{{ ok ? 'foo' : 'bar' }}</div></wrapper>`
    }).$mount()

    expect(vm.$el.textContent).toBe('foo')
    vm.ok = false
    waitForUpdate(() => {
      expect(vm.$el.textContent).toBe('bar')
    }).then(done)
  })

  it('should not skip updates for v-slot inside v-for', done => {
    const test = {
      template: `<div><slot></slot></div>`
    }

    const vm = new Vue({
      template: `
      <div>
        <div v-for="i in numbers">
          <test v-slot>{{ i }}</test>
        </div>
      </div>
      `,
      components: { test },
      data: {
        numbers: [1]
      }
    }).$mount()

    expect(vm.$el.textContent).toBe(`1`)
    vm.numbers = [2]
    waitForUpdate(() => {
      expect(vm.$el.textContent).toBe(`2`)
    }).then(done)
  })

  // #9534
  it('should detect conditional reuse with different slot content', done => {
    const Foo = {
      template: `<div><slot :n="1" /></div>`
    }

    const vm = new Vue({
      components: { Foo },
      data: {
        ok: true
      },
      template: `
        <div>
          <div v-if="ok">
            <foo v-slot="{ n }">{{ n }}</foo>
          </div>
          <div v-if="!ok">
            <foo v-slot="{ n }">{{ n + 1 }}</foo>
          </div>
        </div>
      `
    }).$mount()

    expect(vm.$el.textContent.trim()).toBe(`1`)
    vm.ok = false
    waitForUpdate(() => {
      expect(vm.$el.textContent.trim()).toBe(`2`)
    }).then(done)
  })

  // #9644
  it('should factor presence of normal slots into scoped slots caching', done => {
    const Wrapper = {
      template: `<div>
        <p>Default:<slot/></p>
        <p>Content:<slot name='content'/></p>
      </div>`
    }

    const vm = new Vue({
      data: { ok: false },
      components: { Wrapper },
      template: `<wrapper>
        <p v-if='ok'>ok</p>
        <template #content>
          <p v-if='ok'>ok</p>
        </template>
      </wrapper>`
    }).$mount()

    expect(vm.$el.textContent).not.toMatch(`Default:ok`)
    expect(vm.$el.textContent).not.toMatch(`Content:ok`)
    vm.ok = true
    waitForUpdate(() => {
      expect(vm.$el.textContent).toMatch(`Default:ok`)
      expect(vm.$el.textContent).toMatch(`Content:ok`)
      vm.ok = false
    })
      .then(() => {
        expect(vm.$el.textContent).not.toMatch(`Default:ok`)
        expect(vm.$el.textContent).not.toMatch(`Content:ok`)
        vm.ok = true
      })
      .then(() => {
        expect(vm.$el.textContent).toMatch(`Default:ok`)
        expect(vm.$el.textContent).toMatch(`Content:ok`)
      })
      .then(done)
  })

  //#9658
  it('fallback for scoped slot with single v-if', () => {
    const vm = new Vue({
      template: `<test v-slot><template v-if="false">hi</template></test>`,
      components: {
        Test: {
          template: `<div><slot>fallback</slot></div>`
        }
      }
    }).$mount()
    expect(vm.$el.textContent).toMatch('fallback')
  })

  // #9699
  // Component only has normal slots, but is passing down $scopedSlots directly
  // $scopedSlots should not be marked as stable in this case
  it('render function passing $scopedSlots w/ normal slots down', done => {
    const one = {
      template: `<div><slot name="footer"/></div>`
    }

    const two = {
      render(h) {
        return h(one, {
          scopedSlots: this.$scopedSlots
        })
      }
    }

    const vm = new Vue({
      data: { count: 0 },
      render(h) {
        return h(two, [h('span', { slot: 'footer' }, this.count)])
      }
    }).$mount()

    expect(vm.$el.textContent).toMatch(`0`)
    vm.count++
    waitForUpdate(() => {
      expect(vm.$el.textContent).toMatch(`1`)
    }).then(done)
  })

  // #11652
  it('should update when switching between two components with slot and without slot', done => {
    const Child = {
      template: `<div><slot/></div>`
    }

    const parent = new Vue({
      template: `<div>
        <child v-if="flag"><template #default>foo</template></child>
        <child v-else></child>
      </div>`,
      data: {
        flag: true
      },
      components: { Child }
    }).$mount()

    expect(parent.$el.textContent).toMatch(`foo`)
    parent.flag = false
    waitForUpdate(() => {
      expect(parent.$el.textContent).toMatch(``)
    }).then(done)
  })
})