Mocha / Karma - 如何测试CSS属性

Question

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

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

我引用了另一个堆栈溢出帖子Testing whether certain elements are visible or not

我为摩卡更改了 toBe to .to.be 。我还尝试检查要在点击上添加的属性。以下是我的预期。

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会更容易，但我想知道是否有人测试过这个或知道如何调试这些？

Answer 1

在您的规范中，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.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!