单元测试 ngComponentRouter - Angular 1.5.x
Unit testing ngComponentRouter - Angular 1.5.x
我正在尝试为 Angular 1.5 构建基本单元测试,目的是 A) 练习单元测试,以及 B) 熟悉 Angular 1 中基于组件的开发。5.x。我正在尝试对一个简单的组件进行单元测试,但我不断收到以下消息:
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.
我想要一些关于如何将此特定 dependency/module 注入单元测试的指导。这是我的代码:
app.js
(function(){
"use strict";
const app = angular.module("app", ["ngComponentRouter"])
app.value("$routerRootComponent", "componentApp");
})();
分量-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"]}
]);
}]
});
})();
分量-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();
});
});
所以两个更改就成功了,首先我需要更改组件-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"]}
]
});
我需要将文件包含在 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
});
};
我正在尝试为 Angular 1.5 构建基本单元测试,目的是 A) 练习单元测试,以及 B) 熟悉 Angular 1 中基于组件的开发。5.x。我正在尝试对一个简单的组件进行单元测试,但我不断收到以下消息:
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.
我想要一些关于如何将此特定 dependency/module 注入单元测试的指导。这是我的代码:
app.js
(function(){
"use strict";
const app = angular.module("app", ["ngComponentRouter"])
app.value("$routerRootComponent", "componentApp");
})();
分量-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"]}
]);
}]
});
})();
分量-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();
});
});
所以两个更改就成功了,首先我需要更改组件-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"]}
]
});
我需要将文件包含在 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
});
};