Angular 2 + Jasmine - check if the item is visible

Question

I am testing a web application created using Angular (2+), I am using Jasmine + Karma as a testing environment. I searched a lot, but I can’t check if the element is visible or not, I thought I would find a canned helper or some useful method from Angular, but I didn’t.
I tried using the classList property of the HTMLElement , testing for :visible , but this does not work.
I feel that I am missing something basic, as it must be something basic to achieve.
So, in the example below, how can I verify that the div with id header-menu-dropdown-button is visible?

Here's a testing method I'm struggling with:

Template

 <div id="header-menu-dropdown-button" class="dropdown-closing-level" [hidden]="!showUserMenu" (click)="showMenu($event)"></div> <ul [hidden]="!showUserMenu" class="dropdown-menu" aria-labelledby="dropdown"> <li class="dropdown-item"><a href="#">Account</a></li> <li class="dropdown-item"><a href="#" (click)="logout($event)">Logout</a></li> </ul> 

Test

 beforeEach(async(() => { TestBed.configureTestingModule({ imports: [RouterTestingModule, TranslationsModule], declarations: [ AppHeaderComponent ], // declare the test component }) })); beforeEach(() => { fixture = TestBed.createComponent(AppHeaderComponent); comp = fixture.componentInstance; menuDropDownButtonDe = fixture.debugElement.query(By.css('#header-menu-dropdown-button')); menuDropDownButtonEl = menuDropDownButtonDe.nativeElement; }); it('menu should be closed by default', () => { //Here I want to check the visibility of the menuDropDownButtonEl element expect(menuDropDownButtonEl.classList.contains(":visible")).toBe(false); // <-- not working }); 

NOTE. The showMenu method simply switches the showUserMenu boolean value.

Answer 1

I unit test, checking for a hidden attribute.

expect(menuDropDownButtonEl.hasAttribute('hidden')).toEqual(true);