0

ember コンポーネント (コンポーネント B としましょう) があり、そのコンポーネントのテンプレートには別のコンポーネント (コンポーネント A) が含まれています。コンポーネント A のプロパティにバインドされたコンポーネント B のプロパティを計算した場合、ember-qunit を使用してテストしているときにバインディングは完全には機能していませんが、実際のアプリケーションではバインディングが機能しています。テストでは、プログラムでコンポーネント A または B に値を設定するとバインディングが機能しますが、ember ヘルパー (fillIn など) を使用してコンポーネント値を設定すると、バインディングは起動されません。ネストされていないコンポーネントでは、この問題は発生しません。

問題を示す jsfiddle は次のとおりです: http://jsfiddle.net/8WLpx/4/

以下の親コンポーネントは、ネストされたコンポーネントの拡張である可能性があることを無視してください。これは、問題を示すためだけのものです。

必要に応じて以下のコードを使用してください。

HTML/ハンドルバー

<!-- URL input -->
<script type="text/x-handlebars" data-template-name="components/url-input">
<div {{ bind-attr class=":input-group showErrors:has-error:" }}>
  {{input value=web_url class="form-control"}}
</div>
</script>

<!-- video URL input -->
<script type="text/x-handlebars" data-template-name="components/video-url-input">
{{url-input class=class value=view.value selectedScheme=view.selectedScheme web_url=view.web_url}}
</script>

コンポーネント Javascript

//=============================== url input component
App.UrlInputComponent = Ember.Component.extend({
  selectedScheme: 'http://',

  value: function(key, value, previousValue) {
    // setter
    if (arguments.length > 1) {
      this.breakupURL(value);
    }

    // getter
    return this.computedValue();
  }.property('selectedScheme', 'web_url'),

  computedValue: function() {
    var value = undefined;
    var web_url = this.get('web_url');
    if (web_url !== null && web_url !== undefined) {
      value = this.get('selectedScheme') + web_url;
    }
    return value;
  },

  breakupURL: function(value) {
    if(typeof value === 'string') {
      if(value.indexOf('http://') != -1 || value.indexOf('https://') != -1) {
        var results = /^\s*(https?:\/\/)(\S*)\s*$/.exec(value);
        this.set('selectedScheme', results[1]);
        this.set('web_url', results[2]);
      } else {
        this.set('web_url', value.trim());
      }
    }
  },

  onWebURLChanged: function() {
    // Parse web url in case it contains the scheme
    this.breakupURL(this.get('web_url'));
  }.observes('web_url'),
});


//=============================== video url input component
App.VideoUrlInputComponent = Ember.Component.extend({
  value: "http://",
  selectedScheme: 'http://',
  web_url: "",
});

テストコード

emq.moduleForComponent('video-url-input','Video URL Component', {
  needs: ['component:url-input',
          'template:components/url-input'],
  setup: function() {
    Ember.run(function() {
      this.component = this.subject();
      this.append();
    }.bind(this));
  },
});

emq.test('Test fill in url programmatically', function() {
    var expectedScheme = 'https://';
    var expectedWebURL = 'www.someplace.com';
    var expectedURL = expectedScheme + expectedWebURL;

    Ember.run(function() {
        this.component.set('selectedScheme', expectedScheme);    
        this.component.set('web_url', expectedWebURL);    
    }.bind(this));

    equal(this.component.get('value'), expectedURL, "URL did not match expected");
});

emq.test('Test fill in url via UI', function() {
    var expectedURL = 'https://www.someplace.com';

    fillIn('input', expectedURL);

    andThen(function() {
        equal(this.component.get('value'), expectedURL, "URL did not match expected");
    }.bind(this));
});
4

1 に答える 1

1

this.append() はテスト セットアップでは発生しません。標準のqunit「テスト」メソッドを呼び出す前に、ember qunit「テスト」ラッパーがすべてのビューをクリアするため、「テスト」メソッドで発生する必要があります。

于 2014-08-06T20:32:03.093 に答える