diff --git a/e2e/suites/actions-available/test-util.ts b/e2e/suites/actions-available/test-util.ts index 0521848e0..f499df3ad 100644 --- a/e2e/suites/actions-available/test-util.ts +++ b/e2e/suites/actions-available/test-util.ts @@ -23,7 +23,7 @@ * along with Alfresco. If not, see . */ -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 { 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 { @@ -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 { @@ -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']; diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html index 4d53ce246..0de97258e 100644 --- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html +++ b/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" > @@ -13,10 +14,7 @@ - + diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.spec.ts b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.spec.ts index 476a92101..853ff5f20 100644 --- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.spec.ts +++ b/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; + 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(); }); }); diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts index 4e78b1e07..142cee9d7 100644 --- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts +++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.ts @@ -23,8 +23,9 @@ * along with Alfresco. If not, see . */ -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; }