ポリフェイルされたWebコンポーネントをテストする方法カスタム要素

Question

webcomponents.jsポリフィルを使用するWebコンポーネントを単体テストしたい。

私のコンポーネントはes6 + scssで作成され、ビルドタスクではes6をes5に変換し、scssをCSSに処理し、両方の結果ファイルをhtmlファイルに挿入して、自分のアプリケーションをHTML Import機能性。私はbabelとKarmaサーバー、transpile UTを起動し、JasmineでUTを実行することができ、テスト作業を行った。このとき

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

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

：ここ は、カスタム要素宣言のためのコンポーネントクラスの一例です。このUTは、Chromeで渡します

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

：...

例を

すべての私のテストは、Chromeで渡しているが、IE11では、ゲッター/セッターまたはメソッドにアクセスするすべてのテストが失敗していますしかし、IEでそれは失敗するでしょうExpected undefined to equal <jasmine.any(Array)>

私の診断は、コンポーネントを作成するのに時間がかかることです。それは完全に作成されています前に、私のテストでは、私はコンポーネントのゲッターにアクセスします（私は未定義の取得、なぜこれが...） 私は

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

でテストを延期しようとしたが、この作品、時には、時にははありません。 ..

私はこれをどのように修正できるか教えていただけますか？ 補足として、これはすべてのコンポーネントで発生するわけではありません。実行する多くのメソッド/アクセサといくつかのロジックを持つものだけであるようだ...

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