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.

• Author
• Recent Posts

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin.
Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.

Latest posts by Ajitesh Kumar (see all)

• Agentic Reasoning Design Patterns in AI: Examples - October 18, 2024
• LLMs for Adaptive Learning & Personalized Education - October 8, 2024
• Sparse Mixture of Experts (MoE) Models: Examples - October 6, 2024