问题描述
我有一个现有的Angular / Laravel应用程序，其中Laravel充当角度前端的API，仅提供JSON数据。加载角度应用程序的页面 index.php 目前由Laravel提供。从那里开始，Angular接管了。
I have an existing Angular/Laravel app in which Laravel acts as an API to the angular frontend serving only JSON data. The page that loads the angular app, index.php, is currently served by Laravel. From there, Angular takes over.
我在尝试开始使用Karma / Jasmine时非常困难。当我从项目的根目录使用 karma start 或 karma start karma.conf.js 运行我的测试时，我得到以下错误：
I'm have a very difficult time trying to get started with Karma/Jasmine. When running my tests using karma start or karma start karma.conf.js from the root directory of my project, I get the following error:
ReferenceError：模块未定义
完整输出：
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/raph/coding/webroot/digitalocean/rugapp/public/rugapp/*.js" does not match any file.
INFO [Chrome 39.0.2171 (Mac OS X 10.9.5)]: Connected on socket 3OCUMp_xhrGtlGHwiosO with id 7897120
Chrome 39.0.2171 (Mac OS X 10.9.5) hello world encountered a declaration exception FAILED
ReferenceError: module is not defined
at Suite.<anonymous> (/Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:3:16)
at jasmineInterface.describe (/Users/raph/coding/webroot/digitalocean/rugapp/node_modules/karma-jasmine/lib/boot.js:59:18)
at /Users/raph/coding/webroot/digitalocean/rugapp/tests/js/test.js:1:1
Chrome 39.0.2171 (Mac OS X 10.9.5): Executed 2 of 2 (1 FAILED) (0.005 secs / 0.003 secs)
然而，chrome broswer会启动并显示以下内容：
However, the chrome broswer does launch with the following displayed:
我的 karma.conf.js 文件如下：
// Karma configuration
// Generated on Mon Dec 22 2014 18:13:09 GMT-0500 (EST)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: 'public/rugapp/',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'*.html',
'**/*.js',
'../../tests/js/test.js',
'../../tests/js/angular/angular-mocks.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: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// 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'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
我的 package.json 文件如下所示：
{
"devDependencies": {
"gulp": "^3.8.8",
"karma": "^0.12.28",
"karma-chrome-launcher": "^0.1.7",
"karma-jasmine": "^0.3.2",
"laravel-elixir": "*"
}
}
test.js
describe("hello world", function() {
var CreateInvoiceController;
beforeEach(module("MobileAngularUiExamples"));
beforeEach(inject(function($controller) {
CreateInvoiceController = $controller("CreateInvoiceController");
}));
describe("CreateInvoiceController", function() {
it("Should say hello", function() {
expect(CreateInvoiceController.message).toBe("Hello");
});
});
});
describe("true", function() {
it("Should be true", function() {
expect(true).toBeTruthy();
});
});
任何帮助都非常赞赏。
推荐答案
也许这会对某人有所帮助。
Perhaps this will help someone.
对我而言，解决方案是确保 angular-mocks.js 。如果您不确定，可以在以下部分的 karma.conf.js 中控制订单：
The solution, for me, was to make sure angular-mocks.js was loaded before my tests. If you're not sure, you control the order in karma.conf.js under the following section:
// list of files / patterns to load in the browser
files: [
// include files / patterns here
接下来，为了让我的测试实际加载我的角应用程序，我必须执行以下操作：
Next, to get my test to actually load my angular app, I had to do the following:
describe("hello world", function() {
var $rootScope;
var $controller;
beforeEach(module("YourAppNameHere"));
beforeEach(inject(function($injector) {
$rootScope = $injector.get('$rootScope');
$controller = $injector.get('$controller');
$scope = $rootScope.$new();
}));
beforeEach(inject(function($controller) {
YourControllerHere = $controller("YourControllerHere");
}));
it("Should say hello", function() {
expect(YourControllerHere.message).toBe("Hello");
});
});
在您的控制器中，
app.controller('YourControllerHere', function() {
this.message = "Hello";
});
另外，另一种方式：
describe("YourControllerHere", function() {
var $scope;
var controller;
beforeEach(function() {
module("YourAppNameHere");
inject(function(_$rootScope_, $controller) {
$scope = _$rootScope_.$new();
controller = $controller("YourControllerHere", {$scope: $scope});
});
});
it("Should say hello", function() {
expect(controller.message).toBe("Hello");
});
});
享受测试！
这篇关于ReferenceError：未定义模块 - 使用Angular / Laravel应用程序的Karma / Jasmine配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！