diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.html b/lib/core/src/lib/context-menu/context-menu-list.component.html
index 2aa2ddfd37..bf877cb7d5 100644
--- a/lib/core/src/lib/context-menu/context-menu-list.component.html
+++ b/lib/core/src/lib/context-menu/context-menu-list.component.html
@@ -5,6 +5,7 @@
[attr.data-automation-id]="'context-' + (link.title || link.model?.title | translate)"
mat-menu-item
[disabled]="link.model?.disabled"
+ [matTooltip]="link.model?.tooltip | translate"
(click)="onMenuItemClick($event, link)">
{{ link.model.icon }}
{{ link.title || link.model?.title | translate }}
diff --git a/lib/core/src/lib/context-menu/context-menu-list.component.ts b/lib/core/src/lib/context-menu/context-menu-list.component.ts
index b01248df04..202c33f9ff 100644
--- a/lib/core/src/lib/context-menu/context-menu-list.component.ts
+++ b/lib/core/src/lib/context-menu/context-menu-list.component.ts
@@ -26,6 +26,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { contextMenuAnimation } from './animations';
import { ContextMenuOverlayRef } from './context-menu-overlay';
import { CONTEXT_MENU_DATA } from './context-menu.tokens';
+import { MatTooltipModule } from '@angular/material/tooltip';
@Component({
selector: 'adf-context-menu',
@@ -36,7 +37,7 @@ import { CONTEXT_MENU_DATA } from './context-menu.tokens';
class: 'adf-context-menu'
},
encapsulation: ViewEncapsulation.None,
- imports: [MatIconModule, MatMenuModule, NgForOf, NgIf, TranslateModule],
+ imports: [MatIconModule, MatMenuModule, MatTooltipModule, NgForOf, NgIf, TranslateModule],
animations: [trigger('panelAnimation', contextMenuAnimation)]
})
export class ContextMenuListComponent implements AfterViewInit {
diff --git a/lib/core/src/lib/context-menu/context-menu.spec.ts b/lib/core/src/lib/context-menu/context-menu.spec.ts
index ce4aec10a1..8a392d31d0 100644
--- a/lib/core/src/lib/context-menu/context-menu.spec.ts
+++ b/lib/core/src/lib/context-menu/context-menu.spec.ts
@@ -21,6 +21,7 @@ import { ContextMenuModule } from './context-menu.module';
import { CoreTestingModule } from '../testing/core.testing.module';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatIconHarness } from '@angular/material/icon/testing';
+import { MatTooltipHarness } from '@angular/material/tooltip/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
@Component({
@@ -75,6 +76,29 @@ describe('ContextMenuDirective', () => {
subject: {
next: jasmine.createSpy('next')
}
+ },
+ {
+ model: {
+ visible: true,
+ disabled: false,
+ title: 'action-5',
+ icon: 'action-icon-5',
+ tooltip: 'Action 5 tooltip'
+ },
+ subject: {
+ next: jasmine.createSpy('next')
+ }
+ },
+ {
+ model: {
+ visible: true,
+ disabled: false,
+ title: 'action-6',
+ icon: 'action-icon-6'
+ },
+ subject: {
+ next: jasmine.createSpy('next')
+ }
}
];
@@ -134,7 +158,7 @@ describe('ContextMenuDirective', () => {
});
it('should not render item with visibility property set to false', () => {
- expect(contextMenu?.querySelectorAll('button').length).toBe(3);
+ expect(contextMenu?.querySelectorAll('button').length).toBe(5);
});
it('should render item as disabled when `disabled` property is set to true', async () => {
@@ -173,5 +197,27 @@ describe('ContextMenuDirective', () => {
).length
).toBe(0);
});
+
+ it('should show tooltip if is set', async () => {
+ const expectedTooltipText = 'Action 5 tooltip';
+ const tooltip = await loader.getHarness(
+ MatTooltipHarness.with({
+ selector: '[data-automation-id="context-action-5"]'
+ })
+ );
+ await tooltip.show();
+ expect(await tooltip.isOpen()).toBeTrue();
+ expect(await tooltip.getTooltipText()).toEqual(expectedTooltipText);
+ });
+
+ it('should not show tooltip if is not set', async () => {
+ const tooltip = await loader.getHarness(
+ MatTooltipHarness.with({
+ selector: '[data-automation-id="context-action-6"]'
+ })
+ );
+ await tooltip.show();
+ expect(await tooltip.isOpen()).toBeFalse();
+ });
});
});