angular 2 RC4-无法解析'Router'

时间:2016-08-02 13:26:41

标签: unit-testing typescript angular mocking

我已经为我的组件编写了一个测试,并且

失败了
  

错误:无法解析'路由器'的所有参数(?,?,?,?,?,?,   ?)。确保所有参数都使用Inject或   有效的类型注释和“路由器”装饰   可注射的。

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Supplier } from './supplier';
import { SupplierService } from './supplier.service';
import { AppService } from '../shared/app.service';

@Component({
    moduleId: module.id,
    selector: 'supplier-form',
    templateUrl: './supplier-form.component.html',
    styleUrls: ['./supplier-form.component.css']
})
export class SupplierFormComponent implements OnInit {

    private countries: any;
    private model: Supplier;
    private errorMessage: string;
    private submitted: boolean = false;
    private active: boolean = true;

    constructor(private appService: AppService, private supplierService: SupplierService, private router: Router, private route: ActivatedRoute) {
        this.model = new Supplier();
        this.route.params.subscribe(params => {
            let id = +params['id']; // (+) converts string 'id' to a number
            if (!isNaN(id))
                this.supplierService.getSupplierById(id)
                    .subscribe(supplier => this.model = supplier, error => this.errorMessage = error);
        });
    }

    ngOnInit() {
        this.getCountries();
    }

    private getCountries() {
        this.appService.getCountry()
            .subscribe(countries => this.countries = countries.items,
            error => this.errorMessage = error);
    }

    private navigateToHomePage(supplier) {
        if (supplier) {
            let link = [''];
            this.router.navigate(link);
        }
    }

    private onSubmit(): void {
        this.submitted = true;
        this.supplierService.saveSupplier(this.model).subscribe(
            supplier => this.navigateToHomePage(supplier),
            error => this.errorMessage = error);
    }
}

非常简单的组件所做的就是从一个使用Http调用的服务获取国家,并在另一个也是http调用的服务上调用save方法。我用我的Mock类来嘲笑那些服务。下面是我的测试代码。

import { By }           from '@angular/platform-browser';
import { DebugElement, provide } from '@angular/core';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

import * as Rx from 'rxjs/Rx';

import {
    beforeEach, beforeEachProviders,
    describe, xdescribe,
    expect, it, xit,
    async, inject, addProviders,
    TestComponentBuilder, ComponentFixture
} from '@angular/core/testing';

import { SupplierFormComponent } from './supplier-form.component';
import { SupplierService } from './supplier.service';
import { AppService } from '../shared/app.service';

describe('Component: Supplier', () => {

    var builder;

    beforeEachProviders(() => {
        return [
            disableDeprecatedForms(),
            provideForms(),
            Router, ActivatedRoute,
            provide(AppService, { useClass: MockAppService }),
            provide(SupplierService, { useClass: MockSupplierService })
        ];
    });

    beforeEach(inject([TestComponentBuilder], (tcb) => {
        builder = tcb;
    }));

    it('should create Supplier Component', async(() => {
        /*.overrideProviders(
            SupplierFormComponent,
            [{ provide: AppService, useClass: MockAppService }]
        )*/
        builder.createAsync(SupplierFormComponent)
            .then((fixture: ComponentFixture<SupplierFormComponent>) => {
                fixture.detectChanges
                var compiled = fixture.debugElement.nativeElement;
                console.log(compiled);
            })
            .catch((error) => {
                console.log("error occured: " + error);
            });
    }));

});

class MockAppService {
    public name = "Injected App Service";
    public fakeResponse: any = [{ "id": 1, "name": "uk" }];

    public getCountry() {
        return this.fakeResponse;
    }

}

class MockSupplierService {
    public name = "Injected Supplier Service";
    saveSupplier(supplier: any): boolean {
    return true;
    }
}

任何想法如何用RC.4正确模拟路由器。

0 个答案:

没有答案