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: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 🔧 💻

This project follows the all-contributors specification. Contributions of any kind welcome!