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

Question

我正在学习使用 Karma 测试 Angular 2，并且想知道我不理解的代码中的一些要点。 TestBed "mock module"配置完成后，运行以下代码：

    mockBackend = getTestBed().get(MockBackend);

这是做什么的？我在另一篇文章中找到如下解释："gets a reference to the mock backend so we can respond with fake data when it is fetched with Http.get"，但我不明白为什么我需要"get it"，它不是已经从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。

Answer 1

isn't it already there from import {MockBackend, MockConnection} from '@angular/http'

这只允许您访问 symbol/class。就像如果你想在你的组件中使用一个服务，你需要将服务导入到组件文件中

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

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

如果我们不导入 SomeService，我们会得到一个错误 "can't find symbol SomeService"。但这只是一个 编译时 检查。这不足以将服务的实例用作 运行时 。如果这就是我们所拥有的，在运行时，我们将得到错误 "no provider for 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 {}

这里是同样的事情，我们需要将组件symbol/class导入到模块文件中，以便我们可以在该文件中使用symbol/class。

至于 MockBackend，您将 class 添加到提供商

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 实例上模拟响应。

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

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

unit-testing

angular

karma-runner

angular2-testing