I am trying to implement front-end unit-tests on an Angular project which uses a server-side templating engine to render an index.ejs or index.dust. This file also includes a global variable var cdn = "http://s3.amazon.com"; which is used throughout the angular app.
When I runstart karma karma.config.js, I receive ReferenceError: cdn is not defined: app.js L20.
The cdn var is available when I run my app with Node, but when I try to run unit-tests on my Angular Ctrls, I receive the error above.
I tried to use the karma-ejs-preprocessor module to instantiatecdn in my tests, but I get a new error: 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>EJS + Angular</h1>
<script>
var cdn = "http://s3.amazon.com";
</script>
<main>
<div ui-view="state1"></div>
</main>
</body>
</html>
karma.conf.js
// Karma configuration
// Generated on Thu Mar 03 2016 00:57:00 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: http://ift.tt/1ft83uu
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'client/src/bower_components/angular/angular.js',
'client/src/bower_components/angular-mocks/angular-mocks.js',
'client/src/bower_components/angular-resource/angular-resource.js',
'client/src/bower_components/angular-ui-router/release/angular-ui-router.js',
'client/src/app.js',
'client/src/js/**/*.js',
'tests/**/*-spec.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: http://ift.tt/1gyw6MG
plugins: [
'karma-qunit',
'karma-ejs-preprocessor',
],
preprocessors: {
'**/*.ejs': ['ejs']
},
ejsOptions: {
parentPath: './views'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: http://ift.tt/1ft83KQ
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: http://ift.tt/1ft83KU
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
})
}
ctrl-spec.js
describe('ctrl test', function () {
var $rootScope,
$scope,
controller;
beforeEach(function () {
module('app');
inject(function ($injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')('TestCtrl', {$scope:$scope});
});
});
describe('Init', function () {
it('should init something', function () {
expect(cdn).toBeTruthy();
});
});
});
app.js
(function() {
'use strict';
angular.module('app', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: cdn + "partials/state1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: cdn + "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
});
}])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.myModel = "we did it!";
}]);
})();
Thanks in advance.
Aucun commentaire:
Enregistrer un commentaire