Как проверить компонент со слотом и слот-реквизитом? - PullRequest
Новая
       30

Как проверить компонент со слотом и слот-реквизитом?

0 голосов
/ 07 июня 2019

Я хочу проверить это FooComponent: 

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

Это используется так (ParentComponent): 

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

Поэтому я хочу проверить, как мой компонент реагирует наназывая это "FN" из реквизита слота.Самый простой способ, который я вижу, - это взять сам метод и вызвать его так: 

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

Но это хорошо известно как анти-шаблон для проверки внутренней реализации.Поэтому вместо этого я хотел бы протестировать его с помощью пропеллера fn, переданного в слот, потому что это также своего рода интерфейс компонента, например, собственный компонент компонента.

Но как проверить пропуски, пропущенные в слот?Я могу представить, что это работает только в том случае, если я проверяю ParentComponent что-то вроде этого: 

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

Но это похоже на тесты для FooComponent внутри тестов для ParentComponent

Может бытьесть лучший способ сделать это?

1 Ответ

0 голосов
/ 13 июня 2019

Так как ответов нет, поэтому я просто делюсь тем, чем закончил.

Я решил проверить внутренний метод. Это не круто, но, по крайней мере, потому что я использую машинописный текст, у меня есть типобезопасный тест, который не пройдёт с явной ошибкой типа, если я переименую или изменю метод, который тестирую. Выглядит так: 

import Foo from '@/components/foo/Foo.ts'
import FooComponent from '@/components/foo/Foo.vue'

/*...*/

cosnt wrapper = <Foo>shallowMount(FooComponent, /* ... */)

// notice that because I passed `Foo` which is a class-component, 
// I have autocomplete and type checks for vm.*
wrapper.vm.internalFn(/* test payload */)

expect(wrapper.emitted()).toBe(/* some expectation */)
...