scopedSlots.spec.js

import {
  describeWithShallowAndMount,
  vueVersion,
  isRunningPhantomJS
} from '~resources/utils'
import ComponentWithScopedSlots from '~resources/components/component-with-scoped-slots.vue'
import { itDoNotRunIf } from 'conditional-specs'

describeWithShallowAndMount('scopedSlots', (mountingMethod) => {
  let _window

  beforeEach(() => {
    _window = window
  })

  afterEach(() => {
    if (!window.navigator.userAgent.match(/Chrome/i)) {
      window = _window // eslint-disable-line no-native-reassign
    }
  })

  itDoNotRunIf(vueVersion < 2.5 || isRunningPhantomJS,
    'mounts component scoped slots', () => {
      const wrapper = mountingMethod(ComponentWithScopedSlots, {
        slots: { default: '<span>123</span>' },
        scopedSlots: {
          destructuring: '<p slot-scope="{ index, item }">{{index}},{{item}}</p>',
          list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>',
          single: '<p slot-scope="bar">{{bar.text}}</p>',
          noProps: '<p slot-scope="baz">baz</p>'
        }
      })
      expect(wrapper.find('#destructuring').html()).to.equal('<div id="destructuring"><p>0,1</p><p>1,2</p><p>2,3</p></div>')
      expect(wrapper.find('#slots').html()).to.equal('<div id="slots"><span>123</span></div>')
      expect(wrapper.find('#list').html()).to.equal('<div id="list"><p>0,a1</p><p>1,a2</p><p>2,a3</p></div>')
      expect(wrapper.find('#single').html()).to.equal('<div id="single"><p>abc</p></div>')
      expect(wrapper.find('#noProps').html()).to.equal('<div id="noProps"><p>baz</p></div>')
      wrapper.vm.items = [4, 5, 6]
      wrapper.vm.foo = [{ text: 'b1' }, { text: 'b2' }, { text: 'b3' }]
      wrapper.vm.bar = 'ABC'
      expect(wrapper.find('#destructuring').html()).to.equal('<div id="destructuring"><p>0,4</p><p>1,5</p><p>2,6</p></div>')
      expect(wrapper.find('#slots').html()).to.equal('<div id="slots"><span>123</span></div>')
      expect(wrapper.find('#list').html()).to.equal('<div id="list"><p>0,b1</p><p>1,b2</p><p>2,b3</p></div>')
      expect(wrapper.find('#single').html()).to.equal('<div id="single"><p>ABC</p></div>')
      expect(wrapper.find('#noProps').html()).to.equal('<div id="noProps"><p>baz</p></div>')
    }
  )

  itDoNotRunIf(vueVersion < 2.5 || isRunningPhantomJS,
    'throws exception when it is seted to a template tag at top', () => {
      const fn = () => {
        mountingMethod(ComponentWithScopedSlots, {
          scopedSlots: {
            single: '<template></template>'
          }
        })
      }
      const message = '[vue-test-utils]: the scopedSlots option does not support a template tag as the root element.'
      expect(fn).to.throw().with.property('message', message)
    }
  )

  itDoNotRunIf(vueVersion >= 2.5 || isRunningPhantomJS,
    'throws exception when vue version < 2.5', () => {
      const fn = () => {
        mountingMethod(ComponentWithScopedSlots, {
          scopedSlots: {
            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
          }
        })
      }
      const message = '[vue-test-utils]: the scopedSlots option is only supported in vue@2.5+.'
      expect(fn).to.throw().with.property('message', message)
    }
  )

  itDoNotRunIf(vueVersion < 2.5,
    'throws exception when using PhantomJS', () => {
      if (window.navigator.userAgent.match(/Chrome/i)) {
        return
      }
      window = { navigator: { userAgent: 'PhantomJS' }} // eslint-disable-line no-native-reassign
      const fn = () => {
        mountingMethod(ComponentWithScopedSlots, {
          scopedSlots: {
            list: '<p slot-scope="foo">{{foo.index}},{{foo.text}}</p>'
          }
        })
      }
      const message = '[vue-test-utils]: the scopedSlots option does not support PhantomJS. Please use Puppeteer, or pass a component.'
      expect(fn).to.throw().with.property('message', message)
    }
  )
})