2

我负责测试的 angular 指令使用点击处理程序操纵大部分 css。此外，它在元素内部添加了 css 样式。

 angular.element(dropDown).css({display: 'block'});

我引用了另一个堆栈溢出帖子测试某些元素是否可见

我将toBe 更改为 .to.be 以获取 mocha。我还尝试检查单击时要添加的属性。以下是我的期望。

expect(elem('.dropdown-menu').css('display')).to.be('none');
expect(elem.getAttribute('display')).to.be('block');

但是，我越来越

[[object HTMLUListElement]]' is not a function 
TypeError: elem.getAttribute is not a function

我知道在指令中没有这样的css会更容易，但我想知道是否有人对此进行了测试或知道如何调试这些？

4

1 回答 1

4

elem您的规范的上下文是什么？这是$compiled指令吗？

你beforeEach看起来像什么？

的内部实现是dropDown什么样的？

这就是我测试指令的方式：

describe('directive', function () {
  var el, $scope; 

  beforeEach(function () {
    module('my.mod');

    inject(function ($compile, $rootScope) {
      $scope = $rootScope.$new();
      el     = $compile('<some-custom-dir></some-custom-dir>')($scope);

      $scope.$digest();
      // or if isolated $scope: 
      el.isolateScope().$digest();
    });
  });

  it('some css property', function () {
    expect(el.css('display')).to.eq('block');
  });

  it('some attribute', function () {
    expect(el[0].getAttribute('something')); // You need to unwrap the angular.element(el) with [0] to access the native methods. 
  });

  it('some other attribute', function () {
    expect(el.attr('someAttr')).to.eq('...'); // Or just use .attr()
  });
});

另外，to.be 不能这样使用。您可以通过to.be以下方式使用：

.to.be.true; 
.to.be.false;
.to.be.null;
.to.be.undefined;
.to.be.empty;
.to.be.arguments;
.to.be.ok;
.to.be.above();
.to.be.a(Type);
.to.be.an(Type);
.to.be.closeTo(min, max); // delta range
.to.be.instanceOf(Constructor);
.to.be.within(min, max);
.to.be.at.most(max);
.to.be.below(max);
.to.be.at.least(min);
.to.be.above(min);

您正在寻找的是.to.eqor.to.equal方法。

expect('asdf').to.be('asdf'); // Nope!
expect('qwer').to.eq('qwer'); // Yay!

expect([]).to.eq([]);         // Nope..
expect([]).to.deep.equal([]); // Yay!

expect({}).to.eq({});  // Nope..
expect({}).to.eql({}); // Yay!
于 2015-07-18T09:52:02.650 回答