test(test): test

po-ui · Jan 16, 2024 · 68a4b25 · 68a4b25
1 parent 4a2bedf
commit 68a4b25
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/projects/ui/src/lib/components/po-disclaimer-group/po-disclaimer-group.component.spec.ts b/projects/ui/src/lib/components/po-disclaimer-group/po-disclaimer-group.component.spec.ts
@@ -256,6 +256,21 @@ describe('PoDisclaimerGroupComponent:', () => {
     expect(component['handleKeyDown']).toHaveBeenCalled();
   });
 
+  it('should add blur event listeners and call setTabIndex', () => {
+    const tagRemoveElements = [document.createElement('div1'), document.createElement('div2')];
+    const initialIndex = 0;
+    const fakeKeyboardEvent = new KeyboardEvent('blur');
+
+    spyOn(component as any, 'setTabIndex');
+
+    component['initializeTagRemoveElements'](tagRemoveElements, initialIndex);
+
+    tagRemoveElements[0].dispatchEvent(fakeKeyboardEvent);
+
+    expect(component['setTabIndex']).toHaveBeenCalledWith(tagRemoveElements[0], 0);
+    expect(component['setTabIndex']).toHaveBeenCalledWith(tagRemoveElements[1], -1);
+  });
+
   it('should set tab index to 0 for the previous element when initialIndex is not 0', () => {
     const tagRemoveElements = [document.createElement('div'), document.createElement('div')];
     const initialIndex = 1;

diff --git a/projects/ui/src/lib/components/po-disclaimer-group/po-disclaimer-group.component.ts b/projects/ui/src/lib/components/po-disclaimer-group/po-disclaimer-group.component.ts
@@ -14,6 +14,7 @@ import { PoLanguageService } from '../../services/po-language/po-language.servic
 
 import { Subscription, fromEvent } from 'rxjs';
 import { PoDisclaimerGroupBaseComponent } from './po-disclaimer-group-base.component';
+import { PoDisclaimer } from '../po-disclaimer/po-disclaimer.interface';
 
 /**
  * @docsExtends PoDisclaimerGroupBaseComponent
@@ -67,7 +68,7 @@ export class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent i
     }
   }
 
-  onCloseAction(disclaimer, event?) {
+  onCloseAction(disclaimer: PoDisclaimer, event?) {
     const index = this.disclaimers.findIndex(option => option.value === disclaimer.value);
 
     this.removeDisclaimer(disclaimer);
@@ -85,7 +86,7 @@ export class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent i
 
   focusOnNextTag(indexClosed: number, clickOrEnter: string) {
     if (clickOrEnter === 'enter') {
-      const tagRemoveElements: Array<any> = this.el.nativeElement.querySelectorAll('.po-tag-remove');
+      const tagRemoveElements: NodeListOf<Element> = this.el.nativeElement.querySelectorAll('.po-tag-remove');
       indexClosed = indexClosed || indexClosed === 0 ? indexClosed : tagRemoveElements.length;
       this.focusOnRemoveTag(tagRemoveElements, indexClosed);
     } else {
@@ -97,7 +98,7 @@ export class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent i
   handleKeyboardNavigationTag(initialIndex = 0) {
     this.subscription.unsubscribe();
     this.subscription = new Subscription();
-    const tagRemoveElements = this.el.nativeElement.querySelectorAll('.po-tag-remove');
+    const tagRemoveElements: NodeListOf<Element> = this.el.nativeElement.querySelectorAll('.po-tag-remove');
     this.initializeTagRemoveElements(tagRemoveElements, initialIndex);
   }
 
@@ -136,10 +137,19 @@ export class PoDisclaimerGroupComponent extends PoDisclaimerGroupBaseComponent i
           this.handleKeyDown(event, tagRemoveElements, index);
         })
       );
+
+      if (index !== 0) {
+        this.subscription.add(
+          fromEvent(tagRemoveElements[index], 'blur').subscribe(() => {
+            this.setTabIndex(tagRemoveElements[index], -1);
+            this.setTabIndex(tagRemoveElements[0], 0);
+          })
+        );
+      }
     });
   }
 
-  private handleKeyDown(event: KeyboardEvent, tagRemoveElements, index) {
+  private handleKeyDown(event: KeyboardEvent, tagRemoveElements, index: number) {
     const KEY_SPACE = 'Space';
     const KEY_ARROW_LEFT = 'ArrowLeft';
     const KEY_ARROW_RIGHT = 'ArrowRight';