Angular – Setup Unit Test for Components using External Template

0

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.



Ajitesh Kumar

Ajitesh Kumar

Ajitesh has been recently working in the area of AI and machine learning. Currently, his research area includes Safe & Quality AI. In addition, he is also passionate about various different technologies including programming languages such as Java/JEE, Javascript and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.