Ember 1.10升級後渲染的組件測試失敗

Question

我正在測試組件，特別是渲染後的窗體。我接近這個數字as described in the Ember Guides。

特別是，該組件具有三個計算屬性，這些屬性根據支持模型顯示渲染元素上的不同類。我正在調整Ember.run()塊中的屬性，然後再次查看渲染的組件。

這裏有趣的是，即使通過觸摸他們觀察到的屬性，計算出的屬性似乎也不會重新計算。後來測試哪個不要測試渲染 - 只是從組件返回 - 通過。

這裏是我的測試代碼：

moduleForComponent('wizard-tab', "Component - WizardTab", { 
    setup: function() { 
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: tabs.all()[1] }); 
    } 
}); 

test('#render', function() { 
    let tab = this.tab; 
    ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span"); // Passes 
    // Note that both of the additional states observe stepCompleted 
    // so I need to touch that to get them to recalculate 
    Ember.run(function() { 
    tab.set('stepCompleted', 2); 
    tab.set('tab', WizardTab.all()[4]); 
    }); 

    ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class"); // Fails 

    Ember.run(function() { 
    tab.set('stepCompleted', 3); 
    tab.set('tab', WizardTab.all()[1]); 
    }); 

    ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class"); // Fails 
}); 

的第一個斷言通過，接下來的兩個失敗。使用console.log聲明我已驗證set()正在工作，但由它們計算的屬性返回了錯誤的結果。

這裏的計算屬性定義的一個：

disabled: function() { 
    return this.get('tab.stepNumber') > (this.get('stepCompleted') + 1); 
    }.property('stepCompleted') 

（我真的得到false爲5 > 2，當我把在console.log支票上的比較。）有我丟失的東西會阻止從當我檢查組件的後續渲染時更新？

這是燼隙CLI 0.2.0，Ember 1.10.0和ember-cli-qunit 0.3.8。

ETA：可能相關：此測試通過了Ember 1.8和ember-cli-qunit 0.3.1。這是對Ember CLI 0.2.0的更新，以及伴隨着Ember和引起失敗的ember-cli-qunit更新。

（ETA：從下kiwiupover的評論注意到下面這部分是不相關的問題，導遊可能不會顯示目前最好的方式做到這一點。）

注意，導遊使用類似的模式：

test('changing colors', function() { 

    // this.subject() is available because we used moduleForComponent 
    var component = this.subject(); 

    // we wrap this with Ember.run because it is an async function 
    Ember.run(function() { 
    component.set('name','red'); 
    }); 

    // first call to $() renders the component. 
    equal(this.$().attr('style'), 'color: red;'); 

    // another async function, so we need to wrap it with Ember.run 
    Ember.run(function() { 
    component.set('name', 'green'); 
    }); 

    equal(this.$().attr('style'), 'color: green;'); 
}); 

我試着在andThen()包裝的第二和第三斷言但引發的錯誤 - andThen()是不確定的。

Answer 1

我通過開發一個新的分支開發（我們的默認分支）並重新運行更新來實現這個工作。下面是我的原始傳遞和工作的區別：

• 更多的組件更新，我認爲只是因爲我第一次嘗試已經過去了一段時間。 ember-resolver,loader.js,ember-cli-app-version和ember-cli-dependency-checker已全部向上移動。我不知道是否有任何重要的，但他們確實改變了。
• 我認爲，關鍵部分是在單獨的測試塊和中隔離三個測試，更新Ember.run()塊中的主題，用於使用來自設置組件的不同屬性值的每個測試。

下面是三個試驗樣子，當他們經過：

moduleForComponent('wizard-tab', "Component - WizardTab", { 
    setup: function() { 
    this.tab = this.subject({ step: 2, stepCompleted: 1, tab: WizardTab.all()[1] }); 
    } 
}); 

test('Rendered active tabs have a detail span', function() { 
    let tab = this.tab; 
    ok(this.$().find('span.wizard-tab-detail').length, "Active tab has a detail span"); 
}); 

test('Rendered future tabs have a disabled class', function() { 
    let tab = this.tab; 
    Ember.run(function() { 
    tab.set('step', 2); 
    tab.set('stepCompleted', 2); 
    tab.set('tab', WizardTab.all()[4]); 
    }); 
    ok(this.$().find('span.wizard-tab-icon-disabled').length, "Future tabs have a disabled class"); 
}); 

test('Rendered inactive tabs have a done class', function() { 
    let tab = this.tab; 
    Ember.run(function() { 
    tab.set('step', 2); 
    tab.set('stepCompleted', 3); 
    tab.set('tab', WizardTab.all()[1]); 
    }); 
    ok(this.$().find('span.wizard-tab-icon-done').length, "Inactive tabs have a done class"); 
}); 

我相信最後的變化 - 從一個移動檢測一些Ember.run()塊三 - 什麼是真的做到了。我在模板中使用了一些{{log value}}行來查看哪些值被髮送到模板，並且它一直使用setup塊中的主題三次，直到我添加了Ember.run()塊。