Я сделал угловую директиву для метки кнопки, но я не знаю, как проверить угловую директиву, в которой конструктор имеет elementRef.
Директива выглядит как
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
// tslint:disable-next-line:directive-selector
selector: '[lstA11yIonButton]'
})
export class LstA11yIonButtonDirective {
@Input() lstA11yLabel: string;
constructor(
private el: ElementRef
) {
el.nativeElement.componentOnReady().then(() => {
this.onShadowReady();
});
}
onShadowReady() {
const button = this.el.nativeElement.shadowRoot.querySelector('button');
button.setAttribute('aria-label', this.lstA11yLabel);
}
}
Написан тестовый примерПо мне так выглядит, но не охватывает код в покрытии кода
import { LstA11yIonButtonDirective } from './lst-a11y-ion-button.directive';
import { ElementRef, Component, DebugElement } from '@angular/core';
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
@Component({
template: `
<button
type="button"
class="button"
lstA11yIonButton
[lstA11yLabel]="'button-label'"
></button>
`
})
class TestComponent {}
describe('Directive: A11yLabelDirective', () => {
let component: TestComponent;
let fixture: ComponentFixture<TestComponent>;
let inputEl: DebugElement;
const elementRef: ElementRef = null;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [LstA11yIonButtonDirective, TestComponent]
});
fixture = TestBed.createComponent(TestComponent);
component = fixture.componentInstance;
spyOn(elementRef.nativeElement, 'componentOnReady');
inputEl = fixture.debugElement.query(By.all());
});
it('should create component', () => {
expect(component).toBeDefined();
});
it('should set button label', () => {
const debugEl: HTMLElement = fixture.debugElement.nativeElement;
const button: HTMLElement = debugEl.querySelector('button');
});
});
Как проверить такой тип директивы в angular 7 с жасмином?