Question

运行集成组件测试时出现以下错误。有什么想法吗？唯一有点奇怪的是{{input-mask}}组件来自addon。

TypeError :(中间值）.on不是函数在http://localhost:7357/assets/vendor.js:182304:7 在mod.state（http://localhost:7357/assets/vendor.js:152:29）在tryFinally（http://localhost:7357/assets/vendor.js:32:14）在requireModule（http://localhost:7357/assets/vendor.js:150:5） at requireFrom（http://localhost:7357/assets/vendor.js:123:12）在reify（http://localhost:7357/assets/vendor.js:108:22）在mod.state（http://localhost:7357/assets/vendor.js:151:17）在tryFinally（http://localhost:7357/assets/vendor.js:32:14）在requireModule（http://localhost:7357/assets/vendor.js:150:5）在Ember.DefaultResolver.extend._extractDefaultExport（http://localhost:7357/assets/vendor.js:66617:20）

测试：

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

作为一般经验法则，最好尽可能使用计算属性。来自the guides：

观察者在Ember框架内部大量使用，但是 Ember app开发人员面临的大多数问题，计算属性都是适当的解决方案。

组件集成测试依赖于另一个不起作用的第三方组件

1 个答案: