Question

我正在尝试测试表单提交..似乎触发器不合适

1) calls store action login when the form is submitted
 LoginPage.vue
 TypeError: wrapper.find(...).trigger is not a function
at Context.<anonymous> (webpack:///test/unit/specs/pages/LoginPage.spec.js:35:28 <- index.js:50826:29)

我要测试的vue组件

LoginPage.vue

    <template>
    <div class="container">
      <div class="login-page">
        <h1 class="title">Login to existing account</h1>
        <form @submit.prevent="submit()" class="form form--login grid">
          <div class="row">
            <label for="login__email">Email</label>
            <input type="text" id="login__email" class="input--block" v-model="email" v-on:keyup="clearErrorMessage" />
          </div>
          <div class="row">
            <label for="login__password">Password</label>
            <input type="password" id="login__password" class="input--block" v-model="password" v-on:keyup="clearErrorMessage" />
          </div><!-- /.row -->
          <div class="row">
            <label></label>
            <button id="submit" type="submit">Login</button>
          </div><!-- /.row -->
          <div v-show='hasError' class="row">
            <label></label>
            <p class="error">Invalid credentials</p>
          </div>
        </form>
      </div><!-- /.login-page -->
    </div>
    </template>

    <script>
    import store from '@/vuex/store'
    import { mapActions } from 'vuex'
    import _ from 'underscore'

    export default {
      name: 'loginPage',
      data () {
        return {
          email: 'john.doe@domain.com',
          password: 'john123',
          hasError: false
        }
      },
      methods: _.extend({}, mapActions(['login']), {
        clearErrorMessage () {
          this.hasError = false
        },
        submit () {
          return this.login({user: { email: this.email, password: this.password }})
          .then((logged) => {
            if (logged) {
              this.$router.push('shoppinglists')
            } else {
              this.hasError = true
            }
          })
        }
      }),
      store
    }
    </script>

LoginPage.spec.js

        import LoginPage from '@/pages/LoginPage'
        import Vue from 'vue'
        import Vuex from 'vuex'
        import sinon from 'sinon'
        import { mount } from 'avoriaz'

        Vue.use(Vuex)

        describe('LoginPage.vue', () => {
          let actions
          let getters
          let store

          beforeEach(() => {
            actions = {
              login: sinon.stub()
            }
            getters = {
              isAuthenticated: () => {
                state => state.isAuthenticated
              }
            }
            store = new Vuex.Store({
              actions,
              getters,
              state: {
                isAuthenticated: false,
                currentUserId: ''
              }
            })
          })

          it('calls store action login when the form is submitted', (done) => {
            const wrapper = mount(LoginPage, { store })
            wrapper.find('#submit').trigger('submit')
            wrapper.vm.$nextTick(() => {
              expect(actions.login.calledOnce).to.equal(true)
              done()
            })
          })
        })

Answer 1

应触发＆＃39;点击＆＃39;在表格标签上！

  it('calls store action login when the form is submitted', (done) => {
    const wrapper = mount(LoginPage, { store })
    const form = wrapper.find('form')[0]
    form.trigger('submit')
    wrapper.vm.$nextTick(() => {
      expect(actions.login.calledOnce).to.equal(true)
      done()
    })
  })

Vue.js单元测试w avoriaz，如何测试提交事件

1 个答案: