Angular.js + nw.js + webpack + karma + jasmine如何測試

Question

我有一個帶有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);

我的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

我正在嘗試使用這種結構運行測試。 我嘗試了業力+茉莉，業力+摩卡，嘗試了不同的配置，我的最后一個看起來像：

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

PS我不需要確切的karma和jasminne ，所以任何解決方案將不勝感激。 我只想用測試來覆蓋我的項目

Answer 1

我自己經歷過類似的事情。 我認為您的測試不需要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
    });
});

除此之外，這是一個我們正在測試的角度控制器，並不是那么簡單。 我們需要angular物體本身。 所以讓我們進行設置。 我將解釋為什么要完成下一步的工作：

/* 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");

我們將運行測試：

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 ：你require("angular/angular")你會發現它需要一個window實例。 jsdom可以在沒有Web瀏覽器的情況下創建document和window等等！
window.mocha ：我們需要angular-mocks來填充我們的angular與必要的實用程序。 但是如果你看一下代碼，你就會注意到window.mocha || window.jasmine window.mocha || window.jasmine必須是true 。 這就是s why window.mocha = true`
window.beforeEach ， window.afterEach ：與上述相同的原因; 因為angular-mocks.js要求它。
我設置了一些我打算在我的測試中常用的全局變量： angular ， expect ， mockInject ， mockModule 。

這些也可能提供一些額外的信息：

Angular.js + nw.js + webpack + karma + jasmine如何測試

問題描述

1 個解決方案

解決方案1
3 已采納 2018-07-20 15:53:34

Angular.js + nw.js + webpack + karma + jasmine如何測試

問題描述

1 個解決方案

解決方案1 3 已采納 2018-07-20 15:53:34

解決方案1
3 已采納 2018-07-20 15:53:34