Ember 组件内的集成测试组件

Question

我已经在我的应用程序中安装了 ember-bootstrap。然后，我创建了一个登录表单组件。

在app/templates/components/login-form.hbs中，有2个Bootstrapinput和1个button，分别是：

{{#bs-form onSubmit=(action "login") as |form| }}
    {{#form.group validation=emailValidation}}
        <label for="email">Email</label>
        <input id="email" value={{email}} name="email" class="form-control" oninput={{action (mut email) value="target.value"}} type="text" placeholder="Email" required>
    {{/form.group}}
    {{#form.group validation=passwordValidation}}
        <label for="password">Password</label>
        <input id="password" value={{password}} name="password" class="form-control" oninput={{action (mut password) value="target.value"}} type="password" placeholder="Password" required>
    {{/form.group}}
    {{bs-button defaultText="Login" type="primary" buttonType="submit"}}
{{/bs-form}}

我在Components做集成测试的时候，好像没有识别this。

test('it renders', function(assert) {
  assert.expect(3);
  assert.equal(this.$('input').attr('name'),'email','has Email');
  assert.equal(this.$('input').attr('name'),'password','has Password');
  assert.equal(this.$('button').text(),'Login','has Login');
});

在 input 中，我得到了 undefined 个结果。为 Bootstrap 中的 form.group 组件调用输入以用于组件测试的正确方法是什么？

Answer 1

我相信您忘记了在测试中渲染该组件；那就是你需要添加以下内容：

this.render(hbs`{{login-form}}`);

在断言任何事情之前。您还需要更改第二个断言以断言组件中的第二个输入。反正;我已经复制了您的组件并在以下 twiddle 中更正了您的测试。希望对你有帮助。

Ember 组件内的集成测试组件

Ember Integration Test Component Within Component

integration-testing

twitter-bootstrap

ember.js

ember-bootstrap