Question

我试图让Jasmine与我的Angular JS项目一起工作但是我总是遇到以下错误。我试图让它运行一个非常简单的测试。我还使用RequireJS设置了角度js项目。我在下面给出了我的代码。

我得到的错误是：

enter image description here

My Very Simple TestSpec如下：

describe('Controller:UserController', function () {
var scope,controller;
beforeEach(function () {
    module('app');
    inject(function ($controller,$rootScope) {
            scope = $rootScope.$new();
            controller = $controller('UserController', { '$scope': scope });
    });
});           

it('checks the troller name', function () {
    expect(scope.name).toBe('Superhero');
});     
});

我的控制器代码如下：

define(['app','WebCallManager'], function (app) {
app.controller('UserController', function ($scope,$location,webcallService) {

    $scope.name = 'Superhero';  

    $scope.loginUser = function(){
        console.log("Login User Called...");
        $location.path('/login').replace();
        console.log("View Navigated...");
    };


    $scope.slidePanel = function(){
         f7.openPanel('left');
    };


    $scope.doWebCall = function(){
        console.log("Doing the Web Call...");
        webcallService.sendGetRequest();
    };
});
});

TestRunner.html是：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Test Runner v2.0.1</title>

<link rel="shortcut icon" type="image/png" href="framework/lib/jasmine-2.0.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="framework/lib/jasmine-2.0.1/jasmine.css">

 <!-- Jasmine/Angular testing framework libraries -->
 <script type="text/javascript" src="framework/lib/jasmine-2.0.1/jasmine.js"></script>
 <script type="text/javascript" src="framework/lib/jasmine-2.0.1/jasmine-html.js">    </script>
 <script type="text/javascript" src="framework/lib/jasmine-2.0.1/boot.js"></script>
 <script type="text/javascript" src="framework/lib/angular.js"></script>
 <script type="text/javascript" src="framework/lib/angular-mocks.js"></script>

 <!-- include source files here... -->
 <script data-main="main" src="framework/lib/require.js"></script>

 <!-- include spec files here... -->
 <script type="text/javascript" src="UserControllerTest.js"></script>

 </head>

 <body>
 </body>
 </html>

和用于加载requirejs依赖项的main.js文件是：

(function() {
require.config({
    baseUrl: "../www/scripts",    

    // alias libraries paths
    paths: {
        'angular': '../libs/angular',
        'angular-route': '../libs/angular-route',
        'angular-animate':'../libs/angular-animate',
        'angular-mocks':'../libs/angular-mocks',
        'angularAMD': '../libs/angularAMD.min',
        'Framework7':'../libs/framework7',
        'UserController':'controller/UserCtrl',
        'WebCallManager':'services/WebCallManager'
    },

    // Add angular modules that does not support AMD out of the box, put it in a shim
    shim: { 
        'angularAMD': ['angular'],
        'angular-route': ['angular'],
        'angular-animate':['angular'],
        'angular-mocks':['angular'],
        'Framework7':{exports: 'Framework7'}
    },

    //kick start application
    deps: ['app']
});

require(['Framework7'], function(Framework7) {

     f7 = new Framework7({
        modalTitle: 'Seed App',
        swipePanel: 'left',
        animateNavBackIcon: true
    });

    return {
        f7: f7
    };
});

})();

我还为我的种子项目here提供了完整的资源。如果有人能帮助我，我将非常感激。

Answer 1

您应该包含控制器中使用的所有provider和services以避免此错误

describe('Controller:UserController', function () {
    var scope,controller,webcallService,$location;

    beforeEach(module('app'));

    beforeEach(inject(function ($controller,$rootScope,$injector,_webcallService_) {
            scope = $rootScope.$new();
            webcallService=_webcallService_;
            $location=$injector.get('$location');
            controller = $controller('UserController', { '$scope': scope });
     }));           

    it('checks the troller name', function () {
       expect(scope.name).toBe('Superhero');
    });     
});

Answer 2

您可能遇到的问题是您的测试代码在require + angular完成初始化之前运行。您应该编写测试代码以考虑使用requirejs和angularjs。

这可能意味着使用require / define配置测试，就像代码的其余部分一样，并相应地修改运行器。

可能的解决方案是在此处接受的答案中提出的设置：Getting requirejs to work with Jasmine

更新：还要确保检查这个Does Jasmine 2.0 really not work with require.js?这基本上告诉你，如果不修改jasmine boot.js，就没有办法推迟jasmine 2的初始化，直到require完成。

Answer 3

尝试这种方式：

describe('Controller:UserController', function () {
    var scope,controller;

    beforeEach(module('app'));

    beforeEach(inject(function ($controller,$rootScope) {
            scope = $rootScope.$new();
            controller = $controller('UserController', { '$scope': scope });
     }));           

    it('checks the troller name', function () {
       expect(scope.name).toBe('Superhero');
    });     
});

我有some unit tests online with Jasmine 2.0，您可能需要查看代码。例如，这一个：http://vtortola.github.io/ng-terminal-emulator/tests/spec/vtortola.ng-terminal.spec.js

Answer 4

我猜你的app.js永远不会被包括在内。

猜测它应该在下面添加：

 <!-- include source files here... -->
 <script data-main="main" src="framework/lib/require.js"></script>

让Jasmine与Angular JS一起工作

4 个答案: