Imports on angular tests

Question

I have an angular project and I have a component to test.Now this componnet has a submodule.ts and the project has a general module.ts and also there is a test.module.ts. An example of each one of them:

submodule.ts that is a module shared for some componnets.

 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] 

my general.module.ts for all teh project

 @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 {} 

And my test.module for tests only:

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

Now I want to test only one of the compoonets that is sharing the submodule.ts. Providers,schemas and imports yess can be imported but entryComponents for example give errors. I was wondering if there is any rule on what should be imported and from which module??

Answer 1

In your subcomponent, only import the modules that you component use.

if you import your big modules, you will import every module declared in it, along with every component, provider, directive, pipe (etc.) that are in it . Imagine the time to mock all of it ...

For the entryComponents , there's a special syntax. I found it into Angualr Material's modal test, and I frankly don't want to search for the source now, so you'll have to take my word for it :

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