Unit testing 摩卡/卡玛-如何测试CSS属性

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

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

我引用了另一个堆栈溢出帖子

我换了摩卡咖啡。我还尝试在单击时检查要添加的属性。以下是我的期望

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会更容易，但我想知道是否有人对此进行过测试，或者知道如何调试它们？

在您的规范中，什么是

elem

？这是

$compiled

指令吗？ 您的

在每次
之前是什么样子的？
下拉列表的内部实现是什么样子的？

以下是我测试指令的方式：

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.eq
或
.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!

这向我显示了TypeError:expect（…）。to未定义
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!