Unit testing angular view

Question

There is a view with a button with the angular ng-disabled directive associated with some model properties. The complication is that the button is located inside the <li> tag symbol.

What I want to do is set up the properties of the model, compile the view, and then check if the button is turned on or off correctly according to the values ​​of the model properties; but when I try to compile, the list is empty: there is only a <ul> </ul> tag.

Is there a way to accomplish what I'm trying to do?

Here is my code:

----------------- view -------------------

<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>

----------------- test ------------------

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