angularjs - 如何使用 DOM 操作正确地对指令进行单元测试？

Question

在问我真正的问题之前，我有一个不同的问题... 有意义吗？单元测试 Angular 指令中的 DOM 操作？

例如，这是我完整的链接功能:

function linkFn(scope, element) {
    var ribbon = element[0];
    var nav = ribbon.children[0];

    scope.ctrl.ribbonItemClick = function (index) {
        var itemOffsetLeft;
        var itemOffsetRight;
        var item;

        if (scope.ctrl.model.selectedIndex === index) {
            return;
        }

        scope.ctrl.model.selectedIndex = index;

        item = nav.querySelectorAll('.item')[index];

        itemOffsetLeft = item.offsetLeft - ribbon.offsetLeft;
        itemOffsetRight = itemOffsetLeft + item.clientWidth;

        if (itemOffsetLeft < nav.scrollLeft) {
            nav.scrollLeft = itemOffsetLeft - MAGIC_PADDING;
        }

        if(itemOffsetRight > nav.clientWidth + nav.scrollLeft) {
            nav.scrollLeft = itemOffsetRight - nav.clientWidth + MAGIC_PADDING;
        }

        this.itemClick({
            item: scope.ctrl.model.items[index],
            index: index
        });

        $location.path(scope.ctrl.model.items[index].href);
    };

    $timeout(function $timeout() {
        var item = nav.querySelector('.item.selected');
        nav.scrollLeft = item.offsetLeft - ribbon.offsetLeft - MAGIC_PADDING;
    });
}

这是一个可滚动的选项卡式组件，我不知道如何测试 nav.scrollLeft = x 的 3 个实例.

前两个if当单击仅部分可见的项目时会发生语句。左/右(每个 if)项目将被吸附到组件的左/右边界。

第三个，如果在加载组件时不可见，则将所选项目放置在 View 中。

如何使用 Karma/Jasmine 进行单元测试。这样做是否有意义，或者我应该使用 Protractor 进行功能测试？

Answer 1

测试指令时，寻找设置或返回显式值的东西。这些通常很容易断言，并且使用 Jasmine 和 Karma 对它们进行单元测试是有意义的。

看看 Angular 的 tests for ng-src .在这里，他们通过断言 src 来测试指令是否有效。元素上的属性被设置为正确的值。它是明确的:src属性具有特定值或没有。

it('should not result empty string in img src', inject(function($rootScope, $compile) {
  $rootScope.image = {};
  element = $compile('<img ng-src="{{image.url}}">')($rootScope);
  $rootScope.$digest();
  expect(element.attr('src')).not.toBe('');
  expect(element.attr('src')).toBe(undefined);
}));

与 ng-bind 相同.在这里，他们将一个 HTML 字符串传递给 $compiler，然后断言返回值的 HTML 填充了实际的范围值。再次，它是明确的。

it('should set text', inject(function($rootScope, $compile) {
  element = $compile('<div ng-bind="a"></div>')($rootScope);
  expect(element.text()).toEqual('');
  $rootScope.a = 'misko';
  $rootScope.$digest();
  expect(element.hasClass('ng-binding')).toEqual(true);
  expect(element.text()).toEqual('misko');
}));

当您遇到更复杂的场景时，例如测试视口(viewport)可见性或测试特定元素是否位于页面上的正确位置，您可以尝试测试 CSS 和 style属性设置正确，但这会变得非常快，不推荐。此时，您应该查看 Protractor 或类似的 e2e 测试工具。