SAP Spartacus的Lock Focus Directive單元測試實作

測試用的HTML頁面：

這些方法可以全部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.

顯式觸發a标簽的回車事件：

注意上圖代碼，在使用代碼觸發a标簽的keydown.enter事件時，也要将mock過後的event對象傳到event handler裡去。

根據lockFocus directive的實作，在handleEnter方法裡會調用event.stopPropagation:

如果lock=false，則enter事件觸發後，不應該自動被unlock, 單元測試代碼：

原因在于，如果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：