Question

第2.5.2节 vuex 3.0.1 vuetify 1.0.16

我正在创建vuex + vuetify应用程序。

渲染数据位于vuex商店中。它使用带有分页的v-data-table。

组件代码是

<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

Answer 1

我试过更简单地改变了我的问题。在挂载之前创建商店数据，而不是在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')
  })
})

使用vuex Vuetify v-data-table。不进行单元测试

1 个答案: