Exploring Angular v12 Part 5 – Unit testing

This post will go through some examples of how I tested an angular component using the core testing library, karma and jasmine.

Writing tests

After generating a component, the test file would have been automatically created by the Angular CLI. It is denoted by .spec.ts . For my particular component, it looks something like this, with the addition of several unit tests. Note that, if you’re changing the component properties within the Jasmine implementation callback (it), you must call fixture.detectChanges() afterwards, this ensures the component is ‘refreshed’, before proceeding with assertions.

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ImageCardComponent } from './image-card.component';

describe('ImageCardComponent', () => {
  let component: ImageCardComponent;
  let fixture: ComponentFixture<ImageCardComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [ImageCardComponent],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
  });

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

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

  it('should render with correct base class', () => {
    const compiled: HTMLElement = fixture.nativeElement;
    expect(compiled.querySelector('.image-card')).toBeTruthy();
  });
  it('should render default title', () => {
    const compiled: HTMLElement = fixture.nativeElement;
    expect(compiled.querySelector('.image-card__title')?.textContent).toContain(
      'some title'
    );
  });
  it('should render custom title', () => {
    component.title = 'a custom title';
    fixture.detectChanges();
    const compiled: HTMLElement = fixture.nativeElement;
    expect(compiled.querySelector('.image-card__title')?.textContent).toContain(
      'a custom title'
    );
  });
  it('should render default text', () => {
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.image-card__text').textContent).toContain(
      'some text'
    );
  });
  it('should render custom text', () => {
    component.text = 'custom text';
    fixture.detectChanges();
    const compiled = fixture.nativeElement;
    expect(compiled.querySelector('.image-card__text').textContent).toContain(
      'custom text'
    );
  });
  it('should have new alt description', () => {
    component.imgAlt = 'CUSTOM ALT DESC';
    fixture.detectChanges();
    const compiled: HTMLElement = fixture.nativeElement;
    expect(compiled.querySelector('img')?.getAttribute('alt')).toEqual(
      'CUSTOM ALT DESC'
    );
  });
});

This test suite covers some of the following scenarios

• does the component render?
• do the default properties display?
• if the properties are changed, do the updated values display?
• does the base class render? (.image-card)

Running tests

There’s no additional configuration required to run tests, simply run;

ng test

After doing so, a live server should start up, and appear in the default browser.

Source code

Source code is available here