代码之家 › 专栏 › 技术社区 › Tester

角度测试导入

angular html javascript

Tester · 技术社区 · 6 年前

我有一个角度项目,我有一个要测试的组件,现在这个组件有一个子模块,这个项目有一个通用模块,还有一个测试模块。每一个示例:

子模块,是一些组件共享的模块。

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 for all teh项目

@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
    ]
})

现在,我只想测试一个共享子模块的compoonet。提供程序、模式和导入是可以导入的,但是entrycomponents例如给出了错误。我想知道是否有任何关于应该导入什么和从哪个模块导入的规则?是吗?

1 回复 | 直到 6 年前

Maryannah 6 年前

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

如果导入大模块,则将导入 其中声明的每个模块,以及其中的每个组件、提供程序、指令、管道(等) .想象一下是时候嘲笑这一切了…

对于 entryComponents ,有一个特殊的语法。我在AngualR Material的模态测试中发现了它,坦白地说,我现在不想搜索源,所以你必须相信我的话:

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