angular - Angular 5 - 如何测试依赖异步服务成功创建的 App 组件？

Question

当 AppComponent 依赖于具有承诺构造函数的服务时，如何测试成功创建的 AppComponent？将 done 语句放在 app.spec.ts 中的什么位置？

App.spec.ts

describe("AppComponent", () => {
    var fixture: ComponentFixture<AppComponent> = null;
    var cmp: AppComponent = null;

    beforeEach(done => {
        OidcService.oidcStartup(() => {
            TestBed.configureTestingModule({
                imports: [AppModule],
                providers: [
                    { provide: APP_BASE_HREF, useValue: "/" },
                    Broadcaster
                ]
            }).compileComponents();
            done();
        });
    });

    beforeEach(async(() => {
        this.fixture = TestBed.createComponent(AppComponent);
        this.cmp = this.fixture.debugElement.componentInstance;
    }));

    it(
        "should create the app",
        done => {
            expect(this.cmp).toBeTruthy();

        },
        60000
    );
});

应用模块.ts

...        
        providers: [StorageService],
        entryComponents: [
        ]
    })
    export class AppModule { }

存储服务.ts

@Injectable()
export class StorageService {
    public tenantID: string = null;
    constructor(private base64Svc: Base64Service) {
        // NOOP
        var self = this;
        OidcService.userMgr.getUser().then(user => {
            self.tenantID = user.profile.tenant_id;
        });
    }
...
}

Answer 1

我建议模拟这项服务。您可以像这样使用 TestBed Api 模拟它：

模拟对象/类，例如：

let storageMock = {}

然后在 TestBed 中使用它：

TestBed.configureTestingModule({
    imports: [AppModule],
    providers: [
        { provide: APP_BASE_HREF, useValue: "/" },
        Broadcaster,
        { provide: StorageService, useValue: storageMock}
    ]
}).compileComponents();