Angular2測試 「提供=>使用價值」

Question

我有以下的代碼來調用angular2

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以便我的測試可以運行？

Answer 1

在你的實現問題背後似乎是一個架構問題。我看到術語「遺留模型」 - 您是否試圖測試新版本的模型？組件是否知道如何處理兩種型號版本？角度服務注入模式不適用於模型，因爲兩個不同的模型通常具有不同的接口，因此不符合注入依賴關係的要求，這需要不同的實現具有相同的接口。

根據不同的回答上面的問題，我能想象到至少兩個合理路徑轉發給你：

（1）如果你確實想測試一個模型的兩個版本，那麼你或許應該忘記依賴注入和只使用標準的進口，如：

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

然後，你可以測試組件如何響應兩個模型的實現。

（2）但是，如果你的「模特」都真正擁有相同的接口，也許是單一的功能，我可以從你的片段看到：

get(eventTitle: string) 

...那麼在這種情況下我會介紹一個新的服務在這裏，並讓組件直接調用服務而不是模型。當您有多個實現時，服務是一個適當的抽象級別，並且您可以同時爲該應用程序或測試注入適當的新服務和舊服務實現（您的測試應該可以測試這兩種實現，直到您準備好退出舊版本）。