自己动手开发SAP Spartacus focus Directive的单元测试

发表于:2022-4-29 09:26

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:JerryWang汪子熙    来源:51CTO博客

分享:
  在已有的单元测试代码,加了这个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),我们将立即处理
价值398元的测试课程免费赠送,填问卷领取吧!

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计

法律顾问:上海漕溪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2022
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号