我想测试处理编辑器及其输入的组件。该组件具有一个FormControl和一个FocusMonitor。仅当组件专用焦点字段设置为true时,才应更新特定值。FocusMonitor更新组件的专用焦点字段。
我使用Karma Jasmine 4.0.1。进行了测试
[当我选择(聚焦)运行测试的ChromeBrowser时,测试成功。如果我只是通过终端输入启动测试,然后让它在后台运行-在进行其他操作时-测试失败。
失败之所以发生,是因为当我没有主动选择正在运行的测试浏览器的窗口时,FocusMonitor Observable会不发出事件。
组件内部
focusMonitor.monitor(elementRef.nativeElement, true).subscribe(origin => {
this.focused = !!origin;
this.someUpdateAlgorithm();
});
//somewhere inside the component. This ward keeps off unwanted changes via the model.
if (!this.focused) {
return;
}
在component.spec内部
fit('should change value of input control', () => {
fixture.debugElement.query(By.css('input')).nativeElement.focus();
model.setValue(3);
const inputText = getCurrentDisplayValue();
expect(inputText).toBe('3');
});
预期结果:
Case:积极选择运行测试浏览器(Chrome)的窗口
expect(inputText).toBe('3'); // successfull inputText ==='3'
Case:在后台最小化运行测试浏览器(Chrome)]
expect(inputText).toBe('3'); // successfull inputText ==='3'
实际结果:
Case:积极选择运行测试浏览器(Chrome)的窗口
expect(inputText).toBe('3'); // successfull inputText ==='3'
Case:在后台最小化运行测试浏览器(Chrome)]
expect(inputText).toBe('3'); //失败的inputText ===''
要使测试不受环境影响,可以模拟FocusMonitor
:
describe('YourComponent', () => {
let focusMonitorObservable: Subject<string>;
beforeEach(async(() => {
const fmSpy = jasmine.createSpyObj('FocusMonitor', ['monitor']);
TestBed.configureTestingModule({
// ...
providers: [
{ provide: FocusMonitor, useValue: fmSpy },
]
})
.compileComponents();
focusMonitorSpy = TestBed.get(FocusMonitor);
focusMonitorObservable = new Subject<string>();
focusMonitorSpy.monitor.and.returnValue(focusMonitorObservable);
}));
it('should change value of input control', () => {
focusMonitorObservable.next('mouse'); // emulating the focus change
model.setValue(3);
const inputText = getCurrentDisplayValue();
expect(inputText).toBe('3');
});
});