0

我的页面中有一些复选框JSP以及相同数量的“div”元素。

如果复选框被选中，则对应的div应该是可见的，其余的 `divs 应该被隐藏。

例如，如果复选框 ( id='first') 被选中，那么 div ( id='divFirst') 应该是可见的等等。

我的 JQuery 代码是：

$("input[name='category']:checkbox").click(function () {
  var av = document.getElementsByName('category');
  for (var e = 0; e < av.length; e++) {
    var divName = "#div" + av[e].id;
    if (av[e].checked == true) {
      $(divName).show();
    } else {
      $(divName).hide();
    }
  }
}

这是我的 jquery 代码，它根据复选框隐藏/显示页面划分。

但我需要编写 Jasmine 脚本来测试它，而且我是 Jasmine 脚本的新手。所以任何人都可以告诉我如何编写 Jasmine 脚本来测试它。

4

1 回答 1

0

首先，您必须将元素添加到测试页面的正文中。这将在您的所有测试中完成，beforeEach因此每个测试都具有相同的元素。请注意，您必须重构代码，因为如果您将脚本原样放入测试中，它将尝试在 DOM 结构之前添加 clickHandler，该结构将添加到 before 块中。所以只需将它包装成一个可以在beforeEach块中调用的函数

describe('check box', function () {
  beforeEach(function () {
    $('body').append('<input name="categoty" type="checkbox"><category id="id1"><div id="divid1"></div></category>')
    //callYourFunction that adds the clickHandler
  })

})

然后，您必须为要测试的每个案例添加测试。

describe('check box', function () {
  beforeEach(function () {
    $('body').append('<input name="categoty" type="checkbox"><category id="id1"><div id="divid1"></div></category>')
    //callYourFunction that adds the clickHandler
  })

  it('will hide the div when checkbox is checked', function () {
    //trigger the click event
    $('input[name="category"]:checkbox').trigger('click');
    expect($('divid1').css('display')).toEqual('
    none ');
})

})
于 2013-08-17T09:02:35.087 回答