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.
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.
You need to define TestBed.configureTestingModule before the describe method. so it can be available globally. So now your test cases will look like this.
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();
describe('Component: Login', () => {
let loginFixture, loginComponent, loginComponentElement, loginComponentDebugElement;
beforeEach(async(() => {
loginFixture = TestBed.createComponent(LoginComponent);
loginComponent = loginFixture.componentInstance;
loginComponentElement = LoginFixture.nativeElement;
loginComponentDebugElement = LoginFixture.debugElement;
}));
it('should have a defined component', () => {
expect(LoginComponent).toBeDefined();
});
});
There is no need to go for a separate library just to achieve this. You can create a global TestBed just by creating a common angular module where you can define a utility method. This utility method creates the TestBed which you can then reuse across all your spec files.
You can refer to the answer below which also includes sample code: (Possible duplicate) https://stackoverflow.com/a/64835814/4184651