angular ngMock $httpBackend：将模拟拆分为多个文件

Question

我正在开发一个大型 Angular 应用程序，它需要在浏览器中模拟整个 API（也称为 无后端开发）。我的应用程序中有很多不同的部分和视图，每个部分都有自己的模拟定义。

我知道我可以使用ngMock 模块的$httpBackend 服务来模拟AJAX 调用。这就是我想要的。我找到了working snippet at jsfiddle。

但我缺少的是如何将其拆分为多个文件？正如我所说，我的应用程序将有数百个页面，甚至可能有更多的 RESTful 资源，我不能简单地将其放入一个源文件中。这作为架构问题：将数千个 whenGET 和 whenPOST 调用分成不同文件以简单地模拟相同 API 的最佳方法是什么（即有效、可扩展且易于维护）？ 如何在项目文件结构方面分离 mocks？应用程序中的每个模块是否应该有一个单独的.run() 方法？我可以从 JSON 文件加载模拟吗？

我将不胜感激解释和演示

为了让回答更容易，下面是小提琴的相关部分：

myApp.run(function ($httpBackend) {
    var phones = [{name: 'phone1'}, {name: 'phone2'}];

    $httpBackend.whenPOST('/phones').respond(function (method, url, data, headers) {
        console.log('Received these data:', method, url, data, headers);
        phones.push(angular.fromJson(data));
        return [200, {}, {}];
    });

    $httpBackend.whenGET('/phones').respond(function (method, url, data) {
        console.log("Getting phones");
        return [200, phones, {}];
    });

    $httpBackend.whenGET(/\.html$/).passThrough();
});

Answer 1

你可以这样使用：

XXXModule.factory('MockedDataProvider', () ->
  getData: (url) ->
    request = new XMLHttpRequest();
    request.open('GET', url, false)
    request.send(null)
    request.response
)
.run([
  '$httpBackend',
  'MockedDataProvider'
  ($httpBackend, MockedDataProvider) ->
    $httpBackend.whenGET(/i18n/).passThrough()
    $httpBackend.whenGET('/api/xxx/yyy').respond(
      (method, url, data) ->
        data = MockedDataProvider.getData('xxx/mocked.json')
        [200, data]
 )
])

你可以将你的模拟分成单独的文件夹/模块等......它应该工作得很好:)

附言。代码在咖啡脚本中；）

Answer 2

我遇到过类似的问题，这是我的解决方案。

请注意，我使用的是generator-cg-angular，并且文件结构是从那里继承的。

index.html ..................... main HTML file
app.js ......................... angular module initialization and route setup
httpBackendStub.js ............. backend stub module
/service ....................... angular services folder
    dimension.js ............... example service
    dimension-spec.js .......... example service unit test
    dimension-stub.js .......... example backend stub with routes and data

有data-concat="false" 属性，这意味着所有后端存根都将在构建时被删除。

index.html

<!-- Bower components and angular app scripts included here -->
...
<!-- Backend stubbing -->
<script src="bower_components/angular-mocks/angular-mocks.js" data-concat="false"></script>
<script src="httpBackendStub.js"        data-concat="false"></script>
<script src="service/dimension-stub.js" data-concat="false"></script>
...
<!-- Initial HTML markdown -->

httpBackendStub.js

angular.module('app')
    .config(function($provide) {
        $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
    })
    .run(function ($httpBackend) {
        // pass templates
        $httpBackend.whenGET(/partial\/.*/).passThrough();
    });

服务/维度-stub.js

angular.module('app').run(function ($httpBackend) {

    $httpBackend.whenGET('api/dimensions').respond([
        {
            name: 'Medium',
            ...
        },
        ...
    ]);

});