Угловые тесты 2 - получить стили элементов DOM

Я хочу проверить функциональность моей кнопки скрытого просмотра в своем приложении Angular 2 (тесты написаны в Jasmine), поэтому мне нужно проверить значение свойства display соответствующего элемента. Как я могу получить это свойство, используя Angular debugElement? Тестовый код:

let input = fixture.debugElement.query(By.css('input'));
expect(input.styles['visibility']).toBe('false');

Я получаю сообщение об ошибке: Ожидается, что неопределенное значение будет false.

Ответ 1

Для тех, кто наткнулся на этот пример, решение этой конкретной проблемы с display является hidden свойством debugElement. Он будет содержать true если элемент скрыт и false противном случае.

Ответ 2

У меня была такая же проблема. DebugElement.styles всегда является пустым объектом, даже если я устанавливаю некоторый стиль для этого элемента явно (может быть, ошибка в угловом коде?). Поэтому я предпочел бы получить это из native element браузера напрямую:

let input = fixture.debugElement.query(By.css('input'));
expect(input.nativeElement.style.visibility).toBe('false');