mardi 15 mars 2016

Ember CLI Component Integration Testing - How to access component scope outside of render

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