angularjsunit-testingng-html2js

AngularJS Componet testing with ng-html2js


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.


Solution

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