茉莉花单元测试中的元素不是：隐藏 [英] Jasmine unit testing an element is not :hidden

问题描述

我有我写的测试的AngularJS指令。我已经重新在这个普拉克问题： http://plnkr.co/edit/gHoGwI6TZhsgKVwIb1uI p = preVIEW

谁能告诉我，为什么第二次测试失败，以及如何解决它？

code：

  VAR应用= angular.module（对myApp，[]）;
app.directive（myDirective功能（）{
  返回{
    模板：＆LT; D​​IV＆GT;你好，这是我的指令和LT; / DIV＆GT;！
  }
  }）;描述（测试隐藏功能（）{
  变量$编译，$范围，$文件;  beforeEach（注（功能（_ $ compile_，$ rootScope，_ $ _文档）{
    $编译= _ $ compile_;
    $范围= $ rootScope $新的（）。
    $文件= _ $ document_;
  }））;  功能getElement（）{
    VAR元= angular.element（＆LT; D​​IV我-指令＆GT;＆LT; / DIV＆gt;中）;
    $编译（元）（$范围内）;
    归元;
  }  它（通行证功能（）{
    VAR元= getElement（）;
    期待（element.is（：隐藏））TOBE（真）。 //通行证
  }）;  它（失败，函数（）{
    VAR元= getElement（）;
    $ document.body.append（元）;
    element.show（）;
    期待（element.is（：隐藏））TOBE（假）。 //失败
  }）;  }）;
 

解决方案

您需要将您的元素添加到DOM;

我已经用快速的解决方案更新了code。当然，你可以把它添加到在beforeEach DOM和从一个afterEach DOM中删除它。

http://plnkr.co/edit/wRLhak1rDqnqfHMbKoWs?p=$p$ PVIEW

I have an AngularJS directive that I am writing tests for. I have recreated the problem in this plunk: http://plnkr.co/edit/gHoGwI6TZhsgKVwIb1uI?p=preview

Can anyone tell me why the second test fails and how to fix it?

Code:

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
  return {
    template: "<div>Hello this is my directive!</div>"
  }
  });

describe("Testing hidden", function() {
  var $compile, $scope, $document;

  beforeEach(inject(function(_$compile_, $rootScope, _$document_){
    $compile = _$compile_;
    $scope = $rootScope.$new();
    $document = _$document_;
  }));

  function getElement() {
    var element = angular.element("<div my-directive></div>");
    $compile(element)($scope);
    return element;
  }

  it("passes", function() {
    var element = getElement();
    expect(element.is(":hidden")).toBe(true); // Passes
  });

  it("fails", function() {
    var element = getElement();
    $document.body.append(element);
    element.show();
    expect(element.is(":hidden")).toBe(false); // Fails
  });

  });

解决方案

You need to add your element to the DOM;

I've updated your code with a fast solution. Of course you can add it to the DOM in the beforeEach and remove it from the DOM in an afterEach.

http://plnkr.co/edit/wRLhak1rDqnqfHMbKoWs?p=preview

这篇关于茉莉花单元测试中的元素不是：隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！