Question

我一直在努力解决这个问题，我希望有人可以提供帮助。我有一个使用服务来获取数据的组件。我试图添加单元测试。我的问题是测试总是失败，因为＆＃34;错误：Http＆＃34;没有提供者。这是我的代码：

服务：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

import { Contact } from './contact.model';

@Injectable()
export class ContactsService {
    constructor(private http: Http) { }

    public getContacts(): Observable<Array<Contact>> {
        return this.http.get('assets/contacts.json').map(res => {
            let r = res.json().Contacts;
            return r;
        });
    }
}

组件：

import { Component, OnInit, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Contact } from '../contact.model'; 
import { ContactsService } from '../contacts.service';

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.css'],
    providers: [ContactsService]
})
export class ContactsComponent implements OnInit {

    contactsAll: Array<Contact>;
    contacts: Array<Contact>;

    constructor(private contactsService: ContactsService) { }

    ngOnInit() {
        this.contactsService.getContacts().subscribe((x) => {
            this.contactsAll = x;
            this.contacts = this.contactsAll;
        });
    }

}

试验：

import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { Observable } from 'rxjs/Rx';

import { ContactsComponent } from './contacts.component';
import { ContactsService } from '../contacts.service';
import { Contact } from '../contact.model';

class MockContactsService extends ContactsService {

    constructor() {
        super(null);
    }

    testContacts: Array<Contact> = [
        new Contact("test1 mock", 12345, 10000),
        new Contact("test2 mock", 23456, 20000)
    ];

    public getContacts(): Observable<Array<Contact>> {
        return Observable.of(this.testContacts);
    }
}

describe('ContactsComponent', () => {
    let component: ContactsComponent;
    let fixture: ComponentFixture<ContactsComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [FormsModule],
            declarations: [ContactsComponent],
           // providers: [{ provide: ContactsService, useClass: MockContactsService }] // this is needed for the service mock
        }).overrideComponent(ContactsService, {// The following is to override the provider in the @Component(...) metadata
            set: {
                providers: [
                    { provide: ContactsService, useClass: MockContactsService },
                ]
            }
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(ContactsComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });

    describe('1st test', () => {
        it('true is true', () => expect(true).toBe(true));
    })
});

Answer 1

我们试试这个：

首先，将提供者数组从组件移动到NgModule。最好在模块级别提供服务，因为它将您的提供程序与组件树结构分离（除非您特别希望每个组件都有一个单独的提供程序实例，并且从您的简化用例中，没有每个组件需要一个单独的实例。

所以，

@Component({
    selector: 'app-contacts',
    templateUrl: './contacts.component.html',
    styleUrls: ['./contacts.component.css'],
   /// providers: [ContactsService]  <-- remove this line
})
export class ContactsComponent implements OnInit {
   .....

并将其添加到声明ContactsComponent

的NgModule中

 @NgModule({
    imports: ..
    declarations: ...
    providers: [ContactsService] // <-- provider definition moved to here
 })
 export class ModuleDeclaringContactsComponent

一旦你这样做，那么在你的测试中模拟ContactsService很容易实现。

TestBed.configureTestingModule({
        imports: [FormsModule],
        declarations: [ContactsComponent],
        providers: [{ provide: ContactsService, useClass: MockContactsService }] // this is needed for the service mock
    });

有了这个，你应该好好去。

Answer 2

对不起大家 - 事实证明这是完全不同的。

我按照snorkpete的回答修改了我的代码，我将把它标记为答案，因为我认为这是最干净的方法。

真正的问题来自使用Angular Cli来创建我的项目。它自动为我的组件和我的服务创建测试。这意味着服务测试中的代码导致错误，而不是组件中的代码。我在服务测试中注释掉了代码并且一切都通过了。

令人讨厌的是，在任何失败中都没有迹象表明这是错误的来源！

使用DI进行单元测试和模拟服务

2 个答案: