Improve passing text to slots

[38elements]

This is related to #244 .

The text works below.

const wrapper1 = mount(ComponentWithSlots, { slots: { default: '1{{ foo }}2' )
const wrapper2 = mount(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}<p>2</p>' )
const wrapper3 = mount(ComponentWithSlots, { slots: { default: '<p>1</p>{{ foo }}' )
const wrapper4 = mount(ComponentWithSlots, { slots: { default: '123' )
const wrapper5 = mount(ComponentWithSlots, { slots: { default: '1<p>2</p>{{ foo }}3' )
const wrapper6 = mount(ComponentWithSlots, { slots: { default: '<p>1</p><p>2</p>' }})
const wrapper7 = mount(ComponentWithSlots, { slots: { default: '1<p>2</p>3' }})

[eddyerburgh]

DOMParser isn't supported in phantomJs, so we need an alternative that will work in phantom

[38elements]

Thank you for reviewing.
Is there a choice not to support PhantomJS ?
IMHO, I think it is better to use Puppeteer.
It is better to introduce Puppeteer at document.

[eddyerburgh]

A lot of users still use phantom. We could throw an error, or a warning that phantom doesn't support markup in slots, and handle it gracefully

[38elements]

Thank you for reply.
I will look for other ways.

[eddyerburgh]

Can you change the error message to—option.slots does not support strings PhantomJS. Please use Puppeteer, or pass a component

[38elements]

I am sorry.
I did not notice your comment.
I fixed the error message.

[38elements]

I changed this.
This throws error when the UserAgent is PhantomJS.

[eddyerburgh]

Unless I'm mistakenm you can just add // eslint-disable-line to the line, instead of 2 comments. Even better, you can add //eslint-disable-line name-of-rule to only disable eslint for the rule which is failing

[38elements]

Thank you for pointing out.
I fixed it.

[38elements]

I am sorry.
There were a few mistakes in document.

[38elements]

I am sorry.
There is a bug.

<template>
  <div class="container" @click='change'>
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
  export default {
    name: 'component-with-slots',
    data () {
      return {
        'foo': 'bar'
      }
    },
    methods: {
      change () {
        this.foo = 'baz'
      }
    }
  }
</script>

    const wrapper5 = mount(ComponentWithSlots, { slots: { default: '1{{ foo }}2' }})
    wrapper5.find('.container').trigger('click')
    expect(wrapper5.find('main').html()).to.equal('<main>1baz2</main>')
   // => <main>undefined</main>

[38elements]

I think it is resolved.

[eddyerburgh]

option.slots does not support strings PhantomJS. Please use Puppeteer, or pass a component

to

option.slots does not support strings in PhantomJS. Please use Puppeteer, or pass a component

[38elements]

I changed it.