Angular2ユニットのテスト - なぜnativeElementに空のCSSStyleDeclarationがあるのですか？

Question

ボタンがある場合とフォーカスしている場合の単純なヘッダーコンポーネントをテストしようとしています - 単にCSSの可視性プロパティを使用してドロップダウンを開きます。

これはhtmlです：

<nav class="navigation"> 
    <button type="button"> 
     <span>click here</span> 
    </button> 
    <ul> 
     <li> Text </li> 
     <li> Text </li> 
     <li> Text </li> 
    </ul> 
</nav> 

これは、SCSSスタイルです：

button { 

    span { 
     margin-right: 10px; 
    } 

    &:focus { 

     + ul { 
      visibility: visible; 
     } 
    } 
} 

ul { 
    position: absolute; 
    list-style: none; 
    z-index: 1000; 
    visibility: hidden; 
    transition: visibility 0.1s linear; 
    background-color: $color-primary; 
} 

そして、これはテストです：

it('should open dropdown on focus',() => { 

    let button = fixture.debugElement.query(By.css('button')); 
    button.triggerEventHandler('focus', null); 

    fixture.detectChanges(); 
    let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement; 

    console.log(dropdownElement); 
    console.log(dropdownElement.style); 

    expect(dropdownElement.style['visibility']).toBe('visible'); 

}); 

私は私が見ることができるテストを実行するとconsole.log(dropdownElement)が存在し、console.log(button.nativeElement)はCSSStyleDeclarationオブジェクトを返しますが、ALLプロパティは、値として空の文字列がありますので、基本的に私は必要なもの

CSSStyleDeclaration { 
    alignContent: "" 
    alignSelf: "" 
    ... 
    ... 
    ... 
    color: "" 
    visibility: "" 
    ... 
    ... 
} 

をボタンにフォーカスイベントをトリガして、ドロップダウンのCSS /スタイルプロパティ「可視性」の値が「見えているかどうかを確認することです" 私は何が間違っているのか分かりません。カルマ - デバッグですべてがうまくレンダリングされていますが、すべてのスタイルプロパティが空であることがわかります...何か問題がありますか？

Answer 1

実行時に（テストではなく）同様の問題が発生しました。 スタイルプロパティは静的で、html要素の初期スタイル属性に基づいているため、これは動的に更新されません。 解決策はWindow.getComputedStyle()です。この関数はスタイルシートから（現在の）スタイルを計算します。