diff --git a/demo-shell/src/app/components/notifications/notifications.component.html b/demo-shell/src/app/components/notifications/notifications.component.html index 3b65b9942b..8a925c0059 100644 --- a/demo-shell/src/app/components/notifications/notifications.component.html +++ b/demo-shell/src/app/components/notifications/notifications.component.html @@ -4,17 +4,32 @@ - - - +
+ Message: + + + +
+ +
+ Decorative icon: + + + +
{ + console.log('The snack-bar was dismissed'); + }); + } +} +``` + The default message duration is 5000 ms that is used only if you don't pass a custom duration in the parameters of openSnackMessageAction/openSnackMessage methods. You can also change the default 5000 ms adding the following configuration in the app.config.json: diff --git a/e2e/core/notifications-component.e2e.ts b/e2e/core/notifications-component.e2e.ts index 8db548da4a..871d3f7244 100644 --- a/e2e/core/notifications-component.e2e.ts +++ b/e2e/core/notifications-component.e2e.ts @@ -67,6 +67,13 @@ describe('Notifications Component', () => { await expect(await notificationPage.snackbarPage.getSnackBarMessage()).toEqual('test'); }); + it('[C694098] Should show a decorative icon when the message and the icon fields are not empty and button is clicked', async () => { + await notificationPage.enterMessageField('test'); + await notificationPage.enterDecorativeIconField('folder'); + await notificationPage.clickNotificationButton(); + await expect(await notificationPage.snackbarPage.getSnackBarDecorativeIcon()).toEqual('folder'); + }); + it('[C279978] Should show notification with action when the message is not empty and button is clicked', async () => { await notificationPage.enterMessageField('test'); await notificationPage.clickActionToggle(); diff --git a/e2e/core/pages/notification.page.ts b/e2e/core/pages/notification.page.ts index 785573e1d1..eb71401773 100644 --- a/e2e/core/pages/notification.page.ts +++ b/e2e/core/pages/notification.page.ts @@ -23,6 +23,7 @@ export class NotificationDemoPage { snackbarPage = new SnackbarPage(); messageField = $('input[data-automation-id="notification-message"]'); + decorativeIconField = $('input[data-automation-id="notification-icon"]'); durationField = $('input[data-automation-id="notification-duration"]'); actionToggle = $('mat-slide-toggle[data-automation-id="notification-action-toggle"]'); notificationSnackBar = $$('simple-snack-bar').first(); @@ -50,6 +51,10 @@ export class NotificationDemoPage { await BrowserActions.clearSendKeys(this.messageField, text); } + async enterDecorativeIconField(icon: string): Promise { + await BrowserActions.clearSendKeys(this.decorativeIconField, icon); + } + async enterDurationField(time: number): Promise { await BrowserActions.clearSendKeys(this.durationField, time.toString()); } diff --git a/lib/core/src/lib/notifications/services/notification.service.spec.ts b/lib/core/src/lib/notifications/services/notification.service.spec.ts index 7794425e83..7f52fee5bf 100644 --- a/lib/core/src/lib/notifications/services/notification.service.spec.ts +++ b/lib/core/src/lib/notifications/services/notification.service.spec.ts @@ -32,6 +32,7 @@ import { TranslateModule } from '@ngx-translate/core'; providers: [NotificationService] }) class ProvidesNotificationServiceComponent { + constructor(public notificationService: NotificationService) { } @@ -70,6 +71,22 @@ class ProvidesNotificationServiceComponent { return this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', matSnackBarConfig); } + sendMessageWithDecorativeIcon() { + const notificationConfig = new MatSnackBarConfig(); + notificationConfig.duration = 1000; + notificationConfig.data = {decorativeIcon: 'info'}; + + return this.notificationService.openSnackMessage('with decorative icon', notificationConfig); + } + + sendMessageWithDecorativeIconAndAction() { + const notificationConfig = new MatSnackBarConfig(); + notificationConfig.duration = 1000; + notificationConfig.data = { decorativeIcon: 'folder' }; + + return this.notificationService.openSnackMessageAction('with decorative icon', 'TestWarn', notificationConfig); + } + } describe('NotificationService', () => { @@ -197,4 +214,27 @@ describe('NotificationService', () => { expect(document.querySelector('snack-bar-container')).not.toBeNull(); }); + + it('should open a message notification bar with a decorative icon', (done) => { + const promise = fixture.componentInstance.sendMessageWithDecorativeIcon(); + promise.afterDismissed().subscribe(() => { + done(); + }); + + fixture.detectChanges(); + + expect(document.querySelector('[data-automation-id="adf-snackbar-message-content"] mat-icon')).not.toBeNull(); + }); + + it('should open a message notification bar with action and a decorative icon', (done) => { + const promise = fixture.componentInstance.sendMessageWithDecorativeIconAndAction(); + promise.afterDismissed().subscribe(() => { + done(); + }); + + fixture.detectChanges(); + + expect(document.querySelector('[data-automation-id="adf-snackbar-message-content"] mat-icon')).not.toBeNull(); + }); + }); diff --git a/lib/core/src/lib/snackbar-content/snack-bar-data.ts b/lib/core/src/lib/snackbar-content/snack-bar-data.ts index 5201d9f258..37444b5725 100644 --- a/lib/core/src/lib/snackbar-content/snack-bar-data.ts +++ b/lib/core/src/lib/snackbar-content/snack-bar-data.ts @@ -22,4 +22,5 @@ export interface SnackBarData { message: string; showAction?: boolean; callActionOnIconClick?: boolean; + decorativeIcon?: string; } diff --git a/lib/core/src/lib/snackbar-content/snackbar-content.component.html b/lib/core/src/lib/snackbar-content/snackbar-content.component.html index 8b81dcd9be..dc917f0b58 100644 --- a/lib/core/src/lib/snackbar-content/snackbar-content.component.html +++ b/lib/core/src/lib/snackbar-content/snackbar-content.component.html @@ -1,4 +1,6 @@ - +