0

I have a hidden menu which appear when I click on the burger icon. I want to test the event handler with Jasmine. I am very new to Jasmine and I couldn't figure out how.

Here is my jQuery code:

menuIcon.on('click', function() {
        $('body').toggleClass('menu-hidden');
    });

Could you please help me?

Islam Sayed
  • 58
  • 7

1 Answers1

0

I didn't run it myself, but the idea is to click on menuIcon and check your body selector has the class you set; Click it again and check if the class is not set any more. Something like ... 

describe("on menu icon click", function () {
    it("should toggle menu", function () {
        menuIcon.click();
        expect($("body").hasClass("menu-hidden")).toBe(true);
        menuIcon.click();
        expect($("body").hasClass("menu-hidden")).toBe(false);
    });
});
Slava Ivanov
  • 6,666
  • 2
  • 23
  • 34
  • I tried `menuIcon.click();` but didn't work. It worked with `menuIcon.triger('click');` instead. And I don't find a reason for that?! – Islam Sayed May 09 '18 at 12:17
  • @IslamSayed Please see the [jQuery advantages/differences in .trigger vs .click](https://stackoverflow.com/questions/9666471/jquery-advantages-differences-in-trigger-vs-click) topic for more information on additional request you have. If you satisfied with the answer on original question, consider to accept it. Accepting Answers: [How does it work?](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work?answertab=active#tab-top) – Slava Ivanov May 09 '18 at 13:26