Как проверить значение компонента vue.js v-select

У меня есть настройка формы с использованием vue.js и v-select для раскрывающегося списка валют. Я пытаюсь создать модульный тест, чтобы убедиться, что текущее значение v-select установлено на вычисленное значение price_currency

Вот код vue для селектора

<v-select
 name="price_currency"
 :value="price_currency"
 @input="value => this.updateValue('price_currency', value)"
 :options="currencies"
 v-validate="validate.select"
 :selectOnTab="true">
</v-select>

:value устанавливается на price_currency, что является вычисляемым значением. В модульных тестах я могу использовать метод find для v-select, который вернет элемент, но поскольку это компонент vue, а не фактический <select>, элемент value не установлен, что означает, что я не могу проверить его.

Как я могу написать модульный тест для вышеуказанного v-select, который подтвердит, что в поле установлено вычисленное значение price_currency? Кроме того, я хочу проверить, что при обновлении price_currency обновляется и значение v-select, но, вероятно, как только я увижу пример тестирования значения, все остальное встанет на свои места.

Это кажется довольно простым тестом, но я не могу найти нигде в документации или в Интернете хороший пример того, как это можно сделать.

Для своих модульных тестов я использую VueTestUtils и Jest.


javascript jestjs vue.js vue-test-utils v-select
person Dave Faliskie    schedule 14.11.2018    source источник
comment
Вам действительно нужен модульный тест для этого? Разве вы не можете просто протестировать его в своем браузере локально и убедиться, что он работает позже? Я имею в виду, что это не та хрупкая часть вашего приложения, которая действительно нуждается в тестировании. Кроме того, все компоненты Vue превращаются в обычные элементы HTML, так что да, на самом деле это обычное поле ввода html, при условии, что ваш тестер полностью обрабатывает проект Vue. Я рекомендую запустить ваш проект и открыть инспектор в вашем браузере, чтобы увидеть, какой HTML-код выводит Vue.   -  person Simon Hyll    schedule 14.11.2018
comment
скорее всего, использование :value не будет обновлять price_currency при обновлении выбора. Вы должны использовать v-model   -  person A. L    schedule 14.11.2018
comment
Как говорит А. Лау, вы должны использовать vue-model, чтобы синхронизировать его со значением.   -  person Simon Hyll    schedule 14.11.2018
comment
Я не упоминал об этом, но выбор на самом деле является дочерним представлением другого представления. Поэтому v-модель не использовалась. Метод updateValue(), вызванный на входе, выдаст значение выбора. Теперь я думаю, что выбор не нуждается в тестировании у ребенка. Вместо этого тесты в родительском объекте будут охватывать его, потому что именно там фактически устанавливается значение. Но мне все еще нужно проверить, когда значение изменяется в выборе, что происходит событие $emit, и я не уверен, как это сделать, не зная значения.   -  person Dave Faliskie    schedule 14.11.2018
comment
Возможно, вы захотите посмотреть, как это можно сделать с помощью тестирования браузера: ="тестирование vuetify v select с laravelsummer">stackoverflow.com/questions/51163562/   -  person Cato Minor    schedule 24.06.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я сделал это:

expect(wrapper.find('#selectCustomerCountry .selected-tag').text()).toEqual('lorem')

Вот как выглядит мой код шаблона Vue:

<v-select v-bind:class="{'input--has-error': errors.has('country')}" class="select-field input--full v-select" id="selectCustomerCountry"
          name="country"
          v-if="useCountrySearch"
          v-model="foundCountry"
          :filterable="false"
          :options="countries"
          label="name"
          :onSearch="onSearch"
          v-validate:country="'required'">
    <template slot="option" slot-scope="option">
        <span class="v-select__label">{{ option.name }}</span>
        <br />
        <span class="v-select__label--small">{{ option.continent.name }}</span>
    </template>
    <span slot="no-options">Type at least 3 characters...</span>
</v-select>

И вот как выглядит обработанный HTML, когда я монтирую страницу и вызываю wrapper.html() после того, как она уже выбрала опцию с именем lorem:

<div dir="auto" class="dropdown v-select select-field input--full v-select single searchable" id="selectCustomerCountry" name="country">
  <div class="dropdown-toggle">
    <div class="vs__selected-options"><span class="selected-tag">
            lorem
           <!----></span> <input type="search" autocomplete="off" role="combobox" aria-label="Search for option" class="form-control"></div>
    <div class="vs__actions"><button type="button" title="Clear selection" class="clear" style=""><span aria-hidden="true">×</span></button> <i role="presentation" class="open-indicator"></i>
      <div class="spinner" style="display: none;">Loading...</div>
    </div>
  </div>
  <transition-stub name="fade">
    <!---->
  </transition-stub>
</div>

Обратите внимание, что я предпочитаю стиль тестирования Jest, более ориентированный на интеграцию, поэтому я делаю утверждения для содержимого страницы, а не для значений в моделях, потому что я чувствую, что это обеспечивает лучший охват. Если вы предпочитаете тестировать только значения в моделях, вы можете найти пример в модульных тестах самого V-Select.

person Velizar Hristov    schedule 01.03.2021