Методы насмешки в экземпляре Vue во время TDD - PullRequest
Новая
       43

Методы насмешки в экземпляре Vue во время TDD

0 голосов
/ 16 декабря 2018

Я изучаю TDD, пока создаю свое приложение Vue, и стараюсь соблюдать строгие законы, заключающиеся только в написании достаточного количества производственного кода, чтобы пройти неудачный модульный тест.Мне действительно нравится этот подход, но я столкнулся с препятствиями на пути добавления методов к экземпляру Vue и проверки их вызова при вызове события из элемента в шаблоне.

Я не могу найтилюбые предложения относительно того, как я могу смоделировать метод Vue, учитывая, что, если я высмеиваю прокси-метод, он не вызывается (я использую Jest и Vue Test Utils).

Я также использую Cypress, так чтоЯ могу заполнить этот тест в e2e, но я хотел бы иметь возможность охватить как можно больше модульными тестами.

У меня есть книга «Тестирование приложений Vuejs» Эдда Йербурга, но в разделе, касающемся компонента тестированияМетоды, он просто заявляет следующее:

"Часто компоненты используют методы внутренне. Например, для входа в консоль при нажатии кнопки .... .... Вы можете думать о них как о частныхметоды - они не предназначены для использования вне компонента. Частные методы - это детали реализации, поэтому вы не пишете для них тесты.прямо. "

Этот подход, очевидно, не позволяет следовать более строгим законам TDD, так как же нацистам TDD справиться с этим?

спасибо за ваше время. 

// ButtonComponent.vue

<template>
    <button @click="method">Click me</button>
</template>

<script>
    export default: {
        methods: {
            method () {
                // Have I been called?
            }
        }
    }
</script>

Вот мой тест, если он поможет: 

// ButtonComponent.spec.js

it('will call the method when clicked, () => {

    const wrapper = shallowMount(ButtonComponent)

    const mockMethod = jest.fn()

    wrapper.vm.method = mockMethod

    const button = wrapper.find('button')

    button.vm.$emit('click')

    expect(mockMethod).toHaveBeenCalled()
    // Expected mock function to have been called, but it was not called
})

1 Ответ

0 голосов
/ 16 декабря 2018

Несколько проблем:

  1. Ваш обработчик click-событий неправильно привязан в шаблоне.Синтаксис для обработчиков событий привязки : 

    @EVENTNAME=METHOD (shorthand for v-on:EVENTNAME=METHOD)

    , но вы использовали синтаксис привязки свойств: 

    :PROPERTY=VALUE (shorthand for v-bind:PROPERTY:VALUE)

    Начиная с v2.5.17, Vue не генерируетошибки / предупреждения о таких ошибках, так что это легко пропустить.Ваша привязка должна выглядеть следующим образом: 

    <button @click="method">Click me</button>

  2. Ваш тест должен использовать API Vue Test Utils setMethods() при перезаписи метода компонента, как показано в примере docs (что в действительности соответствует вашему варианту использования): 

    const mockMethod = jest.fn()
// wrapper.vm.method = mockMethod  // DON'T DO THIS
wrapper.setMethods({ method: mockMethod })

  3. Тестовая оболочка не имеет метода $emit(), и вы столкнетесь с ошибкой во время выполнения, если попытаетесьэтот.Вы, вероятно, намеревались использовать trigger() API: 

    const button = wrapper.find('button')
// button.$emit('click')  // DON'T DO THIS
button.trigger('click')

demo

...