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)

在这种情况下，...then将在这里引入一个新服务，并让组件调用服务而不是直接调用模型。当您有多个实现时，服务是一个适当的抽象级别，您可以同时拥有该服务的一个新的和一个遗留的实现，这是为您的应用程序或测试注入的(您的测试可能会测试这两个实现，直到您准备好退出遗留版本为止)。