使用 Jasmine 进行单元测试，expect().toBeVisible()答案

【问题标题】：Unit testing with Jasmine, expect().toBeVisible()使用 Jasmine 进行单元测试，expect().toBeVisible()
【发布时间】：2014-11-30 00:54:49
【问题描述】：

我需要在单击事件执行后检测 CSS 显示值。我确定这是用户错误，但我无法让 Jasmine.js 报告单击后元素可见性是否已更改。

这里是codepen链接：http://codepen.io/nicholasabrams/pen/dPYoJr

这是代码本身：（这显然不是实际使用的情况，但它是一个非常简化的版本，重现了我目前遇到的问题）

$('#button1').on('click', function(){

  $(this).append('<button id="#button2">!!!!!</button>');

});

这是测试本身：

describe("button#1 click test", function(){

   beforeEach(function(){
     $('#button1').click();
   });

   it("Should inject a new button with #button2 as the id", function(){
      expect($('#button2')).toBeVisible();
   });

});

【问题讨论】：

标签： javascript jquery unit-testing jasmine jasmine-jquery

【解决方案1】：

首先 - 在您的笔中，您应该为 jasmine-jquery 添加外部脚本。接下来，一个按钮中的按钮，根据W3C是非法的Phrasing content, but there must be no interactive content descendant.茉莉就可以了，尝试附加到父级：

$('#button1').on('click', function(){
    $(this).parent().append('<button id="#button2">!!!!!</button>');
});

工作笔http://codepen.io/anon/pen/zxvGja?editors=101

【讨论】：

它是非法的这一事实与测试失败无关。那不是重点。其次，感谢您的帮助，但是您发布的笔的测试也失败了。我没有看到如何将附加按钮从按钮中取出来解决任何问题。让我知道我是否错了。我将在一秒钟内提供一个更“符合标准”的版本
在 FF33.1 上测试过，效果很好。你笔中的代码失败主要是因为“TypeError：expect(...).toBeVisible 不是一个函数”——你没有包括 jasmine-jquery
codepen.io/nicholasabrams/pen/GgpoPP 这是同样的问题，加载了 jasmine-jquery。我必须在这里遗漏一些愚蠢的东西，因为我之前使用过 jasmine，除了我通常设置一个夹具，而不是测试实际 DOM 交互的这种方式。