feat(navbar): remove a logo do menu utilizado com navbar

Ao utilizar  po-menu e po-navbar com logo mantém a logo apenas no po-navbar

Fixes DTHFUI-1150

Author: Rafaelly

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

@@ -137,12 +137,12 @@ export class PoMenuComponent extends PoMenuBaseComponent implements OnDestroy, O
   private itemSubscription: Subscription;
   private routeSubscription: Subscription;
 
-  constructor(viewRef: ViewContainerRef,
+  constructor(public changeDetector: ChangeDetectorRef,
+              viewRef: ViewContainerRef,
               private element: ElementRef,
               private renderer: Renderer2,
               private router: Router,
               private menuItemsService: PoMenuItemsService,
-              private changeDetector: ChangeDetectorRef,
               menuService: PoMenuService) {
 
     super(menuService);

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

@@ -4,9 +4,13 @@ import * as utilsFunctions from '../../utils/util';
 
 import { PoNavbarBaseComponent, poNavbarLiteralsDefault } from './po-navbar-base.component';
 
+export class PoNavbarComponent extends PoNavbarBaseComponent {
+  validateMenuLogo() {}
+}
+
 describe('PoNavbarBaseComponent:', () => {
 
-  const component = new PoNavbarBaseComponent();
+  const component = new PoNavbarComponent();
 
   it('should be created', () => {
     expect(component instanceof PoNavbarBaseComponent).toBeTruthy();
@@ -91,18 +95,41 @@ describe('PoNavbarBaseComponent:', () => {
       expectPropertiesValues(component, 'literals', invalidValues, poNavbarLiteralsDefault[utilsFunctions.poLocaleDefault]);
     });
 
-    it('shadow: should update property with true if valid values', () => {
+    it('shadow: should update property with true if values are valid', () => {
       const validValues = [true, '', 'true'];
 
       expectPropertiesValues(component, 'shadow', validValues, true);
     });
 
-    it('shadow: should update property with false if invalid values', () => {
+    it('shadow: should update property with false if values are invalid', () => {
       const invalidValues = [false, 'po', null, undefined, NaN];
 
       expectPropertiesValues(component, 'shadow', invalidValues, false);
     });
 
+    it('logo: should call `validateMenuLogo` if has `menu`', () => {
+      spyOn(component, 'validateMenuLogo');
+
+      component.menu = <any> { logo: 'logo' };
+      component.logo = 'logo';
+
+      expect(component.validateMenuLogo).toHaveBeenCalled();
+    });
+
+    it('logo: shouldn`t call `validateMenuLogo` if doesn`t have `menu`', () => {
+      spyOn(component, 'validateMenuLogo');
+
+      component.menu = undefined;
+      component.logo = 'logo';
+
+      expect(component.validateMenuLogo).not.toHaveBeenCalled();
+    });
+
+    it('logo: should update property with valid values', () => {
+      const validValues = ['any string value'];
+
+      expectPropertiesValues(component, 'logo', validValues, 'any string value');
+    });
   });
 
 });

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

@@ -25,11 +25,12 @@ export const poNavbarLiteralsDefault = {
  * O componente `po-navbar` é um cabeçalho fixo que permite apresentar uma lista de links para facilitar a navegação pelas
  * páginas da aplicação. Também possui ícones com ações.
  */
-export class PoNavbarBaseComponent {
+export abstract class PoNavbarBaseComponent {
 
   private _iconActions: Array<PoNavbarIconAction> = [];
   private _items: Array<PoNavbarItem> = [];
   private _literals: PoNavbarLiterals;
+  private _logo: string;
   private _shadow: boolean = false;
 
   /**
@@ -109,7 +110,16 @@ export class PoNavbarBaseComponent {
    *
    * Define a logo apresentada `po-navbar`.
    */
-  @Input('p-logo') logo?: string;
+  @Input('p-logo') set logo(value: string) {
+    this._logo = value;
+
+    if (this.menu) {
+      this.validateMenuLogo();
+    }
+  }
+  get logo() {
+    return this._logo;
+  }
 
   /**
    * @optional
@@ -119,6 +129,8 @@ export class PoNavbarBaseComponent {
    * Caso já possua um menu na aplicação o mesmo deve ser repassado para essa propriedade para que quando entre em modo
    * responsivo os items do `po-navbar` possam ser adicionados no primeiro item do menu definido.
    *
+   * > Ao utilizar menu e navbar com logo mantém apenas a logo do navbar.
+   *
    * Exemplo:
    *
    * ```
@@ -153,4 +165,6 @@ export class PoNavbarBaseComponent {
     return this._shadow;
   }
 
+  protected abstract validateMenuLogo(): void;
+
 }

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

@@ -387,6 +387,15 @@ describe('PoNavbarComponent:', () => {
       expect(component['changeNavbarMenuItems']).not.toHaveBeenCalled();
     });
 
+    it(`initNavbarMenu: should call 'validateMenuLogo'`, () => {
+      component.menu = <any> { menus: [] };
+      spyOn(component, <any> 'validateMenuLogo');
+
+      component['initNavbarMenu']();
+
+      expect(component['validateMenuLogo']).toHaveBeenCalled();
+    });
+
     it(`navbarItemsWidth: should return navbar items width`, () => {
       const itemsWidth = 50;
       const fakeThis = {
@@ -530,6 +539,51 @@ describe('PoNavbarComponent:', () => {
 
     });
 
+    describe('validateMenuLogo', () => {
+
+      const logo = 'logo';
+
+      const fakeMenu = {
+        logo,
+        changeDetector: { detectChanges: () => {} }
+      };
+
+      it(`should set 'menu.logo' as 'undefined' and call 'menu.changeDetector.detectChanges' if has 'logo' and 'menu.logo'`, () => {
+        component.logo = logo;
+        component.menu = <any>fakeMenu;
+
+        spyOn(component.menu.changeDetector, 'detectChanges');
+        component['validateMenuLogo']();
+        fixture.detectChanges();
+
+        expect(component.menu.logo).toBeUndefined();
+        expect(component.menu.changeDetector.detectChanges).toHaveBeenCalled();
+      });
+
+      it(`shouldn't call 'menu.changeDetector.detectChanges' if doesn't have 'menu.logo'`, () => {
+        component.logo = logo;
+        component.menu = <any>fakeMenu;
+        component.menu.logo = undefined;
+
+        spyOn(component.menu.changeDetector, 'detectChanges');
+
+        component['validateMenuLogo']();
+
+        expect(component.menu.changeDetector.detectChanges).not.toHaveBeenCalled();
+      });
+
+      it(`shouldn't call 'menu.changeDetector.detectChanges' if doesn't have 'logo'`, () => {
+        component.logo = undefined;
+        component.menu = <any>fakeMenu;
+
+        spyOn(component.menu.changeDetector, 'detectChanges');
+
+        component['validateMenuLogo']();
+
+        expect(component.menu.changeDetector.detectChanges).not.toHaveBeenCalled();
+      });
+    });
+
   });
 
   describe('Template:', () => {

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

@@ -149,6 +149,8 @@ export class PoNavbarComponent extends PoNavbarBaseComponent implements AfterVie
       this.changeNavbarMenuItems(true, this.menuItems, this.items, this.literals.navbarLinks);
     }
 
+    this.validateMenuLogo();
+
     this.mediaQuery.addListener(this.onMediaQueryChange);
   }
 
@@ -191,4 +193,11 @@ export class PoNavbarComponent extends PoNavbarBaseComponent implements AfterVie
     }
   }
 
+  protected validateMenuLogo() {
+    if (this.menu.logo && this.logo) {
+      this.menu.logo = undefined;
+      this.menu.changeDetector.detectChanges();
+    }
+  }
+
 }