Javascript Angular.js+；nw.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);

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;

我的网页包配置如下所示：

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);

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\u进程

，这些模块捆绑在一个大文件

bundle.js

中，我将其包含在html中，然后打包成我的nw.js应用程序。因此，我的应用程序结构如下所示：

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 

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
            }
        }
    });
};

我正在尝试使用这种结构运行测试。我试过karma+jasmine，karma+mocha，试过不同的配置，最后一个看起来像：

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 

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我不需要确切的

karma

和

jasmine

，因此任何解决方案都将受到欢迎。我只想用测试来覆盖我的项目

我自己也经历过类似的事情。我认为测试不需要

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("<html><head></head><body></body></html>", {});
global.window = document.defaultView;
global.window.mocha = true;
global.window.beforeEach = beforeEach;
global.window.afterEach = afterEach;

require("angular/angular");
require("angular-mocks");

global.angular = window.angular;
global.mockInject = angular.mock.inject;
global.mockModule = angular.mock.module;
global.expect = chai.expect;

console.log("ALL SET");


额外信息
下面是如何按原样设置
init.js
：

jsdom
：如果
require（“angular/angular”）
您将看到它需要一个
窗口
实例
jsdom
可以创建
文档
s和
窗口
s等等，而无需web浏览器
window.mocha
：我们需要
angular mock
用必要的实用程序填充我们的
angular
。但是你会注意到
window.mocha | | window.jasmine
必须是
true
。这就是为什么window.mocha=true`
窗口。每个
之前，
窗口。每个
之后：与上述原因相同；因为
angularmocks.js
需要它
我设置了一些我计划在测试中常用的全局变量：
angular
，
expect
，
mockInject
，
mockModule
此外，这些可能会提供一些附加信息：




您是否使用webpack+angular+karma运行过单元测试？@PetrAveryanov仅来自angular seed：您的标签上写着“e2e测试”，但您正在尝试单元测试，因此我请求进行单元测试。@aec我将删除标签，谢谢，希望这能奏效。几天内尝试一下这是一种正确的方法，但我无法在测试中加载nw.gui模块，因为它是在运行时加载的，当我执行/path/to/nw/path/to/my/app时，您是否需要
welcome.js
中的nwgui？如果是这样的话，我想你应该把它作为一个函数参数，就像我在我的
MyCtrl
中使用
app
一样，我应该在新的进程中运行nw。。。但是我想不出来，或者我应该用他们的工具。。。