Glimmer 中的組件單元測試

Question

對於經典的組件單元測試，我們如何將其遷移到 Glimmer？ 此組件單元測試正在測試未向用戶公開的本地道具。

const component = this.owner
  .factoryFor('component:some-component')
  .create({
    someModel: { foo: 'bar' }
  });

assert.equal(component.get('someLocalProp'), false);

Answer 1

這些確實是一種反模式，確實：單元測試組件通常是一種反模式：您實際上並沒有以這種方式測試組件的接口。 這就是我的意思：與組件的所有交互，無論是作為另一個開發人員調用它還是作為用戶與之交互，都是通過模板發生的。 像這樣對它進行“單元”測試並不代表最終用戶或調用它的其他開發人員將如何與之交互。

大多數時候，存在這樣的測試是因為開發人員想要檢查內部方法或 getter 的行為。 然而，這與我們在測試時應該做的完全相反。 我們只想測試公共合約：這就是讓我們能夠實際進行重構工作的原因：即在不更改公共合約的情況下更改內部實現。 依賴於內部行為的測試必然是過度耦合和脆弱的。 對於 UI 組件，這意味着像這樣的“單元”測試實際上總是過度耦合且脆弱。

例如，如果 getter 在模板中不直接可見，誰在乎它是否計算給定值？ 我們真的只關心計算的結果。

Glimmer 組件沒有直接對應的 API，部分原因是這個原因。 這里正確的模式是將組件測試重寫為集成測試，這確實允許您測試組件的實際接口（或者如果它沒有提供實際值，則將其刪除）。