Как получить доступ к свойству директивы в тестовом хосте в Angular 5? - PullRequest
Новая
       6

Как получить доступ к свойству директивы в тестовом хосте в Angular 5?

0 голосов
/ 30 мая 2018

Я пытаюсь написать модульный тест it('should toggle menu', () => {}), но мне сложно получить доступ к свойствам директивы, содержащей метод переключения.

У меня есть компонент многократного использования, состоящий из нескольких компонентов / директив 

ToggleComponent    
ToggleDirective
ToggleMenuDirective

Это мой ToggleDirective: 

export class ToggleDirective implements OnInit {
  @HostBinding('class.toggler-toggle') toggleClass = true;
  toggle: boolean;
  visible = false;

  constructor(private toggler: ToggleService, private el: ElementRef) { }
    ngOnInit(): void {
    this.toggler.nowToggle.subscribe(toggle => this.toggle = toggle);
  }
  @HostListener('document:click', ['$event'])
  onVoidClick(): void {
    this.visible = this.el.nativeElement.contains(event.target) ? !this.visible : false;
    this.toggler.setToggleState(this.visible);
  }
}

При написании модульного теста Я использую шаблон макета.

Как получить доступ к / проверить методы в ToggleDirective при использовании макета шаблона, подобного этому: 

import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

import { TogglerModule } from './toggler.module';

@Component({
  template: `
    <toggler>
      <toggler-toggle>Toggle</toggler-toggle>
      <toggler-menu>
        <toggler-item>Sample Item 1</toggler-item>
      </toggler-menu>
    </toggler>`,
    })
class TestComponent {}

describe('TogglerComponent', () => {

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [TogglerModule],
      declarations: [TestComponent],
    })
    .compileComponents();
  });

  it('should create toggler', () => {
    expect(TestBed.createComponent(TestComponent).componentInstance).toBeTruthy();
  });

  it('should toggle menu', () => {
    const fixture = TestBed.createComponent(TestComponent);
    const component = fixture.componentInstance;
    expect(component.visible).toBeFalsy();
    component.onVoidClick();
    expect(component.visible).toBeTruthy();
  });

});

1 Ответ

0 голосов
/ 07 августа 2018

Вы можете получить доступ к директиве, используя инжектор debugElement: 

it('should toggle menu', () => {
  const fixture = TestBed.createComponent(TestComponent);
  const debugElement = fixture.debugElement.query(By.directive(ToggleDirective));
  const directive = debugElement.injector.get(ToggleDirective)
  expect(directive.visible).toBeFalsy();
  directive.onVoidClick();
  expect(directive.visible).toBeTruthy();
});
...