在已有的单元测试代码,加了这个div标签之后就报错了:
报错:this.service.findFirstFocusable is not a function:
at FocusDirective.get (http://localhost:9876/karma_webpack/src/layout/a11y/keyboard-focus/autofocus/auto-focus.directive.ts:91:25)
从调用栈能看出,FocusDirective实例调用get时,会将控制转角给this.service的findFirstFocusable方法:
解决方法:
· 添加dummy方法:
通过下列代码拿到Angular Test Bed,ATB注入好的Service:
待测试的Component源代码:
@Component({
selector: 'cx-host',
template: ` <div id="a" cxFocus></div>
<div id="b" [cxFocus]="{autofocus: ':host'}"></div> `,
})
class MockComponent {}
单元测试代码:
it('should focus itself', () => {
let service: KeyboardFocusService;
service = TestBed.inject(KeyboardFocusService);
const host = fixture.debugElement.query(By.css('#b'));
const el = host.nativeElement;
spyOn(service, 'findFirstFocusable').and.returnValue(el);
spyOn(el, 'focus').and.callThrough();
fixture.detectChanges();
const event = {
preventDefault: () => {},
stopPropagation: () => {},
};
host.triggerEventHandler('focus', event);
expect(el.focus).toHaveBeenCalled();
expect(service.findFirstFocusable).toHaveBeenCalled();
});
测试结果:
本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理