0
我試圖測試一個具有劍道自動完成控制的組件。當測試破壞結果的彈出窗口根本不顯示。 我需要做什麼？角2測試kendo-autocomplete
下面你有代碼，如果你需要任何其他信息，請讓我知道。
元器件
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();
});
});
});inputElement.value = 'L';
fixture.detectChanges();
list = debugEl.query(By.css('ul')).nativeElement;
listItems = list.queryAll(By.css('li'));