角2错误:在Karma-Jasmine中没有Http提供程序

Question

我一直在我的业力测试中得到以下错误，即使我的应用程序在没有错误的情况下完美地工作。它是说，没有供应商的Http。我在app.module.ts文件中使用app.module.ts并将其添加到imports数组中。业力错误如下所示：

Chrome 52.0.2743 (Mac OS X 10.12.0) App: TrackBudget should create the app FAILED
    Failed: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!
    Error: No provider for Http!
        at NoProviderError.Error (native)
        at NoProviderError.BaseError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/facade/errors.js:24:0 <- src/test.ts:2559:34)
        at NoProviderError.AbstractProviderError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:42:0 <- src/test.ts:15415:16)
        at new NoProviderError (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:73:0 <- src/test.ts:15446:16)
        at ReflectiveInjector_._throwOrNull (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:761:0 <- src/test.ts:26066:19)
        at ReflectiveInjector_._getByKeyDefault (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:789:0 <- src/test.ts:26094:25)
        at ReflectiveInjector_._getByKey (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:752:0 <- src/test.ts:26057:25)
        at ReflectiveInjector_.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:561:0 <- src/test.ts:25866:21)
        at TestBed.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/bundles/core-testing.umd.js:1115:0 <- src/test.ts:5626:67)
Chrome 52.0.2743 (Mac OS X 10.12.0): Executed 1 of 1 (1 FAILED) ERROR (0.229 secs / 0.174 secs)

这是我的app.component.ts文件：

import {Component} from '@angular/core';
import {Budget} from "./budget";
import {BudgetService} from "./budget.service";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [BudgetService]
})
export class AppComponent {
    title = 'Budget Tracker';

    budgets: Budget[];
    selectedBudget: Budget;

    constructor(private budgetService: BudgetService) { }

    ngOnInit(): void {
        this.budgetService.getBudgets()
            .subscribe(data => {
                this.budgets = data;
                console.log(data);
                this.selectedBudget = data[0];
                console.log(data[0]);
            });
    }
}

这是我的简单规范：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

describe('App: TrackBudget', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
        declarations: [
            AppComponent
        ]
    });
  });

  it('should create the app', async(() => {
    let fixture = TestBed.createComponent(AppComponent);
    let app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
});

错误似乎是由我的服务引起的，在这里可以看到：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Budget} from "./budget";

@Injectable()
export class BudgetService {

  constructor(public http: Http) { }

  getBudgets() {
    return this.http.get('budget.json')
        .map(response => <Budget[]>response.json().budgetData);

  }
}

如果我从服务中删除constructor(public http: Http) { }语句，测试就会通过，但是应用程序在浏览器中失败了。我对此做了相当多的研究，一直未能找到解决办法。任何帮助都将不胜感激！！

Answer 1

TestBed的目的是从零开始为测试环境配置@NgModule。因此，目前您所配置的只是AppComponent，没有其他任何东西(除了@Component.providers中已经声明的服务之外)。

不过，我强烈建议您做的不是像在实际环境中那样配置所有的东西，而是模拟BudgetService。尝试配置Http并模拟它并不是最好的主意，因为您希望在单元测试时尽量保持外部依赖关系。

这里是你需要做的

1. 为BudgetService创建一个模拟。我会去看看这个职位。只需扩展抽象类，添加getBudgets方法即可。
2. 您需要覆盖@Component.providers，正如这个职位中提到的

如果您真的想只使用真正的服务和Http，那么您需要做好在MockBackend上模拟连接的准备。您不能使用真正的后端，因为它依赖于平台浏览器。例如，请查看这个职位。但我个人认为，在测试组件时，这不是一个好主意。在测试您的服务时，您应该这样做。

Answer 2

警告：只有当您想测试静态结构时，此解决方案才能工作。如果您的测试实际进行服务调用(最好也有一些这样的测试)，它将无法工作。

您的测试使用的是自己的模块定义、测试模块，而不是AppModule。因此，您还必须在那里导入HttpModule：

TestBed.configureTestingModule({
    imports: [
        HttpModule
    ],
    declarations: [
        AppComponent
    ]
});

还可以导入您的AppModule：

TestBed.configureTestingModule({
    imports: [
        AppModule
    ]
});

这样做的优点是不必在许多地方添加新的组件和模块。更方便。另一方面，这是不那么灵活的。你的进口可能比你在测试中希望的要多。

此外，您有一个从低级组件到整个AppModule的依赖关系。事实上，这是一种循环依赖，这通常是个坏主意。因此，在我看来，您应该只对应用程序中非常重要的高级别组件这样做。对于更低级别的组件，甚至是可重用的组件，最好在测试规范中显式列出所有依赖项。

Answer 3

在HttpModule中导入app.module.ts，它将解决您的问题。

import { HttpModule } from '@angular/http';

@NgModule({
    imports: [HttpModule]
})
...