test(navbar): adiciona testes unitários ao componente

Corrige a logo do navbar, melhora o código e adiciona testes unitários

Fixes DTHFUI-1065

Author: rafaellygruber

projects/ui/karma.conf.js

@@ -22,10 +22,10 @@ module.exports = function (config) {
       thresholds: {
         emitWarning: false, // set to 'true' to not fail the test command when thresholds are not met
         global: {
-          statements: 95,
-          branches: 95,
-          functions: 95,
-          lines: 95
+          statements: 98,
+          branches: 98,
+          functions: 98,
+          lines: 98
         }, each: {
           statements: 80,
           branches: 80,

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

@@ -0,0 +1,78 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { configureTestSuite } from 'projects/ui/src/lib/util-test/util-expect.spec';
+
+import { PoNavbarActionPopupComponent } from './po-navbar-action-popup.component';
+import { PoPopupModule } from '../../../po-popup';
+
+describe('PoNavbarActionPopupComponent:', () => {
+  let component: PoNavbarActionPopupComponent;
+  let fixture: ComponentFixture<PoNavbarActionPopupComponent>;
+  let nativeElement: any;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoNavbarActionPopupComponent ],
+      imports: [ PoPopupModule, RouterModule.forRoot([]) ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoNavbarActionPopupComponent);
+    component = fixture.componentInstance;
+    nativeElement = fixture.debugElement.nativeElement;
+
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoNavbarActionPopupComponent).toBeTruthy();
+  });
+
+  describe('Methods:', () => {
+
+    it('getLastIconAction: should return the last icon', () => {
+      component.iconActions = [
+        { label: 'eye', icon: 'po-icon-eye'},
+        { label: 'gas', icon: 'po-icon-gas'},
+        { label: 'mail', icon: 'po-icon-mail'},
+        { label: 'menu', icon: 'po-icon-menu'}
+      ];
+
+      expect(component.getLastIconAction()).toEqual('po-icon-menu');
+    });
+
+    it('getLastIconAction: should return `undefined` if `iconActions` is undefined', () => {
+      component.iconActions = undefined;
+
+      expect(component.getLastIconAction()).toBeUndefined();
+    });
+
+    it('getLastIconAction: should return `undefined` if `iconActions` is empty array', () => {
+      component.iconActions = [];
+
+      expect(component.getLastIconAction()).toBeUndefined();
+    });
+
+  });
+
+  describe('Templates:', () => {
+
+    it('should contain the last icon', () => {
+      component.iconActions = [
+        { label: 'eye', icon: 'po-icon-eye'},
+        { label: 'gas', icon: 'po-icon-gas'},
+        { label: 'mail', icon: 'po-icon-mail'},
+        { label: 'menu', icon: 'po-icon-menu'}
+      ];
+
+      fixture.detectChanges();
+
+      const icon = nativeElement.querySelector('span.po-icon');
+      expect(icon.classList).toContain('po-icon-menu');
+    });
+
+  });
+
+});

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

@@ -11,7 +11,7 @@ export class PoNavbarActionPopupComponent {
   @Input('p-icon-actions') iconActions: Array<PoNavbarIconAction>;
 
   getLastIconAction() {
-    if (this.iconActions && this.iconActions.length > 0) {
+    if (this.iconActions && this.iconActions.length) {
       return this.iconActions[this.iconActions.length - 1].icon;
     }
   }

projects/ui/src/lib/components/po-navbar/po-navbar-actions/po-navbar-action/po-navbar-action.component.html

@@ -1,10 +1,11 @@
-<div tabindex="0"
+<div 
+  tabindex="0"
   class="po-navbar-action-content po-clickable"
-  (click)="onActionClick()">
+  (click)="click()">
 
   <span
-  class="po-icon {{ icon }}"
-  [p-tooltip]="tooltip">
+    class="po-icon {{ icon }}"
+    [p-tooltip]="tooltip">
   </span>
 
 </div>

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

@@ -0,0 +1,119 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { configureTestSuite } from 'projects/ui/src/lib/util-test/util-expect.spec';
+import * as utils from '../../../../utils/util';
+
+import { PoNavbarActionComponent } from './po-navbar-action.component';
+import { PoTooltipModule } from 'projects/ui/src/lib/directives';
+
+describe('PoNavbarActionComponent:', () => {
+  let component: PoNavbarActionComponent;
+  let fixture: ComponentFixture<PoNavbarActionComponent>;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PoNavbarActionComponent ],
+      imports: [ PoTooltipModule, RouterModule.forRoot([]) ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoNavbarActionComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoNavbarActionComponent).toBeTruthy();
+  });
+
+  describe('Methods:', () => {
+
+    it('click: should call `callFunction` with `action` and `this` if `action` is defined and `parentRef` is undefined', () => {
+      component.action = () => 'action';
+      component['parentRef'] = undefined;
+
+      spyOn(utils, 'callFunction');
+
+      component.click();
+
+      expect(utils.callFunction).toHaveBeenCalledWith(component.action, component);
+    });
+
+    it('click: should call `callFunction` with `action` and `parentRef` if `action` and `parentRef` are defined', () => {
+      component.action = () => 'action';
+      component['parentRef'] = '<po-navbar></po-navbar>';
+
+      spyOn(utils, 'callFunction');
+
+      component.click();
+
+      expect(utils.callFunction).toHaveBeenCalledWith(component.action, component['parentRef']);
+    });
+
+    it('click: should call and return `openUrl` with `link` if `action` is undefined and `link` is defined', () => {
+      component.action = undefined;
+      component.link = 'http://test.com';
+      const linkReturn = 'test';
+
+      spyOn(utils, 'callFunction');
+      spyOn(component, <any>'openUrl').and.returnValue(linkReturn);
+
+      const result = <any> component.click();
+
+      expect(utils.callFunction).not.toHaveBeenCalled();
+      expect(component['openUrl']).toHaveBeenCalledWith(component.link);
+      expect(result).toBe(linkReturn);
+    });
+
+    it('click: shouldn`t call `callFunction` and `openUrl` if `action` and `link` is undefined', () => {
+      component.action = undefined;
+      component.link = undefined;
+
+      spyOn(utils, 'callFunction');
+      spyOn(component, <any>'openUrl');
+
+      component.click();
+
+      expect(utils.callFunction).not.toHaveBeenCalled();
+      expect(component['openUrl']).not.toHaveBeenCalled();
+    });
+
+    it('openUrl: should call `openExternalLink` if url is external link', () => {
+      const url = 'http://www.google.com';
+
+      spyOn(utils, 'openExternalLink');
+      spyOn(component['router'], 'navigate');
+
+      component['openUrl'](url);
+
+      expect(utils.openExternalLink).toHaveBeenCalledWith(url);
+      expect(component['router'].navigate).not.toHaveBeenCalled();
+    });
+
+    it('openUrl: should call `router.navigate` if url is internal link', () => {
+      const url = '/customers';
+
+      spyOn(component['router'], 'navigate');
+      spyOn(utils, 'openExternalLink');
+
+      component['openUrl'](url);
+
+      expect(component['router'].navigate).toHaveBeenCalled();
+      expect(utils.openExternalLink).not.toHaveBeenCalledWith(url);
+    });
+
+    it('openUrl: shouldn`t call `router.navigate` and `openExternalLink` if url is undefined ', () => {
+      spyOn(component['router'], 'navigate');
+      spyOn(utils, 'openExternalLink');
+
+      component['openUrl'](undefined);
+
+      expect(component['router'].navigate).not.toHaveBeenCalled();
+      expect(utils.openExternalLink).not.toHaveBeenCalled();
+    });
+
+  });
+});

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

@@ -9,8 +9,7 @@ import { callFunction, isExternalLink, openExternalLink } from '../../../../util
 })
 export class PoNavbarActionComponent {
 
-  private param;
-  private parentRef;
+  private parentRef: any;
 
   @Input('p-action') action?: Function;
 
@@ -26,9 +25,10 @@ export class PoNavbarActionComponent {
     this.parentRef = viewContainerRef['_view']['component'];
   }
 
-  onActionClick() {
+  click() {
     if (this.action) {
-      return callFunction(this.action, this.parentRef, this.param || this);
+      callFunction(this.action, this.parentRef || this);
+      return;
     }
 
     if (this.link) {
@@ -37,6 +37,7 @@ export class PoNavbarActionComponent {
   }
 
   private openUrl(url: string) {
+
     if (isExternalLink(url)) {
       return openExternalLink(url);
     }

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

@@ -0,0 +1,58 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { configureTestSuite, expectPropertiesValues } from '../../../util-test/util-expect.spec';
+
+import { PoNavbarActionsComponent } from './po-navbar-actions.component';
+import { PoNavbarActionsModule } from './po-navbar-actions.module';
+import { PoNavbarIconAction } from '../interfaces/po-navbar-icon-action.interface';
+import { PoTooltipModule } from '../../../directives';
+
+describe('PoNavbarActionsComponent:', () => {
+  let component: PoNavbarActionsComponent;
+  let fixture: ComponentFixture<PoNavbarActionsComponent>;
+
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        PoTooltipModule,
+        PoNavbarActionsModule,
+        RouterModule.forRoot([])
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PoNavbarActionsComponent);
+    component = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component instanceof PoNavbarActionsComponent).toBeTruthy();
+  });
+
+  describe('Properties:', () => {
+
+    it('iconActions: should return valid values', () => {
+      const icons: Array<PoNavbarIconAction> = [
+        { label: 'eye', icon: 'po-icon-eye', link: 'test/'},
+        { label: 'gas', icon: 'po-icon-gas', link: 'test/'},
+        { label: 'mail', icon: 'po-icon-mail', link: 'test/'},
+        { label: 'menu', icon: 'po-icon-menu', link: 'test/'}
+      ];
+
+      const expectedIcons = [
+        { label: 'eye', icon: 'po-icon-eye', link: 'test/', separator: true, url: 'test/'},
+        { label: 'gas', icon: 'po-icon-gas', link: 'test/', separator: true, url: 'test/'},
+        { label: 'mail', icon: 'po-icon-mail', link: 'test/', separator: true, url: 'test/'},
+        { label: 'menu', icon: 'po-icon-menu', link: 'test/', separator: true, url: 'test/'}
+      ];
+
+      expectPropertiesValues(component, 'iconActions', [icons], [expectedIcons]);
+    });
+
+  });
+
+});

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

@@ -8,7 +8,7 @@ import { PoNavbarIconAction } from '../interfaces/po-navbar-icon-action.interfac
 })
 export class PoNavbarActionsComponent {
 
-  private _iconActions;
+  private _iconActions: Array<PoNavbarIconAction>;
 
   @Input('p-icon-actions') set iconActions(actions: Array<PoNavbarIconAction>) {
     this._iconActions = actions.map(action => ({ ...action, separator: true, url: action.link }));