SAP Spartacus cxFocus增添了refresh Focus功能後的一些考慮

• ngAfterViewInit Hook: 負責視圖渲染完畢後，執行handleFocus來使元素得到focus
• nOnChanges: 當配置的refreshFocus指向的Component 屬性發生變化時觸發，重新整理focus

兩個hook的作用不一樣。

因為真實的使用場景中，refreshFocus指向的一般都是Component模型的uid或者key，不會initial，故單元測試MockComponent裡兩個元素的初始值，我也沒有賦成"", 而是A和B.

Some background of my latest commit:

handleFocus method is called twice in different hooks in different focus class, which have different focus:

in focus.directive.ts, ngOnChanges:

this hook is responsible to refresh focus whenever component property configured in focus configuration ( config.refreshFocus ) is changed.

in auto-focus.directive.ts, ngOnAfterViewInit:

this hook is called when the view is fully rendered, responsible to auto-focus an element with autofocus = true.

In real scenario, for example when we opened unit list in B2B, click one unit to reach unit detail page(unit-details.component.html), an element marked with [cxFocus]="{ autofocus: true, refreshFocus: model.uid }" will be focused TWICE, one in ngOnChanges and the other one in ngAfterViewInit hook.

I didn’t implement OnChanges in base-focus.directive.ts, but in focus.directive.ts instead.

The reason is, I checked in base-focus.directive.ts, the ngOnInit hook implemented there has some default logic. So if I implement OnChanges hook in base-focus.directive.ts, I don’t have any default logic to code there, thus will lead to warnings in Visual Studio Code. So I choose to implement OnChanges in focus.directive.ts instead, this is current design in my PR.