Question

我有一个带密码字段的简单表单。如果密码输入字段为空，则显示此范围：

<span id='password-required' v-show='!validation.password'>Required</span>

一旦输入至少一个字符，就会隐藏'Required'消息。这个逻辑在浏览器中运行得很好。问题是我似乎无法让单元测试工作。

我认为nextTick()会修复它，但事实并非如此。我在电子邮件领域使用了与此非常类似的代码，它可以正常工作。我评论了两行，我也试过，但也失败了。使用PhantomJS。

如何在密码字段中添加值并验证“必需”＆＃39;消息变得无形？

it(`Hides 'Required' message (password input contains data).`, done => {
  // Extend the component to get the constructor, and initialize directly.
  let email = 'a@b'
  const Constructor = Vue.extend(Login)
  const component = new Constructor({
    propsData: {
      emailentry: email
    }
  }).$mount()

  let password = '123'
  component.$el.querySelector('#password').value = password

  //This line passes.
  expect(component.$el.querySelector('#password').value).to.equal(password)

  // Confirm 'Required' message is hidden.
  Vue.nextTick(() => {
    expect(component.$el.querySelector('#password-required').style.display).to.equal('none')

    // expect(component.validation.password).to.equal(true)
    // expect(!!component.user.password.trim()).to.equal(true)
    done()
  })
})

Login.spec.js Test File（未通过测试已被注释掉。）

Login.vue Component File

Answer 1

我发现解决方案是将密码数据传递给组件构造函数，因为它像<input v-model="password">这样绑定到输入标记。

let thePassword = '123'

// Extend the component to get the constructor, which we can then initialize directly.
const Constructor = Vue.extend(Signup)
const component = new Constructor({
  propsData: {
    emailentry: email
  },
  data: {
    password: thePassword        
  }
}).$mount()

现在测试正在进行中。

单元测试VueJS Karma Mocha ExpectJS nextTick不工作

1 个答案: