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

Question

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>

Patrick Berkeley Patrick Berkeley · Accepted Answer · 2016-01-29T08:15:04

I don't know why the test is failing, but here are some suggestions on refactoring the component.

import Ember from 'ember';
import layout from './template';

const  {
  Component,
  computed,
  get
} = Ember;

export default Component.extend({
  layout,

  // public
  disabled: false,
  value: null,

  // I'm guessing at what the `startsWith` helper does. Even if
  // `computed.match` doesn't do the correct thing, I'd keep the
  // `valueStartsWithFour` computed property and wrap whatever
  // logic you need in it.
  valueStartsWithFour: computed.match('value', /^04/),

  format: computed('valueStartsWithFour', function() {
    const valueStartsWithFour = get(this, 'valueStartsWithFour');

    return valueStartsWithFour ? '9999 999 999' : '(99) 9999 9999';
  }),

  iconName: computed('valueStartsWithFour', function() {
    const valueStartsWithFour = get(this, 'valueStartsWithFour');

    return valueStartsWithFour ? 'mobile' : 'phone';
  })
});

As a general rule of thumb, it's preferable to use computed properties when you can. From the guides:

Observers are used heavily within the Ember framework itself, but for most problems Ember app developers face, computed properties are the appropriate solution.

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

1 Answers