angular-component-double

component test doubles for Angular 2+

installation

install the package from npm

  npm install angular-component-double --save-dev

usage

creating a component test double:

import the componentDouble helper function and pass any component decorator meta-data that will be required for the test double

import { componentDouble } from 'angular-component-double';

describe('Test', () => {
// ...
  let ChildComponentDouble: any;

  beforeEach(async(() => {
    ChildComponentDouble = componentDouble({
      selector: 'child',
      inputs: ['name'],
      outputs: ['greeting']
    });

    TestBed.configureTestingModule({
      declarations: [ParentComponent, ChildComponentDouble]
    });
  });
// ...

Note: these are the default properties

{
  template: '',
  inputs: []
  outputs: []
}

using the component doubles:

each time the component double is rendered in the template, it will be included in the ComponentDouble's list of instances

// ...
  it('has a list of instances', () => {
    const [firstChildComponent, ...rest] = ChildComponentDouble.instances;
  });
// ...

accessing inputs

inputs will be bound on the component

// ...
  it('assigns the input properties', () => {
    expect(firstChildComponent.name).toEqual('Michael Scott');
  });
// ...

stubbing outputs

event emitters will be assigned to each output

// ...
  it('stubs the output subscriptions', () => {
    firstChildComponent.greeting.next('hello');
  });
// ...

zdavy/angular-component-double