So I have a simple component which looks like this:
<div class="my-div">{{ value }}</div>
{{input class="my-input" type="text" value=value}}
And I have two tests like this:
test('get text from div', function(assert) {
this.set('value', 'my test value');
this.render(hbs`{{input-test value=value}}`);
assert.equal(this.$('.my-div').text(), 'my test value');
});
test('get value from input', function(assert) {
this.set('value', 'my test value');
this.render(hbs`{{input-test value=value}}`);
assert.equal(this.$('.my-input').attr('value'), 'my test value');
});
The first test passes, but the second one fails. this.$('.my-input').attr('value')
appears to be undefined
. Why? How can I make this test pass?