angularjs – 单位测试角度视图

有一个带有按钮的视图,该按钮具有角度指令ng-disabled,绑定到某些模型属性.复杂的是按钮位于< li>内.标签.

我想要做的是设置模型属性,编译视图,然后根据模型属性的值检查按钮是否正确启用或禁用;但是,当我尝试编译时,列表为空:只有< ul>< / ul>标签.

有没有办法完成我想要做的事情?

这是我的代码:

—————–查看——————-

<div ng-show="group.AreItemsExpanded">
    <div>
        <ul>
            <li ng-repeat="item in group.Items">
                <div>
                    {{item.Name}}
                </div>
                <div>
                    <button id="btn" type="button" ng-click="clickItem(item)" 
                            ng-disabled="!permissions.IsAllowed || !item.IsClickable">
                        Click!
                    </button>
                </div>
            </li>
        </ul>
    </div>
</div>

—————–测试——————

describe('testing view', function(){
    beforeEach(module('groups.templates'));

    var $scope;
    var item;
    var $templateCache;
    var $compile;

    beforeEach(inject(function($rootScope, _$templateCache_, _$compile_){
        $templateCache = _$templateCache_;
        $compile = _$compile_;
        item = {
            Name: 'testitem0',
            IsClickable: false
        };
        $scope = $rootScope.$new();
        $scope.group = {
            Items: [item],
            AreItemsExpanded: true
        };
        $scope.permissions = {IsAllowed: false};
    }));

    describe('testing button', function(){
        it('should be enabled', function(){
            $scope.group.Items[0].IsClickable = true;
            $scope.permissions.IsAllowed = true;
            var html = $templateCache.get('view.html');
            var view = $compile(angular.element(html))($scope);
            expect(view.find('button')[0].disabled).toEqual(false);
        });
        it('should be disabled', function(){
            $scope.group.Items[0].IsClickable = false;
            $scope.permissions.IsAllowed = true;
            var html = $templateCache.get('view.html');
            var view = $compile(angular.element(html))($scope);
            expect(view.find('button')[0].disabled).toEqual(true);
        });
    });
});

————- karma.conf.js ———————

// Karma configuration
// Generated on Sat Dec 06 2014 13:06:16 GMT-0700 (Mountain Standard Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
        'node_modules/angular/angular.js',
        'node_modules/angular-mocks/angular-mocks.js',
        'node_modules/angular-resource/angular-resource.js',
        'node_modules/angular-route/angular-route.js',
        'node_modules/angular-bootstrap/ui-bootstrap.js',
      '*.js',
      '*.html'
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
        "*.html": ["ng-html2js"]
    },

    ngHtml2JsPreprocessor: {
        moduleName: "groups.templates"
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

最佳答案 发现了问题.所有遗漏的都是声明

$scope.$digest(); 

转让后

var view = $compile(angular.element(html))($scope);
点赞