vendredi 7 juin 2019

Vue how to test component with slot and slot-props

I want to test this FooComponent:

<div>
  <slot :fn="internalFn" />
</div>

It's used like that (ParentComponent):

<FooComponent>
  <template slot-scope="slotProps">
    <BarComponent @some-event="slotProps.fn" />
  </template>
</FooComponent>

So I want to test how my component reacts on calling this "fn" from slot props. The easiest way I see is to take method itself and call it, like that:

cosnt wrapper = shallowMount(FooComponent, /* ... */)
wrapper.vm.methods.internalFn(/* test payload */)
expect(wrapper.emitted()).toBe(/* some expectation */)

But this is well known as anti-pattern about testing internal implementation. So instead I would like to test it via prop fn passed into slot, because it's also some sort of component interface, like component own props.

But how to to test props passed in slot? I can imagine it's working only in case if I test that ParentComponent something like that:

const wrapper = shallowMount(ParentComponent, /* ... */)
const foo = wrapper.find(FooComponent)
wrapper.find(BarComponent).vm.$emit('some-event', /*...*/)
/* write expectations against foo */

But that feels like tests for FooComponent inside tests for ParentComponent

Maybe there is a better way to do it?

Aucun commentaire:

Enregistrer un commentaire