单元测试角度视图

Question

有一个带有角度指令ng-disabled的按钮的视图，绑定到一些模型属性。复杂之处在于按钮位于

标记内。

我要做的是设置模型属性，编译视图，然后根据模型属性的值检查按钮是否正确启用或禁用；但是，当我尝试编译时，列表为空：只有

标记。

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

这是我的代码：

------查看------

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

Answer 1

发现了问题。所缺少的只是声明

$scope.$digest(); 

分配后

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