0

I'm testing a really simple directive using Karma :

.directive('a', function() {
    return {
        restrict: 'A',
        controller: function() {

        }
    }
})
.directive('b', function() {
    return {
        restrict: 'E',
        require: ['^a'],
        link: function() {

        }
    }
})

It works in an HTML page but using karma i got the following error :

Error: [$compile:ctreq] Controller 'a', required by directive 'b', can't be found!

Using the following code in a karma/jasmine test :

var html = angular.element('<div a />\
    <b>directive content</b>\
 </div>')[0];

body.appendChild(html);

$compile(html)(scope);

Any ideas ?

Here are the full files :

karma.conf.js

// Karma configuration
// Generated on Fri Feb 26 2016 20:08:50 GMT+0100 (CET)

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',
      'directives.js',
      'test.spec.js'
    ],


    // 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: {
        'src/!(*.mock|*.spec).js': ['coverage']
    },

    coverageReporter: {
      type : 'html',
      // output coverage reports
      dir : 'coverage/'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress', 'coverage'],


    // 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', 'Firefox'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

directives.js

(function(angular) {
        angular.module('directives', [])
        .directive('a', function() {
            return {
                restrict: 'A',
                controller: function() {

                }
            }
        })

        .directive('b', function() {
            return {
                restrict: 'E',
                require: ['^a'],
                link: function() {

                }
            }
        });
    })(angular);

directives.spec.js

describe('Simple test', function() {
    var body, $compile, $rootScope, scope;

    beforeEach(module('directives'));

    beforeEach(inject(['$compile', '$rootScope', function(_$compile, _$rootScope) {
        $compile = _$compile;
        $rootScope = _$rootScope;
        scope = $rootScope.$new();
        body = document.querySelector('body');
    }]));

    it('should work', function() {
        var html = angular.element('<div a />\
            <b>directive content</b>\
        </div>')[0];

        body.appendChild(html);

        $compile(html)(scope);
    });

});
Vincent
  • 384
  • 1
  • 3
  • 11
  • Do you inject all files/modules into karma? This is usually when you miss something to inject. Furthermore it is bad idea to override basic HTML elements like a or b. – Egel Jun 01 '16 at 09:40
  • As you can see, this is a simplified example for which I have the same error as the real use case. My directives have real names and really do something ;-) The included files are "angular", "angular-mocks", and the source file containing the two simple directives. The module injected is the one containing the two directives. – Vincent Jun 01 '16 at 09:54

0 Answers0