testing for click event with jasmine?

Question

I am required to write a Jasmine.js test to test a menu icon for what will happen when it is clicked, (the menu bar slides in when it is clicked for the first time, and out when it is clicked for the second time which it does, but my test fails to demonstrate it)

I came up with this idea but the spec-runner shows (expected false to be true). any help on what could be the problem?

describe('The menu', function () {
     /* TODO: Write a test that ensures the menu changes
      * visibility when the menu icon is clicked. This test
      * should have two expectations: does the menu display when
      * clicked and does it hide when clicked again.
      */

      it('the menu changes visibility when the menu icon is clicked', function () {

          var menuIconClicked, menuChangesWhenClicked = false, 
          menuChangesWhenClickedAgain = false;

          $(".menu-icon-link").click(function(){
            var $this = $(this);
            $(this).data('clicked', true);
            if($(this).data('clicked')) {
                menuIconClicked=true // if menu icon is clicked, set the menuIconClicked value to true
                 if (menuIconClicked && $('body').hasClass(null)) {
                    menuChangesWhenClicked=true;

          }
            }
            if($this.data('clicked') && menuIconClicked===true) { 
                menuIconClicked=false // if menu icon is clicked when it already has been clicked aka menuIconClicked===true
                if (!menuIconClicked && $('body').hasClass('menu-hidden')) {
                    menuChangesWhenClickedAgain=true;

          }
            }

        });
            expect(menuChangesWhenClicked).toBe(true);

            expect(menuChangesWhenClickedAgain).toBe(true);

      });

});

Answer 1

It looks like you are already using Jasmine and JQuery, so I would suggest using also the jasmine-jquery.js library to help you with tracking states?

This was a good reference: Testing That A DOM Event Was Fired

To get the code below to work, just include jasmine-jquery.js in your project folder, link the <\\script> via your index.html's <\\head> and your set. Hope this helps.

describe('The menu', function() {
    // Add a spyOnEvent
    let spyEvent, menu;

    beforeEach(function() {
        // I assumed your menu icon has a unique ID of 'menuIconID'
        // so I passed onto a spy listener.
        spyEvent = spyOnEvent('#menuIconID', 'click');
    });
    it('the menu changes visibility when the menu icon is clicked', function() {

        // Click once
        $("#menuIconID").trigger("click");
        expect('click').toHaveBeenTriggeredOn('#menuIconID');
        expect(spyEvent).toHaveBeenTriggered();
        menu = $('body').attr('class'); // assign the new class
        expect(menu).toBe('');

        // Click again
        $("#menuIconID").trigger("click");
        expect('click').toHaveBeenTriggeredOn('#menuIconID');
        expect(spyEvent).toHaveBeenTriggered();
        menu = $('body').attr('class'); // update the new class
        expect(menu).toBe('menu-hidden');
    });
});