Vuetify v-data-table с помощью vuex.Не отображается в модульном тесте - PullRequest
Новая
       24

Vuetify v-data-table с помощью vuex.Не отображается в модульном тесте

0 голосов
/ 24 апреля 2018

vue 2.5.2 Vuex 3.0.1 vuetify 1.0.16

Я создаю приложение vuex + vuetify.

Визуализация данных в хранилище vuex. Используется v-data-таблица с нумерацией страниц.

Код компонента 

<template>
  <v-container>
    <v-text-field id="shopName" v-model="editedItem.name" required></v-text-field>
    <v-btn id="save" color="blue darken-1" flat @click.native="save">save</v-btn>
    <v-data-table :headers="headers" :pagination.sync="pagination" :items="shops" class="elevation-1">
      <template slot="items" slot-scope="props">
          <td>{{ props.item.name }}</td>
      </template>
      <template slot="no-data">
          <td>no item</td>
      </template>
    </v-data-table>
  </v-container>
</template>

<script>
export default {
  name: 'shop',
  created () {
  },
  data () {
    return {
      pagination: {
        sortBy: 'name'
      },
      headers: [
        {
          text: 'name',
          align: 'left',
          value: 'name'
        }
      ],
      editedItem: {name: ''},
      defaultItem: {name: ''}
    }
  },
  methods: {
    close () {
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
      }, 300)
    },
    save () {
      this.$store.commit('addShop', this.editedItem)
      this.close()
    }
  },
  computed: {
    shops () {
      return this.$store.state.items
    }
  },
  mounted () {
  }
}
</script>

И я добавил тестовый код. Первый - тест «добавляет новый магазин», который добавляет магазин. Тест пройден.

И следующий тест «использует тот же магазин» - рендеринг с тем же экземпляром магазина. Но тест не пройден. При удалении настройки пагинации из компонента, тест пройден. Почему бы не сделать рендеринг, если настройки пагинации существуют. 

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'

Vue.use(Vuetify)

describe('Shop.vue', () => {
  it('adds a new shop', async () => {
    // build component
    const wrapper = mount(DataTable, {store})
    const inputShopName = wrapper.find('input#shopName')[0]
    inputShopName.trigger('focus')
    inputShopName.element.value = 'AEON'
    inputShopName.trigger('input')
    await wrapper.vm.$nextTick()
    wrapper.find('button#save')[0].trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.html()).toContain('AEON')
  })
  it('uses same store', () => {
    // build component
    const wrapper2 = mount(DataTable, {store})
    expect(wrapper2.html()).toContain('AEON')
  })
})

Код воспроизведения в https://github.com/dokechin/vue-test-example

1 Ответ

0 голосов
/ 26 апреля 2018

Я пытался изменить мою проблему более просто.Сохранение данных перед монтированием, а не рендеринг при pagination.sync. 

import { mount } from 'avoriaz'
import Vue from 'vue'
import Vuetify from 'vuetify'
import DataTable from '@/components/DataTable'
import { store } from '../../../src/store/store.js'

Vue.use(Vuetify)

describe('Shop.vue', () => {
  it('uses store', () => {
    // build component
    store.state.items.push({name: 'AEON'})
    const wrapper2 = mount(DataTable, {store})
    expect(wrapper2.html()).toContain('AEON')
  })
})
...