Как проверить, вызывается ли функция, когда я отправляю форму с помощью sinon?

Question

Вступление:

Я хочу проверить, что если я нажимаю на кнопку отправки, вызывается функция onSubmit. Я предполагаю, что это возможно из того, что я понимаю, когда читаю документацию:

1. https://sinonjs.org/releases/v6.1.5/spies/
2. https://vue-test-utils.vuejs.org/guides/

ожидаемый результат:

• запустите тест и покажите мне, успешно или нет

фактический выход:

• нет, я в настоящее время застрял в следующем:

контекст:

в моем тесте:

import NavBar from '@/components/layout/NavBar.vue'

в этом компоненте у меня есть (упрощенная версия здесь) форма:

<b-nav-form @submit="onSubmit"> <b-form-input /> <b-button type="submit">Search</b-button> </b-nav-form>

Я хочу проверить, что если я нажимаю на кнопку отправки, вызывается функция onSubmit.

Мои настройки Vue, BootstrapVue и Sinon. Я понимаю, что должен настроить шпиона, который слушает вызываемую функцию.

Это фактический скрипт в моем компоненте, если это полезно:

<script>
  export default {
    data () {
      return {
        query: ''
      }
    },
    methods: {
      onSubmit () {...}
    }
  }
</script>

Пример, который я понимаю:

it('a true example', () => {
    var f = {
      onSubmit: function(query) {
        this.query = query;
      }
    }
    var onSubmitSpy = sinon.spy(f, 'onSubmit');
    f.onSubmit('Club')

    console.log(onSubmitSpy.callCount); // is 1
    onSubmitSpy.restore();
  })

Но это не связано, например, с нажатием на кнопку в форме.

пожалуйста, порекомендуйте

Answer 1

Идея протестировать функции вызываемых компонентов vue заключается в следующем:

1. Создание компонентов тестирования с vue-test-utilsmount или же shallowMount,

2. Пройти methods парам в options чтобы обеспечить шпионов.

3. Выполните действия в компоненте, который вызывает метод spied, а затем подтвердите, что метод действительно был вызван.

У меня нет sinon опыт, используется только для тестирования компонентов VUE с jest, но вещь должна быть примерно такой:

  import NavBar from '@/components/layout/NavBar.vue'
  import {shallowMount} from 'vue-test-utils';

  it('asserting onSubmit calls', () => {

    // given

    var onSubmit = sinon.spy();
    var wrapper = shallowMount(NavBar, {
      methods: {
        onSubmit();
      }
    });
    var vm = wrapper.vm;

    // when
    vm.onSubmit();

    // then (I dont really dont know if this is valid sinon syntax)
    assertTrue(onSubmit.called);
    // or, with jest syntax:
    // expect(onSubmit).toHaveBeenCalled(); 

  })

Теперь фрагмент кода должен работать, но есть проблемы с этим тестом: мы утверждаем, что когда мы вызываем компонент onSubmit, onSubmit шпион вызывается. Это не великая вещь.

Ваш тест, вероятно, должен утверждать что-то вроде: когда <b-nav-form> компонент излучает submit событие, то onSubmit шпион вызывается.

Это будет более сложный тест по двум причинам:

1. Потому что задействован дочерний компонент. Чтобы действительно визуализировать дочерние компоненты в vue-test-utils тест, вам нужно использовать mount вместо shallowMount, Это сложно, так как вам нужно предоставить дочерние реквизиты и зависимости, поэтому привыкните к различиям shallowMount и mount.

2. Когда вы начинаете тестировать события, скорее всего, возникает некоторая синхронность, поэтому вам нужно дождаться, пока событие распространится, и вызвать метод вашего компонента. Это обычно предполагает прохождение done обратный звонок в it() блоки.