[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>

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
-          [id]="child.component"
-          [data]="child.data"
-        ></adf-dynamic-component>
+        <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', () => {
-    expect(ToolbarMenuComponent).toBeDefined();
+  let fixture: ComponentFixture<ToolbarMenuComponent>;
+  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;
   }