I am trying to write a component integration test (using Ember CLI 2.3) for a toggle-button component that takes in a function that affects the "active" scope.
Everything works except for my integration test. In that test, I am passing in a true/false value into the active attribute of the component and a anonymous function that is supposed to toggle the active attribute into toggleAction. I believe the reason my test doesnt work is because the anonymous function this.set('active', !activeVal) is not setting the active value on the scope of the component.
How do I do this? How do I get the component scope outside the actual render.
Please see my code below:
The component will be used in the following fashion:
{{toggle-button toggleAction=(action "toggleIsPublic") active=subscriber.is_public}}
My Component
import Ember from 'ember';
export default Ember.Component.extend({
classNames: ["toggle-button"],
classNameBindings: ['active'],
click() {
this.get('toggleAction')();
}
});
My Test
test('it calls the passed in function', function(assert) {
let activeVal = false;
this.set('activeVal', activeVal);
this.set("passedInFunction", () => { this.set('active', !activeVal); } );
this.render(hbs`{{toggle-button toggleAction=(action passedInFunction) active=activeVal}}`);
this.$('.toggle-button').click();
assert.ok(this.$('.toggle-button').hasClass('active'), 'active is toggled' )
});
Aucun commentaire:
Enregistrer un commentaire