mardi 8 août 2017

How to make unit tests ? (Mocha + JsDom + Angular)

I try to make a unit test project, using Mocha and Angular. As I must do it into a console (with jUnit report for Jenkins), i added JsDom to my project. Unfortunately, i don't succeed to load my Angular application.

Here is my 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"
    }
}

Here is my mock-browser.js file :

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;

Here is my UnitTest.js file :

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 () {

        });
    });
});

I have a last file, that one contains my Angular application. So, i have two difficulties : - how can i add my Angular file in my project ? - how can i add angular-mocks correctly ? Each time i try to add a module (even if my module code is not included), i have this error : "TypeError: angular.mock.module is not a function".

Thanks :)

Aucun commentaire:

Enregistrer un commentaire