Testing Directives

There is a special test factory for testing directives. Let’s say we have the following directive:

@Directive({ selector: '[highlight]' })
export class HighlightDirective {

  @HostBinding('style.background-color') backgroundColor : string;

  @HostListener('mouseover')
  onHover() {
    this.backgroundColor = '#000000';
  }

  @HostListener('mouseout')
  onLeave() {
    this.backgroundColor = '#ffffff';
  }
}

Let’s see how we can test directives easily with Spectator:

describe('HighlightDirective', () => {
  let spectator: SpectatorDirective<HighlightDirective>;
  const createDirective = createDirectiveFactory(HighlightDirective);

  beforeEach(() => {
    spectator = createDirective(`<div highlight>Testing Highlight Directive</div>`);
  });

  it('should change the background color', () => {
    spectator.dispatchMouseEvent(spectator.element, 'mouseover');

    expect(spectator.element).toHaveStyle({
      backgroundColor: 'rgba(0,0,0, 0.1)'
    });

    spectator.dispatchMouseEvent(spectator.element, 'mouseout');
    expect(spectator.element).toHaveStyle({
      backgroundColor: '#fff'
    });
  });

  it('should get the instance', () => {
    const instance = spectator.directive;
    expect(instance).toBeDefined();
  });
});

Setting factory defaults

It is also possible to set a default template when creating the factory. Here is an example:

describe('DirectiveProviderDirective', () => {
  const createDirective = createDirectiveFactory({
    directive: HighlightDirective,
    template: `<div class="default" directiveProvider>Testing Directive Providers</div>`
  });

  it('should get the instance', () => {
    const spectator = createDirective();
    const instance = spectator.directive;
    expect(instance).toBeDefined();
  });
});