Question

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

如果您需要任何其他信息，请在下面提供代码，请告知我们。

组件

＆＃13;

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

＆＃13;

Component.html

＆＃13;

<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>

＆＃13;

规范

＆＃13;

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

＆＃13;

＆＃13; 我设定了值＆＃39; L＆＃39;到自动完成输入然后我应该看到弹出窗口，但它们是null（列表和ListItems）

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

Answer 1

默认情况下，自动完成中使用的弹出组件（适用于带弹出窗口的其他Kendo组件）附加在根组件。换句话说，Popup不是组件树的一部分。对于那些感兴趣的人，请阅读Github issue

考虑到这些细节，您需要使用AutoComplete实例并从其popupRef属性中检索Popup元素。

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

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

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

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

P.S。恕我直言，测试渲染的UL列表是不必要的。提供AutoComplete组件的供应商已根据传递的[data]值测试了输出项。考虑到这个事实，我只测试autocomplete.data属性，这应该足够了。

您可以随时添加功能测试，以确保您正在构建的应用程序整体运行。

角度2测试kendo-autocomplete

1 个答案: