使用 Jasmine 和 RequireJs 进行 AngularJs 单元测试答案

【问题标题】：AngularJs Unit Tests with Jasmine and RequireJs使用 Jasmine 和 RequireJs 进行 AngularJs 单元测试
【发布时间】：2013-06-29 19:52:04
【问题描述】：

我无法使用 Jasmine 和 RequireJs 为 Angular JS 应用程序进行单元测试。我创建了一个 Plunker here

我遇到的问题是创建一个模块。如果我在控制器中包含 Angular 模块的设置，像这样（参见 Plunker 中的 Controller.js）：

angular.module('catalogManagementApp', []);

然后一切正常。但是，这个模块是在另一个文件中创建的，所以这不起作用。因此，如果我尝试使用 Angular Mocks 模块功能在测试中设置模块，我会收到一条错误消息“No module: catalogManagementApp”。

如果您查看 ControllerTests.js 文件，这是有道理的，因为 RequireJS 在我调用 Angular Mocks 以创建模块之前加载了控制器：

beforeEach(module('catalogManagementApp'));

但是，我不确定如何使其正常工作。正如您从 ControllerTests.js 文件中注释掉的代码中看到的那样，我尝试将 Controller 的 require 调用移动到调用设置模块之后，但这会导致 Jasmine 测试运行器失败并且仍然相同 no module 错误.

用RequireJs运行Jasmine的代码改编自this

【问题讨论】：

标签： angularjs requirejs jasmine

【解决方案1】：

我有很多问题变得棱角分明、嘲弄和需要与茉莉花玩得很好。最后，答案很明显，您需要启动 jasmine 并确保它符合您的规格。这是我所做的精简版，我希望它能帮助你走上正轨。

/* this would be 'main'*/
require.config({       
    paths: {
        'jasmine-boot': 'lib/jasmine/boot',
        'jashtml': 'lib/jasmine/jasmine-html',
        'jasmine': 'lib/jasmine/jasmine',            
        'angular': 'lib/angular',           
        'angular-mocks': 'lib/angular-mocks',
        'app': 'src/app',           
        'test': 'spec/first.spec',
    },
    shim: {
        'jashtml': {
            deps: ['jasmine']
        },
        'jasmine-boot': {
            deps: ['jasmine', 'jashtml']
        },            
        'angular': {
            exports: "angular"
        },            
        'angular-mocks': {
            exports: "angular.mock",
            deps: ['angular']
        },            
        'test': {
            deps: ['angular-mocks']
        }
    }
});

require(['jasmine-boot'], function () {
    require(['test'], function () {
        //trigger Jasmine
        window.onload();
    });
});

/*this would be 'first.spec'*/
 define(['app'], function (app) {

    var  mockScope, controller;

    function init() {
                return  angular.mock.inject(function ($injector, _$rootScope_, _$controller_) {                  
                    mockScope = _$rootScope_.$new();             

                    controller = _$controller_('testCtrl', {                        
                        $scope: mockScope
                    });

                 });
            };

    describe('expect require', function () {

        beforeEach(module("app"));
        beforeEach(init());

        describe('to be ', function() {
            it('clever', function () {                
                var foo = "bar";
                controller.setValue(foo);
                expect(controller.value).toBe(foo);
            });
        });
    });
});

/*jasmine spec runner*/
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Jasmine Spec Runner v2.1.3</title>
        <link rel="shortcut icon" type="image/png" href="jasmine_favicon.png">
        <link rel="stylesheet" href="jasmine.css">
        <script src="../../require.js" data-main="main.js"></script>
    </head>
    <body>
    </body>
 </html>

【讨论】：