ChatGPT解决这个技术问题 Extra ChatGPT

在 Jasmine 单元测试中模拟 AngularJS 模块依赖项

我正在尝试在一个模块中对控制器代码进行单元测试,该模块将其他模块作为依赖项,但无法弄清楚如何正确模拟它们。

我正在使用 Jasmine 框架并使用 Karma (Testacular) 运行我的测试。

模块代码

var app = angular.module('events', ['af.widgets', 'angular-table']);

app.controller('eventsCtrl', function([dependencies]){
    $scope.events = [];
    ...
});

规格代码

describe('events module', function(){
    var $scope,
        ctrl;

    beforeEach(function(){
        angular.mock.module('af.widgets', []);
        angular.mock.module('angular-table', []);
        module('events', ['af.widgets', 'angular-table']);
    });

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

    it('should have an empty events array', function(){
        expect($scope.events).toBe([]);
    })
});

我得到的错误是 Karma 是“没有模块 af.widgets”,所以显然我没有正确地模拟模块依赖项。有什么提示吗?

$scope = $rootScope.new();应该是 $scope = $rootScope.$new();(也许对于我们的版本)

D
Davide Icardi

如果你想模拟一个声明一个或多个服务的模块,我使用了这个代码:

beforeEach(function(){
    module('moduleToMock');
    module(function ($provide) {
        $provide.value('yourService', serviceMock);
    });
});

如果您要模拟的服务也是您要进行单元测试的服务(在另一个 jasmine 描述中),这将很有用。 fscof 提出的解决方案很好,但您无法为 angular-table 模块创建单元测试。


这是正确的方法。因为您通常不想对所有测试都使用一个模拟。也在这里:stackoverflow.com/a/18756347/1105860
如果我想将 serviceMock 放在另一个文件中而不声明全局变量怎么办?
对于我自己的模块,我更喜欢这种方法,但是我不想为第 3 方模块编写任何单元测试。在那种情况下,我更喜欢@fscof 他的解决方案。两者都是正确的,具体取决于上下文:-)
如果我想从 serviceMock 对象的方法返回承诺怎么办。我需要$q,对吗?如何获得内部模块功能。我无法得到那个..你能帮我吗?
f
fscof

这是我发现的:

我没有在我的 karma.conf.js 文件中加载任何“角度表”模块,因此出现了错误。起初这是故意的,因为我想在没有实际表模块的情况下测试“事件”模块。

通过在我的测试文件夹中创建一个名为“mocks/angular-table.js”的新文件并添加以下代码,我能够轻松地模拟“angular-table”模块:

/mocks/angular-table.js

'use-strict';
angular.module('angular-table', []);

我将此文件添加到我的 karma.conf.js 文件中,以及我想要测试的真实“事件”模块:

业力.conf.js

...
files = [
    JASMINE,
    JASMINE_ADAPTER,
    'scripts/libs/angular.js',
    'scripts/libs/angular-mocks.js',
    'scripts/events.js', // this is the real module.
    'scripts/mocks/*.js', //loads all custom mocks.
    'scripts/specs/*.spec.js' // loads my spec file.
] 
...

最后在我的规范文件中,我能够通过在 beforeEach 块中分别调用它们来添加这两个模块:

规格/事件.spec.js

beforeEach(function(){
    module('angular-table');
    module('events');
});

我从 this post 得到了以这种方式构建文件的想法


你不是通过调用 angular.module 来模拟“angular-table”模块吗?我想你想调用模块,因为 angular-mocks 将它附加到全局范围?无论哪种方式,谢谢你,因为这帮助我建立并运行了我的规范。
“我能够通过在我的测试文件夹中创建一个名为'mocks/angular-table.js'的新文件并添加以下代码来轻松模拟'angular-table'模块:/mocks/angular-table.js”
@fscof 该链接给出 404。
C
C.Champagne

我最近发布了 ngImprovedTesting,它应该让 AngularJS 中的模拟测试更容易。

在您的情况下,只需在 Jasmine 测试中使用以下内容:

beforeEach(ModuleBuilder.forModule('events').serviceWithMocks('eventsCtrl').build());

有关 ngImprovedTesting 的更多信息,请查看其介绍性博文:http://blog.jdriven.com/2014/07/ng-improved-testing-mock-testing-for-angularjs-made-easy/


关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

领先一步获取最新的外包任务吗?

立即订阅