代码之家  ›  专栏  ›  技术社区  ›  Arti

angular.js+nw.js+webpack+karma+jasmine如何测试

  •  5
  • Arti  · 技术社区  · 7 年前

    我有一个 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中包含,然后打包 西北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
                }
            }
        });
    };
    

    但是我的测试仍然没有看到角度的应用。

    describe('Welcome page', function() {
        beforeEach(angular.mock.module('WelcomePageCtrl'));
    });
    

    附笔 我完全不需要 karma jasminne 因此,任何解决方案都将受到赞赏。我只想用测试来覆盖我的项目

    1 回复  |  直到 7 年前
        1
  •  3
  •   aec    7 年前

    我也经历过类似的事情。我认为你不需要 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

    1. jsdom :为您 require("angular/angular") window 可以创建 document
    2. window.mocha :我们需要 angular-mocks 角度 if you look at the code window.mocha || window.jasmine 需要 true s why
    3. window.beforeEach ,请 window.afterEach angular-mocks.js
    4. 我设置了一些我计划在测试中常用的全局变量: ,请 expect mockInject ,请 mockModule