Unit testing an AngularJS (Smart Table) directive

问题

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

回答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.

回答2:

For anyone still having this issue. I hope this helps. I was struggling with this for ages. I tried mocking the stTableController, I tried adding the vendor files to the karma.conf.js files among other things but could not get any tests to pass. It seemed that when I removed the require: '^stTable' the tests would pass no problem, but with it in, all tests would fail. I couldn't remove this as this would break my code.

So what I finally found was that all I had to do was add st-table to my element in the spec.js file.

So if my element was var element = angular.element('<my-component></my-component'); I had to make it var element = angular.element('<my-component st-table></my-component>');

After that, all tests were passing.

来源：https://stackoverflow.com/questions/28541042/unit-testing-an-angularjs-smart-table-directive

标签

unit-testing

angularjs-directive

smart-table