Ember Integration Test Component Within Component

Question

I have installed ember-bootstrap in my application. Then, I created a login-form component.

In the app/templates/components/login-form.hbs, there are 2 Bootstrap input and 1 button, which are the following:

{{#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}}

When I do integration test in Components, it does not seem to identify 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');
});

In the input, I get undefined results. What is the proper way to call input for a form.group component in Bootstrap, to be used in the component testing?

Answer 1

I believe you have forgotten to render the component within your test; that is you need to add the following:

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

before asserting anything. You also need to change your second assertion to assert the second input within your component. Anyway; I have copied your component and corrected your test in the following twiddle. I hope it helps.