Данные компонента не обновляются, даже если метод вызвал метод для изменения данных (Vue-test-utils) - PullRequest
Новая
       31

Данные компонента не обновляются, даже если метод вызвал метод для изменения данных (Vue-test-utils)

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

У меня есть спецификация, которая будет проверять, работает ли метод, щелкая элемент, и пока он работает, потому что в компоненте (назовем это Datatable.vue ), когда я добавляю console.log('test'), онрегистрирует test , но когда я получаю доступ к данным обертки, они не обновляются должным образом.

Вот примеры кодов:

Сценарий компонента Datatable 

...
props: {
  items: {
    type: Array,
    required: true
  },
...
},
methods: {
  /**
   * clicking each column header will enable it to sort based on the key
   * @params key: integer - key of the fields array being sorted
   * @private
   */
   sortItems(key) {
     console.log('test')
     const fieldKey = this.fields[key]
     this.items = this.items.sort((a, b) => {
       if (fieldKey === 'amount') {
         if (parseFloat(a[fieldKey]) < parseFloat(b[fieldKey])) {
           return -1
         }
       } else if (fieldKey === 'description' || fieldKey === 'name') {
         if (a[fieldKey].toLowerCase() < b[fieldKey].toLowerCase()) {
           return -1
         } 
       } else {
         if (a[fieldKey] < b[fieldKey]) {
           return -1
         }
       }
     })
   },

Шаблон компонента данных: 

<table class="datatable-class">
  <thead class="datatable-table-head">
    <tr>
      <th class="datatable-header" v-for="(field, key) in fields" :key="key" @click="sortItems(key)">
        {{ field | capitalize }}
      </th>
    </tr>
  </thead>
  ...

Спецификация данных: 

import { shallowMount } from '@vue/test-utils'
import Datatable from '@/components/Datatable.vue'
...

const items = [
  {
    id: '17528C9F-773F-1651-55AE-848FDAABE446',
    name: 'Bertha Strong',
    description: 'hendrerit.',
    date: '2018-05-22T00:16:48-07:00',
    amount: '420.64'
  },
  {
    id: '61CBD2A7-C3C7-87C7-8072-C1E86220A07A',
    name: 'Darryl Rosario',
    description: 'vitae, sodales at, velit. Pellentesque ultricies dignissim lacus. Aliquam rutrum',
    date: '2018-06-24T20:25:09-07:00',
    amount: '44.99'
  }
]

describe('Datatable.vue', () => {
  it('Checks if datatable is rendered properly', () => {
    const wrapper = shallowMount(Datatable, {
      propsData: {
        items
      }
    })

  // clicks the amount table th header
  wrapper.find('table').find('thead > tr > th:last-child').trigger('click')
  // I also did this (logs 'test' twice)
  wrapper.vm.sortItems('amount')
  console.log(wrapper.vm._prop.items[0].amount) //still 420.64
  ...
})

Как и в случае с пользовательским интерфейсом, при нажатии th следует выполнить сортировкуна основе суммы в порядке убывания, которая должна привести к обмену / сортировке items[0] (это было проверено в реальном браузере, в результате чего объект с суммой 44,99 находится в первой строке), но оболочка кажется, не отражает это изменение при доступе к vm._prop.Он зарегистрировал test на консоли терминала.Нужно ли повторно вызывать / обновлять оболочку после такого действия или есть лучший способ проверить эту функцию щелчка на vue-test-utils / mocha-webpack ?

...