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'.

Freddafreddi

Please check out the documentation... It has code showing how to select a specific HTML in the template of the component under test. Then, it's only a matter of accessing this element's style property. – Colic

I get an error. See my edit above. – Freddafreddi

@user6251216 - I think that If you want to access the HTML DOM Element Object you need to wrap it with nativeElement, like this: let input = fixture.debugElement.query(By.css('input')).nativeElement. – Ramsdell

For this matter specifically I used the 'hidden' property on the debugElement. For other css classes the only thing that worked for me is the classList inside the nativeElement. The only downside of it that it has 'any' type. Anyway the whole thing involves a lot of voodoo. – Freddafreddi

@user6251216 Could you not just cast. ie as HTMLInputElement or <HTMLInputElement>input – Kamerad

Answer 1

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.

Freddafreddi

Does not work for me: Property 'hidden' does not exist on type 'DebugElement'. at Compiler.compiler.plugin (C:\Users\...\node_modules\@angular\cli\plugins\karma-webpack-throw-error.js:10:23) – Solleret

Try accessing the classList property of the nativeElement property in the debugElement – Freddafreddi

Answer 2

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');

Koestler

@AlexanderVolkov, then you have to make sure you have the input element(or any other selectors) in your DOM so that angular can find it and get its nativeElement afterwards. – Koestler