ng-stubs

Create stubs for your Angular components and directives dynamically.

Installation

npm install --save-dev https://github.com/planser/ng-stubs.git

Example Usage

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'app-greeter',
  template: '<button (click)="onClick()">Say Hi</button>',
  styleUrls: ['./greeter.component.css']
})
export class GreeterComponent {

  @Input()
  name: string;
  @Output()
  greet = new EventEmitter<string>();

  onClick(): void {
    this.greet.emit(`Hi, ${this.name}`);
  }

}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div><app-greeter [name]="name" (greet)="onGreet($event)"></app-greeter></div>
    <div class="result">{{greeting}}</div>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  name = "A Name";
  greeting: string;

  onGreet(greeting: string): void {
    this.greeting = greeting;
  }

}

import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { StubbedComponent, ComponentStub } from 'ng-stubs';
import { AppComponent } from './app.component';
import { GreeterComponent } from './greeter/greeter.component';
import { By } from '@angular/platform-browser';

describe('AppComponent', () => {

  let fixture: ComponentFixture<AppComponent>;
  let app: AppComponent;

  let greeterComponentStub: StubbedComponent<GreeterComponent>;

  beforeEach(async(() => {
    greeterComponentStub = ComponentStub(GreeterComponent)

    TestBed.configureTestingModule({
      declarations:
      [
        AppComponent,
        greeterComponentStub.type
      ]
    }).compileComponents();
  }));

  beforeEach(async () => {
    fixture = TestBed.createComponent(AppComponent);
    app = fixture.debugElement.componentInstance;

    fixture.detectChanges();
  });

  it('should create the app', () => {
    expect(app).toBeTruthy();
  });

  it('binds the name to the greeter', () => {
    expect(greeterComponentStub.instance.name).toEqual(app.name);

    app.name = "Tester";
    fixture.detectChanges();

    expect(greeterComponentStub.instance.name).toEqual("Tester");
  });

  it('shows the greeter`s result', () => {
    greeterComponentStub.instance.greet.emit("Hi, Tester");
    fixture.detectChanges();

    expect(fixture.debugElement.query(By.css(".result")).nativeElement.textContent).toEqual("Hi, Tester");
  });

});