[ADF-3286] Snackbar now supports custom configuration (#3549)

* [ADF-3286] Snackbar now supports custom configuration

* [ADF-3286] Trailing whitespace removed

* [ADF-3286] Tests added

* [ADF-3286] Improved tests

* [ADF-3286] Documentation added

* [ADF-3286]  Logic improved

* [ADF-3286] Styling error fixed

* [ADF-3286] Broken tests fixed

* [ADF-3286] Broken tests fixed
This commit is contained in:
davidcanonieto
2018-07-06 16:19:20 +02:00
committed by Eugenio Romano
parent 495f9937fe
commit a6a77b8561
5 changed files with 243 additions and 22 deletions

View File

@@ -20,7 +20,7 @@ import { OVERLAY_PROVIDERS, OverlayModule } from '@angular/cdk/overlay';
import { Component } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatSnackBar, MatSnackBarModule } from '@angular/material';
import { MatSnackBar, MatSnackBarModule, MatSnackBarConfig } from '@angular/material';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { NotificationService } from './notification.service';
import { TranslationMock } from '../mock/translation.service.mock';
@@ -35,13 +35,33 @@ class ProvidesNotificationServiceComponent {
}
sendMessageWithoutConfig() {
let promise = this.notificationService.openSnackMessage('Test notification');
return promise;
}
sendMessage() {
let promise = this.notificationService.openSnackMessage('Test notification', 5000);
let promise = this.notificationService.openSnackMessage('Test notification', 1000);
return promise;
}
sendCustomMessage() {
let promise = this.notificationService.openSnackMessage('Test notification', new MatSnackBarConfig());
return promise;
}
sendMessageActionWithoutConfig() {
let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn');
return promise;
}
sendMessageAction() {
let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', 5000);
let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', 1000);
return promise;
}
sendCustomMessageAction() {
let promise = this.notificationService.openSnackMessageAction('Test notification', 'TestWarn', new MatSnackBarConfig());
return promise;
}
@@ -99,6 +119,28 @@ describe('NotificationService', () => {
expect(document.querySelector('snack-bar-container')).not.toBeNull();
});
it('should open a message notification bar without custom configuration', (done) => {
let promise = fixture.componentInstance.sendMessageWithoutConfig();
promise.afterDismissed().subscribe(() => {
done();
});
fixture.detectChanges();
expect(document.querySelector('snack-bar-container')).not.toBeNull();
});
it('should open a message notification bar with custom configuration', async((done) => {
let promise = fixture.componentInstance.sendCustomMessage();
promise.afterDismissed().subscribe(() => {
done();
});
fixture.detectChanges();
expect(document.querySelector('snack-bar-container')).not.toBeNull();
}));
it('should open a message notification bar with action', (done) => {
let promise = fixture.componentInstance.sendMessageAction();
promise.afterDismissed().subscribe(() => {
@@ -110,4 +152,26 @@ describe('NotificationService', () => {
expect(document.querySelector('snack-bar-container')).not.toBeNull();
});
it('should open a message notification bar with action and custom configuration', async((done) => {
let promise = fixture.componentInstance.sendCustomMessageAction();
promise.afterDismissed().subscribe(() => {
done();
});
fixture.detectChanges();
expect(document.querySelector('snack-bar-container')).not.toBeNull();
}));
it('should open a message notification bar with action and no custom configuration', (done) => {
let promise = fixture.componentInstance.sendMessageActionWithoutConfig();
promise.afterDismissed().subscribe(() => {
done();
});
fixture.detectChanges();
expect(document.querySelector('snack-bar-container')).not.toBeNull();
});
});

View File

@@ -16,7 +16,7 @@
*/
import { Injectable } from '@angular/core';
import { MatSnackBar, MatSnackBarRef } from '@angular/material';
import { MatSnackBar, MatSnackBarRef, MatSnackBarConfig } from '@angular/material';
import { TranslationService } from './translation.service';
@Injectable()
@@ -31,29 +31,39 @@ export class NotificationService {
/**
* Opens a SnackBar notification to show a message.
* @param message The message (or resource key) to show.
* @param millisecondsDuration Time before notification disappears after being shown
* @param config Time before notification disappears after being shown or MatSnackBarConfig object
* @returns Information/control object for the SnackBar
*/
openSnackMessage(message: string, millisecondsDuration?: number): MatSnackBarRef<any> {
openSnackMessage(message: string, config: number | MatSnackBarConfig = NotificationService.DEFAULT_DURATION_MESSAGE): MatSnackBarRef<any> {
const translatedMessage = this.translationService.instant(message);
return this.snackBar.open(translatedMessage, null, {
duration: millisecondsDuration || NotificationService.DEFAULT_DURATION_MESSAGE
});
if (typeof config === 'number') {
config = {
duration: config
};
}
return this.snackBar.open(translatedMessage, null, config);
}
/**
* Opens a SnackBar notification with a message and a response button.
* @param message The message (or resource key) to show.
* @param action Caption for the response button
* @param millisecondsDuration Time before the notification disappears (unless the button is clicked)
* @param config Time before notification disappears after being shown or MatSnackBarConfig object
* @returns Information/control object for the SnackBar
*/
openSnackMessageAction(message: string, action: string, millisecondsDuration?: number): MatSnackBarRef<any> {
openSnackMessageAction(message: string, action: string, config: number | MatSnackBarConfig = NotificationService.DEFAULT_DURATION_MESSAGE): MatSnackBarRef<any> {
const translatedMessage = this.translationService.instant(message);
return this.snackBar.open(translatedMessage, action, {
duration: millisecondsDuration || NotificationService.DEFAULT_DURATION_MESSAGE
});
if (typeof config === 'number') {
config = {
duration: config
};
}
return this.snackBar.open(translatedMessage, action, config);
}
}