导入角度测试

时间:2018-07-02 11:57:49

标签: javascript html angular

我有一个有角度的项目,我有一个要测试的组件,现在这个组件有一个submodule.ts,项目有一个通用的module.ts,还有一个test.module.ts。 其中每个示例:

submodule.ts,是一些组件共享的模块。

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';

import { OncosupSharedModule } from '../../shared';
import {
    ProtocoloService,
    ProtocoloPopupService,
    ProtocoloComponent,
    ProtocoloDetailComponent,
    ProtocoloDialogComponent, //testing only this componnet
    ProtocoloPopupComponent,
    ProtocoloDeletePopupComponent,
    ProtocoloDeleteDialogComponent,
    protocoloRoute,
    protocoloPopupRoute,
    ProtocoloResolvePagingParams,
} from './';

const ENTITY_STATES = [
    ...protocoloRoute,
    ...protocoloPopupRoute,
];

@NgModule({
    imports: [
        OncosupSharedModule,
        RouterModule.forChild(ENTITY_STATES)
    ],
    declarations: [
        ProtocoloComponent,
        ProtocoloDetailComponent,
        ProtocoloDialogComponent,
        ProtocoloDeleteDialogComponent,
        ProtocoloPopupComponent,
        ProtocoloDeletePopupComponent,
    ],
    entryComponents: [
        ProtocoloComponent,
        ProtocoloDialogComponent,  //I am only testing this componnet
        ProtocoloPopupComponent,
        ProtocoloDeleteDialogComponent,
        ProtocoloDeletePopupComponent,
    ],
    providers: [
        ProtocoloService,
        ProtocoloPopupService,
        ProtocoloResolvePagingParams,
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]

所有项目的我的general.module.ts

@NgModule({
    imports: [
        BrowserModule,
        OncosupAppRoutingModule,
        Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-'}),
        OncosupSharedModule,
        OncosupHomeModule,
        OncosupAdminModule,
        OncosupAccountModule,
        OncosupEntityModule,
        FormsModule,
        ReactiveFormsModule,
        // jhipster-needle-angular-add-module JHipster will add new module here
    ],
    declarations: [
        JhiMainComponent,
        NavbarComponent,
        ErrorComponent,
        PageRibbonComponent,
        ActiveMenuDirective,
        FooterComponent
    ],
    providers: [
        ProfileService,
        PaginationConfig,
        UserRouteAccessService,
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthExpiredInterceptor,
            multi: true,
            deps: [
                StateStorageService,
                Injector
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: ErrorHandlerInterceptor,
            multi: true,
            deps: [
                JhiEventManager
            ]
        },
        {
            provide: HTTP_INTERCEPTORS,
            useClass: NotificationInterceptor,
            multi: true,
            deps: [
                Injector
            ]
        }
    ],
    bootstrap: [ JhiMainComponent ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class OncosupAppModule {}

我的test.module仅用于测试:

@NgModule({
    providers: [
        DatePipe,
        JhiDataUtils,
        JhiDateUtils,
        JhiParseLinks,
        {
            provide: JhiLanguageService,
            useClass: MockLanguageService
        },
        {
            provide: JhiLanguageHelper,
            useClass: MockLanguageHelper
        },
        {
            provide: JhiEventManager,
            useClass:  MockEventManager
        },
        {
            provide: NgbActiveModal,
            useClass: MockActiveModal
        },
        {
            provide: ActivatedRoute,
            useValue: new MockActivatedRoute({id: 123})
        },
        {
            provide: Router,
            useClass: MockRouter
        },
        {
            provide: Principal,
            useClass: MockPrincipal
        },
        {
            provide: AccountService,
            useClass: MockAccountService
        },
        {
            provide: LoginModalService,
            useValue: null
        },
        {
            provide: ElementRef,
            useValue: null
        },
        {
            provide: Renderer,
            useValue: null
        },
        {
            provide: JhiAlertService,
            useValue: null
        },
        {
            provide: NgbModal,
            useValue: null
        },
    ],
    imports: [HttpClientTestingModule, FormsModule, ReactiveFormsModule, RouterModule, RouterTestingModule ],
    schemas: [
        CUSTOM_ELEMENTS_SCHEMA
    ]
})

现在,我只想测试共享submodule.ts的compoonets之一。提供程序,方案和导入yes可以导入,但是entryComponents例如会出错。我想知道是否应该导入什么以及从哪个模块导入任何规则?

1 个答案:

答案 0 :(得分:0)

在子组件中,仅导入您的组件使用的模块。

如果导入大模块,则将导入其中声明的每个模块,以及其中的每个组件,提供程序,指令,管道(等)。想象一下模拟所有内容的时间...

对于entryComponents,有一种特殊的语法。我在Angualr Material的模态测试中找到了它,坦率地说,我现在不想搜索源,因此您必须相信我的想法:

TestBed
  .configureTestingModule(...)
  .overrideModule(BrowserDynamicTestingModule, { set: { entryComponents: [UploadModalComponent] } })