如何在JavaScript中为汉堡图标点击函数编写Jasmine测试用例？

我正在尝试为一个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>

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

请帮助我为什么会出现此错误以及解决方案。

---

提前谢谢。

我能看到的第一个问题是在您的jasmine文件中，您在每次

之前调用
myFunction（x）
。您需要将
x
声明为某物，可能是
$（“#menuIconID”）
？这可能会解释您的引用错误。@Steve我已将x声明为$（“#menuIconID”），但它不起作用，我得到了相同的错误<代码>变量x='#menuIconID'

@Steve在声明x

TypeError:x.classList在中未定义之后，我得到了另一个错误http://localhost:8234/src/menuToggler.js （第3行）myFunction@http：//localhost:8234/src/menuToggler.js:3:3@http://localhost:8234/spec/testMenuToggler.js:18:3 attemptSync@http：//localhost:8234/webjars/jasmine/jasmine.js:1886:9

Ah right，在这种情况下，x应该是

var x=document.getElementById（'menuIconID'）

我能看到的第一个问题是在您的jasmine文件中，您在

beforeach

中调用

myFunction（x）

。您需要将

x

声明为某物，可能是

$（“#menuIconID”）

？这可能会解释您的引用错误。@Steve我已将x声明为$（“#menuIconID”），但它不起作用，我得到了相同的错误<代码>变量x='#menuIconID'@Steve在声明x

TypeError:x.classList在中未定义之后，我得到了另一个错误http://localhost:8234/src/menuToggler.js （第3行）myFunction@http：//localhost:8234/src/menuToggler.js:3:3@http://localhost:8234/spec/testMenuToggler.js:18:3 attemptSync@http：//localhost:8234/webjars/jasmine/jasmine.js:1886:9

Ah right，在这种情况下，x应该是

var x=document.getElementById（'menuIconID'）
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