angular - 如何运行在后台运行 HTMLElement 的 focus() 方法的 Karma jasmine 测试？

Question

目标

我想测试一个处理编辑器及其输入的组件。该组件有一个 FormControl 和一个 FocusMonitor。仅当组件私有(private)聚焦字段设置为 true 时，才应更新特定值。FocusMonitor 更新组件的私有(private)焦点字段。

我使用 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');
        });

结果

预期结果:

案例:主动选择运行测试浏览器(Chrome)的窗口

期望(inputText).toBe('3');//成功输入文本==='3'

案例:最小化(在后台)运行测试浏览器 (Chrome)

期望(inputText).toBe('3');//成功输入文本==='3'

实际结果:

案例:主动选择运行测试浏览器(Chrome)的窗口

期望(inputText).toBe('3');//成功输入文本==='3'

案例:最小化(在后台)运行测试浏览器 (Chrome)

期望(inputText).toBe('3');//输入文本失败 === ''

Answer 1

要使您的测试独立于环境，您可以模拟 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');
  });
});