Оценка привязок шаблонов во время тестов, не работающих в Angular 2 - PullRequest
Новая
       25

Оценка привязок шаблонов во время тестов, не работающих в Angular 2

0 голосов
/ 08 октября 2019

Не могли бы вы помочь мне понять, почему этот тест этого маленького компонента не работает?

Вот шаблон HTML: 

<p-overlayPanel [appendTo]="'body'" class="inv select-overlay checkbox" #mOverlay>
<div class="over-c">
    <h3 class="title">{{ "TITLE" | translate }}</h3>
    <div class="overflow">
        <div *ngIf="loading">
            <i class="fa loading"></i>
        </div>
        <div *ngIf="!loading">
            <div class="ui-g-12 ui-g-nopad" *ngFor="let item of items">
                <p-radioButton class="align-select" name="check" [label]="item.description.title"
                    [value]="{name: item.description.title, id: item.id}" [(ngModel)]="selected" data-testid="checkbox-invite">
                </p-radioButton>
            </div>
        </div>
    </div>
    <div class="ui-g column-filters">
        <button type="button" (click)="onAdd($event)" pButton label="{{'LINK'| translate }}"
            data-testid="invite"></button>
    </div>
</div>
</p-overlayPanel>

Вот компонент: 

export class Component {
@Output() onComplete = new EventEmitter<any>();
@ViewChild('mOverlay') overlay: any;

public items: any[] = [];
public selected: any;
public loading: boolean;
private subscriptions: Subscription[] = [];

constructor(
    private mService: MService,
    public translate: TranslateService,
) { }

ngOnDestroy() {
    this.subscriptions.forEach((subscription) => {
        subscription.unsubscribe();
    })
}

public refreshM(uId, brId) {
    this.loading = true;
    this.items = null;
    this.subscriptions.push(this.mService.getUserM(uId, bId).subscribe(result => {
        this.items = result;
        this.loading = false;
    }));
}

public onAdd(event) {
    if (this.selected) {
        this.overlay.hide(event);
        this.onComplete.emit(this.selected);
    }
}

public toggle(event) {
    this.overlay.toggle(event);
}
}

Как видите, это действительно простой компонент (немного порицанный, но это основная логика).

Вот тесты, которые я пытаюсь запустить: 

describe("Component", () => {
beforeEach(() => {
    TestBed.configureTestingModule({
        declarations,
        providers,
        imports
    })
    fixture = TestBed.createComponent(Component);
    component = fixture.componentInstance;
});

it("should render radio button for each item", async () => {
    const items = [
        { description: { title: "title 0" }, id: 1 },
        { description: { title: "title 2" }, id: 2 },
    ];

    component.items = missions
    component.loading = true
    await fixture.whenStable();
    const btns = fixture.debugElement.nativeElement.querySelectorAll("[data-testid='checkbox-mission']")
    expect(btns).toBe(items.length)
});
})

КакВы можете видеть, что это довольно прямолинейный тест, однако, если напечатать fixture.debugElement.nativeElement, результат будет: 

<div id="root3" ng-version="2.4.6"><p-overlaypanel class="inv select-overlay checkbox">
        <div>
            <div class="p-overlayPanel">

    <div class="overlay-c">
        <h3 class="title" />
        <div class="overflow">
            <!--template bindings={}-->
            <!--template bindings={}-->
        </div>
        <div class="ui-g column-filters">
            <button data-testid="invite" pbutton="" type="button" />
        </div>
    </div>

            </div>
            <!--template bindings={}-->
        </div>
    </p-overlaypanel></div>

Я был бы очень признателен, если бы кто-нибудь из вас помог мне понять, что я делаю здесь неправильно. Как я могу получить правильные привязки вместо <!--template bindings={}-->?

Ps для отладки тестов и печати значения fixture.debugElement.nativeElement, я помещаю expect(fixture.debugElement.nativeElement).toBeFalsy(), что делает тесты неудачными и уведомляет меня о "Получено"ценность, я надеюсь, что все в порядке.

...