ユニットテストの作成方法は？（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() { 

     }); 
    }); 
});

私は最後のファイルを持っています。そのファイルには、角度アプリケーションが含まれています。私は2つの困難があります： - どのように私のプロジェクトに私の角度のファイルを追加できますか？ - どのように角度モックを正しく追加できますか？モジュールを追加しようとするたびに（私のモジュールコードが含まれていなくても）、私はこのエラーが出ます： "TypeError：angular.mock.moduleは関数"ではありません。

感謝:)

出典

2017-08-08 MAY

あなたがテストするために何をしようとしているために役に立てば幸い？ – Demon

あなたはここで、角度4での作業の例を見つけることができます：https://github.com/ericminio/learning-typescript

これは、モカのシムのためのテストとJavaScriptの両方typescriptですと書かれています。

この例の重要なポイントは、サーバーが動作していることを前提としたほとんどのチュートリアルで見られるように、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 
});

以前のバージョン

出典

2017-11-07 17:29:51 ericminio

ユニットテストの作成方法は？ （Mocha + JsDom + Angular）

答えて

関連する問題

ユニットテストの作成方法は？（Mocha + JsDom + Angular）