Angular2测试 “提供=>使用价值”

我有以下的代码来调用angular2Angular2测试 “提供=>使用价值”

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 
import { AppModule } from "./src/app"; 
export function runAngular2App(legacyModel: any) { 
     platformBrowserDynamic([ 
      { provide: "legacyModel", useValue: model } 
     ]).bootstrapModule(AppModule) 
     .then(success => console.log("Ng2 Bootstrap success")) 
     .catch(err => console.error(err)); 
}

而且某处，我调用它像这样 -

var legacyModel = {}; // some data 
    require(["myAngular2App"], function(app) { 
     app.runAngular2App(legacyModel); // Input to your APP 
    });

header.component。 TS 而在我的部分我用的是传统的模型 -

import { Component, ViewEncapsulation, Inject } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    encapsulation: ViewEncapsulation.Emulated, 
    styleUrls: [ './header.less' ], 
    templateUrl: './header.html' 
}) 
export class HeaderComponent { 
    public eventTitle; 

    constructor(@Inject("appModel") private appModel) { 
     this.eventTitle = this.appModel.get("eventTitle"); 
    } 
}

现在的问题是，当我测试这个组件 -

header.component.spec.ts 

import {} from 'jasmine'; 

import { ComponentFixture, TestBed, async } from '@angular/core/testing'; 
import { By }    from '@angular/platform-browser'; 
import { DebugElement } from '@angular/core'; 

import { HeaderComponent } from './header.component'; 



describe('HeaderComponent',() => { 

    let comp: HeaderComponent; 
    let fixture: ComponentFixture<HeaderComponent>; 
    let de:  DebugElement; 
    let el:  HTMLElement; 

    // async beforeEach 
    beforeEach(async(() => { 
     TestBed.configureTestingModule({ 
      declarations: [ HeaderComponent ] 

     }) 
     .compileComponents(); // compile template and css 
    })); 

    // synchronous beforeEach 
    beforeEach(() => { 
     fixture = TestBed.createComponent(HeaderComponent); 

     comp = fixture.componentInstance; // HeaderComponent test instance 

     de = fixture.debugElement.query(By.css('.title')); 
     el = de.nativeElement; 
    }); 

    it('should display event title',() => { 
     fixture.detectChanges(); 
     expect(el.textContent).toContain(comp.eventTitle); 
    }); 

    it('should display a different event title',() => { 
     comp.eventTitle = "Angular2 moderator dashboard"; 
     fixture.detectChanges(); 
     expect(el.textContent).toContain("Angular2 moderator dashboard"); 
    }); 

});

我碰到下面的错误 -

错误：没有提供程序appModel！在spec.bundle.ts（行4110）

由于appModel不是服务我不能注入它。

如何注入appModel以便我的测试可以运行？

来源

2017-04-07 Ajey

在你的实现问题背后似乎是一个架构问题。我看到术语“遗留模型” - 您是否试图测试新版本的模型？组件是否知道如何处理两种型号版本？角度服务注入模式不适用于模型，因为两个不同的模型通常具有不同的接口，因此不符合注入依赖关系的要求，这需要不同的实现具有相同的接口。

根据不同的回答上面的问题，我能想象到至少两个合理路径转发给你：

（1）如果你确实想测试一个模型的两个版本，那么你或许应该忘记依赖注入和只使用标准的进口，如：

import { AppModel } from './path/to/appModel'; import { LegacyModel } from './path/to/legacyModel';

然后，你可以测试组件如何响应两个模型的实现。

（2）但是，如果你的“模特”都真正拥有相同的接口，也许是单一的功能，我可以从你的片段看到：

get(eventTitle: string)

...那么在这种情况下我会介绍一个新的服务在这里，并让组件直接调用服务而不是模型。当您有多个实现时，服务是一个适当的抽象级别，并且您可以同时为该应用程序或测试注入适当的新服务和旧服务实现（您的测试应该可以测试这两种实现，直到您准备好退出旧版本）。

来源

2017-04-10 15:17:22 Will

Angular2测试 “提供=>使用价值”

回答

相关问题