Question

我是AngularJS的新手，虽然我可以获得基本的教程步骤，但我正在尝试扩展我将要开发的实际应用程序的结构。模块将在运行时添加到此应用程序中。

目录结构：

/网站/应用

/网站/应用/ lib中

/Website/app/Modules/App.js

/网站/应用程序/模块/活动/控制器

/网站/应用程序/模块/活动/观点

/网站/应用程序/模块/活动/ test_user

UpcomingEventsSpec.js

/网站/应用程序/模块/活动/ test_end2end

的index.html

<html lang="en" ng-app="App">
<head>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>

    <script src="Modules/app.js"></script>
</head>
<body ng-controller="UpcomingEventsCtrl">

<ul>
    <li ng-repeat="EventData in Events">
        {{EventData.Name}}
        <p>{{EventData.Date}}</p>
        <p>{{EventData.Location}}</p>
    </li>
</ul>
</body>
</html>

Modules \ app.js - 从RESTful服务加载时，将来会转移到Modules \ Events \ UpcomingEvents.js

var App = angular.module('App', []);
App.controller('UpcomingEventsCtrl', function($scope)
{
    $scope.Events = [
    {
        'Date': 20140329,
        'Time': 100000,
        'Name': 'Event 1',
        'Location': 'Location 1',
    },
    {
        'Date': 20140208,
        'Time': 093000,
        'Name': 'Event 2',
        'Location': 'Location 2',
    }];
});

模块\活动\ test_unit \ UpcomingEventsSpec.js

describe('App Controllers', function() 
{
    beforeEach(module('App'));

    describe('UpcomingEventsCtrl', function()
    {
        it('Should create "Upcoming Events" with 2 entries', function()
        {
            var scope = {},
                Control = new UpcomingEventsCtrl(scope);
            expect(scope.Events.length).toBe(2);
        });
    });
});

业力输出

PhantomJS 1.9.7 (Windows 7) App Controllers UpcomingEventsCtrl Should create
"Upcoming Events" with 2 entries FAILED
        ReferenceError: Can't find variable: UpcomingEventsCtrl
            at A:/app/Modules/Events/test_unit/UpcomingEvents_Spec.js:10
            at A:node_modules/karma-jasmine/lib/boot.js:117
            at A:node_modules/karma-jasmine/lib/adapter.js:171
            at http://localhost:9876/karma.js:189
            at http://localhost:9876/context.html:59
PhantomJS 1.9.7 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.002 secs / 0.002 secs)

来自Karma：

// list of files / patterns to load in the browser
files: [
    'app/lib/angular/angular.js',
    'app/lib/angular/angular-*.js',
    'app/Modules/*.js',
    'app/Modules/Events/**/*.js',
],


// list of files to exclude
exclude : [
    'app/lib/angular/angular-loader.js',
    'app/lib/angular/*.min.js',
    'app/lib/angular/angular-scenario.js'
],

运行时网站上会显示数据，但我无法无错运行测试。任何帮助将不胜感激。

Answer 1

问题在于如何在测试中实例化控制器。你在做：

Control = new UpcomingEventsCtrl(scope);

但是你没有在哪里定义一个名为UpcomingEventsCtrl的Javascript类。您正确地在Angular应用程序中定义此控制器，您只需要在测试中正确创建控制器。

您可以通过在测试中添加另一个beforeEach()函数来实现此目的：

describe('App Controllers', function() 
{
    // these will be initialized in the beforeEach()
    var controller, scope;

    beforeEach(module('App'));

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

    describe('UpcomingEventsCtrl', function()
    {
        it('Should create "Upcoming Events" with 2 entries', function()
        {
            // for the purpose of this example, confirm the controller is
            // not undefined/null
            expect(controller).toBeDefined();
            expect(controller).not.toBeNull();
            expect(scope.Events.length).toBe(2);
        });
    });
});

Karma - ReferenceError：找不到变量：xxxCtrl - 代码在浏览器中工作

1 个答案: