Load all Components and Providers from one source for Angular Unit Tests

Question

I have been learning Angular 2 unit testing for the last month or so and have come across a tedious process that I am trying to figure out how to get around. This tedious process has to do with importing every provider that a component uses for a unit test. I was wondering if there is a way to import a single file (maybe the app.module.ts file) that contains all the Components and Providers for my app and then I can pick and choose what Components and Providers I need.

For reference, this is what I am currently doing in my Angular unit tests:

// Angular and Ionic Dependencies
import { async, TestBed, tick, fakeAsync } from '@angular/core/testing';
import { MockBackend } from '@angular/http/testing';
import { SimpleChange } from '@angular/core';
import { IonicModule, Platform, NavController } from 'ionic-angular';
import { Storage }                              from '@ionic/storage';
import { Observable } from 'rxjs/Rx';
import {
    BaseRequestOptions, ConnectionBackend, RequestOptions, Response,
    ResponseOptions, Http, XHRBackend, HttpModule, RequestMethod
} from '@angular/http';

// My App Dependencies
import { ComponentToTest } from '/location/component-to-test';
import { ComponentProviderOne } from '/location/component-provider-one';
import { ComponentProviderTwo } from '/locaiton/component-provider-two';
import { ComponentProviderThree } from '/location/component-provider-three';

describe('ComponentToTest', () => {
  let fixture;
  let component;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [ComponentToTest], // declare the test component
        imports: [
          IonicModule.forRoot(ComponentToTest)
        ],
        providers: [
          ComponentProviderOne,
          ComponentProviderTwo,
          ComponentProviderThree,
          { provide: XHRBackend, useClass: MockBackend},
          MockBackend,
          BaseRequestOptions,
          {
            provide: Http,
            deps: [MockBackend, BaseRequestOptions],
            useFactory:
              (backend: XHRBackend, defaultOptions: BaseRequestOptions) => {
                  return new Http(backend, defaultOptions);
              }
          }
        ]
    });
  });
}

I would love to avoid having to use all those imports for all ComponentProviderX.

Another reference I want to add is, in AngularJS I was able to load all my apps Components and Services the following way:

describe('componentToTest', function() {
  var $httpBackend,
      $q,
      $rootScope,
      componentToTest,
      componentServiceOne,
      componentServiceTwo,
      componentServiceThree;

  // Load the Angular 1 module file that has 
  // a reference of all the apps Components and Services
  beforeEach(module('angular1ModuleFile'));

  beforeEach(inject(function(
    _$httpBackend_,
    _$q_,
    _$rootScope_,
    _componentToTest_,
    _componentServiceOne_,
    _componentServiceTwo_,
    _componentServiceThree_

  ) {
    $httpBackend = _$httpBackend_;
    $q = _$q_;
    $rootScope = _$rootScope_;

    componentToTest = _componentToTest_;
    componentServiceOne = _componentServiceOne_;
    componentServiceTwo = _componentServiceTwo_;
    componentServiceThree = _componentServiceThree_;
  }));
});

In conclusion, is it possible to do something similar in Angular unit testing? That being, can I have a single import (like the angular1ModuleFile) that loads all my apps Components and Providers for my Angular unit tests?

You could just have `imports: [AppModule]`, but then your tests have to reload *everything* every time, and the state of each test becomes hugely complex. Perhaps you could break out more feature and shared modules to reduce the boilerplate: https://angular.io/guide/ngmodule — jonrsharpe, Aug 10 '17 at 15:24

Mo D Genesis · Answer 1 · 2022-07-29T17:44:10.337

somewhere I created a file named testbed-configs.ts

It contains:

const testbedBase = {
  declarations: [AppComponent, TestTypesPage],
  providers: [
    { provide: YourService, useClass: YourService},
  ],
  imports: [IonicModule.forRoot()]
}

export default testbedBase;

then in your test.spec.ts file

import testbedBase from 'src/testbed-configs';

  beforeEach(waitForAsync(() => {
    TestBed.configureTestingModule(testbedBase).compileComponents();

    fixture = TestBed.createComponent(YourTestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  }));

Load all Components and Providers from one source for Angular Unit Tests

1 Answers1