Question

我正在使用“智能表”，并将使用他们的示例插件，其中复选框选择表格中的一行：http://lorenzofox3.github.io/smart-table-website/#section-custom

我正在为这个指令编写一个单元测试，代码如下，这是失败的。是否有人为此代码编写了单元测试，或者可以帮助指导我哪里出错，如果我实际测试的是正确的逻辑？

指令：

myApp.directive('csSelect', function () {
    return {
        require: '^stTable',
        template: '',
        scope: {
            row: '=csSelect'
        },
        link: function (scope, element, attr, ctrl) {

            element.bind('change', function (evt) {
                scope.$apply(function () {
                    ctrl.select(scope.row, 'multiple');
                });
            });

            scope.$watch('row.isSelected', function (newValue, oldValue) {
                if (newValue === true) {
                    element.parent().addClass('st-selected');
                } else {
                    element.parent().removeClass('st-selected');
                }
            });
        }
    };
});

单元测试：

 describe('csSelect',function(){
        var scope, element, attr, ctrl;
       beforeEach(module('myApp.selectorresult'));
             beforeEach(inject(function($rootScope, $compile) {
                elm = angular.element(
                    '<td cs-select="row" class="ng-isolate-scope">' +
                    '<input type="checkbox">' +
                    '</td>');
                scope = $rootScope;
                $compile(elm)(scope);
                scope.$digest();
              }));
       it('should create selectable input',function(){
            console.log(elm.find('input'));
            var checkbox = elm.find('input');
            expect(checkbox.length).toBe(1);
      });
    });

Answer 1

在设置beforeEach之前，需要使用$ controllerProvider模拟stTableController（注入...

查看分页指令（https://github.com/lorenzofox3/Smart-Table/blob/master/test/spec/stPagination.spec.js）的测试规范，这也需要＆＃39; stTable＆＃39;。它是如何提供“stTableController”的一个很好的例子。具备您需要的功能。

Answer 2

对于仍然有此问题的任何人。我希望这有帮助。我一直为此苦苦挣扎。我尝试模拟stTableController，尝试将供应商文件添加到karma.conf.js文件中，但无法通过任何测试。看来，当我删除 require：'^ stTable'时，测试将顺利通过，但是所有测试均将失败。我无法删除它，因为这会破坏我的代码。

所以我最终发现的是，我要做的就是将st-table添加到spec.js文件中的元素。

所以如果我的元素是 var element = angular.element('<my-component></my-component'); 我必须做到 var element = angular.element('<my-component st-table></my-component>');

此后，所有测试都通过了。

单元测试AngularJS（智能表）指令

2 个答案: