Модульное тестирование 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 объект - но ВСЕ свойства имеют пустую строку в качестве значения:

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

Поэтому в основном мне нужно вызвать событие фокуса на кнопке, а затем посмотреть, является ли значение раскрывающегося свойства css/style "видимость" "видимым". Я не могу понять, в чём дело, потому что я вижу, что в Karma-Debug все отлично отображается, но все свойства стиля пусты... Есть идеи, в чем проблема?

Answer 1

У меня была похожая проблема во время выполнения (не тесты). Свойство style является статическим и основано на начальном атрибуте style элемента html, поэтому он не обновляется динамически. Решением является использование Window.getComputedStyle (). Эта функция вычисляет (текущие!) Стили из таблиц стилей.