Angular Tests Made Easy

😎 Spectator

Spectator is written on top of the Angular Testing Framework and provides two things:

A cleaner API for testing.
A set of custom matchers that will help you to test DOM elements more easily.

Spectator helps you get rid of all the boilerplate grunt work, leaving you with readable, sleek and streamlined unit tests.

Installation

ng add @netbasal/spectator

Documentation

Learn about it on the docs site

Spectator CLI

Auto generate specs with the CLI

Schematics

Generate component, service and directive with Spectator spec templates with Angular Cli:

Component

Default spec: ng g cs dashrized-name
Spec with a host: ng g cs dashrized-name --withHost=true
Spec with a custom host: ng g cs dashrized-name --withCustomHost=true

Service:

Default spec: ng g ss dashrized-name
Spec for testing http data service: ng g ss dashrized-name --isDataService=true

Directive:

ng g ds dashrized-name

Default Schematics Collection

To use spectator as the default collection in your Angular CLI project, add it to your angular.json:

ng config cli.defaultCollection @netbasal/spectator

The spectator schematics extend the default @schematics/angular collection. If you want to set defaults for schematics such as generating components with scss file, you must change the schematics package name from @schematics/angular to @netbasal/spectator in angular.json:

"schematics": {
  "@netbasal/spectator:spectator-component": {
    "styleext": "scss"
  }
}

Testing in Angular

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { ButtonComponent } from './button.component';
import { Component, DebugElement } from "@angular/core";
import { By } from "@angular/platform-browser";

describe('ButtonComponent', () => {
  let fixture: ComponentFixture<ButtonComponent>;
  let instance: ButtonComponent;
  let debugElement: DebugElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ ButtonComponent ]
    })
    .compileComponents();

    fixture = TestBed.createComponent(ButtonComponent);
    instance = fixture.componentInstance;
    debugElement = fixture.debugElement;
  }));

  it('should set the class name according to the [className] input', () => {
    instance.className = 'danger';
    fixture.detectChanges();
    const button = debugElement.query(By.css('button')).nativeElement as HTMLButtonElement;
    expect(button.classList.contains('danger')).toBeTruthy();
    expect(button.classList.contains('success')).toBeFalsy();
  });

});

Testing in Spectator

import { ButtonComponent } from './button.component';
import { Spectator, createTestComponentFactory } from '@netbasal/spectator';

describe('ButtonComponent', () => {

  let spectator: Spectator<ButtonComponent>;
  const createComponent = createTestComponentFactory(ButtonComponent);

  beforeEach(() => spectator = createComponent());

  it('should set the class name according to the [className] input', () => {
    spectator.setInput('className', 'danger');
    expect(spectator.query('button')).toHaveClass('danger');
    expect(spectator.query('button')).not.toHaveClass('success');
  });
});

Features

ng-content testing
Custom Jasmine Matchers (toHaveClass, toBeDisabled..)
Built-in support for entry components
Support for triggering keyboard/mouse/touch events
Support for component providers
Support for services/component/directives mocks
Support for http service

Spectator is regularly used and maintained by Datorama.

Contributors

Thanks goes to these wonderful people (emoji key):

_{I. Sinai} 📖 👀 🎨	_{Valentin Buryakov} 💻 🤔	_{Netanel Basal} 💻 🔧	_{Ben Grynhaus} 🐛 💻	_{Ben Elliott} 💻	_{Martin Nuc} 💻	_{Dirk Luijk} 💻
_{Lars Gyrup Brink Nielsen} 📦 ⚠️	_{Andrew Grekov} 💻 🔧	_{Jeroen Zwartepoorte} 💻	_{Oliver Schlegel} 💻	_{Rex Ye} 🔧 💻	_tchmura 💻	_{Yoeri Nijs} 💻
_{Anders Skarby} 💻	_{Gregor Woiwode} 💻