Question

我有一个Angular.js指令，我正在尝试编写测试。基本上，它是复选框的包装器，例如当单击包装器时，复选框的状态会发生变化。问题是我不知道如何在单元测试中复制这种行为。我的测试是：

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，所以当我运行＆＃34; elm.find（＆＃39; div＆＃39;）。eq（0）＆＃34;时，我没有得到点击（）方法。我只是简单地使用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);
    })
  })

Angular.js：测试点击指令

1 个答案: