단위 테스트 polyfilled webcomponents 맞춤 요소

Question

webcomponents.js polyfill을 사용하는 웹 구성 요소를 단위 테스트하고 싶습니다.

내 구성 요소가 es6 + scss로 만들어져 있고 빌드 작업을 통해 es6을 es5로 변환하고 scss를 CSS로 처리하고 html 파일에 두 결과 파일을 모두 삽입하여 내 응용 프로그램에서 내 구성 요소를 HTML Import 기능성.

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

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

내가 babel와 UT transpile하는 Karma 서버를 실행하고 Jasmine으로 UT를 실행할 수있는 테스트 작업을했습니다 이때 : 다음은 사용자 정의 요소 선언의 구성 요소 클래스의 예입니다.

내 모든 시험은 크롬으로 전달되지만, IE11에서의 게터/세터에 액세스하거나 방법이 실패하고 모든 테스트 ...

예 :

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

이 UT는 크롬에 전달합니다 ,하지만 IE에서 그것은 실패 할 것입니다 Expected undefined to equal <jasmine.any(Array)>

내 진단 polyfill 구성 요소를 만들려면 시간이 필요하다는 것입니다. 완전히 생성되기 전에 그리고 내 테스트에서 내가 구성 요소의 게터에 액세스 할 (내가 정의되지 않은 얻는 이유는 ...) 나는

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을 사용하지 않는 브라우저 (예 : 크롬)에서는 지연없이 업그레이드됩니다.

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