Search code examples
javascriptangularjsunit-testingangularjs-1.6ngcomponentrouter

Unit testing ngComponentRouter - Angular 1.5.x


I am trying to build basic unit tests for an Angular 1.5 with the purpose of A) practicing unit testing, and B) familiarizing myself with component-based development in Angular 1.5.x. I'm trying to unit test a simple component, but I keep getting the following message:

Error: [$injector:modulerr] Failed to instantiate module app due to:

Error: [$injector:modulerr] Failed to instantiate module ngComponentRouter due to:

Error: [$injector:nomod] Module 'ngComponentRouter' 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.

I'd like a little guidance on how to inject this specific dependency/module into a unit test. This is the code I have:

app.js

(function(){
    "use strict";

    const app = angular.module("app", ["ngComponentRouter"])

    app.value("$routerRootComponent", "componentApp");
})();

component-app.component.js

(function(){
    "use strict";

    angular.module("app").component("componentApp", {
        templateUrl: "/javascripts/component-app.component.html",
        controller: ["$router", function($router){
            $router.config([
                { path: "/users", component: "usersComponent", name: "Users" },
                { path: "/**", redirectTo: ["Users"]}
            ]);
        }]

    });
})();

component-app.component.spec.js

describe("componentApp component", function(){
    beforeEach(module("app"));

    var $componentController, componentApp;

    beforeEach(inject(function($injector){
        $componentController = $injector.get("$componentController");
        componentApp = $componentController("componentApp", { $scope: {}});
    }));

    it("componentApp component is defined", function(){
        expect(componentApp).toBeDefined();
    }); 
});

Solution

  • So two changes did the trick, first I need to change component-app.component.js:

    angular.module("app").component("componentApp", {
        templateUrl: "/templates/component-app.component.html",
        $routeConfig: [
            { path: "/Users", name: "Users", component: "usersComponent" },
            { path: "/Home", name: "Home", component: "homeComponent"},
            { path: "/Profile/:id", name: "Profile", component: "profileComponent" },
            { path: "/**", redirectTo: ["Users"]}
        ]
    });
    

    And I needed to include the file in karma.conf.js:

    module.exports = function(config) {
      config.set({
    
        basePath: "",
        frameworks: ["jasmine"],
        files: [
            "bower_components/angular/angular.js",       
            "bower_components/angular-mocks/angular-mocks.js",
            "bower_components/angular-component-router/angular_1_router.js",
            "javascripts/**/*.js"
        ],
        exclude: [        
        ],
        preprocessors: {
        },
        reporters: ["progress"],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ["Chrome"],
        singleRun: false,
        concurrency: Infinity
      });
    };