Angular 2 tests - get DOM element styles

Question

I want to test the functionality of my hide-show button in my Angular 2 app(Tests are written in Jasmine), so I need to check the value of the display property of the relevant element. How can I get this property using Angular's debugElement? Test code:

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

I get the error: Expected undefined to be 'false'.

Answer 1

I was having the same issue. The DebugElement.styles is always an empty object even if I set some style to that element explicitly(maybe bug in angular code?). So I would rather get that from the browser native element directly:

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

Answer 2

For anyone stumbling upon this example, the solution for this specific issue with display is the hidden property on the debugElement. It will contain true if the element is hidden and false otherwise.