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

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

根据上述问题的答案，我可以想象至少有两条合理的路径：

（1）如果你确实试图测试模型的两个版本，那么你应该忘记依赖注入，只使用标准导入，如：

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

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

（2）但是，如果您的“模型”都具有相同的界面，也许我可以从您的片段中看到单个函数：

get(eventTitle: string)

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

Angular2测试“提供=＆gt;使用值”

1 个答案: