I've been working on writing my own component tests in Ember.js 2.5. I'm currently trying to test a property change on button press. The tests can run just fine and throw no errors, but the jquery commands within the test don't seem to work. e.g this.$('button').click();
I've followed the guide here, https://guides.emberjs.com/v2.5.0/testing/testing-components/, and even followed along doing exactly what they did - same component names and everything, but still nothing. There are no errors thrown, jquery simply doesn't work.
Since the component testing uses the htmlbars-inline-precompile addon for rendering the component, I've made sure to follow all the instructions on that repo. Babel has been updated and bower has all the necessary prerequisites installed.
Here is the test code by request
test('it closes', function(assert) {
this.render(hbs`{{modals/personal-information}}`);
//making sure the property is set correctly before test
this.set('isOpen', true);
this.$('button').close();
assert.equal('isOpen', false);
}
This was answered with the help of Kitler.
I wasn't setting the property on the rendered component itself, but rather on the test. Once I understood how to set and retrieve properties on rendered component itself my test functioned perfectly.
I followed this guide, Ember component integration tests
Here is a new sample of my code.
test('it closes', function(assert) {
assert.expect(1);
this.set('open', true);
this.render(hbs`{{modals/personal-information isOpen=open id="modal"}}`);
var $button = this.$('#modal button');
$button.click();
assert.equal(this.get('open'), false);
});