用于单击和切换事件的 Jasmine 测试用例答案

【问题标题】：Jasmine Test Cases for click and toggle events用于单击和切换事件的 Jasmine 测试用例
【发布时间】：2015-12-07 13:02:40
【问题描述】：

Struggling on writing the testcases on click,toggle,slideUp,fade events.

How do I write jasmine test cases to check if div is clicked or not and the slideUp and down and toggle events. Is there a provision in jasmine to test them.

已经列出了我的代码有点击测试用例供参考。

SpecRunner.html file 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Jasmine Spec Runner v2.3.4</title>
  <link rel="shortcut icon" type="image/png" href="lib_jasmine/jasmine-   2.3.4/jasmine_favicon.png">
  <link rel="stylesheet" href="lib_jasmine/jasmine-2.3.4/jasmine.css">
  <script src="scripts/jquery.js"></script>
  <script src="lib_jasmine/jasmine-2.3.4/jasmine.js"></script>
  <script src="lib_jasmine/jasmine-2.3.4/jasmine-html.js"></script>
  <script src="lib_jasmine/jasmine-2.3.4/boot.js"></script>
  <script src="lib_jasmine/jasmine-2.3.4/jasmine-jquery.js"></script>
  <!-- include source files here... -->
  <script type="text/javascript" src="js/eigMain.js"></script>
  <script type="text/javascript" src="js/sinon.js"></script>
  <!-- include spec files here... -->
  <script type="text/javascript" src="js/specEig.js"></script>
</head>
<body>
</body>
</html>

 js file for reference

    $('#screenPane').click(function(e){
            $('#Panel,.FixedHeader').toggleClass('fullscreen'); 
            $('#eIcon').toggle();
            $('#cIcon').toggle();
            $(".Col").toggle();
            $('html, body').animate({scrollTop: $('#total-results').offset().top}, 800);
            $('#nav_up').fadeIn('slow'); 
            $('#nav_down').hide(); 
                });

Spec.js 文件上有点击事件测试用例。它给了我错误：在 [object Object] 上触发了预期的事件 [object Object]。此外，切换测试用例无法执行。

it ("should invoke the screenPane click event.", function() {
    spyOnEvent($('#screenPane'), 'click');
    $('#screenPane').click();
    expect('click').toHaveBeenTriggeredOn($('#screenPane'));
  });

请帮忙

【问题讨论】：

标签： jasmine jasmine-jquery

【解决方案1】：

虽然大多数代码接受点击事件或对点击事件做出反应，但在各种平台和浏览器上检测它可能会很困难。您可能会更好地检查toggle() 处理的 CSS 类是否已被交换以响应点击。要检查将要移动的任何东西，只需检查起始 X/Y 坐标，然后将它们与动画完成时的坐标进行比较，然后检查它们是否不同（以免与严格定义的值。）

//Checking coordinates
it ("should invoke the screenPane click event.", function() {
    var coords = $('screenPane').offset();
    $('#screenPane').click();
    var newCoords = $('screenPane').offset();
    expect(newCoords).not.toEqual(coords);
  });

//Checking classes
it ("should invoke the screenPane click event.", function() {
    var classes = $('screenPane').val('class');
    $('#screenPane').click();
    var newClasses = $('screenPane').val('class');
    expect(classes).not.toEqual(newClasses);
  });

【讨论】：

Getting TypeError: expect(...).not.equal 不是调用上述函数的函数。我错过了一些js文件吗？？
非常抱歉，在写这篇文章的时候又溜回了 chai 中了一分钟。它应该是 toEqual 而不是 equal。此外，您可能需要检查 X 或 Y 坐标而不是整个对象，因为我不记得 Jasmine 在比较两个对象并且它们的值不同时会如何动作。它应该可以工作，但以防万一您遇到问题，您应该能够使用自定义匹配器 (jasmine.github.io/2.0/custom_matcher.html)