我想测试一个选择的 onChange 事件 使用 spy on 但我收到错误
Expected spy onSelect to have been called with [ 'en' ] but actual calls were [ '' ].
组件
@Component({
selector: 'tnos-languages',
templateUrl: './languages.component.html',
styleUrls: ['./languages.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class LanguagesComponent {
@Input() languages: Language[];
@Output()
change: EventEmitter<string> = new EventEmitter<string>();
constructor() { }
onSelect(locale: string) {
this.change.emit(locale);
}
}
模板
<select #selectLanguage (change)="onSelect(selectLanguage.value)">
<option *ngFor="let language of languages" [value]="language.locale">
{{language.label}}
</option>
</select>
测试
const languages: Language[] = [{
id: 1,
label: 'Italiano',
locale: 'it',
default: false
}, {
id: 2,
label: 'English',
locale: 'en',
default: true
}];
fdescribe('LanguagesComponent', () => {
let component: LanguagesComponent;
let debugEl: DebugElement;
let element: HTMLElement;
let fixture: ComponentFixture<LanguagesComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [BrowserModule, FormsModule],
declarations: [LanguagesComponent]
})
.compileComponents();
fixture = TestBed.overrideComponent(LanguagesComponent, {
set: {
selector: 'languages',
templateUrl: './languages.component.html',
changeDetection: ChangeDetectionStrategy.Default
}
})
.createComponent(LanguagesComponent);
fixture.detectChanges();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LanguagesComponent);
component = fixture.componentInstance;
debugEl = fixture.debugElement;
element = debugEl.nativeElement;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should show `Italiano English` as option', async(() => {
component.languages = languages;
fixture.detectChanges();
fixture.whenStable().then(() => {
const options = debugEl.queryAll(By.css('select option'));
expect(options[0].nativeElement.text).toBe('Italiano');
expect(options[1].nativeElement.text).toBe('English');
});
}));
it('should show `Italiano English` as option', async(() => {
component.languages = languages;
fixture.whenStable().then(() => {
spyOn(component, 'onSelect');
const select = debugEl.query(By.css('select')).nativeElement;
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.onSelect).toHaveBeenCalled();
//expect(component.onSelect).toHaveBeenCalledWith('en');
});
}));
it('should emit on change', fakeAsync(() => {
component.languages = languages;
fixture.whenStable().then(() => {
spyOn(component.change, 'emit');
const select = debugEl.query(By.css('select')).nativeElement;
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.change.emit).toHaveBeenCalled();
expect(component.change.emit).toHaveBeenCalledWith('en');
});
}));
});
你能帮帮我吗?
已解决
作为@Ayala的回复 但他/她只是忘记了 fixture.detectChanges();
it('should show `Italiano English` as option', async(() => {
component.languages = languages;
fixture.detectChanges();
fixture.whenStable().then(() => {
spyOn(component, 'onSelect');
const select = debugEl.query(By.css('select')).nativeElement;
select.value = select.options[1].value;
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.onSelect).toHaveBeenCalled();
expect(component.onSelect).toHaveBeenCalledWith('en');
});
}));
更新
我认为这是要走的路 摆脱异步和稳定
it('should emit on change', () => {
component.languages = languages;
fixture.detectChanges();
spyOn(component.change, 'emit');
const select = debugEl.query(By.css('select')).nativeElement;
select.value = select.options[1].value;
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.change.emit).toHaveBeenCalled();
expect(component.change.emit).toHaveBeenCalledWith('en');
});
最佳答案
在发送 'change' 事件之前,您似乎没有更改选择值。
如果您尝试选择“en”选项,请尝试执行以下操作:
it('should show `Italiano English` as option', async(() => {
component.languages = languages;
fixture.whenStable().then(() => {
spyOn(component, 'onSelect');
const select = debugEl.query(By.css('select')).nativeElement;
select.value = select.options[1].value; // <-- select a new value
select.dispatchEvent(new Event('change'));
fixture.detectChanges();
expect(component.onSelect).toHaveBeenCalled();
expect(component.onSelect).toHaveBeenCalledWith('en');
});
}));
关于 Angular 单元测试选择 onChange 监视空值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48241756/