How to write Jasmine Test Cases for HamBurger Icon click function in JavaScript?

286 Views Asked by At

I am trying to write test cases for a javascript function which changes the menu Icon to a crossbar on click and expands nav-bar and closes back on clicking the crossbar when in small screen.

navbar.jsp

<div id="menuIconID" class="navbar-toggler" data-toggle="collapse" 
      data-target="#main-nav-collapse" onclick = "myFunction(this)">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
</div>

css file

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

js file function

function myFunction(x) {
  x.classList.toggle("change");
}

jasmine test file

describe("The Menu Icon ", function(){
    var spyEvent;
    beforeEach(function(){
        myFunction(x);
    });

    it("should change the icon to crossbar", function(){
        spyEvent = spyOnEvent('#menuIconID','click');
        $("#menuIconID").trigger("click");
        expect('click').toHaveBeenTriggeredOn('#menuIconID');
        expect(spyEvent).toHaveBeenTriggered();

    });
});

I really don't know how to write test cases for it and I am getting an error when running the file.

The Menu Icon should change the icon to crossbar
ReferenceError: x is not defined in http://localhost:8234/spec/testMenuToggler.js (line 17)
@http://localhost:8234/spec/testMenuToggler.js:17:3
attemptSync@http://localhost:8234/webjars/jasmine/jasmine.js:1886:9
Expected event [object Object] to have been triggered on #menuIconID
stack@http://localhost:8234/webjars/jasmine/jasmine.js:1577:17
buildExpectationResult@http://localhost:8234/webjars/jasmine/jasmine.js:1547:14
expectationResultFactory@http://localhost:8234/webjars/jasmine/jasmine.js:638:18
Spec.prototype.addExpectationResult@http://localhost:8234/webjars/jasmine/jasmine.js:330:29
addExpectationResult@http://localhost:8234/webjars/jasmine/jasmine.js:588:16

Please help why I am getting this error and with the solution. Thanks in advance.

0

There are 0 best solutions below