Как проверить директиву в угловых 7, используя жасмин? - PullRequest
0 голосов
/ 11 июня 2019

Я сделал угловую директиву для метки кнопки, но я не знаю, как проверить угловую директиву, в которой конструктор имеет 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 с жасмином?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...