shaharkazaz / spectator

🦊 πŸš€ Angular Tests Made Easy

Home Page:https://netbasal.gitbook.io/spectator/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

πŸ’»

Anders Skarby

πŸ’»

Gregor Woiwode

πŸ’»

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

ezoic increase your site revenue

About

🦊 πŸš€ Angular Tests Made Easy

https://netbasal.gitbook.io/spectator/

License:MIT License


Languages

Language:TypeScript 98.3%Language:JavaScript 1.4%Language:HTML 0.2%Language:CSS 0.0%