Angular 2 (5) Testbed 没有 MyService 的提供者

Question

我在测试角度组件时遇到问题。我查看了几个堆栈溢出帖子，但我仍然卡住了。

无论我尝试什么，我都会在 jasmine 中收到以下错误：

错误：StaticInjectorError[RestApiService]：NullInjectorError：没有 RestApiService 的提供者！

这里有几个sn-ps的代码：

我的组件类：

@Component({
    moduleId: module.id,
    selector: 'book-form',
    templateUrl: './book-form.component.html',
    styleUrls: ['./book-form.component.css'],
    providers: [
        RestApiService
    ]
})
export class BookFormComponent implements OnInit {
    model = new Book(1, '', '', '', '');
    severities: Observable<KeyValue[]>;

    constructor(private restApiService: RestApiService) { }

    ngOnInit() {
        this.severities = this.restApiService.getSeverities();
    }
}

我的模拟服务：

export class RestApiSeviceSpy {

    getSeverities(): Observable<any> {
        return Observable.of('some data');
    }

    getAssets(): Observable<any> {
        return Observable.of('some data');
    }
}

我的 beforeEach 方法（修改后）：

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [BookFormComponent],
        providers: [{ provide: RestApiService, useClass: RestApiSeviceSpy }],
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
            MatFormFieldModule,
            MatInputModule,
            FormsModule,
            HttpModule,
            NoopAnimationsModule],
        schemas: [NO_ERRORS_SCHEMA]
    })
        .compileComponents().then(() => {
            let service = TestBed.get(RestApiService);
            fixture = TestBed.createComponent(BookFormComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });
}));

任何有关如何解决此问题的见解将不胜感激。

谢谢

编辑

这是我的服务代码。我还编辑了上面@Injectable() 的坏副本。

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

    }

    getSeverities(): Observable<KeyValue[]> {
        return this.http.get('/api/RiskApi/GetSeverities').map(r => <KeyValue[]>r.json());
    }

    getAssets(): Observable<ApiAsset[]> {
        return this.http.get('/api/RiskApi/GetAssets').map(r => <ApiAsset[]>r.json());
    }
}

编辑 我更新了上面的代码以显示当前的 beforeEach 并显示更新的 spy/mock 类。

编辑 这是测试运行的输出：

业力开始 --run-once 01 03 2018 17:02:58.196:WARN [karma]: No captured browser, open @987654321@ 01 03 2018 17:02:58.226:INFO [karma]: Karma v2.0.0 server started at @987654322@ 01 03 2018 17:02:58.227:INFO [launcher]: Launching browser Chrome with unlimited concurrency 01 03 2018 17:02:58.231:INFO [launcher]: Starting browser Chrome 01 03 2018 17:02:58.963:INFO [Chrome 64.0.3282 (Windows 10.0.0)]: Connected on socket lxAY8w15N_373BOwAAAA with id 41860275 Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Error: StaticInjectorError[RestApiService]: NullInjectorError: No provider for RestApiService! at _NullInjector.get (node_modules/@angular/core/bundles/core.umd.js:1033:19) Chrome 64.0.3282 (Windows 10.0.0): Executed 3 of 4 (1 FAILED) (0 secs / 0 secs) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Error: StaticInjectorError[RestApiService]: NullInjectorError: No provider for RestApiService! at _NullInjector.get (node_modules/@angular/core/bundles/core.umd.js:1033:19) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Failed: Response with status: 404 Not Found for URL: @987654323@ at stack (node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2455:17) [object ErrorEvent] thrown Chrome 64.0.3282 (Windows 10.0.0): Executed 4 of 4 (2 FAILED) (0 secs / 0 secs) Chrome 64.0.3282 (Windows 10.0.0) BookFormComponent should create FAILED Failed: Response with status: 404 Not Found for URL: @987654324@ at stack (node_modules/jasmine-core/lib/jasmine-core/jasmine.js:2455:17) Chrome 64.0.3282 (Windows 10.0.0): Executed 4 of 4 (2 FAILED) (0.311 secs / 0 secs)

Answer 1

删除此行：
let spy: RestApiSeviceSpy = new RestApiSeviceSpy([], []);

现在在您的测试平台中：

providers:[ {provide: RestApiService,useClass: RestApiSeviceSpy}]//After you import your spy

现在，对于您的模拟/间谍，您不必使用真实服务对其进行扩展。 只需创建一个具有相同依赖项并返回一些虚假数据的服务即可。像这样：

export class RestApiSeviceSpy {

        getSeverities(): Observable<any> {
            return Observable.of('some data');
        }

        getAssets(): Observable<any> {
            return Observable.of('some data');
        }
    }

还有你的规格：

beforeEach(async(() => {

    TestBed.configureTestingModule({
        declarations: [BookFormComponent],
        providers: [{ provide: RestApiService, useValue: spy }],
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
            MatFormFieldModule,
            MatInputModule,
            FormsModule,
            HttpModule,
            NoopAnimationsModule],
        schemas: [NO_ERRORS_SCHEMA]
    });

       fixture = TestBed.createComponent(OrderEntryComponent);
       component = fixture.componentInstance;

}));