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?
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.