From 5e145ef34867ce36f67b9d6b380b7b2ab863b6eb Mon Sep 17 00:00:00 2001
From: nairansilva <31315937+nairansilva@users.noreply.github.com>
Date: Thu, 16 Feb 2023 15:03:33 -0300
Subject: [PATCH] fix(po-tab): ajustado traducao
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Quando possuímos mais de 5 Tabs, o texto do dropdown sempre imprimia "Mais" ao invés de utilizar o idioma do navegador.

Fixes 1577
---
 .../components/po-tabs/po-tabs.component.html |  2 +-
 .../po-tabs/po-tabs.component.spec.ts         | 39 ++++++++++++++++++-
 .../components/po-tabs/po-tabs.component.ts   | 31 ++++++++++++++-
 3 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/projects/ui/src/lib/components/po-tabs/po-tabs.component.html b/projects/ui/src/lib/components/po-tabs/po-tabs.component.html
index 0baca97a2..9cb897176 100644
--- a/projects/ui/src/lib/components/po-tabs/po-tabs.component.html
+++ b/projects/ui/src/lib/components/po-tabs/po-tabs.component.html
@@ -23,7 +23,7 @@
       #tabDropdown
       *ngIf="isShowTabDropdown"
       class="po-tab-button po-tab-dropdown"
-      p-label="Mais"
+      [p-label]="literals.moreTabs"
       [p-small]="small"
       [p-tabs]="overflowedTabs"
       (p-activated)="onTabActive($event)"
diff --git a/projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts b/projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts
index 30574d3bd..099f23d2b 100644
--- a/projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts
+++ b/projects/ui/src/lib/components/po-tabs/po-tabs.component.spec.ts
@@ -6,11 +6,13 @@ import * as UtilsFunction from './../../utils/util';
 
 import { PoTabsComponent } from './po-tabs.component';
 import { PoTabsModule } from './po-tabs.module';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
 
 describe('PoTabsComponent:', () => {
   let component: PoTabsComponent;
   let fixture: ComponentFixture<PoTabsComponent>;
   let nativeElement: any;
+  let poLanguageService: PoLanguageService;
 
   let defaultTab;
   let activeTab;
@@ -19,12 +21,15 @@ describe('PoTabsComponent:', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
-      imports: [PoTabsModule]
+      imports: [PoTabsModule],
+      providers: [PoLanguageService]
     });
   });
 
   beforeEach(() => {
     fixture = TestBed.createComponent(PoTabsComponent);
+    poLanguageService = TestBed.inject(PoLanguageService);
+
     component = fixture.componentInstance;
 
     defaultTab = { id: '1', active: false, label: 'Tab 1' };
@@ -244,6 +249,38 @@ describe('PoTabsComponent:', () => {
 
       expect(component['activeFirstTab']).toHaveBeenCalled();
     });
+
+    it('should display small tabs', () => {
+      component.tabs = <any>[{ id: '0' }, { id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }];
+      component.small = true;
+      fixture.detectChanges();
+
+      const small = nativeElement.querySelector('.po-tab-button');
+
+      expect(small.getAttribute('ng-reflect-small')).toBeTruthy();
+    });
+
+    it('shouldn`t display small tabs', () => {
+      component.tabs = <any>[{ id: '0' }, { id: '1' }, { id: '2' }, { id: '3' }, { id: '4' }, { id: '5' }];
+      component.small = false;
+      fixture.detectChanges();
+
+      const small = nativeElement.querySelector('.po-tab-button');
+
+      expect(small.getAttribute('ng-reflect-small')).toBe('false');
+    });
+
+    it('should return correct language', () => {
+      spyOn(poLanguageService, 'getShortLanguage').and.returnValue('en');
+      component.setLanguage();
+      expect(component.literals.moreTabs).toEqual('More');
+    });
+
+    it('should return default language', () => {
+      spyOn(poLanguageService, 'getShortLanguage').and.returnValue('xx');
+      component.setLanguage();
+      expect(component.literals.moreTabs).toEqual('Mais');
+    });
   });
 
   describe('Templates:', () => {
diff --git a/projects/ui/src/lib/components/po-tabs/po-tabs.component.ts b/projects/ui/src/lib/components/po-tabs/po-tabs.component.ts
index 6fced253c..658117c9b 100644
--- a/projects/ui/src/lib/components/po-tabs/po-tabs.component.ts
+++ b/projects/ui/src/lib/components/po-tabs/po-tabs.component.ts
@@ -5,6 +5,8 @@ import { isMobile } from './../../utils/util';
 import { PoTabComponent } from './po-tab/po-tab.component';
 import { PoTabDropdownComponent } from './po-tab-dropdown/po-tab-dropdown.component';
 import { PoTabsBaseComponent } from './po-tabs-base.component';
+import { PoLanguageService } from '../../services/po-language/po-language.service';
+import { poLocaleDefault } from '../../services/po-language/po-language.constant';
 
 const poTabsMaxNumberOfTabs = 5;
 
@@ -45,10 +47,30 @@ export class PoTabsComponent extends PoTabsBaseComponent {
 
   maxNumberOfTabs = poTabsMaxNumberOfTabs;
 
+  poTabsLiterals = {
+    en: {
+      moreTabs: 'More'
+    },
+    pt: {
+      moreTabs: 'Mais'
+    },
+    es: {
+      moreTabs: 'Más'
+    },
+    rus: {
+      moreTabs: 'Ещё'
+    }
+  };
+
+  literals: {
+    moreTabs: string;
+  };
+
   private previousActiveTab: PoTabComponent;
 
-  constructor(private changeDetector: ChangeDetectorRef) {
+  constructor(private changeDetector: ChangeDetectorRef, private languageService: PoLanguageService) {
     super();
+    this.setLanguage();
   }
 
   get isMobileDevice() {
@@ -68,6 +90,13 @@ export class PoTabsComponent extends PoTabsBaseComponent {
     return this.tabs.filter(tab => !tab.hide);
   }
 
+  setLanguage(): void {
+    this.literals = {
+      ...this.poTabsLiterals[poLocaleDefault],
+      ...this.poTabsLiterals[this.languageService.getShortLanguage()]
+    };
+  }
+
   closePopover(): void {
     const containsPopoverVisible = this.tabDropdown && this.tabDropdown.popover && !this.tabDropdown.popover.isHidden;