feat(tabs): adiciona output p-actived-tab e o método activateTab

Author: anderson-gregorio-totvs

projects/ui/src/lib/components/po-tabs/po-tab/po-tab-base.component.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, Input, Output, Directive } from '@angular/core';
+import { EventEmitter, Input, Output, Directive, output } from '@angular/core';
 
 import { convertToBoolean, uuid } from '../../../utils/util';
 
@@ -30,6 +30,9 @@ export abstract class PoTabBaseComponent {
    */
   @Input({ alias: 'p-hide-close', transform: convertToBoolean }) hideClose: boolean = false;
 
+  /** ID da Tab */
+  @Input('id') id: string = uuid();
+
   /** Método disparado ao clicar na aba. */
   @Output('p-click') click = new EventEmitter();
 
@@ -45,8 +48,15 @@ export abstract class PoTabBaseComponent {
    */
   @Output('p-close-tab') closeTab = new EventEmitter();
 
-  // ID da aba
-  id?: string = uuid();
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Evento emitido quando a aba é ativada.
+   * Emite a instância do componente da aba que foi ativada.
+   */
+  activatedTab = output<PoTabBaseComponent>({ alias: 'p-activated-tab' });
 
   private _active?: boolean = false;
   private _disabled?: boolean = false;

projects/ui/src/lib/components/po-tabs/po-tab/po-tab.base.component.spec.ts

@@ -1,16 +1,27 @@
-import { Directive } from '@angular/core';
+import { Component } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
 
 import { expectPropertiesValues } from '../../../util-test/util-expect.spec';
 
 import { PoTabBaseComponent } from './po-tab-base.component';
 
-@Directive()
+@Component({
+  template: '',
+  standalone: true
+})
 class PoTabComponent extends PoTabBaseComponent {
   setDisplayOnActive() {}
 }
 
 describe('PoTabBaseComponent', () => {
-  const component: PoTabComponent = new PoTabComponent();
+  let component: PoTabComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PoTabComponent]
+    }).compileComponents();
+    component = TestBed.runInInjectionContext(() => new PoTabComponent());
+  });
 
   it('should be created', () => {
     expect(component).toBeTruthy();
@@ -61,5 +72,27 @@ describe('PoTabBaseComponent', () => {
 
       expectPropertiesValues(component, 'hide', invalidValues, expectedReturnFalse);
     });
+
+    it('id: should have a default value generated by uuid', () => {
+      expect(component.id).toBeTruthy();
+      expect(typeof component.id).toBe('string');
+      expect(component.id.length).toBeGreaterThan(0);
+    });
+
+    it('id: should accept a custom value via input', () => {
+      component.id = 'custom-tab-id';
+      expect(component.id).toBe('custom-tab-id');
+    });
+
+    it('activatedTab: should be defined', () => {
+      expect(component.activatedTab).toBeTruthy();
+    });
+
+    it('activatedTab: should emit the component instance', () => {
+      spyOn(component.activatedTab, 'emit');
+      component.activatedTab.emit(component);
+
+      expect(component.activatedTab.emit).toHaveBeenCalledWith(component);
+    });
   });
 });

projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts

@@ -109,6 +109,8 @@ describe('PoTabsComponent:', () => {
 
     it('onTabActive: should set `previousActiveTab` and call `deactivateTab`', () => {
       component['previousActiveTab'] = undefined;
+      defaultTab.activatedTab = { emit: () => {} };
+      activeTab.activatedTab = { emit: () => {} };
       component.tabsChildren = <any>[defaultTab, activeTab];
       const tab = component.tabsChildren[0];
 
@@ -514,6 +516,7 @@ describe('PoTabsComponent:', () => {
     it('onTabActiveByDropdown: should correctly call methods and update styles when called', () => {
       const tabMock = jasmine.createSpyObj('PoTabComponent', ['id'], { id: 'tab-id' });
       tabMock.click = { emit: () => {} };
+      tabMock.activatedTab = { emit: () => {} };
       component.defaultLastTabWidth = 100;
 
       const nativeElementMock = { style: { width: '' }, getBoundingClientRect: () => ({ width: 100 }) };
@@ -706,5 +709,38 @@ describe('PoTabsComponent:', () => {
 
       expect(lastTabs.widthButton).toBe(200);
     });
+
+    describe('activateTab', () => {
+      it('should call selectedTab when the tab id is found in the array', () => {
+        const mockTab = { id: 'tab-perfil', title: 'Perfil' };
+        const mockTabsArray = [{ id: 'tab-home', title: 'Home' }, mockTab];
+
+        Object.defineProperty(component, 'tabsChildrenArray', {
+          get: () => mockTabsArray,
+          configurable: true
+        });
+
+        const spySelectedTab = spyOn(component, 'selectedTab');
+
+        component.activateTab('tab-perfil');
+
+        expect(spySelectedTab).toHaveBeenCalledWith(mockTab);
+      });
+
+      it('should not call selectedTab if the id does not exist in the array', () => {
+        const mockTabsArray = [{ id: 'tab-home' }];
+
+        Object.defineProperty(component, 'tabsChildrenArray', {
+          get: () => mockTabsArray,
+          configurable: true
+        });
+
+        const spySelectedTab = spyOn(component, 'selectedTab');
+
+        component.activateTab('id-inexistente');
+
+        expect(spySelectedTab).not.toHaveBeenCalled();
+      });
+    });
   });
 });

projects/ui/src/lib/components/po-tabs/po-tabs.component.ts

@@ -216,6 +216,7 @@ export class PoTabsComponent extends PoTabsBaseComponent implements OnInit, Afte
   // Função disparada quando alguma tab ficar ativa
   onTabActive(tab: PoTabComponent) {
     this.previousActiveTab = this.tabsChildren.find(tabChild => tabChild.active && tabChild.id !== tab.id);
+    tab.activatedTab.emit(tab);
     this.deactivateTab();
   }
 
@@ -500,4 +501,31 @@ export class PoTabsComponent extends PoTabsBaseComponent implements OnInit, Afte
       this.setTabIndex(tabRemoveElements[0], 0);
     }
   }
+
+  /**
+   * Ativa a aba correspondente ao `id` informado.
+   *
+   * Para utilizá-la é necessário ter a instância do componente no DOM, podendo ser utilizado o ViewChild da seguinte forma:
+   *
+   * ```
+   * import { PoTabsComponent } from '@po-ui/ng-components';
+   *
+   * ...
+   *
+   * @ViewChild('poTab', { static: true }) poTab: PoTabsComponent;
+   *
+   * focusOnTab() {
+   *   this.poTab.activateTab('meu-id-da-aba');
+   * }
+   * ```
+   *
+   * @param id Identificador único da aba a ser ativada.
+   */
+  public activateTab(id: string) {
+    const tab = this.tabsChildrenArray.find(x => x.id === id);
+
+    if (tab) {
+      this.selectedTab(tab);
+    }
+  }
 }