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):
This project follows the all-contributors specification. Contributions of any kind welcome!