angular 2 次测试 kendo-自动完成

Question

我正在尝试测试具有 kendo-自动完成控件的组件。当测试破坏弹出窗口时，结果根本不显示。我需要做什么？

下面是代码，如果您需要任何其他信息，请告诉我。

组件

import { Component, OnInit, Input, Output, Inject } from '@angular/core';
import { IFieldLookUpService } from 'app/services/ifield-look-up.service';
import { FieldLookUpValueResults } from 'app/models/field-look-up-result';

@Component({
  selector: 'field-lookup',
  templateUrl: './field-lookup.component.html',
  styleUrls: ['./field-lookup.component.css']
})
export class FieldLookupComponent implements OnInit {
  @Input() fieldId: number;
  @Input() fieldName: string;
  @Output() selectedValue: string;
  private source: FieldLookUpValueResults;
  public fieldLookUpValues: FieldLookUpValueResults;

  constructor(@Inject('IFieldLookUpService') private fieldLookUpService: IFieldLookUpService) { }

  ngOnInit() {
    this.loadData();
  }

  handleFilter(value) {
    this.fieldLookUpValues.results = this.source.results.filter((s) => s.text.toLowerCase().indexOf(value.toLowerCase()) !== -1);
  }
  private loadData() {
    this.fieldLookUpService.getLookUpValues(this.fieldId, this.fieldName)
    .subscribe(data => { this.source = data;
      this.fieldLookUpValues = new FieldLookUpValueResults(this.source.header, null);
    })
  }
}

Component.html

<div *ngIf="fieldLookUpValues">
  <kendo-autocomplete [data]="fieldLookUpValues.results" [valueField]="'text'" [suggest]="true" [value]="selectedValue" [filterable]="true" (filterChange)="handleFilter($event)">
      <ng-template kendoAutoCompleteHeaderTemplate>
          <strong>{{fieldLookUpValues.header}}</strong>
      </ng-template>
  </kendo-autocomplete>
</div>

规格

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { FieldLookupComponent } from './field-lookup.component';
import { FieldLookUpValueResults, FieldLookUpValue } from 'app/models/field-look-up-result';

import { IFieldLookUpService } from 'app/services/ifield-look-up.service';

import { Observable } from 'rxjs/Observable';

import { DropDownsModule } from '@progress/kendo-angular-dropdowns';

fdescribe('FieldLookupComponent', () => {
  let component: FieldLookupComponent;
  let fixture: ComponentFixture<FieldLookupComponent>;
  let debugEl: DebugElement;
  let mockFieldLookUpService;
  let inputElement;

  beforeEach(async(() => {
    mockFieldLookUpService = jasmine.createSpyObj('mockFieldLookUpService', ['getLookUpValues']);
    let mockData = new FieldLookUpValueResults('LookUp Values Result Header',
    [
      new FieldLookUpValue('LookUp Value 1', '1'),
      new FieldLookUpValue('LookUp Value 2', '2'),
    ]);

    mockFieldLookUpService.getLookUpValues.and.returnValue(Observable.of(mockData));

    TestBed.configureTestingModule({
      declarations: [ FieldLookupComponent ],
      imports: [
        DropDownsModule
      ],
      providers: [
        { provide: 'IFieldLookUpService', useFactory: () => mockFieldLookUpService },
      ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(FieldLookupComponent);
    component = fixture.componentInstance;
    debugEl = fixture.debugElement;
    fixture.detectChanges();
    inputElement = debugEl.query(By.css('input')).nativeElement;
    console.log(component);
  });

  fit('should be created', () => {
    expect(component).toBeTruthy();
  });

  fit('should have the autocomplete input', () => {
    expect(inputElement).toBeTruthy();
  });

  fdescribe('when character L is set in autocompelte box', () => {
    let list: DebugElement;
    let listItems: DebugElement[];

    beforeEach(() => {
      inputElement.value = 'L';
      fixture.detectChanges();
      list = debugEl.query(By.css('ul')).nativeElement;
      listItems =  list.queryAll(By.css('li'));
    })

    fit('should have the kend pop-up shown', () => {
      expect(list).toBeTruthy();
    });

  });

});

我将值 'L' 设置为自动完成输入，然后我应该会看到弹出窗口，但它们为空（列表和 ListItems）

inputElement.value = 'L';
fixture.detectChanges();
list = debugEl.query(By.css('ul')).nativeElement;
listItems =  list.queryAll(By.css('li'));

Answer 1

AutoComplete 中使用的 Popup 组件（适用于其他带 Popup 的 Kendo 组件）默认 附加在根组件 上。换句话说，Popup 不是组件树的一部分。对于那些对为什么会这样感兴趣的人，请阅读这篇 Github issue

考虑到这些细节，您将需要使用 AutoComplete 实例并从其 popupRef 属性.

中检索 Popup 元素

{{ autocomplete?.popupRef?.popupElement.nodeName }}

这是一个演示这种方法的 plunker：

http://plnkr.co/edit/bQTmfBUT7r5z6wjt5MtL?p=preview

请注意，您需要在测试中等待一段时间才能正确获取 popupRef。

P.S。恕我直言，不需要测试呈现的 UL 列表。提供自动完成组件的供应商已经根据传递的 [data] 值测试了输出项。考虑到这个事实，我会测试 autocomplete.data 属性，这应该足够了。

您始终可以在此基础上添加功能测试，以确保您正在构建的应用程序作为一个整体正常运行。

angular 2 次测试 kendo-自动完成

angular 2 testing kendo-autocomplete

kendo-ui-angular2