当使用vue-i18n时,Vue.js Avoriaz单元测试会产生翻译警告

时间:2017-07-19 08:21:57

标签: javascript unit-testing vue.js vue-i18n avoriaz

摘要

我正在使用vue-i18n代替i18n和Avoriaz来测试我的Vue.js组件。我收到很多警告,因为没有翻译过的字符串,我无法修复。我怎样才能摆脱这些警告?

警告示例

  

' [vue-i18n]无法翻译keypath" description.first'的值。   使用keypath的值作为默认值。'

测试设置

import Vue from 'vue'
import Vuex from 'vuex'
import {
  mount
} from 'avoriaz'
import sinon from 'sinon'
import VueResource from 'vue-resource'
import BootstrapVue from 'bootstrap-vue'
import VueI18n from 'vue-i18n'
import store from './../../../state/index'
import Register from '@/components/Register'

Vue.use(BootstrapVue)
Vue.use(VueResource)
Vue.use(VueI18n)

describe('Register', () => {
  it('should accept inputs', () => {
    store.locale = 'en'
    const wrapper = mount(Register, {
      store
    })

    let name = 'Hans'
    let password = '123'

    let nameInput = wrapper.find('input')[0]
    let passwordInput = wrapper.find('input')[1]

    nameInput.element.value = name
    passwordInput.element.value = password

    nameInput.trigger('input')
    passwordInput.trigger('input')

    expect(wrapper.vm.$store.state.user.name).to.equal(name)
    expect(wrapper.vm.$store.state.user.password).to.equal(password)
  })
})

经测试的组件

<template>
  <div class="row justify-content-md-center">
    <div class="col-6">
      <b-form-fieldset
        :description="$t('description.first')"
        :label="$t('label.first')"
        :label-size="1">
        <b-form-input v-model="name"></b-form-input>
      </b-form-fieldset>
      <b-form-fieldset
        :description="$t('description.second')"
        :label="$t('label.second')"
        :label-size="1">
        <b-form-input v-model="password" type="password"></b-form-input>
      </b-form-fieldset>
      <b-button variant="outline-success" size="sm" @click="create">{{ $t('button.first') }}</b-button>
    </div>
  </div>
</template>

<script>
  export default {
    i18n: {
      messages: {
        en: {
          'description.first': 'Enter a name',
          'label.first': 'Name *',
          'description.second': 'Enter a password',
          'label.second': 'Password *',
          'button.first': 'Create'
        },
        de: {
          'description.first': 'Gebe einen Namen ein',
          'label.first': 'Name *',
          'description.second': 'Gebe ein Passwort ein',
          'label.second': 'Passwort *',
          'figcaption.first': 'Du kannst einen dieser Nutzer wählen, um dich einzuloggen.',
          'button.first': 'Erstellen'
        }
      }
    },

    computed: {
      user: {
        get () {
          return this.$store.state.user
        }
      },

      name: {
        get () {
          return this.$store.state.user.name
        },

        /**
         * @param name
         */
        set (name) {
          this.$store.commit('SET_USER_NAME', name)
        }
      },

      password: {
        get () {
          return this.$store.state.user.password
        },

        /**
         * @param password
         */
        set (password) {
          this.$store.commit('SET_USER_PASSWORD', password)
        }
      }
    },

    methods: {
      create () {
        this.$store.dispatch('saveUser', this.user)
      }
    }
  }
</script>

0 个答案:

没有答案