Вопрос:

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

unit-testing vue.js testing frontend vue-test-utils

11 просмотра

1 ответ

1504 Репутация автора

Я хочу проверить это 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

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

Автор: Alendorff Источник Размещён: 07.06.2019 10:14

Ответы (1)


0 плюса

1504 Репутация автора

Решение

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

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

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 */)
Автор: Alendorff Размещён: 12.06.2019 09:24
Вопросы из категории :
32x32