angularjs – 如何使用DOM操作正确单元测试指令？

发布时间：2020-12-17 08:06:26 所属栏目：安全来源：网络整理

导读：在问我真正的问题之前，我有一个不同的…在Angular指令中单元测试DOM操作是否有意义？例如，这是我完整的链接功能： function linkFn(scope,element) { var ribbon = element[0]; var nav = ribbon.children[0]; scope.ctrl.ribbonItemClick = function (in

在问我真正的问题之前，我有一个不同的…在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)项将被卡扣到组件的左/右边界。

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

如何用Karma / Jasmine进行单元测试。这样做还是有意义的，还是应该用量角器进行功能测试？

测试指令时，查找设置或返回显式值的内容。这些通常易于断言，并且使用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传递给$编译器，然后声明返回值的HTML填充了实际的范围值。再次，这是明确的。

it('should set text',$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');
}));

当您进入更复杂的场景，例如测试视口可见性或测试特定元素是否位于页面上正确的位置时，您可以尝试测试CSS和样式属性设置正确，但是它的速度非常快，不会推荐的。此时您应该查看量角器或类似的e2e测试工具。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!