mercredi 27 janvier 2016

Component Integration test the relies on another third party component not working

I am getting the following error when running an integration component test. Any ideas why? The only slightly weird thing is that the {{input-mask}} component is used from an addon.

TypeError: (intermediate value).on is not a function at http://localhost:7357/assets/vendor.js:182304:7 at mod.state (http://localhost:7357/assets/vendor.js:152:29) at tryFinally (http://localhost:7357/assets/vendor.js:32:14) at requireModule (http://localhost:7357/assets/vendor.js:150:5) at requireFrom (http://localhost:7357/assets/vendor.js:123:12) at reify (http://localhost:7357/assets/vendor.js:108:22) at mod.state (http://localhost:7357/assets/vendor.js:151:17) at tryFinally (http://localhost:7357/assets/vendor.js:32:14) at requireModule (http://localhost:7357/assets/vendor.js:150:5) at Ember.DefaultResolver.extend._extractDefaultExport (http://localhost:7357/assets/vendor.js:66617:20)

Test:

import { moduleForComponent, test } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';

moduleForComponent('phone-mask', 'Integration | Component | phone mask', {
  integration: true
});

test('it can format landlines', function(assert) {
  assert.expect(1);
  this.set('value', 1111111111);
  this.render(hbs`{{phone-mask value=value}}`);
  assert.equal(this.$('input').val(), '(11) 1111 1111');
});

Component:

import Ember from 'ember';
import layout from './template';
import { startsWith } from '../../utils/elm-helpers';

const  { Component, observer } = Ember;

export default Component.extend({
  layout,

  // public
  value: null,
  format: '(99) 9999 9999',
  iconName: 'phone',
  disabled: false,

  valueUpdated: observer('value', function() {
    if (startsWith(this.get('value'), '04')) {
      this.set('format', '9999 999 999');
      this.set('iconName', 'mobile');
    } else {
      this.set('format', '(99) 9999 9999');
      this.set('iconName', 'phone');
    }
  })

});

Template:

<div class="input-group">
  <span class="input-group-addon">
      <i class="fa fa-{{iconName}}"></i>
  </span>

  {{input-mask mask=format name=name class="form-control" unmaskedValue=value disabled=disabled}}

</div>




Aucun commentaire:

Enregistrer un commentaire