如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例

Posted

技术标签:

【中文标题】如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例【英文标题】:how to write unit test cases for App_Initializer using Karma/Jasmine in angular 7 【发布时间】:2019-06-30 02:41:22 【问题描述】:

我已经在我的 app.module.ts 文件中导入了 APP_INITIALIZER 并调用了一个初始化函数。

如何使用 jasmine/karma 为这个初始化方法编写单元测试用例?

代码:

initializer.ts

import  CookieService  from 'ngx-cookie-service';
import  KeycloakOptions, KeycloakConfig  from 'keycloak-angular';
import  EnlivenKeycloakAuthService  from './services/enliven-keycloak-auth.service';
export function initializer(keycloakService: EnlivenKeycloakAuthService, cookieService: CookieService): () => Promise<any> 

cookieService.set('test','test');

 const config: KeycloakConfig = 
        url: serverUrl,
        realm: realmName,
        clientId: clientId,
        credentials: 
            secret: secret
        
    ;
    const options: KeycloakOptions = 
        config: config,
        initOptions: 
            onLoad: 'login-required',
            checkLoginIframe: false
        ,
        enableBearerInterceptor: true,
        bearerExcludedUrls: ['/assets']
    ;
    keycloakService.setIsClientSecretKeyFetech(true);
    return (): Promise<any> => keycloakService.init(options);


app.module.ts


        provide: APP_INITIALIZER,
        useFactory: initializer,
        deps: [ EnlivenKeycloakAuthService, CookieService],
        multi: true
    ,

【问题讨论】:

【参考方案1】:

我不清楚您问题中的代码,我无法为您提供测试用例,但我相信这个示例会对您有所帮助。

app-initializer.ts

import  ConfigService  from './services';

export const appInitializer: (ConfigService) => (() => Promise<boolean>) = function (config: ConfigService) 
    return (): Promise<boolean> => 
        return new Promise<boolean>((resolve: (boolean) => void, reject: (boolean) => void) => 
            config.load().subscribe(
                (data: any) => 
                    // do something with data and resolve the promise
                    resolve(true);
                ,
                (error) => reject(error)
            );
        );
    ;
;

app-initializer.spec.ts

import  async, TestBed  from "@angular/core/testing";
import  of  from "rxjs";
import  tap  from "rxjs/operators";
import  ConfigService  from "./services";
import  appInitializer  from "./app-initializer";

describe('appInitializer', () => 
    const mockedConfigService: any = jasmine.createSpyObj('ConfigService', ['load']);

    let configService: ConfigService;

    beforeEach(() => 
        TestBed.configureTestingModule(
            providers: [
                 provide: ConfigService, useValue: mockedConfigService 
            ]
        );
        configService = TestBed.get(ConfigService);
    );

    it('should resolve the promise', async(() => 
        mockedConfigService.load.and.returnValue(of());
        appInitializer(configService)()
            .then((status) => 
                expect(status).toBe(true);
            )
    ));

    it('should reject the promise', async(() => 
        mockedConfigService.load.and.returnValue(
            of()
                .pipe(tap(() => 
                    throw Error('failure');
                ))
        );
        appInitializer(configService)()
            .then(() =>  , (error) => 
                expect(error.message).toEqual('failure');
            )
    ));
);

【讨论】:

这里能分享一下config.load函数代码吗?我收到错误。 TypeError: config.load is not a function。但是我在服务类中创建了加载方法。load() return this.http.get(this.API_URL).pipe(map((res:any) =&gt; res));

以上是关于如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Bootstrap 4 和 Angular 7 在导航栏中制作多级下拉菜单

如何在组件之间使用 Angular 7 cdkDropList?

如何在 Angular 7 中管理多个 observable

Angular 7:如何在 Jasmine 单元测试中解决 Hammer.js 依赖项

如何使用 AngularFirebase 和 Angular 7 从用户集合中获取用户数据

如何在 Angular 7 中使用 Karma/Jasmine 为 App_Initializer 编写单元测试用例