Question

我正在编写单元测试来测试角度组件上的OnInit挂钩。它调用OnInit（）上的服务并获取模板，如下所示......

template.component.ts 是：

 import { Component, OnInit, Input } from '@angular/core';
 import { template} from '../core/model/template';
 import { templateService } from '../core/service/template.service';


 @Component({
    selector: 'app-template',
    templateUrl: './template.component.html',
    styleUrls: ['./template.component.css'],
    providers: [templateService ]

})
export class TemplateComponent implements OnInit {

    displayTemplate: template;

    private _isDraftEditing: boolean;
    get isDraftEditing(): boolean {
        return this._isDraftEditing;
    }
    set isDraftEditing(draftediting: boolean) {
        this._isDraftEditing = draftediting;
    }

    getErrorMessage: any;

    constructor(
        private templateService: templateService ) { }

    ngOnInit() {
        this.isDraftEditing = false;
        this.getTemplateByID('id inserted here from route');

    }


    getTemplateByID(id: number): boolean {
        this.templateService.getTemplateById(id)
            .subscribe(
            getTemplate => {
                this.displayTemplate= getTemplate ;
                if (this.displayTemplate.status.code === 'draft') {
                    this.isDraftEditing = true;
                }

            },
            error => {
                this.getErrorMessage = <any>error;
                console.error(error);
                console.error('getErrorMessage=' + this.getErrorMessage);
            }
            );
        if (this.getErrorMessage != null) { return false; } else { return true; }
    }

我有一个执行单元测试的 template.component.spec 文件：

 describe('TemplateComponent...', () => {
        let component: TemplateComponent;
        let fixture: ComponentFixture<TemplateComponent>;
        let templateService: TemplateService,
            serverservice: ServerService,
            userService: UserService;
        let componentTemplateService: TemplateService;
        let testBedTemplateService: TemplateService;

        beforeEach(() => {
            serverservice = new MockServerService();
            userService = new MockUserService(serverservice);
           TemplateService = new MockTemplateService(serverservice);

        });


        beforeEach(() => {
            TestBed.configureTestingModule({
                declarations: [TemplateComponent],
                imports: [HttpModule, MdDialogModule, RouterTestingModule],
                schemas: [NO_ERRORS_SCHEMA, CUSTOM_ELEMENTS_SCHEMA],
                providers: [ServerService, 
                    { provide: TemplateService, useValue: templateService },
                    { provide: UserService, useValue: userService }
                ]
            })
               .overrideComponent(TemplateComponent, {
                    set: {
                        providers: [
                            { provide: TemplateService, useValue: templateService },
                            { provide: UserService, useValue: userService }
                        ]
                    }
                })
                .compileComponents();
        });

        beforeEach(() => {
            fixture = TestBed.createComponent(TemplateComponent);
            component = fixture.componentInstance;

            componentTemplateService = fixture.debugElement.injector.get(TemplateService);
            testBedTemplateService = TestBed.get(TemplateService);


        //mock objects
        it('...', () => {

            fixture.detectChanges();
            fixture.whenStable()
                .then(() => fixture.detectChanges());
            component.ngOnInit();
            expect(component.isDraftEditing).toBe(true);<--this line here: component is undefined!!!

        });
    });

基本上我正在将模拟模板模型的模拟模板服务注入到组件中。那就是了。但是，尽管在组件上调用OnInit（），仍然未定义isDraftEditing。我在这里错过了什么吗？根据我的阅读，我应该可以使用组件属性，不是吗？

Answer 1

好的，我自己解决了......

it('...', fakeAsync(() => {
        fixture.detectChanges();
        component.displayOutline = MockTemplateToCreate;
        component.isDraftEditing = true;
        component.ngOnInit();
        discardPeriodicTasks();
        tick(1000);
        fixture.detectChanges();
        const el = de.nativeElement;
        const content = el.textContent;
        expect(content).toContain('Save', '"Save"');

    }));

在使用模拟服务时，在karma测试中调用OnInit（）后，组件未定义

1 个答案: