javascript – Angular.js nw.js webpack karma jasmine如何测试

我有一个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,所以任何解决方案将不胜感激.我只想用测试来覆盖我的项目

最佳答案

我自己经历过类似的事情.我认为您的测试不需要bundle.js.

这是怎么做的：

我假设你的控制器/服务/ 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