Имитация выбора с помощью element-ui и vue-test-utils - PullRequest
Новая
       31

Имитация выбора с помощью element-ui и vue-test-utils

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

Я делаю юнит-тесты с Jest и Element-ui в Vue для компонента, который содержит выбор с 2 опциями.Я выбираю опцию из выпадающего списка, а затем проверяю, было ли вызвано действие.

1) С обычными HTML-тегами select и option это работает отлично.

// Fruit.vue 

<template lang="pug">
  select(
    v-model="fruit"
  )
    option(
      v-for="item in fruits"
      :label="item.label"
      :value="item.value"
    )
</template>
<script>
export default {
  data () {
    return {
      fruits: [
        {
          label: 'Banana',
          value: false
        },
        {
          label: 'Apple',
          value: false
        }
      ]
    }
  },
  computed: {
    fruit: {
      get () {
        return this.$store.state.fruit
      },
      set (fruit) {
        this.$store.dispatch('setSelectedFruit', { fruit })
      }
    }
  }
</script>

// DOM 

<select>
  <option label="Banana" value="false"></option>
  <option label="Apple" value="false"></option>
</select>

// Fruit.spec.js 

it('calls the "setSelectedFruit" action when a value is selected', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.find('select').findAll('option')


  options.at(1).setSelected()
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

Однако я использую элемент-ui el-select и el-option, которые имеют свое взаимодействие с DOM.

2) С el-select и el-option

// Fruit.vue

Не меняется, за исключением того, что select заменяется на el-select и optionel-option.

// DOM 

<div class="el-select-dropdown">
  <div class="el-select-dropdown__wrap">
    <ul class="el-select-dropdown__list">
      <li class="el-select-dropdown__item">
        <span>Banana</span>
      </li>
      <li class="el-select-dropdown__item">
        <span>Apple</span>
      </li>
    </ul>
  </div>
</div>

// Fruit.spec.js

a) 

it('calls the "setSelectedFruit" action', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.find('.el-select-dropdown__list').findAll('el-select-dropdown__items')

  options.at(1).setSelected()
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

b) Учитывая, что setSelected на самом деле является псевдонимом согласно документации vue-test-utils , я попыталсяэто следующим образом: 

it('calls the "setSelectedFruit" action', () => {
  const wrapper = mount(Fruit, { store, localVue })
  const options = wrapper.findAll('.el-select-dropdown__item')
  const select = wrapper.find('.el-select-dropdown__list')

  options.at(1).element.selected = false
  select.trigger('change')
  expect(actions.setSelectedFruit).toHaveBeenCalled()
})

При втором методе выбранный option устанавливается как selected, но триггер на select не работает и поэтому v-model isn 'тыpdated.

Так что я хотел бы знать, есть ли у кого-нибудь решение для этого или есть другая библиотека (кроме vue-test-utils) , с которой el-select element-ui можно моделировать.

...