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

Follow me

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. For latest updates and blogs, follow us on Twitter. 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. Check out my other blog, Revive-n-Thrive.com

Follow me

Latest posts by Ajitesh Kumar (see all)

• Model Parallelism vs Data Parallelism: Examples - April 11, 2024
• Model Complexity & Overfitting in Machine Learning: How to Reduce - April 10, 2024
• 6 Game-Changing Features of ChatGPT’s Latest Upgrade - April 9, 2024