Angular.js:测试点击指令

Question

我有一个Angular.js指令，我正试图为它写一个测试。基本上，它是checkbox的包装器，比如当单击包装器时，checkbox的状态就会改变。问题是我不知道如何在单元测试中复制这种行为。我的测试是这样的：

describe('Checkbox field', function() {
var elm, scope;

    beforeEach(module('MyApp'));
    beforeEach(module('app/partials/checkboxfield.html'));

    beforeEach(inject(function($rootScope, $compile) {
        elm = angular.element(
          '<checkboxfield data="data" model="value"></checkboxfield>');
        scope = $rootScope;
        scope.value = false;
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should change checkbox value on wrapper click', inject(function($compile, $rootScope) {
        var wrapper = elm.find('div').eq(0);
        //var wrapper = $('div.checkbox');
        wrapper.click();
        expect(checkbox.prop('checked')).toBe(true);
        expect(scope.value).toBe(true);
        wrapper.click();
        expect(checkbox.prop('checked')).toBe(false);
        expect(scope.value).toBe(false);
    }));
});

Angular.js附带了jqLite，所以当我运行"elm.find('div').eq(0)“时，我得不到elm.find()方法。我会简单地使用jQuery，但每次我使用它的一个选择器时，都不会返回任何项；我总是得到$(随便什么).length === 0。

只是为了澄清，我使用的karma-ng-html2js-preprocessor就像here一样。

Answer 1

您应该测试范围变量的值，而不是元素属性值。因为如果一切顺利，那么作用域变量的值应该已经更改。

例如，以下测试通过：

describe('Checkbox field', function () {
    var $scope, elm;

    beforeEach(module('myApp'))

    beforeEach(inject(function ($rootScope, $compile) {
      $scope = $rootScope.$new();
      $scope.value = true;
      $scope.data = "Click on me";

      elm = $compile('<checkboxfield data="data" model="value"></checkboxfield>')($scope);
    }))

    it('should change checkbox value on wrapper click', function () {
        expect($scope.value).toBe(true);
        elm.click();
        expect($scope.value).toBe(false);
        elm.click();
        expect($scope.value).toBe(true);
    })
  })