SAP Spartacus的Lock Focus Directive单元测试实现

测试用的HTML页面：

    <div cxLockFocus id="a"><button id="a1"></button><a href="" id="a2"></a></div><div [cxLockFocus]="{ lock: true, group: 'g1' }" id="b" tabindex="-1"><button id="b1"></button><a href="" id="b2"></a><textarea id="b3"></textarea><a id="b4"></a><p id="b5"></p></div><div [cxLockFocus]="{ lock: false }" id="c" tabindex="5"><button id="c1"></button><a href="" id="c2"></a></div><div[cxLockFocus]="{ lock: true, focusOnEscape: false, autofocus: false }"id="d"><button id="d1"></button><a href="" id="d2" data-cx-focus="d2"></a></div><div [cxLockFocus]="{ lock: true, autofocus: 'button' }" id="e"><a href="" id="e1"></a><button id="e2"></button><button id="e3"></button></div>

这些方法可以全部mock：

在beforeEach实现里，选取每一组的部分子元素，注入到service.findFocusable的返回结果集里。

第一组测试：id为a的a标签，tabindex应该被设置为0：

lockFocus directive的默认配置：

注意shouldLock的标志位是通过config.lock决定的：

b标签通过显式传入的lock：true，也将tabindex设置为0，这一点同a标签一样：

c标签：如果显式地传入lock:false：

则host元素的tabindex不发生变化，仍然是初始值5：

在configuration测试里，监控event对象的stopPropagation方法，并且让service的hasFocusableChildren方法返回false.

  describe('configuration', () => {beforeEach(() => {spyOn(event, 'stopPropagation');spyOn(service, 'hasFocusableChildren').and.returnValue(false);fixture.detectChanges();});

显式触发a标签的回车事件：

注意上图代码，在使用代码触发a标签的keydown.enter事件时，也要将mock过后的event对象传到event handler里去。

根据lockFocus directive的实现，在handleEnter方法里会调用event.stopPropagation:

如果lock=false，则enter事件触发后，不应该自动被unlock, 单元测试代码：

    it('should not unlock when lock=false', () => {const host = fixture.debugElement.query(By.css('#c'));event.target = host.nativeElement;host.triggerEventHandler('keydown.enter', event);expect(event.stopPropagation).not.toHaveBeenCalled();});

原因在于，如果lock=false，shouldLock也为false，因此无法进入下图的IF分支。

子元素的锁定测试：

b1，b2, b3应该全部被锁住，tabindex为-1：

为什么要tick(500)?

只要lock=true，就会自动将autofocus设置为true：

在view渲染完毕之后，会调用handleFocus:

handleFocus里会调用setTimeout执行lockFocus方法：

b4，b5属于non-focusable标签，不应该被lock：

b4没有href属性，b5是p标签，都不应被锁住。

如果lock=false，也不应被lock，tabindex不应该为-1：

如果child具有persisted focus，那么不应再lock：

d1和d2的定义：

enter事件触发时，执行unlockFocus方法：

unlockFocus会将子元素的tabindex设置成0：

persist group的测试：

b1,b2,b3会自动被添加上data-cx-focus-group的属性，值为config里传入的g1：

b4, b5不是focusable element，所以不应该被设置data-cx-focus-group属性。

id为a的a标签会在escape时触发service的handleEscape方法：

如果lock=false，那么escape时没必要unlock：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus的Lock Focus Directive单元测试实现相关推荐

SAP Spartacus lock focus Directive的工作原理示意图
源代码: import {AfterViewInit,Directive,ElementRef,EventEmitter,HostBinding,HostListener,OnInit,Output, ...
SAP Spartacus lock focus directive如何判断有没有focusable children
hasFocusableChildren:返回boolean focusable:返回HTMLElement数组 service的原本类型是LockFocusService 没有任何实现: 再往上看T ...
SAP Spartacus里和focus相关的directive之间的继承关系
selector:cxFocus FocusDirective -> LockFocusDirective -> TrapFocusDirective -> TabFocusDire ...
SAP Spartacus的persist focus，触发map set的条件
判断isPersisted的条件: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOMtVYAx-1610104864467)(https://upload-imag ...
SAP Spartacus pop over 元素的单元测试
如下图所示的 (i) icon,其对应的 HTML 原生代码如下:button 标签里包含 ng-reflect-cx-popover 属性. <button ng-reflect-cx-pop ...
SAP Spartacus的persist focus
design time: Directive的attr属性的改变,会触发最后html dom元素的FOCUS_ATTR属性data-cx-focus变化. 最后的结果: 这个key的getter,什么 ...
SAP Spartacus delivery mode continue button单元测试失败原因分析
原因在于continue button被设置成了disabled,因此无法点击: 因此需要研究这个button默认的enable状态: 通过测试发现,其默认是disable的.因此在单元测试之前,需要 ...
SAP Spartacus里的HTTPErrorInterceptor的单元测试设计原理
测试UnKnownErrorHandler是否能正确处理UnknownError这个状态: 这个handler是import进来的: 调用经过TestBed.inject注入后的http: 执行su ...
SAP Spartacus需要补充url validation单元测试的地方
home page: 点了digital compacts: http://localhost:4200/electronics-spa/en/USD/Open-Catalogue/Cameras/D ...

SAP Spartacus的Lock Focus Directive单元测试实现

SAP Spartacus的Lock Focus Directive单元测试实现相关推荐

最新文章

热门文章