From cec0efe9ebfbaf8bfcd3b782d119caaeecf580a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Merve=20=C3=96z=C3=A7if=C3=A7i?= <merveozcifci7@gmail.com>
Date: Tue, 20 Feb 2018 09:27:58 +0300
Subject: [PATCH] Fixed #5180

---
 src/app/components/common/menuitem.ts              |  1 +
 src/app/components/menu/menu.ts                    | 14 +++++++-------
 src/app/components/menubar/menubar.ts              |  4 ++--
 .../components/menumodel/menumodeldemo.html        | 14 ++++++++++----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/components/common/menuitem.ts b/src/app/components/common/menuitem.ts
index 8ac2f0345f0..1d46f24bca7 100644
--- a/src/app/components/common/menuitem.ts
+++ b/src/app/components/common/menuitem.ts
@@ -20,4 +20,5 @@ export interface MenuItem {
     styleClass?:string;
     title?: string;
     id?: string;
+    automationId?: any;
 }
diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
index 0b6e0edd8d1..e4d78dd051a 100644
--- a/src/app/components/menu/menu.ts
+++ b/src/app/components/menu/menu.ts
@@ -7,12 +7,12 @@ import {RouterModule} from '@angular/router';
 @Component({
     selector: '[pMenuItemContent]',
     template: `
-        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
+        <a *ngIf="!item.routerLink" [href]="item.url||'#'" class="ui-menuitem-link ui-corner-all" [attr.data-automationid]="item.automationId" [attr.target]="item.target" [attr.title]="item.title" [attr.id]="item.id"
             [ngClass]="{'ui-state-disabled':item.disabled}" (click)="menu.itemClick($event, item)">
             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
             <span class="ui-menuitem-text">{{item.label}}</span>
         </a>
-        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [queryParams]="item.queryParams" [routerLinkActive]="'ui-state-active'" 
+        <a *ngIf="item.routerLink" [routerLink]="item.routerLink" [attr.data-automationid]="item.automationId"  [queryParams]="item.queryParams" [routerLinkActive]="'ui-state-active'"
             [routerLinkActiveOptions]="item.routerLinkActiveOptions||{exact:false}" class="ui-menuitem-link ui-corner-all" [attr.target]="item.target" [attr.id]="item.id"
              [attr.title]="item.title" [ngClass]="{'ui-state-disabled':item.disabled}" (click)="menu.itemClick($event, item)">
             <span class="ui-menuitem-icon fa fa-fw" *ngIf="item.icon" [ngClass]="item.icon"></span>
@@ -23,19 +23,19 @@ import {RouterModule} from '@angular/router';
 export class MenuItemContent {
 
     @Input("pMenuItemContent") item: MenuItem;
-                
+    
     constructor(@Inject(forwardRef(() => Menu)) public menu: Menu) {}
 }
 
 @Component({
     selector: 'p-menu',
     template: `
-        <div #container [ngClass]="{'ui-menu ui-widget ui-widget-content ui-corner-all':true, 'ui-menu-dynamic ui-shadow':popup}" 
+        <div #container [ngClass]="{'ui-menu ui-widget ui-widget-content ui-corner-all':true, 'ui-menu-dynamic ui-shadow':popup}"
             [class]="styleClass" [ngStyle]="style" (click)="preventDocumentDefault=true">
             <ul>
                 <ng-template ngFor let-submenu [ngForOf]="model" *ngIf="hasSubMenu()">
                     <li class="ui-menu-separator ui-widget-content" *ngIf="submenu.separator" [ngClass]="{'ui-helper-hidden': submenu.visible === false}"></li>
-                    <li class="ui-submenu-header ui-widget-header ui-corner-all" *ngIf="!submenu.separator" [ngClass]="{'ui-helper-hidden': submenu.visible === false}">{{submenu.label}}</li>
+                    <li class="ui-submenu-header ui-widget-header ui-corner-all" [attr.data-automationid]="submenu.automationId" *ngIf="!submenu.separator" [ngClass]="{'ui-helper-hidden': submenu.visible === false}">{{submenu.label}}</li>
                     <ng-template ngFor let-item [ngForOf]="submenu.items">
                         <li class="ui-menu-separator ui-widget-content" *ngIf="item.separator" [ngClass]="{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}"></li>
                         <li class="ui-menuitem ui-widget ui-corner-all" *ngIf="!item.separator" [pMenuItemContent]="item" [ngClass]="{'ui-helper-hidden': (item.visible === false || submenu.visible === false)}"></li>
@@ -89,7 +89,7 @@ export class Menu implements AfterViewInit,OnDestroy {
                 else
                     this.domHandler.appendChild(this.container, this.appendTo);
             }
-                
+            
             this.documentClickListener = this.renderer.listen('document', 'click', () => {
                 if(!this.preventDocumentDefault) {
                     this.hide();
@@ -185,4 +185,4 @@ export class Menu implements AfterViewInit,OnDestroy {
     exports: [Menu,RouterModule],
     declarations: [Menu,MenuItemContent]
 })
-export class MenuModule { }
\ No newline at end of file
+export class MenuModule { }
diff --git a/src/app/components/menubar/menubar.ts b/src/app/components/menubar/menubar.ts
index b362650f6df..78403dcafb3 100644
--- a/src/app/components/menubar/menubar.ts
+++ b/src/app/components/menubar/menubar.ts
@@ -15,13 +15,13 @@ import { RouterModule } from '@angular/router';
                 <li *ngIf="!child.separator" #listItem [ngClass]="{'ui-menuitem ui-corner-all':true,
                         'ui-menu-parent':child.items,'ui-menuitem-active':listItem==activeItem,'ui-helper-hidden': child.visible === false}"
                         (mouseenter)="onItemMouseEnter($event,listItem,child)" (mouseleave)="onItemMouseLeave($event)" (click)="onItemMenuClick($event, listItem, child)">
-                    <a *ngIf="!child.routerLink" [href]="child.url||'#'" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" (click)="itemClick($event, child)"
+                    <a *ngIf="!child.routerLink" [href]="child.url||'#'" [attr.data-automationid]="child.automationId" [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id" (click)="itemClick($event, child)"
                          [ngClass]="{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}" [ngStyle]="child.style" [class]="child.styleClass">
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
                         <span class="ui-menuitem-text">{{child.label}}</span>
                         <span class="ui-submenu-icon fa fa-fw" *ngIf="child.items" [ngClass]="{'fa-caret-down':root,'fa-caret-right':!root}"></span>
                     </a>
-                    <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [queryParams]="child.queryParams" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}"
+                    <a *ngIf="child.routerLink" [routerLink]="child.routerLink" [attr.data-automationid]="child.automationId" [queryParams]="child.queryParams" [routerLinkActive]="'ui-state-active'" [routerLinkActiveOptions]="child.routerLinkActiveOptions||{exact:false}"
                         [attr.target]="child.target" [attr.title]="child.title" [attr.id]="child.id"
                         (click)="itemClick($event, child)" [ngClass]="{'ui-menuitem-link ui-corner-all':true,'ui-state-disabled':child.disabled}" [ngStyle]="child.style" [class]="child.styleClass">
                         <span class="ui-menuitem-icon fa fa-fw" *ngIf="child.icon" [ngClass]="child.icon"></span>
diff --git a/src/app/showcase/components/menumodel/menumodeldemo.html b/src/app/showcase/components/menumodel/menumodeldemo.html
index 74ad8db465c..d959478e2db 100644
--- a/src/app/showcase/components/menumodel/menumodeldemo.html
+++ b/src/app/showcase/components/menumodel/menumodeldemo.html
@@ -26,7 +26,7 @@ <h3 class="first">MenuItem</h3>
 <pre>
 <code class="language-typescript" pCode ngNonBindable>
 export class MenuDemo &#123;
-    
+
     private items: MenuItem[];
 
     ngOnInit() &#123;
@@ -175,16 +175,22 @@ <h3 class="first">MenuItem</h3>
                     <td>null</td>
                     <td>Tooltip text of the item.</td>
                 </tr>
+                <tr>
+                    <td>automationId</td>
+                    <td>any</td>
+                    <td>null</td>
+                    <td>Value of HTML data-* attribute.</td>
+                </tr>
             </tbody>
         </table>
     </div>
-    
+
     <h4>Command</h4>
     <p>The function to invoke when an item is clicked is defined using the command property.</p>
 <pre>
 <code class="language-typescript" pCode ngNonBindable>
 export class MenuDemo &#123;
-    
+
     private items: MenuItem[];
 
     ngOnInit() &#123;
@@ -208,7 +214,7 @@ <h4>Navigation</h4>
 <pre>
 <code class="language-typescript" pCode ngNonBindable>
 export class MenuDemo &#123;
-    
+
     private items: MenuItem[];
 
     ngOnInit() &#123;