使用 Karma-Jasmine 进行 Angular 应用程序初始化答案

【问题标题】：Angular app initialization with Karma-Jasmine使用 Karma-Jasmine 进行 Angular 应用程序初始化
【发布时间】：2020-04-02 01:01:54
【问题描述】：

我们有一个使用 SystemJS 的遗留 Angular 4 项目。我们被要求使用 Jasmine 和 Karma 实现单元测试用例。我开始为一个组件编写测试套件。它看起来像这样（下面的伪代码）：

beforeEach(async(() => {
     TestBed.configureTestingModule(
                imports,
                providers,
                declarations etc.
            ).compileComponents();
}));

我们在 APP_INITIALIZER 中有很多初始化代码，用于设置应用程序中的各种状态（例如参考数据、配置、用户信息）。为了让测试用例顺利运行，我们需要运行初始化代码。知道如何实现吗？

【问题讨论】：

我会用合理的测试值模拟所有需要的状态作为可导出类，将其保存为共享目录中的文件，然后将其导入所有相关的测试 .spec 文件。
你的意思是作为一个带有硬编码值的打字稿文件，比如常量吗？
是的。例如，我有一个项目，我在其中使用名为 AppConfig 的类中的 DI 将初始化值注入到各种组件中。为了在我的规范中使用，我创建了 AppConfigMock，其中包含各个部分的一些合理值，并且在测试平台的提供者数组中只需 {提供：AppConfig，useClass：AppConfigMock}。
我拥有的实际上是服务（单例），具有共享状态。例如一个 UserService，它包含当前登录用户的详细信息（用户 ID、他的角色等）。如果我要使用上述机制，我需要将数据注入到服务中；这不是它目前的结构。这些服务现在有一个 .load() 方法，可以从 Web 服务加载数据并设置其内部状态。该状态在整个应用程序中使用。有没有办法可以访问该服务的单例服务实例。然后我可以通过公共方法设置一些合理的值。
单例服务的邮政编码以及您尝试测试的使用示例。

标签： angular jasmine karma-jasmine

【解决方案1】：

如果您尝试实际运行您的 App Initializer，请修改您的测试的 beforeEach 方法以设置测试平台，使其类似于您的 NgModule：

TestBed.configureTestingModule({
    declarations: [],
    providers: [
        {
            provide: APP_INITIALIZER,
            useFactory: <factory function here>,
            multi: true,
            deps: [
                <any dependencies of your initializer here>
            ]
        }
    ],
    imports: [
        <if you use HTTP, add 'HttpClientMOdule' here>
    ]
});

请注意，许多人会建议使用模拟或间谍，而不是您在生产中使用的实际工厂。该选择取决于您，并取决于您的具体需求。

调用configureTestingModule 后，您还需要执行此操作（请参阅https://github.com/angular/angular/issues/24218）并将您的beforeEach 标记为async：

await TestBed.inject(ApplicationInitStatus).donePromise;

希望这会有所帮助！

【讨论】：