如何进行单元测试？（Mocha + JsDom + Angular）

问题描述：

我尝试使用Mocha和Angular进行单元测试项目。因为我必须把它做成一个控制台（有jenkins的jUnit报告），所以我将JsDom添加到了我的项目中。不幸的是，我没有成功加载我的Angular应用程序。如何进行单元测试？（Mocha + 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" 
    } 
}

这里是我的模拟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不是函数”。

谢谢:)

你有什么测试？ – Demon

答

你可以找到与角4这里工作的例子：https://github.com/ericminio/learning-typescript

这是写有两个打字稿用于测试和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 
});

希望帮助的早期版本

如何进行单元测试？ （Mocha + JsDom + Angular）

相关推荐

如何进行单元测试？（Mocha + JsDom + Angular）