Question

我正在尝试编写一个JavaScript函数的测试用例，该函数在单击菜单时将菜单图标更改为横杆，并在小屏幕中展开导航栏，并在单击横杆时关闭，然后关闭。

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文件

.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文件功能

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

茉莉花测试文件

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();

    });
});

我真的不知道如何为它编写测试用例，并且运行文件时出错。

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

请帮助我为什么会出现此错误以及解决方法。预先感谢。

如何用JavaScript编写HamBurger Icon click函数的Jasmine测试用例？

0 个答案: