Mocha / Karma - 如何测试 CSS 属性

Question

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

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

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

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

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!