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: + + + +
- Custom content: {{ message }} - `, - providers: [NotificationService] -}) export class MyComponent implements OnInit { snackBarConfig: MatSnackBarConfig = new MatSnackBarConfig(); - @ViewChild('customTemplate', { read: TemplateRef }) customTemplate: TemplateRef; - constructor(private notificationService: NotificationService) { } ngOnInit() { - this.snackBarConfig.data = { templateRef: this.customTemplate }; + this.snackBarConfig.data = { decorativeIcon: 'folder' }; this.notificationService .openSnackMessageAction('Do you want to report this issue?', 'send', snackBarConfig) .afterDismissed() diff --git a/e2e/core/notifications-component.e2e.ts b/e2e/core/notifications-component.e2e.ts index 8db548da4a..bb78884995 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('[???????] 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 c04ea2df8d..eb5198c92a 100644 --- a/lib/core/src/lib/notifications/services/notification.service.spec.ts +++ b/lib/core/src/lib/notifications/services/notification.service.spec.ts @@ -17,7 +17,7 @@ import { LiveAnnouncer } from '@angular/cdk/a11y'; import { OverlayModule } from '@angular/cdk/overlay'; -import { Component, TemplateRef, ViewChild } from '@angular/core'; +import { Component } from '@angular/core'; import { ComponentFixture, TestBed } from '@angular/core/testing'; import { MatSnackBar, MatSnackBarConfig, MatSnackBarModule } from '@angular/material/snack-bar'; @@ -28,15 +28,10 @@ import { CoreTestingModule } from '../../testing/core.testing.module'; import { TranslateModule } from '@ngx-translate/core'; @Component({ - template: ` -

Custom content {{message}}

- `, providers: [NotificationService] }) class ProvidesNotificationServiceComponent { - @ViewChild('customTemplate', { read: TemplateRef }) customTemplate: TemplateRef; - constructor(public notificationService: NotificationService) { } @@ -75,20 +70,20 @@ class ProvidesNotificationServiceComponent { return this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', matSnackBarConfig); } - sendMessageWithTemplateRef() { + sendMessageWithDecorativeIcon() { const notificationConfig = new MatSnackBarConfig(); notificationConfig.duration = 1000; - notificationConfig.data = {templateRef: this.customTemplate}; + notificationConfig.data = {decorativeIcon: 'info'}; - return this.notificationService.openSnackMessage('with templateRef', notificationConfig); + return this.notificationService.openSnackMessage('with decorative icon', notificationConfig); } - sendMessageWithTemplateRefWithAction() { + sendMessageWithDecorativeIconWithIcon() { const notificationConfig = new MatSnackBarConfig(); notificationConfig.duration = 1000; - notificationConfig.data = { templateRef: this.customTemplate }; + notificationConfig.data = { decorativeIcon: 'folder' }; - return this.notificationService.openSnackMessageAction('with templateRef', 'TestWarn', notificationConfig); + return this.notificationService.openSnackMessageAction('with decorative icon', 'TestWarn', notificationConfig); } } @@ -219,28 +214,26 @@ describe('NotificationService', () => { expect(document.querySelector('snack-bar-container')).not.toBeNull(); }); - it('should open a message notification bar with a custom templateRef configuration', (done) => { - const promise = fixture.componentInstance.sendMessageWithTemplateRef(); + 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('.custom-template-class')).not.toBeNull(); - expect(document.querySelector('.custom-template-class')?.innerHTML).toEqual('Custom content with templateRef'); + expect(document.querySelector('[data-automation-id="adf-snackbar-message-content"] mat-icon')).not.toBeNull(); }); - it('should open a message notification bar with action and custom templateRef configuration', (done) => { - const promise = fixture.componentInstance.sendMessageWithTemplateRefWithAction(); + it('should open a message notification bar with action and decorative icon', (done) => { + const promise = fixture.componentInstance.sendMessageWithDecorativeIconWithIcon(); promise.afterDismissed().subscribe(() => { done(); }); fixture.detectChanges(); - expect(document.querySelector('.custom-template-class')).not.toBeNull(); - expect(document.querySelector('.custom-template-class')?.innerHTML).toEqual('Custom content with templateRef'); - }); + 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 6b2b28205c..37444b5725 100644 --- a/lib/core/src/lib/snackbar-content/snack-bar-data.ts +++ b/lib/core/src/lib/snackbar-content/snack-bar-data.ts @@ -15,8 +15,6 @@ * limitations under the License. */ -import { TemplateRef } from '@angular/core'; - export interface SnackBarData { actionLabel?: string; actionIcon?: string; @@ -24,5 +22,5 @@ export interface SnackBarData { message: string; showAction?: boolean; callActionOnIconClick?: boolean; - templateRef?: TemplateRef; + 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 2de71647c6..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,11 +1,5 @@