mockBackend = getTestBed().get(MockBackend);?答案

【问题标题】：mockBackend = getTestBed().get(MockBackend);?mockBackend = getTestBed().get(MockBackend);?
【发布时间】：2016-10-26 01:56:22
【问题描述】：

我正在学习使用 Karma 测试 Angular 2，并且想知道代码中的一些我不理解的点。 TestBed“模拟模块”配置好后，运行如下代码：

    mockBackend = getTestBed().get(MockBackend);

这是做什么的？我在另一篇文章中找到了以下解释：“获取对模拟后端的引用，因此我们可以在使用 Http.get 获取假数据时做出响应”，但我不明白为什么我需要“获取它”，是不是已经从 import {MockBackend, MockConnection} from '@angular/http/testing'; 那里得到了吗？还是模块以某种方式获取方法？

我后来就这样用了……还是不明白为什么要把它附加到测试台上：

    mockBackend.connections.subscribe(
        (connection: MockConnection) => {
            connection.mockRespond(new Response(
                new ResponseOptions({
                        body: "lol data"
                    }
                )));
        });

简而言之，实际问题是——我发布的第一行代码是做什么的？

完整代码，仅用于上下文：

import { TestBed, getTestBed, async, inject } from '@angular/core/testing';
import { Headers, BaseRequestOptions, Response, HttpModule, Http, XHRBackend, RequestMethod} from '@angular/http';

import {ResponseOptions} from '@angular/http';
import {MockBackend, MockConnection} from '@angular/http/testing';
import {FooHttpService} from '../../services/foo-service.service.ts';


describe('My Service Making an Http Call', () => {

    let mockBackend: MockBackend;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [
                FooHttpService,
                MockBackend,
                BaseRequestOptions,
                {
                    provide: Http,
                    deps: [MockBackend, BaseRequestOptions],
                    useFactory:
                        (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
                            return new Http(backend, defaultOptions);
                        }
                }
            ],
            imports: [
                HttpModule
            ]
        });

        mockBackend = getTestBed().get(MockBackend);
        TestBed.compileComponents();
    }));

代码取自tutorial here。

【问题讨论】：

标签： unit-testing angular karma-runner angular2-testing

【解决方案1】：

它不是已经从import {MockBackend, MockConnection} from '@angular/http'那里得到了

这只会让您访问符号/类。就像要在组件中使用服务一样，需要将服务导入到组件文件中

import { SomeService } from './some.service'

class SomeComponent {
  constructor(service: SomeService) {}
}

如果我们没有导入 SomeService，我们会得到一个错误“找不到符号 SomeService”。但这只是编译时检查。这不足以将服务的instance 用作runtime。如果这就是我们所拥有的，那么在运行时，我们会收到错误“没有 SomeService 的提供者”。我们仍然需要将 if 添加到 providers 以便 Angular 知道创建它，并在运行时将实例传递给组件

import { NgModule } from '@angular/core';
import { SomeService } from './some.service';
import { SomeComponent } from './some.component';

@NgModule({
  declarations: [ SomeComponent ],
  providers: [ SomeService ]
})
class SomeModule {}

这里也是一样，我们需要将组件符号/类导入到模块文件中，以便我们可以使用该文件中的符号/类。

至于MockBackend，您将类添加到提供程序

providers: [ MockBackend ]

这告诉 Angular 创建实例，允许它是可注入的。然后将 Angular 创建的实例注入到工厂方法中

useFactory: (backend: MockBackend, options: BaseRequestOptions) => {
  return new Http(backend, options);
}

现在Http 将在我们发出请求时使用MockBackend 的该实例。但是我们需要访问同一个实例，以便我们可以模拟响应。为了获得它，我们需要从 Angular 注入器（它是所有提供者的容器）中获得它。要在测试期间访问注入器，我们可以通过TestBed，它的作用类似于测试环境的注入器

mockBackend = TestBed.get(MockBackend);

在这里，我们要求 Angular 在其注入器中查找提供程序 MockBackend。这将与注入useFactory 函数的实例相同。因此，我们确保在 Http 正在使用的同一 MockBackend 实例上模拟响应。

【讨论】：