Angular – Setup Unit Test for Components using External Template

This blog represents techniques to setup unit testing environment for doing unit tests for Angular components with external template and CSS files. The blog is applicable for Angular 2/Angular 4/Angular 5 versions.

Two BeforeEach Methods to Load Testing Module Asynchronously and Create Component Synchronously

Using first technique, BeforeEach method is called for two times:

• Firstly, BeforeEach handles asynchronous compilation. async method is passed as an argument to beforeEach method. It enables the creation of TestBed in async test zone. TestBed.configureTestingModule returns TestBed on which method compileComponents is invoked to compile the components asynchronously.
• Secondly, beforeEach method is invoked synchronously. This is used to create the component.

describe('SignupComponent', () => {

  let fixture: ComponentFixture<SignupComponent>;
  let component: SignupComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        SignupComponent
      ],
      imports: [
        FormsModule
      ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(SignupComponent);
    component = fixture.componentInstance;
  });

  it('should create the app', async(() => {
    expect(component).toBeTruthy();
  }));
});

One BeforeEach Async Method & Moving Synchronous Code within compileComponent.then(…)

In this technique, the synchronous execution of code related with creation of components etc is moved with TestBed.compileComponents.then(…) callback method. Note that the compileComponents method returns a promise so you can perform additional tasks immediately after it finishes.

describe('SignupComponent', () => {

  let fixture: ComponentFixture<SignupComponent>;
  let component: SignupComponent;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
          declarations: [
            SignupComponent
          ],
          imports: [
            FormsModule
          ],
    }).compileComponents().then(() => {
        fixture = TestBed.createComponent(SignupComponent);
        component = fixture.componentInstance;
      });
  }));

  it('should create the app', async(() => {
    expect(component).toBeTruthy();
  }));
});

In case you are developing web apps using Spring and Angular, check out my book, Building web apps with Spring 5 and Angular. Grab your ebook today and get started.