如何进行单元测试？（摩卡 + JsDom + 角）答案

【问题标题】：How to make unit tests ? (Mocha + JsDom + Angular)如何进行单元测试？（摩卡 + JsDom + 角）
【发布时间】：2017-08-08 11:58:19
【问题描述】：

我尝试使用 Mocha 和 Angular 创建一个单元测试项目。由于我必须在控制台中执行此操作（使用 Jenkins 的 jUnit 报告），我将 JsDom 添加到我的项目中。不幸的是，我没有成功加载我的 Angular 应用程序。

这是我的 package.json (npm)：

{
    "name": "subs-tech-saas-js.test",
    "version": "0.0.0",
    "description": "SubsTechSaasJS.Test",
    "main": "app.js",
    "author": {
        "name": "admlocal",
        "email": ""
    },
    "scripts": {
        "test": "mocha *Test.js --reporter mocha-junit-reporter"
    },
    "devDependencies": {
        "angular": "1.5.5",
        "angular-resource": "1.5.5",
        "angular-messages": "1.5.5",
        "angular-animate": "1.5.5",
        "angular-aria": "1.5.5",
        "angular-sanitize": "1.5.5",
        "angular-route": "1.5.5",
        "angular-cookies": "1.5.5",
        "angular-filter": "*",
        "angular-mocks": "1.5.5",
        "mocha": "^3.5.0",
        "mocha-junit-reporter": "latest",
        "jsdom": "^11.1.0"
    }
}

这是我的 mock-browser.js 文件：

const { JSDOM } = require("jsdom");
const DEFAULT_HTML = 
"<!DOCTYPE html>" +
"<html>" +
    "<head>" +
    "</head>" +
    "<body>" +
        //"<div id=\"mocha\"></div>" +
        //"<script src=\"node_modules/mocha/mocha.js\"></script>" +
        //"<script>" +
        //    "if (!mocha) {" +
        //        "console.log(\"You need a mocha framework. get it with 'npm install' using npm.\");" +
        //    "}" +
        //    "mocha.setup(\"bdd\");" +
        //"</script>" +
        //"<script src=\"node_modules/angular/angular.min.js\"></script>" +
        //"<script src=\"node_modules/angular-resource/angular-resource.min.js\"></script>" +
        //"<script src=\"node_modules/angular-messages/angular-messages.min.js\"></script>" +
        //"<script src=\"node_modules/angular-animate/angular-animate.min.js\"></script>" +
        //"<script src=\"node_modules/angular-aria/angular-aria.min.js\"></script>" +
        //"<script src=\"node_modules/angular-sanitize/angular-sanitize.min.js\"></script>" +
        //"<script src=\"node_modules/angular-route/angular-route.min.js\"></script>" +
        //"<script src=\"node_modules/angular-cookies/angular-cookies.min.js\"></script>" +
        //"<script src=\"node_modules/angular-filter/index.js\"></script>" +
        //"<script src=\"node_modules/angular-mocks/angular-mocks.js\"></script>" +
        //"<script src=\"../CollectorWebSite/dist/Scripts/substech-external.min.js\"></script>" +
        //"<script src=\"../CollectorWebSite/dist/Scripts/substech-custom-tools.min.js\"></script>" +
        //"<script src=\"../CollectorWebSite/dist/Scripts/substech-collector.min.js\"></script>" +
        //"<script src=\"../CollectorWebSite/dist/Scripts/substech-kendo.min.js\"></script>" +
        //"<script src=\"../CollectorWebSite/dist/Scripts/jsonata.js\"></script>" +
        //"<script>mocha.run();</script>" +
    "</body>" +
"</html>";
const jsdom = new JSDOM(DEFAULT_HTML);
const { window } = jsdom;

global.document = jsdom;
global.window = window;
global.navigator = {
    userAgent: "node.js"
};

const props = Object.getOwnPropertyNames(window)
                .filter(prop => typeof global[prop] === "undefined")
                .map(prop => Object.getOwnPropertyDescriptor(window, prop));
Object.defineProperties(global, props);

/*
 * Only for NPM users
 */
require("angular/angular");
require("angular-mocks/angular-mocks");
require("angular-resource/angular-resource");
require("angular-messages/angular-messages");
require("angular-animate/angular-animate");
require("angular-aria/angular-aria");
require("angular-sanitize/angular-sanitize");
require("angular-route/angular-route");
require("angular-cookies/angular-cookies");
require("angular-filter/index");

global.angular = window.angular;
global.inject = global.angular.mock.inject;
global.ngModule = global.angular.mock.module;

这是我的 UnitTest.js 文件：

const mockBrowser = require("./mock-browser");
const Mocha = require("mocha");
const assert = require("assert");
const mocha = new Mocha();

describe("Collector", function () {
    var SubsFormCtrl = null;

    angular.mock.module("subsTechSaasApp");

    beforeEach(function () {
       /* inject(function ($controller) {
            SubsFormCtrl = $controller("SubsFormCtrl");
        });*/
    });

    describe("SubsFormCtrl Unit Test", function () {
        it("xxxxx:", function () {

        });
    });
});

我有最后一个文件，其中包含我的 Angular 应用程序。所以，我有两个困难： - 我如何在我的项目中添加我的 Angular 文件？ - 我怎样才能正确添加角度模拟？每次我尝试添加一个模块时（即使我的模块代码不包括在内），我都会遇到这个错误：“TypeError: angular.mock.module is not a function”。

谢谢:)

【问题讨论】：

你想测试什么？

标签： angular unit-testing testing mocha.js jsdom

【解决方案1】：

您可以在此处找到 angular 4 的工作示例：https://github.com/ericminio/learning-typescript

它是用用于测试的 typescript 和用于 mocha's shim 的 javascript 编写的。

这个例子的关键是提供一个自定义的资源加载器，它可以从文件系统中读取模板，尽管我们在大多数假设服务器正在运行的教程中都尝试通过 http 请求来获取它。

testing.TestBed.configureCompiler({
    providers: [ {
        provide:require('@angular/compiler').ResourceLoader,
        useValue:{
            get:function(url) {
                var content = require('fs').readFileSync('./app/lib/' + url)
                                           .toString();
                return content;
            }
        } 
    }],
    useJit: true
});

希望对早期版本有所帮助

【讨论】：