CODEWITHSUNDEEP
angularjsangularjs-directivejasmine
Run
Run

Reputation: 57286

Angular directive test - Error: [$injector:modulerr] Failed to instantiate module?

I am using Jasmine Standalone to test my Angular directories,

SimpleDirective.js

var app = angular.module("myApp", []);

app.controller('SimpleDirectiveController', function($scope) {
    $scope.customer = {
      name: 'Igor',
      address: '123 Somewhere'
    };
});

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,

        // Isolate scope:
        // separate the scope inside a directive from the scope outside, and then map the outer scope to a directive's inner scope. 
        scope: {
            customerInfo: '=info'
        },

        //templateUrl points to an external html template.
        templateUrl: 'fixture/hello.html'
    };
});

fixture/hello.html,

<div class="customer"><b>Hello</b> {{customerInfo.name}}</div>

SimpleDirectiveSpec.js,

describe("simpleDirective Test ", function(){

    // Boilerplate starts from here...
    var compile, scope, element;

    // Name of the module my directive is in.
    beforeEach(module('myApp'));

    // The external template file referenced by templateUrl.
    beforeEach(module('fixture/hello.html'));

    beforeEach(inject(function($compile,$rootScope) {

        compile = $compile;
        scope = $rootScope;

        element = angular.element('<div data-hello-world info="customer"></div>');
        compile(element)(scope);
        scope.$digest();
    }));
    // ...Boilerplate ends here

    it('renders the customer template', function() {
        var customer = element.find('.customer');
        expect(customer.length).toBe(1);
    });

});

I get this error,

Error: [$injector:modulerr] Failed to instantiate module fixture/hello.html due to: [$injector:nomod] Module 'fixture/hello.html' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Any ideas What I have missed?

Upvotes: 2

Views: 2720

Answers (2)

Chandermani
Chandermani

Reputation: 42669

I assume you are using karma html pre-processor for html template https://github.com/karma-runner/karma-ng-html2js-preprocessor. Make sure that module generated have the path name that matches the module name you are declaring 'fixture/hello.html'.

You can verify the files by opening chrome developer console and check the source tab, the modules would be loaded as js file. Make sure that the name of the module generated match.

Upvotes: 1

halilb
halilb

Reputation: 4115

You should create a module for your template and put your template html into templateCache.

It should look like this:

angular.module("fixture/hello.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("fixture/hello.html",
    "<div class=\"customer\"><b>Hello</b> {{customerInfo.name}}</div>");
}]);

If you are testing with Karma, there is an automation karma module for this purpose called ng-html2js.

Upvotes: 3

Related Questions