Question

我可以使用一些帮助来找到解决问题的方法。当我向一个api发出请求时，我需要向angular2应用程序模拟一些数据，我需要做类似的事情：

$httpBackend.when('GET', '/userbookings/').respond(my json file data);

问题在于我可以在google上找到所有内容，使用用于angularJS（angular 1）的$ httpBackend。

有没有人知道如何在我的E2E测试中使用它（该应用程序是一个angular2 applciation）？我正在尝试使用量角器或夜间仪表（已尝试过两个框架）

规范测试：

describe('Protractor Mocking bookings for angular2 site', function() {

var ngMockE2E = require('ng-mock-e2e');

var $httpBackend = ngMockE2E.$httpBackend;

beforeEach(function() {
    ngMockE2E.addMockModule();
    ngMockE2E.addAsDependencyForModule('myApp');
    ngMockE2E.embedScript('/bower_components/angular-mocks/angular-mocks.js');
});


afterEach(function() {
    ngMockE2E.clearMockModules();
});

it('Inject mock data of bookings', function() {

    var EC = protractor.ExpectedConditions;
    var global = require('../bin/globals.js');

    // Bookings data in a json file which should be send as the response
    var mockData = require('../testData.json');

    browser.ignoreSynchronization = false;

    $httpBackend.when('GET', '/userbookings').respond(mockData);

    browser.get(global.so.enLoggedIn);

});

});

这个测试不会起作用，因为它使用了一些angular1方式。已经展示了它，所以你可以看到我的测试结果如何。

希望有人可以帮助我，因为很难找到一些使用angular2的人。

Answer 1

量角器 does not yet support adding mock modules for Angular 2 applications ：

// TODO: support mock modules in Angular2. For now, error if someone
// has tried to use one.
if (self.mockModules_.length > 1) {
  deferred.reject('Trying to load mock modules on an Angular2 app ' +
      'is not yet supported.');
}

并且，我还为TODO创建了一个引起关注的github问题：

Support adding mock modules to Angular 2 applications

顺便说一下，这也意味着protractor-http-mock无法正常工作，因为它依赖于addMockModule internally。我亲自尝试了protractor-http-mock示例Angular2应用程序，得到了：

失败：尚不支持尝试在Angular2应用上加载模拟模块。

http-backend-proxy和httpbackend包也是如此。

我想，虽然问题尚未解决，但您应该考虑启动一个代理，它可以作为一种外部模拟＆＃34;到你的API后端，没有亲自完成，请参阅：

Answer 2

使用json-server结束，因为Angular 2仍然不支持addMockModule

Answer 3

由于在角度2中没有对模拟模块的支持，我制作了一个小的量角器插件，允许模拟ajax请求。您可以在此处找到它：https://github.com/krisboit/protractor-xmlhttprequest-mock

目前还没有文档，但您可以找到样本测试。我希望它可以帮助你。

Answer 4

我找到了一个相对容易的解决方案，并且到目前为止效果很好，并且不需要您更改对现有导入的所有引用。

根据要完成的任务，有几个步骤。我正在进行e2e测试，因此将概述该解决方案。

首先使用特定于您的测试环境的配置更新您的angular.json，（在“ serve”上方）是我的：

"serve-e2e": {
    builder: '@angular-devkit/build-angular:dev-server',
    options: {
        browserTarget: '{APP_NAME}:build'
    },
    configurations: {
        test: {
            browserTarget: '{APP_NAME}:build:test'
        }
    }
};

然后，通过使用新配置更新devServerTarget来更新现有的e2e配置：

"devServerTarget": "{APP_NAME}:serve-e2e:test"

接下来，我创建了一组称为mock-service-mapping的特定于环境的新文件，因此在我的环境文件夹中，我有：

mock-service-mapping.ts
mock-service-mapping.test.ts

在这些文件中，我将映射存储到我的真实和模拟服务中：

import { RealDataService } from '../app/lib/services/real-data.service';

export const mockServiceMapping = {
     dataServiceClass: RealDataService
};

现在，我们需要使它们特定于环境。更新您的angular.json以为您的不同环境设置正确的映射：

"test": {
    fileReplacements: [
        {
            replace: 'src/environments/environment.ts',
            with: 'src/environments/environment.test.ts'
        },
        {
            replace: 'src/environments/mock-service-mapping.ts',
            with: 'src/environments/mock-service-mapping.test.ts'
        }
    ]
};

最后一块魔法。在模块声明中，设置提供程序以从新的模拟环境文件中提取类。

{ provide: DataService, useClass: mockServiceMapping.dataServiceClass }

瞧，模拟服务，没有库，没有混乱，没有额外的编译代码，而且相当简单！

Answer 5

个人而言，我使用ng-apimock插件来模拟使用代理的后端的所有网络调用。

它工作得很好，配置简单。只需按照Angular应用程序here

的配置进行操作即可

量角器，在api请求上使用angular2模拟后端

5 个答案: