Angular 5 Testing

Ever since I read Kent Beck's book, Test-Driven Development by Example, I've known that that's what I want to do. When I write code, I want to do it that way, all the time if possible. In order to do that, I need to know how to write the tests.

When I started writing test cases for my private little side project (it's written in Angular 5) I had a hard time finding resources that describe how I should do it. So, I decided to write down a 'how to' to myself and to share my findings with the world.

Writing tests for your software makes coding a greater experience. Tested software is easier to maintain. When you need to refactor, you can be sure it's refactored properly because your test cases still give you a green bar. When you need to add functionality to your application, you know you have not destroyed the previous functionality, because your tests are still running.

The following are short test case 'recipes' for Angular 5. Hopefully they will be helpful.

Initialize the test specification for ‘AppComponent’

import {
  TestBed,
  ComponentFixture,
  async
} from '@angular/core/testing';
import { AppComponent } from './app.component';
import { AnotherComponent } from './another/another.component';

var _ = require('underscore');

describe('AppComponent', () => {
  let component: AnotherComponent;
  let fixture: ComponentFixture<HeroesComponent>;
  let compiled: any;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        AnotherComponent
      ];
    }).compileComponents();
  }));
}

Prepare properties before each test function:

beforeEach(() => {
  fixture = TestBed.createComponent(HeroesComponent);
  component = fixture.componentInstance;
  fixture.detectChanges();
  compiled = fixture.debugElement.nativeElement;
 });

Test if that property exists:

it(`should have a property 'myProperty' of type object`,
  async(() => {
  expect(_.has(component, 'myProperty')).toBeTruthy();
  expect(typeof component.myProperty).toEqual('object');
}));

Test if component is rendering a specific text in a tag of certain type:

it('should render "Some Text" tag', async(() => {
  expect(compiled
    .querySelector('h1').textContent)
      .toContain('Some text');
}));

Test if component contains a tag of the other component type:

it('should contain an another-component tag', async(() => {
  expect(compiled
    .querySelector('another-component')).not.toEqual(null);
}));

Test if text input contains a certain value:

it(`should render the text 'a value' in an input`, async(() => {
  fixture.whenStable().then(() => {
    expect(compiled.querySelector('input').value)
      .toContain('a value'); 
  });
}));

Test that an element has a certain class after it has been clicked:

it(`should set class 'some-class' when clicked`, async(() => {
  let listItem = compiled.querySelector('li');
  listItem.click();
  fixture.detectChanges();
  fixture.whenStable().then(() => {
    expect(compiled.querySelector('li.some-class')).not.toEqual(null);
  });
}));

This post is originally published by the author here. This version has been edited for clarity and may appear different from the original post.