正文 

当前位置： 首页 > 知识 >

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

     2023-03-16     173

关键词：

【中文标题】如何在 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 在 django1.1 中启用 cors？

】如何使用Angular7在django1.1中启用cors？【英文标题】：Howtoenabledcorsindjango1.1withangular7?【发布时间】：2019-11-1923:33:15【问题描述】：我正在尝试以Angular7开发我的前端，并希望向我的服务器发出cors请求以获取数据。Chrome和Firefox阻... 查看详情

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

】如何使用Bootstrap4和Angular7在导航栏中制作多级下拉菜单【英文标题】：HowtomakemultilevelDrop-downmenuinNavbarusingBootstrap4andAngular7【发布时间】：2020-09-2304:23:14【问题描述】：我想使用bootstrap4和angular7创建多级dropdwon。我可以使用bootstr... 查看详情

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

】如何在组件之间使用Angular7cdkDropList？【英文标题】：HowtouseAngular7cdkDropListbetweencomponents?【发布时间】：2019-04-0311:52:28【问题描述】：我在屏幕左侧的mat-list组件中有一个项目列表（学生）（一般列表）。我的屏幕右侧还有一个... 查看详情

如何在 Angular 7 中管理多个 observable

】如何在Angular7中管理多个observable【英文标题】：Howtomanagemultipleobservableinangular7【发布时间】：2019-11-2604:11:47【问题描述】：我有一个angualr7应用程序，总共有20个传感器数据。我想使用observable为选定的传感器ID每5秒接收一次数... 查看详情

如何在 Angular 7 中强制调用 this.getRowStyle 函数？

】如何在Angular7中强制调用this.getRowStyle函数？【英文标题】：Howtocalledthis.getRowStylefunctionforcefullyinAngular7?【发布时间】：2021-12-0511:14:26【问题描述】：我正在使用getRowStyle函数，但它似乎只在加载或编辑网格时运行一次。如何手... 查看详情

使用 Angular 7 从 Firebase 存储中检索图像

】使用Angular7从Firebase存储中检索图像【英文标题】：RetrieveImagesfromFirebaseStorageUsingAngular7【发布时间】：2019-09-2721:15:39【问题描述】：我无法在我的Angular7应用程序中显示存储在Firebase存储中的图像。如何在不使用服务的情况下执... 查看详情

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

】如何在Angular7中使用Karma/Jasmine为App_Initializer编写单元测试用例【英文标题】：howtowriteunittestcasesforApp_InitializerusingKarma/Jasmineinangular7【发布时间】：2019-06-3002:41:22【问题描述】：我已经在我的app.module.ts文件中导入了APP_INITIALIZER... 查看详情

如何在使用 Angular 7 和 Spring Boot 构建的 Web 应用程序中使浏览器缓存无效

】如何在使用Angular7和SpringBoot构建的Web应用程序中使浏览器缓存无效【英文标题】：Howtoinvalidatebrowsercacheinawebapplicationbuiltwithangular7andspringboot【发布时间】：2019-04-2417:01:52【问题描述】：我正在开发一个web应用程序，使用springboot... 查看详情

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

】如何使用AngularFirebase和Angular7从用户集合中获取用户数据【英文标题】：HowtogetuserdatafromusercollectionusingAngularFirebaseandAngular7【发布时间】：2019-08-0112:28:09【问题描述】：我已经在谷歌上搜索了好几天，并尝试了许多不同的方法... 查看详情

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

】Angular7：如何在Jasmine单元测试中解决Hammer.js依赖项【英文标题】：Angular7:HowtoresolveHammer.jsdependencyinJasmineunittest【发布时间】：2020-11-0306:31:24【问题描述】：在为使用MaterialSlider并依赖HammerJS的组件编写单元测试时，我看到此错... 查看详情

如何在Angular 7中单击按钮时获取下拉列表的选定选项[重复]

】如何在Angular7中单击按钮时获取下拉列表的选定选项[重复]【英文标题】：HowtogettheselectedoptionofdropdownonclickofabuttoninAngular7[duplicate]【发布时间】：2020-01-0716:07:12【问题描述】：我有一个下拉列表，其中包含来自循环的一些选项... 查看详情

如何在 Angular Material 7 中使用 CSS 操作 mat-snack-bar 模板的外观

】如何在AngularMaterial7中使用CSS操作mat-snack-bar模板的外观【英文标题】：HowdoImanipulatethelookofamat-snack-bartemplateusingCSSinAngularMaterial7【发布时间】：2019-05-2223:04:25【问题描述】：我看到的答案与我正在寻找的答案有点相似，但它们都... 查看详情

如何在 Angular 7 Web 应用程序中安全地进行无密码（重要）Windows 身份验证

】如何在Angular7Web应用程序中安全地进行无密码（重要）Windows身份验证【英文标题】：HowcanIsecurelydopassowordless(Important)windowsauthenticationinanangular7webapplication【发布时间】：2020-09-2515:08:26【问题描述】：如何在Angular7Web应用程序中安... 查看详情

如何在 Angular 7 中配置 raw-loader 来加载文本文件？

】如何在Angular7中配置raw-loader来加载文本文件？【英文标题】：Howtoconfigureraw-loaderinAngular7toloadtextfiles?【发布时间】：2019-09-0622:24:49【问题描述】：我想在Angular7中使用raw-loader将文本文件导入我的TypeScript源代码。我找到了大量关... 查看详情

在 Angular 7 中处理二维数组。ngFor

】在Angular7中处理二维数组。ngFor【英文标题】：Processingatwo-dimensionalarrayinAngular7.ngFor【发布时间】：2019-06-2520:38:54【问题描述】：如何使用ngFor处理二维数组？Ireceiveheresucharray因此，我需要获取数组中的数据按顺序显示的块。也... 查看详情

如何在 Angular 7 的表格上使用 Ngx 分页

】如何在Angular7的表格上使用Ngx分页【英文标题】：HowtouseNgx-paginationontableinangular7【发布时间】：2020-04-0612:57:39【问题描述】：您好，我有一个类似的列表，[…,…,…]0：姓名：“Manu”，年龄：“21”，爱好：Array(4)1：姓名：“An... 查看详情

如何加快 Angular 7 中初始加载的加载时间？

】如何加快Angular7中初始加载的加载时间？【英文标题】：HowtospeeduploadingtimeoninitialloadinAngular7?【发布时间】：2020-11-2121:59:30【问题描述】：我创建了Angular应用程序，并将单个模块拆分为一组较小的功能模块并延迟加载它们。并... 查看详情

不能在 Angular 7 中使用 Post 方法

】不能在Angular7中使用Post方法【英文标题】：can\'tconsumePostmethodinangular7【发布时间】：2019-07-1906:19:22【问题描述】：我一直在做一个Angular项目。我应该通过Web服务（ASP.NETWebapi核心）从服务器获取数据。所以GET方法可以完美运行... 查看详情