[英]Foundation-Apps angular site integration with karma-jasmine unit testing
[英]Angular Karma-Jasmine Unit Testing with EJS index
我正在嘗試在Angular項目上實現前端單元測試,該項目使用服務器端模板引擎來呈現index.ejs
或index.dust
。 該文件還包括一個全局變量var cdn = "http://s3.amazon.com";
在整個角應用程序中使用。
當我運行start karma karma.config.js
,我收到ReferenceError: cdn is not defined: app.js L20
。
當我使用Node運行我的應用程序時, cdn
var可用,但是當我嘗試在我的Angular Ctrls上運行單元測試時,我收到上面的錯誤。
我嘗試使用karma-ejs-preprocessor
模塊(這里: https : cdn
在我的測試中實例化cdn
,但是我收到一個新錯誤: No provider for "framework: jasmine"
。
index.ejs
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<title>Test</title>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/angular-mocks/angular-mocks.js"></script>
<script src="./bower_components/angular-resource/angular-resource.js"></script>
<script src="./app.js"></script>
</head>
<body>
<h1>Angular Unit Testing</h1>
<script>
var cdn = "./";
</script>
<main>
<div ui-view></div>
</main>
</body>
</html>
karma.conf.js
// Karma configuration
// Generated on Sat Mar 12 2016 02:53:19 GMT-0800 (Pacific Standard Time)
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: [
'client/src/bower_components/angular/angular.js',
'client/src/bower_components/angular-ui-router/release/angular-ui-router.js',
'client/src/bower_components/angular-mocks/angular-mocks.js',
'client/src/bower_components/angular-resource/angular-resource.js',
'client/src/app.js',
'tests/test.js'
],
// list of files to exclude
exclude: [
],
plugins: [
'karma-qunit',
'karma-ejs-preprocessor',
'karma-jasmine',
'karma-chrome-launcher'
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
'server/_views/index.ejs': ['ejs']
},
ejsOptions: {
parentPath: './server/_views/index.ejs'
},
// 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,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
test.js
describe('State1Ctrl', function () {
var $rootScope,
$scope,
controller;
beforeEach(function () {
module('app', 'ui.router');
inject(function ($injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
});
});
describe('Init', function () {
it('should be init', function () {
expect($scope.test).toBeTruthy();
});
});
});
app.js
(function() {
'use strict';
angular.module('app', [
'ui.router'
])
.controller('State1Ctrl', ['$scope', function($scope) {
console.log('cdn2', cdn);
$scope.test = 'hi';
console.log($scope.test);
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
// cdn is available here
console.log("cdn: ", cdn);
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: cdn + "views/state1.html",
controller: 'State1Ctrl'
})
.state('state1.list', {
url: "/list",
templateUrl: "views/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "views/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "views/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
}]);
})();
Repo在這里展示了問題: https://github.com/superveetz/Loopback-Tests.git
: https://github.com/superveetz/Loopback-Tests.git
npm install
從base npm install
。 bower install
從/client/src
bower install
karma start karma.conf.js
從base karma start karma.conf.js
。 node .
從基地看cdn
通常是cdn
。 請在karma.config中更新您的插件部分。
plugins: [
'karma-qunit',
'karma-ejs-preprocessor',
'karma-jasmine',
'karma-chrome-launcher'
],
並運行這些命令。
npm install karma-jasmine --save-dev
npm install karma-chrome-launcher --save-dev
有關詳細信息,請在此處查看
編輯1:
請做這些改變。
inject(function ($injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
});
而不是$rootScope.new()
使用$rootScope.$new()
定義cdn
console.log('cdn2', cdn)
你的cdn所以它不會停止你的測試腳本
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.