How to test accordion using Protractor?

Question

Sometimes my user reports that accordion in my application is not working . So i want test whether the accordion is working or not working. I am using Angular js in frontend. Currently i am testing using protractor e2e framework.

My accordion markup looks like

before clicking the accordion division

<div id="accordion"></div>

after click

<div id="accordion-expand">

so the change is id

I find difficult while identifying css change in protractor. is there any other way to test this?

Answer 1

Try this:

// Given
var accordion = element(by.id('accordion'));
expect(accordion.isPresent()).toBeTruthy();

// When
accordion.click();

// Then
expect(accordion.isPresent()).toBeFalsy();
expect(element(by.id('accordion-expand')).isPresent()).toBeTruthy();

Hope this helps.