单元测试的AngularJS（智能表）指令 [英] Unit testing an AngularJS (Smart Table) directive

问题描述

我与智能表的​​工作，将使用他们的榜样插件，其中一个复选框中选择一个表中的一行：的 http://lorenzofox3.github.io/smart-table-website/#section-custom

我写这个指令单元测试，低于code，这是失败的。有没有人写单元测试此code或能帮助指导我一下，我要去的地方错了，如果我实际测试正确的逻辑？

指令：

  myApp.directive（'csSelect'，函数（）{
    返回{
        要求：'^ stTable'，
        模板：''，
        范围： {
            行：'= csSelect
        }，
        链接：功能（范围，元素，属性CTRL）{            element.bind（'变'，函数（EVT）{
                范围。$应用（函数（）{
                    ctrl.select（scope.row，'多'）;
                }）;
            }）;            范围。$腕表（'row.isSelected'，功能（为newValue，属性oldValue）{
                如果（为newValue ===真）{
                    element.parent（）addClass（'ST-选择'）;
                }其他{
                    element.parent（）removeClass移除（'ST-选择'）;
                }
            }）;
        }
    };
}）;
 

单元测试：

 描述（'csSelect'，函数（）{
        VAR范围，元素，属性CTRL;
       beforeEach（模块（'myApp.selectorresult'））;
             beforeEach（注（函数（$ rootScope，$编译）{
                榆树= angular.element（
                    '＆LT; TD CS-选择=行类=NG-分离范围的＆GT;' +
                    '＆LT;输入类型=复选框＆GT;' +
                    '＆LT; / TD＆GT;'）;
                范围= $ rootScope;
                $编译（榆树）（范围）;
                范围$摘要（）。
              }））;
       它（'应该创建可选输入'，函数（）{
            的console.log（elm.find（'输入'））;
            VAR复选框= elm.find（'输入'）;
            期待（checkbox.length）.toBe（1）;
      }）;
    }）;
 

解决方案

您需要您设置beforeEach（前模拟出了与stTableController $ controllerProvider注入...

检查出分页指令测试规范（的https://github.com/lorenzofox3/Smart-Table/blob/master/test/spec/stPagination.spec.js),这也要求stTable，它是如何提供stTableController'你从它需要的功能一个很好的例子。

I am working with "Smart Table" and will be using their example plugin where a checkbox selects a row in a table: http://lorenzofox3.github.io/smart-table-website/#section-custom

I am writing a unit test for this directive, code below, this is failing. Has anyone written a unit test for this code or could help direct me as to where I am going wrong and if I am actually testing the correct logic?

Directive:

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');
                }
            });
        }
    };
});

Unit test:

 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);
      });
    });

解决方案

You need to mock out the stTableController with $controllerProvider before you set up beforeEach(inject...

Check out the test spec for the pagination directive (https://github.com/lorenzofox3/Smart-Table/blob/master/test/spec/stPagination.spec.js), which also requires 'stTable'. It's a good example of how to provide the 'stTableController' with the functions you need from it.

这篇关于单元测试的AngularJS（智能表）指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！