如何對單元測試多填充web組件定製元素

Question

我想單元測試使用webcomponents.js填充的我的Web組件。

我的組件是在es6 + scss中製作的，並且使用構建任務，我將es6轉換爲es5，將scss處理爲css並將兩個結果文件插入到html文件中以在我的應用程序中使用我的組件，HTML Import functionnality。 這是自定義元素聲明組件類的一個實例：

class my-component extends HTMLElement { 
    createdCallback() {...} 
    ... //other component methods 

    //getter/setter 
    get colors() { 
    return this._color; 
    } 
    set colors(val) { 
    this._color = val; 
    } 
} 

在這個時候，我做了一個試驗任務，就可以發動Karma服務器，transpile UT與babel與Jasmine運行UT。

我所有的測試都通過Chrome瀏覽器，但在IE11，其中訪問的getter/setter或方法失敗的所有測試......

例如：

describe... 
    beforeEach(function() { 
    this.component = document.createElement(COMP_NAME); 
    } 
    it("should return an array", function() { 
    expect(this.component.colors).toEqual(jasmine.any(Array)); 
    }); 
}); 

這UT將通過在Chrome ，但在IE中它會失敗Expected undefined to equal <jasmine.any(Array)>

我的診斷是，填充需要一些時間來創建組件。在我的測試中，我將訪問該組件的吸氣劑，它已經完全建立之前，（這就是爲什麼我得到了一個未定義...） 我試圖測試與

setTimeout(() => { 
    expect(this.component.colors).to... 
}); 

推遲，但這項工作有時有有時沒有。 ..

有人可以告訴我如何解決這個問題嗎？作爲一個便箋，這不會發生在所有組件上。似乎只有一個有很多方法/訪問器和一些邏輯運行onCreate ...

Answer 1

您是否嘗試使用beforeEach函數中的whenDefined？

beforeEach(function(done) { 
    this.component = document.createElement(COMP_NAME); 
    customElements.whenDefined(COMP_NAME).then(done) 
} 

然後測試將在組件升級後運行。

在沒有使用polyfill（比如chrome）的瀏覽器中，它的升級沒有任何延遲。

見https://developers.google.com/web/fundamentals/web-components/customelements#api_reference