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)

...那么在这种情况下我会在这里介绍一种新的服务，并有部分直接调用服务，而不是模型。服务是抽象的一个适当的水平，当你有多个实现，你可以同时拥有一个新的和传统的服务实现的，注入以适合您的应用程序或测试（您的测试也许应该测试两个实现，直到你准备好退休旧版本）。