组件集成测试依赖于另一个第三方组件无法工作

Question

在运行集成组件测试时，我会得到以下错误。知道为什么吗？唯一有点奇怪的是，{{input-mask}}组件是从副词中使用的。

Ember.DefaultResolver.extend._extractDefaultExport：(中间值).on不是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:151:17) at tryFinally (http://localhost:7357/assets/vendor.js:32:14) at tryFinally(http://localhost:7357/assets/vendor.js:32:14) at mod.state(code>C12)

测试：

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');
});

构成部分：

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');
    }
  })

});

模板：

<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>

Answer 1

我不知道为什么测试失败，但是这里有一些重构组件的建议。

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';
  })
});

作为一般的经验法则，最好在可能的情况下使用计算属性。来自导游

观察者在Ember框架本身中被大量使用，但是对于Ember应用程序开发人员面临的大多数问题，计算属性是合适的解决方案。