[ACA-3808] - fix e2e actionMenu (#1580)

* fix e2e actionMenu

* PR changes

* wait for context menu to close

* wait for menu to close after escape key

Co-authored-by: Silviu Popa <p3701014@L3700101120.ness.com>

e2e/suites/actions-available/test-util.ts

@@ -23,7 +23,7 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { BrowsingPage, Viewer, Utils } from '@alfresco/aca-testing-shared';
+import { BrowsingPage, Viewer, Utils, Menu } from '@alfresco/aca-testing-shared';
 import { BrowserActions } from '@alfresco/adf-testing';
 
 const page = new BrowsingPage();
@@ -31,6 +31,7 @@ const { dataTable, toolbar } = page;
 const contextMenu = dataTable.menu;
 const viewer = new Viewer();
 const viewerToolbar = viewer.toolbar;
+const menu = new Menu();
 
 export async function checkContextMenu(item: string, expectedContextMenu: string[]): Promise<void> {
   await dataTable.rightClickOnItem(item);
@@ -39,6 +40,7 @@ export async function checkContextMenu(item: string, expectedContextMenu: string
   expect(actualActions).toEqual(expectedContextMenu);
 
   await Utils.pressEscape();
+  await menu.waitForMenuToClose();
 }
 
 export async function checkToolbarPrimary(item: string, expectedToolbarPrimary: string[]): Promise<void> {
@@ -80,6 +82,7 @@ export async function checkMultipleSelContextMenu(items: string[], expectedConte
   expect(actualActions).toEqual(expectedContextMenu);
 
   await Utils.pressEscape();
+  await menu.waitForMenuToClose();
 }
 
 export async function checkMultipleSelToolbarPrimary(items: string[], expectedToolbarPrimary: string[]): Promise<void> {
@@ -122,6 +125,7 @@ export async function checkViewerActions(item: string, expectedToolbarPrimary: s
   expect(actualMoreActions).toEqual(expectedToolbarMore);
 
   await Utils.pressEscape();
+  await menu.waitForMenuToClose();
 }
 
 const toRemove = ['Close', 'Previous File', 'Next File', 'View details'];

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html

@@ -5,6 +5,7 @@
   [attr.aria-label]="actionRef.description || actionRef.title | translate"
   [attr.title]="actionRef.description || actionRef.title | translate"
   [matMenuTriggerFor]="menu"
+  #matTrigger="matMenuTrigger"
 >
   <adf-icon [value]="actionRef.icon"></adf-icon>
 </button>
@@ -13,10 +14,7 @@
   <ng-container *ngFor="let child of actionRef.children; trackBy: trackById">
     <ng-container [ngSwitch]="child.type">
       <ng-container *ngSwitchCase="'custom'">
-        <adf-dynamic-component
+        <adf-dynamic-component [id]="child.component" [data]="child.data"></adf-dynamic-component>
-          [id]="child.component"
-          [data]="child.data"
-        ></adf-dynamic-component>
       </ng-container>
       <ng-container *ngSwitchDefault>
         <app-toolbar-menu-item [actionRef]="child"></app-toolbar-menu-item>

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.spec.ts

@@ -24,9 +24,39 @@
  */
 
 import { ToolbarMenuComponent } from './toolbar-menu.component';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MaterialModule } from '@alfresco/adf-core';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { TranslateModule, TranslateLoader, TranslateFakeLoader } from '@ngx-translate/core';
+import { ContentActionRef } from '@alfresco/adf-extensions';
 
 describe('ToolbarMenuComponent', () => {
-  it('should be defined', () => {
+  let fixture: ComponentFixture<ToolbarMenuComponent>;
-    expect(ToolbarMenuComponent).toBeDefined();
+  let component: ToolbarMenuComponent;
+
+  const actions = { id: 'action-1', type: 'button' } as ContentActionRef;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MaterialModule,
+        OverlayModule,
+        TranslateModule.forRoot({
+          loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
+        })
+      ]
+    });
+    fixture = TestBed.createComponent(ToolbarMenuComponent);
+    component = fixture.componentInstance;
+    component.matTrigger = jasmine.createSpyObj('MatMenuTrigger', ['closeMenu']);
+    component.actionRef = actions;
+    fixture.detectChanges();
+  });
+
+  it('should close toolbar context menu', () => {
+    spyOn(component.matTrigger, 'closeMenu');
+    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+    fixture.detectChanges();
+    expect(component.matTrigger.closeMenu).toHaveBeenCalled();
   });
 });

projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts

@@ -23,8 +23,9 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation, HostListener, ViewChild } from '@angular/core';
 import { ContentActionRef } from '@alfresco/adf-extensions';
+import { MatMenuTrigger } from '@angular/material/menu';
 
 @Component({
   selector: 'app-toolbar-menu',
@@ -39,6 +40,13 @@ export class ToolbarMenuComponent {
   @Input()
   color = '';
 
+  @ViewChild('matTrigger') matTrigger: MatMenuTrigger;
+
+  @HostListener('document:keydown.Escape')
+  handleKeydownEscape() {
+    this.matTrigger.closeMenu();
+  }
+
   get hasChildren(): boolean {
     return this.actionRef && this.actionRef.children && this.actionRef.children.length > 0;
   }