1

我想單元測試使用webcomponents.js填充的我的Web組件。如何對單元測試多填充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與babelJasmine運行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 ...

+0

你有沒有找到一個解決方案或者你有如何做到這一點的例子嗎?我正在努力與相同的情況... – Dave

+0

nope,沒有解決方案... – ylerjen

回答