角单元测试工作在浏览器，但误差放肆 [英] Angular unit test works in browser but errors in Chutzpah

问题描述

我有一个使用的角度UI引导预输入指令的角模块。我试图用qunit和放肆的单元测试这一点。

单元测试运行并通过时，通过浏览器运行，但返回错误时放肆运行：

  

错误：错误：[$喷油器：modulerr]无法实例模块对myApp
  因：错误：[$喷油器：NOMOD]模块'对myApp'不可！您
  无论是拼写错误的模块名称，或忘了加载它。如果注册
  模块确保您指定的依赖作为第二
  参数。

为什么发生这个错误？

JS

 （函数（）{
    VAR应用= angular.module（'对myApp'，['ui.bootstrap']）;    app.factory（'myFactory'，['$ HTTP'，函数（$ HTTP）{
        变种myFactory = {};
        myFactory.getLocations =功能（查询）{
            返回$ http.get（'/位置，{params：一个{查询：查询}}）;
        };        返回myFactory;
    }]）;    app.controller（'myController的'，['myFactory'，函数（myFactory）{
        this.location ='';        this.getLocations =功能（查询）{
            返回myFactory.getLocations（查询）。然后（功能（响应）{
                返回response.data;
            }）;
        };
    }]）;
}）（）;
 

HTML

 ＆LT; D​​IV数据-NG-应用=对myApp数据-NG-控制器=作为myController的我＆GT;
    ＆LT;输入名称=位置类型=文本数据-NG-模式=my.location数据预输入=在my.getLocations（$ viewValue）位置定位级=表格控＆GT;
＆LT; / DIV＆GT;
 

单元测试

  ///＆lt;参考路径=angular.js/＆GT;
///＆lt;参考路径=角mocks.js/＆GT;
///＆lt;参考路径=角UI / UI的引导-tpls.js/＆GT;
///＆lt;参考路径=qunit-1.15.0.js/＆GT;
///＆lt;参考路径=兴农-1.9.1.js/＆GT;
///＆lt;参考路径=myapp.js/＆GT;变种appMocks = angular.module（appMocks，[]）;appMocks.config（函数（$提供）{
    $ provide.decorator（'$ httpBackend'，angular.mock.e2e $ httpBackendDecorator）;
}）;VAR喷油器= angular.injector（['NG'，'对myApp'，'appMocks']）;
VAR范围= {};
变量$ =控制器injector.get（'$控制器'）;
变量$ httpBackend = injector.get（'$ httpBackend'）;
变种myFactory = injector.get（'myFactory'）;QUnit.module（MyApp的测试，{
    设置：功能（）{
        。范围= injector.get（'$ rootScope'）美元的新（）;
        $控制器（'作为myController的我'，{
            $适用范围：适用范围，
            myFactory：myFactory
        }）;
    }
}）;QUnit.test（获取位置返回有效的位置'，函数（断言）{
    $ httpBackend.expectGET（'/位置查询= L？）响应（['伦敦'，'利兹']）;    VAR的结果;
    scope.my.getLocations（'L'）。然后（功能（响应）{
        结果=响应;
    }）;
    $ httpBackend.flush（）;    assert.equal（2 result.length，结果的正确数目返回）;
}）;
 

放肆设置

  {
    框架：qunit
    codeCoverageIncludes：[的* .js]，
    codeCoverageExcludes：[
        * \\\\兴农-1.9.1.js
        * \\\\ angular.js
        * \\\\角mocks.js
        * \\\\角UI / UI的引导-tpls.js
        * \\\\ \\\\测试*
    ]
    RootReferencePathMode：SettingsFileDirectory，
    TestHarnessDirectory：./
}
 

解决方案

的问题是.js文件的加载顺序之一。当您使用code覆盖运行blanket.js插件将仪器文件和导致他们异步加载。既然你是从仪表排除测试文件这是源文件之前加载它。为了改变这种只允许你的测试文件，通过删除进行检测的 \\测试JS \\ 的从你的coverageexcludes部分：

  {
    框架：qunit
    codeCoverageIncludes：[的* .js]，
    codeCoverageExcludes：[
        * \\\\角/ angular.js
        * \\\\角/角mocks.js
        * \\\\角UI / UI的引导-tpls.js
        * \\\\ qunit / qunit-1.15.0.js
        * \\\\兴农/兴农，1.9.1.js
    ]
    RootReferencePathMode：SettingsFileDirectory，
    TestHarnessDirectory：./
}
 

I have an angular module which uses the angular ui bootstrap typeahead directive. I am attempting to unit test this with qunit and chutzpah.

The unit test runs and passes when run through a browser, but returns an error when run with Chutzpah:

Error: Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

Why is this error occurring?

JS

(function () {
    var app = angular.module('myApp', ['ui.bootstrap']);

    app.factory('myFactory', ['$http', function ($http) {
        var myFactory = {};
        myFactory.getLocations = function (query) {
            return $http.get('/Locations', { params: { query: query } });
        };

        return myFactory;
    }]);

    app.controller('MyController', ['myFactory', function (myFactory) {
        this.location = '';

        this.getLocations = function (query) {
            return myFactory.getLocations(query).then(function (response) {
                return response.data;
            });
        };
    }]);
})();

HTML

<div data-ng-app="myApp" data-ng-controller="MyController as my">
    <input name="location" type="text" data-ng-model="my.location" data-typeahead="location for location in my.getLocations($viewValue)" class="form-control">
</div>

Unit Test

///<reference path="angular.js"/>
///<reference path="angular-mocks.js"/>
///<reference path="angular-ui/ui-bootstrap-tpls.js"/>
///<reference path="qunit-1.15.0.js"/>
///<reference path="sinon-1.9.1.js"/>
///<reference path="myapp.js"/>

var appMocks = angular.module("appMocks", []);

appMocks.config(function ($provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});

var injector = angular.injector(['ng', 'myApp', 'appMocks']);
var scope = {};
var $controllers = injector.get('$controller');
var $httpBackend = injector.get('$httpBackend');
var myFactory = injector.get('myFactory');

QUnit.module("MyApp Tests", {
    setup: function () {
        scope = injector.get('$rootScope').$new();
        $controllers('MyController as my', {
            $scope: scope,
            myFactory: myFactory
        });
    }
});

QUnit.test('Get locations returns valid locations', function (assert) {
    $httpBackend.expectGET('/Locations?query=l').respond(['london', 'leeds']);

    var result;
    scope.my.getLocations('l').then(function (response) {
        result = response;
    });
    $httpBackend.flush();

    assert.equal(2, result.length, "correct number of results returned");
});

Chutzpah Settings

{    
    "Framework": "qunit",
    "CodeCoverageIncludes": ["*.js"],
    "CodeCoverageExcludes": [
        "*\\sinon-1.9.1.js",  
        "*\\angular.js", 
        "*\\angular-mocks.js",
        "*\\angular-ui/ui-bootstrap-tpls.js",
        "*\\Tests\\*"
    ],   
    "RootReferencePathMode":"SettingsFileDirectory",
    "TestHarnessDirectory": "./"
}

解决方案

The issue is one of .js loading order. When you are running with code coverage the blanket.js plugin will instrument your files and cause them to load asynchronously. Since you were excluding your test files from instrumentation it was loading it before the source file. To change this just allow your test file to be instrumented by removing "\test-js\" from your coverageexcludes section:

{    
    "Framework": "qunit",
    "CodeCoverageIncludes": ["*.js"],
    "CodeCoverageExcludes": [
        "*\\angular/angular.js", 
        "*\\angular/angular-mocks.js",
        "*\\angular-ui/ui-bootstrap-tpls.js",
        "*\\qunit/qunit-1.15.0.js",
        "*\\sinon/sinon-1.9.1.js"
    ],   
    "RootReferencePathMode":"SettingsFileDirectory",
    "TestHarnessDirectory": "./"
}

这篇关于角单元测试工作在浏览器，但误差放肆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！