AngularJS Componet testing with ng-html2js

Question

Can someone help me with that problem:

Angular project:

gui_service/client/src/js/remoteGuiApp.js:

angular.module('remoteGuiApp', ['ui.bootstrap', 'ngRoute', 'ngSanitize', 'ngResource'])

gui_service/client/src/modules/login/login.js

angular.module('remoteGuiApp')
.component('login', {
    controller: function () {
        this.login = '';
        this.password = '';
        this.showError = false;
    },
    templateUrl: '/src/modules/login/login.html'
});

Also I have '/src/modules/login/login.html' template for this component.

gui_service/client/test/karma.conf

module.exports = function (config) {
    'use strict';
    config.set({

        basePath: '',

        frameworks: ['mocha', 'chai'],

        files: [
            '../src/vendor/js/angular.min.js',
            '../src/vendor/js/angular-mocks.js',
            '../src/vendor/js/angular-route.min.js',
            '../src/vendor/js/angular-resource.min.js',
            '../src/vendor/js/angular-sanitize.min.js',
            '../src/vendor/js/angular-cookies.min.js',

            //Library Files
             '../src/vendor/js/jquery-2.2.4.min.js',
             '../src/vendor/js/moment.js',
             '../src/vendor/js/bootstrap.min.js',
             '../src/vendor/js/ui-bootstrap.js',

            '../src/js/remoteGuiApp.js',
            '../src/js/Authentication.js',
            '../src/modules/login/login.js',

            //tests
             '*.js',
             //templates
             '../src/modules/**/*.html'
        ],

        // generate js files from html templates
        preprocessors: {
           '../src/modules/**/*.html': ['ng-html2js']
        },

        ngHtml2JsPreprocessor: {
            // strip this from the file path
            stripPrefix: 'client/'
        },

        reporters: ['mocha'],

        port: 9876,
        colors: true,
        autoWatch: true,
        singleRun: false,

        // level of logging
        logLevel: config.LOG_INFO,

        browsers: ['Chrome'],

        concurrency: Infinity
    });
};

And finally my problem point: gui_service/client/test/LoginComponent-test.js:

describe('Component: login', function () {
    beforeEach(module('remoteGuiApp'));

    // load the login template
    beforeEach(module('/src/modules/login/login.html'));

    let scope;
    let element;
    let controller;

    beforeEach(inject(function($rootScope, $compile) {
        element = angular.element('<login></login>');

        scope = $rootScope.$new();
        $compile(element)(scope);
        scope.$digest();
    }));

  it('Controller fields', function(done) {
      expect(true).true;
      done();
  });

});

As result of launching karma I have error like this: angular link error

Maybe someone will tell the solution to this problem. Thank's for your help.

I don't have much idea about that but looking at your angular link error, it seems like that's the culprit here.. — tanmay, Apr 20 '17 at 08:44
Yes, I'm understand it but my main question how configure it right. I try do it by this official example https://github.com/vojtajina/ng-directive-testing, but something wrong with it... — Sergaros, Apr 20 '17 at 08:48
can you try removing the `/` before `src/modules/...` in `beforeEach(module(...))`? — tanmay, Apr 20 '17 at 09:08
Thank's for idea, but it not help, in additional this string must be the same as templateUrl property in login.js file. — Sergaros, Apr 20 '17 at 09:21

score 0 · Accepted Answer · answered Apr 21 '17 at 08:38

I resolved it. The main problem was in paths. So if you need configure karma.conf.js for test Angular directive/component with templateUrl's be careful with tags:

basePath: ''
preprocessors: ''
ngHtml2JsPreprocessor: {
            stripPrefix: ''
            prependPrefix: ''
        },

Read manual very carefuly https://github.com/karma-runner/karma-ng-html2js-preprocessor/blob/master/README.md#configuration so as not to step on the rake as I did)

AngularJS Componet testing with ng-html2js

1 Answers1