Skip to content
πŸš€ Angular Tests Made Easy
Branch: master
Clone or download
Latest commit 0e616a7 Apr 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e chore(dev): migrate build to @angular/cli (for library) Nov 5, 2018
projects/spectator chore(version): bump Apr 19, 2019
src Refactored matchers Apr 18, 2019
.all-contributorsrc chore(version): bump Apr 19, 2019
.angulardoc.json fix(host): fix initial module undefined when using host Apr 2, 2018
.editorconfig chore: initial commit from @angular/cli Mar 25, 2018
.gitignore
.prettierrc chore(dev): migrate build to @angular/cli (for library) Nov 5, 2018
CONTRIBUTING.md
LICENSE Initial commit Sep 3, 2017
README.md chore(version): bump Apr 19, 2019
angular.json chore(lib): fix tests Mar 10, 2019
commitlint.config.js feat(lib): initial commit Apr 1, 2018
package-lock.json feat(jest): imporove spy types Mar 30, 2019
package.json feat(jest): imporove spy types Mar 30, 2019
tsconfig.json fix(jest): expose dom selectors Dec 24, 2018
tslint.json fix(jest): expose dom selectors Dec 24, 2018
yarn.lock feat(lib): add ng-add support Feb 14, 2019

README.md

Downloads All Contributors spectator MIT commitizen PRs styled with prettier Build Status

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

Datorama

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

πŸ’»

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

You can’t perform that action at this time.