我有一个nw.js本机应用程序,里面有angular.js.我的应用程序与webpack捆绑在一起,包含本机node.js模块.我的入口点是我组织的index.js文件:
var gui = require('nw.gui');
var angular = require('angular');
require('./app.css');
// other modules
var myApp = angular.module('myApp',[
'ngRaven','ngMaterial','ngMessages'
]).constant(
'fs',require('fs')
)
require('./services')(myApp);
require('./directives')(myApp);
require('./factories')(myApp);
require('./filters')(myApp);
require('./controllers')(myApp);
require('./app.js')(myApp);
我的webpack配置如下所示:
const path = require('path');
const config = {
entry: [
'./app/index.js'
],output: {
path: path.resolve(__dirname,'app'),filename: 'bundle.js'
},devtool: "source-map",target: 'node-webkit',module:{
// css,html loaders
},node: {
os: true,fs: true,child_process: true,__dirname: true,__filename: true
}
};
module.exports = config;
因此,每个依赖包括Node.js本机模块,如fs,path,child_process捆绑在一个大文件bundle.js中,我包含在html中,然后打包我的nw.js应用程序.所以我的app结构如下:
my_project:
--app
----controllers
------welcome
--------welcome.js // Page controller
--------welcome.html // Page HTML
------index.js // here I include each page controller
----app.js // My angular app initialization
----index.js // here I include all dependencies
我正在尝试使用这种结构运行测试.我试过karma jasmine,karma mocha,尝试了不同的配置,我的最后一个看起来像:
module.exports = function (config) {
config.set({
basePath: '',frameworks: ['jasmine'],files: [
'app/bundle.js','app/**/*spec.js'
],exclude: [],preprocessors: {
'app/bundle.js': ['webpack']
},reporters: ['progress'],port: 9876,colors: true,logLevel: config.LOG_INFO,autoWatch: true,browsers: ['ChromeHeadlessNoSandBox'],customLaunchers: {
ChromeHeadlessNoSandBox: {
base: 'ChromeHeadless',flags: ['--no-sandBox']
}
},singleRun: true,webpack: {
// you don't need to specify the entry option because
// karma watches the test entry points
// webpack watches dependencies
// ... remainder of webpack configuration (or import)
},webpackMiddleware: {
// webpack-dev-middleware configuration
// i.e.
noInfo: true,// and use stats to turn off verbose output
stats: {
// options i.e.
chunks: false
}
}
});
};
但我的测试仍然没有看到角度应用.
describe('Welcome page',function() {
beforeEach(angular.mock.module('WelcomePageCtrl'));
});
P.S我不需要确切的业力和jasminne,所以任何解决方案将不胜感激.我只想用测试来覆盖我的项目
这是怎么做的:
我假设你的控制器/服务/ etc实现如下:
/* app/controller/welcome.js */
module.exports = function(app) {
return app.controller("MyCtrl",function($scope) {
$scope.name = "lebouf";
});
};
我喜欢我的测试代码坐在我正在测试的代码旁边(Welcome.spec.js在与Welcome.js相同的目录中).那个测试代码看起来像这样:
/* app/controller/welcome.spec.js */
beforeEach(function() {
var app = angular.module("myApp",[]); //module definition
require("./welcome")(app);
});
beforeEach(mockModule("myApp"));
describe("MyCtrl",() => {
var scope = {};
beforeEach(mockInject(function($controller) {
$controller("MyCtrl",{
$scope: scope
});
}));
it("has name in its scope",function() {
expect(scope.name).to.equal("not lebouf"); //the test will fail
});
});
除此之外,这是一个我们正在测试的角度控制器,并不是那么简单.我们需要角度物体本身.所以让我们进行设置.我将解释为什么要完成下一步的工作:
/* test-setup.js */
const jsdom = require("jsdom").jsdom; //v5.6.1
const chai = require("chai");
global.document = jsdom("
我们将运行测试:
node_modules/.bin/mocha ./init.js app/**/*.spec.js
#or preferably as `npm test` by copying the abev statement into package.json
额外信息
以下是init.js的设置方式:
> jsdom:你需要(“angular / angular”),你会发现它需要一个窗口实例.没有网络浏览器,jsdom可以创建文档和窗口等!
> window.mocha:我们需要角度模拟来填充我们的角度与必要的实用程序.但是if you look at the code你会注意到window.mocha || window.jasmine必须是真的.多数民众赞成在为什么.window.mocha = true`
> window.beforeEach,window.afterEach:与上述相同的原因;因为angular-mocks.js要求它.
>我设置了一些我计划在我的测试中常用的全局变量:angular,expect,mockInject,mockModule.
这些也可能提供一些额外的信息:
> https://kasperlewau.github.io/post/angular-without-karma/
> https://gist.github.com/rikukissa/dcb422eb3b464cc184ae