如何在 Angular 5 中的测试主机中访问指令的属性?

Question

我正在尝试编写一个it('should toggle menu', () => {})单元测试，但很难访问包含切换方法的指令上的属性。

我有一个可重用的组件，由几个组件/指令组成

ToggleComponent    
ToggleDirective
ToggleMenuDirective

这是我的切换指令：

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);
}
}

在编写单元测试时，我使用的是模拟模板。

使用这样的模拟模板时，我将如何访问/测试切换指令中的方法：

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();
});
});

Answer 1

您可以使用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();
});