如何重用 Angular 测试文件中的所有导入

问题描述

假设我有一个简单的模块 AppModule，它有许多导入、声明和提供程序.现在我想为位于该模块声明列表中的组件 ListComponent 编写一个测试.ListComponent 本身使用了许多(但不是所有)AppModule 的导入.我是这样做的:

Lets say I have a simple module AppModule which has many imports, declarations and providers. Now I want to write a test for a component ListComponent which is located in this module's declaration list. ListComponent itself uses many, (but not every) import of the AppModule. I do it like this:

import { TestBed } from '@angular/core/testing';
// +same copy-pasted list of imports from `AppModule`

beforeEach(done => {
    TestBed.configureTestingModule({
        imports: [
            // +same copy-pasted list of imports from `AppModule`
        ],
        declarations: [
            // +same copy-pasted list of declarations from `AppModule`
        ],
        providers: [
            {
                provide: Http,
                useClass: HttpMock,
            },
            {
                provide: Router,
                useClass: RouterMock,
            }
            // +same copy-pasted list of providers from `AppModule`
        ]
    });

它有效，但肯定是一种不正确的方法.我不想复制粘贴那么多.也许我可以用一些方便的方法重用 AppModule?伪代码如下:

It works, but surely it is an incorrect approach. I do not want to copy-paste so much. Maybe I can reuse the AppModule in some convenient approach? Pseudocode would be like:

let appModule = new AppModule();

beforeEach(done => {
    TestBed.configureTestingModule({
        imports: appModule.imports,
        declarations: appModule.declarations,
        providers: [...appModule.providers,
            {
                provide: Http,
                useClass: HttpMock,
            },
            {
                provide: Router,
                useClass: RouterMock,
            }
        ]
    });

但我只是不知道/找不到这种方法的语法:(

But I just do not know/cannot find the syntax for such approach :(

推荐答案

您可以创建可重用的常量，其中包含您想要的模块中的常用导入和提供程序.

You can create reusable const that contains the commom imports, providers from the modules you want.

例如在 app.providers.ts 文件中，您可以像这样拥有您的提供者:

for example in a app.providers.ts file you can have your providers like this:

import service1 from '.path/service/service1';
import service2 from '.path/service/service2';

export const providers = [service1, service2 ];

以及您在 app.imports.ts 中的导入

and for your imports in a app.imports.ts

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { Module1} from ''.path/service/module1';

export const imports= [
    BrowserModule,
    AppRoutingModule,
    Module1
],

并且在您的 app.module.ts 和任何其他模块上，您可以使用相同的导入和提供程序:

and on your app.module.ts and any other module you wanna use the same imports and providers you can do:

import { providers } from './app.providers';
import { imports } from './app.imports';
@NgModule({
    declarations: [AppComponent],
    imports: imports,
    providers: providers,
    bootstrap: [AppComponent]
})

您还可以使用扩展运算符将您的独特导入添加到特定模块上的这些共享导入中.

You can also use the spread operator to add your unique imports to these shared imports on a specific module.

这篇关于如何重用 Angular 测试文件中的所有导入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！