AngularJS Karma Jasmine directive testing not rendering html

Question

I'm learning Angular and I'm trying to run tests on directives with Karma Jasmine. However, it seems that the html template of the directive is not being rendered (e.g. ng-repeat and such is not being replaced/processed). I want to test whether the contents of the span with class mdl-list__item-sub-title is the expected rendered output.

My directive (views/customersListDirective.html) looks like this:

<!--Template for customer list directive-->
<ul class="demo-list-two mdl-list">
    <li ng-repeat="user in e.users" class="mdl-list__item mdl-list__item--two-line">
    <span class="mdl-list__item-primary-content">
        <i class="material-icons mdl-list__item-avatar">person</i>
        <span>{{user.nome}}</span>
        <span class="mdl-list__item-sub-title">{{user.valor | currency:"R$"}} at {{user.data | date:'dd-MMM'}}</span>
    </span>
    <span class="mdl-list__item-secondary-content">
        <span class="mdl-list__item-secondary-info" ng-if="$first">VIP</span>
        <a class="mdl-list__item-secondary-action" href="#"><i class="material-icons" ng-if="user.valor >= 100">star</i></a>
    </span>
    </li>

app.directive('customerList', [function(){
    return{
        templateUrl:"views/customersListDirective.html",
        restrict:"AE"
    };
}]);

And my test spec:

describe("Test Customer List Directive", function(){
    beforeEach(module('ex1'));
    beforeEach(module('templates'));
    var compile, scope, directiveElement;

    beforeEach(inject(function($compile, $templateCache, $rootScope){
        compile = $compile;
        scope = $rootScope.$new();
        directiveElement = angular.element('<div customer-List></div>');
        compile(directiveElement)(scope);
        scope.$digest();
    }));

    it('basic test', function(){
        scope.$apply(function(){
            scope.users = [
                {
                    nome:"Alice",
                    data:"2016-05-02",
                    valor:100
                }
            ];
        });
        scope.$digest();

        var valor1 = directiveElement.find("<span class=\"mdl-list__item-sub-title\">");
        expect(valor1).toEqual('R$100 at 02-May');
    })
});

Finally the karma.conf file:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      'karmatest/angular.js',
      'karmatest/angular-mocks.js',
      'js/exampleCtrls.js',
      'js/exampleCtrlsSpec.js',
      'views/*.html'
    ],
    preprocessors: {
      'views/*.html': ['ng-html2js']
    },

    ngHtml2JsPreprocessor: {
        moduleName: 'templates'
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  })
};

As far as I can tell, I've done everything according to the examples/specs here and the other linked articles there. However, when running the test, the content of the innerHtml of the directiveElement variable, which I would expect to contain the rendered directive, contains only:

<div customer-list="" class="ng-scope"><!--Template for customer list directive-->
<ul class="demo-list-two mdl-list">
    <!-- ngRepeat: user in e.users -->
</ul></div>

And thus the test fails. Any help appreciated!

The stackoverflow link that you follow is outdated. Go to see the doc : https://docs.angularjs.org/guide/unit-testing — Gerald Chablowski, Aug 26 '16 at 16:52
I've checked that too. There's no example of a directive with ng-repeat, for instance, which is what is not being compiled/rendered on my test — YuriW, Aug 26 '16 at 17:35

score 0 · Answer 1 · answered Oct 07 '19 at 10:49

At a glance, it looks like your ng-repeat is not defined properly

there doesn't seem to be any e

ng-repeat="user in e.users"

but you define in on your scope

scope.users = [
            {
                nome:"Alice",
                data:"2016-05-02",
                valor:100
            }
        ];

AngularJS Karma Jasmine directive testing not rendering html

1 Answers1