Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TestBed configureTestingModule define imports, declarations, providers, and pipes common to all spec.ts in one Module - pattern

Is there a optimal way to define imports, declarations, providers common to all spec.ts (i.e modules common to all specs one place define like we do it in @NgModule) in one place like we do in @NgModule for application Unit tests.

Note : Call configureTestingModule within a beforeEach so that TestBed can reset itself to a base state before each test runs. as on doc

Here in one of my test spec.ts i have to load same modules components and directives ..etc which is used by some other spec too.

describe('Component: Login', () => {
let loginFixture, loginComponent, loginComponentElement,loginComponentDebugElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [FormsModule, ReactiveFormsModule, MaterialRootModule, ModalModule, DatepickerModule,
    DropdownModule, AccordionModule], //--> here we load n number of mudoles 
  declarations: [LoginComponent, LoginHeaderComponent, LoginColumnComponent, LoginColumnContentComponent,
    LoginStatusLaneComponent, LoginSettingsComponent,
    LoginLaneComponent, SortableDirective, WindowHeightDirective, ConfirmDirective, ConfirmPopoverComponent, ConfirmationDialogComponent,
    ConfirmationDialogDirective],         //--> here we load n number of components directive and piper          
  providers: [LoginComponent,
    MockBackend,
    BaseRequestOptions,
    ComponentLoaderFactory,
    ConfirmOptions,
    {
      provide: Http,
      useFactory: (backend, options) => new Http(backend, options),
      deps: [MockBackend, BaseRequestOptions]
    },
    {provide: AuthService, useClass: MockAuthService},
    {provide: AppContextService, useClass: MockAppContextService},
    {provide: NotificationsService, useClass: MockNotificationsService},
    {provide: PositioningService}]       //--> here we load n number of services    
}).compileComponents();
loginFixture = TestBed.createComponent(LoginComponent);
loginComponent = loginFixture.componentInstance; 
loginComponentElement = LoginFixture.nativeElement;
loginComponentDebugElement = LoginFixture.debugElement;
}));

 it('should have a defined component', () => {
expect(LoginComponent).toBeDefined();
});
});

Note : Git Angular issue TestBed.configureTestingModule Performance Issue

Is there any pattern to make it common like loading all this modules components etc in starting before running all spec.ts file and inject respective dependency for each specs . Any help would be great.

like image 430
Karthigeyan Vellasamy Avatar asked Apr 10 '17 09:04

Karthigeyan Vellasamy


1 Answers

My answer is incomplete you have come to expect. But I hope if it can help you even a little.

router-stubs.ts

//----------Default Import------------
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
...snip...
export const test_imports = [
               BrowserModule,
               FormsModule,
               HttpModule,
               BrowserAnimationsModule
             ];

each test.spec.ts

import { test_imports }   from '../testing/router-stubs';
..snip..
      imports: [test_imports],

but providers/declarations can't use in the same way.

like image 126
H.H Avatar answered Oct 11 '22 11:10

H.H