mirror of
https://github.com/DSpace/dspace-angular.git
synced 2025-10-18 15:33:04 +00:00
Notifications test final
This commit is contained in:
@@ -58,61 +58,4 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<!--<div class="icon"><i-->
|
|
||||||
<!--[ngClass]="{'fa fa-2x': true,-->
|
|
||||||
<!--'fa-check': item.type == 'alert-success',-->
|
|
||||||
<!--'fa-times-circle': item.type == 'alert-danger',-->
|
|
||||||
<!--'fa-exclamation-triangle': item.type == 'alert-warning',-->
|
|
||||||
<!--'fa-info': item.type == 'alert-info'-->
|
|
||||||
<!--}"></i></div>-->
|
|
||||||
|
|
||||||
<!--<button *ngIf="item.options.clickToClose"-->
|
|
||||||
<!--(click)="remove()"-->
|
|
||||||
<!--type="button" class="notificationClose close" data-dismiss="alert" aria-label="Close">-->
|
|
||||||
<!--<span aria-hidden="true">×</span>-->
|
|
||||||
<!--</button>-->
|
|
||||||
|
|
||||||
<!--<div *ngIf="!item.html">-->
|
|
||||||
|
|
||||||
<!--<div class="sn-title" *ngIf="titleIsTemplate; else regularTitle">-->
|
|
||||||
<!--<ng-container *ngTemplateOutlet="title"></ng-container>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<!--<ng-template #regularTitle>-->
|
|
||||||
<!--<div class="sn-title" [innerHTML]="(title | async)"></div>-->
|
|
||||||
<!--</ng-template>-->
|
|
||||||
|
|
||||||
<!--<div class="sn-content" *ngIf="contentIsTemplate; else regularContent">-->
|
|
||||||
<!--<ng-container *ngTemplateOutlet="content"></ng-container>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<!--<ng-template #regularContent>-->
|
|
||||||
<!--<div class="sn-content" [innerHTML]="(content | async)"></div>-->
|
|
||||||
<!--</ng-template>-->
|
|
||||||
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<!--<div *ngIf="item.html">-->
|
|
||||||
<!--<div class="sn-html" *ngIf="htmlIsTemplate; else regularHtml">-->
|
|
||||||
<!--<ng-container *ngTemplateOutlet="html"></ng-container>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<!--<ng-template #regularHtml>-->
|
|
||||||
<!--<div class="sn-content" [innerHTML]="html"></div>-->
|
|
||||||
<!--</ng-template>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<!--<div class="sn-progress-loader" *ngIf="showProgressBar">-->
|
|
||||||
<!--<span [ngStyle]="{'width': progressWidth + '%'}"></span>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
@@ -0,0 +1,75 @@
|
|||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { BrowserModule, By } from '@angular/platform-browser';
|
||||||
|
import { ChangeDetectorRef, DebugElement } from '@angular/core';
|
||||||
|
|
||||||
|
import { NotificationComponent } from './notification.component';
|
||||||
|
import { NotificationsService } from '../notifications.service';
|
||||||
|
import { NotificationType } from '../models/notification-type';
|
||||||
|
import { notificationsReducer } from '../notifications.reducers';
|
||||||
|
import { StoreModule } from '@ngrx/store';
|
||||||
|
import { NotificationOptions } from '../models/notification-options.model';
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
|
||||||
|
describe('LoadingComponent (inline template)', () => {
|
||||||
|
|
||||||
|
let comp: NotificationComponent;
|
||||||
|
let fixture: ComponentFixture<NotificationComponent>;
|
||||||
|
let deTitle: DebugElement;
|
||||||
|
let elTitle: HTMLElement;
|
||||||
|
let deContent: DebugElement;
|
||||||
|
let elContent: HTMLElement;
|
||||||
|
let elType: HTMLElement;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
StoreModule.forRoot({notificationsReducer})],
|
||||||
|
declarations: [NotificationComponent], // declare the test component
|
||||||
|
providers: [
|
||||||
|
NotificationsService,
|
||||||
|
ChangeDetectorRef]
|
||||||
|
}).compileComponents(); // compile template and css
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(NotificationComponent);
|
||||||
|
comp = fixture.componentInstance;
|
||||||
|
comp.item = {
|
||||||
|
id: '1',
|
||||||
|
type: NotificationType.Info,
|
||||||
|
title: 'Notif. title',
|
||||||
|
content: 'Notif. content',
|
||||||
|
options: new NotificationOptions()
|
||||||
|
};
|
||||||
|
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
deTitle = fixture.debugElement.query(By.css('.sn-title'));
|
||||||
|
elTitle = deTitle.nativeElement;
|
||||||
|
deContent = fixture.debugElement.query(By.css('.sn-content'));
|
||||||
|
elContent = deContent.nativeElement;
|
||||||
|
elType = fixture.debugElement.query(By.css('.fa-info')).nativeElement;
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(comp).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should set Title', () => {
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(elTitle.textContent).toBe(comp.item.title as string);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should set Content', () => {
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(elContent.textContent).toBe(comp.item.content as string);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should set type', () => {
|
||||||
|
fixture.detectChanges();
|
||||||
|
expect(elType).toBeDefined();
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
@@ -86,7 +86,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
|
|||||||
this.contentType(this.item.html, 'html');
|
this.contentType(this.item.html, 'html');
|
||||||
}
|
}
|
||||||
|
|
||||||
startTimeOut(): void {
|
private startTimeOut(): void {
|
||||||
this.steps = this.item.options.timeOut / 10;
|
this.steps = this.item.options.timeOut / 10;
|
||||||
this.speed = this.item.options.timeOut / this.steps;
|
this.speed = this.item.options.timeOut / this.steps;
|
||||||
this.start = new Date().getTime();
|
this.start = new Date().getTime();
|
||||||
@@ -149,7 +149,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
|
|||||||
this[key + 'IsTemplate'] = item instanceof TemplateRef;
|
this[key + 'IsTemplate'] = item instanceof TemplateRef;
|
||||||
}
|
}
|
||||||
|
|
||||||
setAnimationOut() {
|
private setAnimationOut() {
|
||||||
this.animate = this.item.options.animate + NotificationAnimationsStatus.Out;
|
this.animate = this.item.options.animate + NotificationAnimationsStatus.Out;
|
||||||
this.cdr.detectChanges();
|
this.cdr.detectChanges();
|
||||||
}
|
}
|
||||||
|
@@ -0,0 +1,63 @@
|
|||||||
|
import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing';
|
||||||
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
|
import { ChangeDetectorRef } from '@angular/core';
|
||||||
|
|
||||||
|
import { NotificationsService } from '../notifications.service';
|
||||||
|
import { notificationsReducer } from '../notifications.reducers';
|
||||||
|
import { Store, StoreModule } from '@ngrx/store';
|
||||||
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
import { NotificationsBoardComponent } from './notifications-board.component';
|
||||||
|
import { AppState } from '../../../app.reducer';
|
||||||
|
import { NotificationComponent } from '../notification/notification.component';
|
||||||
|
import { Notification } from '../models/notification.model';
|
||||||
|
import { NotificationType } from '../models/notification-type';
|
||||||
|
import { uniqueId } from 'lodash';
|
||||||
|
|
||||||
|
describe('LoadingComponent (inline template)', () => {
|
||||||
|
let comp: NotificationsBoardComponent;
|
||||||
|
let fixture: ComponentFixture<NotificationsBoardComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
StoreModule.forRoot({notificationsReducer})],
|
||||||
|
declarations: [NotificationsBoardComponent, NotificationComponent], // declare the test component
|
||||||
|
providers: [
|
||||||
|
NotificationsService,
|
||||||
|
ChangeDetectorRef]
|
||||||
|
}).compileComponents(); // compile template and css
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(inject([NotificationsService, Store], (service: NotificationsService, store: Store<AppState>) => {
|
||||||
|
store
|
||||||
|
.subscribe((state) => {
|
||||||
|
const notifications = [
|
||||||
|
new Notification(uniqueId(), NotificationType.Success, 'title1', 'content1'),
|
||||||
|
new Notification(uniqueId(), NotificationType.Info, 'title2', 'content2')
|
||||||
|
];
|
||||||
|
state.notifications = notifications;
|
||||||
|
});
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(NotificationsBoardComponent);
|
||||||
|
comp = fixture.componentInstance;
|
||||||
|
comp.options = {
|
||||||
|
rtl: false,
|
||||||
|
position: ['top', 'right'],
|
||||||
|
maxStack: 5
|
||||||
|
};
|
||||||
|
|
||||||
|
fixture.detectChanges();
|
||||||
|
}));
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(comp).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should be 2 notifications', () => {
|
||||||
|
expect(comp.notifications.length).toBe(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
})
|
||||||
|
;
|
@@ -86,7 +86,7 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
block(item: INotification): boolean {
|
private block(item: INotification): boolean {
|
||||||
const toCheck = item.html ? this.checkHtml : this.checkStandard;
|
const toCheck = item.html ? this.checkHtml : this.checkStandard;
|
||||||
this.notifications.forEach((notification) => {
|
this.notifications.forEach((notification) => {
|
||||||
if (toCheck(notification, item)) {
|
if (toCheck(notification, item)) {
|
||||||
@@ -111,16 +111,16 @@ export class NotificationsBoardComponent implements OnInit, OnDestroy {
|
|||||||
return toCheck(comp, item);
|
return toCheck(comp, item);
|
||||||
}
|
}
|
||||||
|
|
||||||
checkStandard(checker: INotification, item: INotification): boolean {
|
private checkStandard(checker: INotification, item: INotification): boolean {
|
||||||
return checker.type === item.type && checker.title === item.title && checker.content === item.content;
|
return checker.type === item.type && checker.title === item.title && checker.content === item.content;
|
||||||
}
|
}
|
||||||
|
|
||||||
checkHtml(checker: INotification, item: INotification): boolean {
|
private checkHtml(checker: INotification, item: INotification): boolean {
|
||||||
return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false;
|
return checker.html ? checker.type === item.type && checker.title === item.title && checker.content === item.content && checker.html === item.html : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Attach all the changes received in the options object
|
// Attach all the changes received in the options object
|
||||||
attachChanges(options: any): void {
|
private attachChanges(options: any): void {
|
||||||
Object.keys(options).forEach((a) => {
|
Object.keys(options).forEach((a) => {
|
||||||
if (this.hasOwnProperty(a)) {
|
if (this.hasOwnProperty(a)) {
|
||||||
(this as any)[a] = options[a];
|
(this as any)[a] = options[a];
|
||||||
|
@@ -1,13 +1,9 @@
|
|||||||
// import @ngrx
|
|
||||||
import { Action } from '@ngrx/store';
|
import { Action } from '@ngrx/store';
|
||||||
// import type function
|
|
||||||
import { type } from '../../shared/ngrx/type';
|
import { type } from '../../shared/ngrx/type';
|
||||||
// import models
|
|
||||||
import { INotification } from './models/notification.model';
|
import { INotification } from './models/notification.model';
|
||||||
|
|
||||||
export const NotificationsActionTypes = {
|
export const NotificationsActionTypes = {
|
||||||
NEW_NOTIFICATION: type('dspace/notifications/NEW_NOTIFICATION'),
|
NEW_NOTIFICATION: type('dspace/notifications/NEW_NOTIFICATION'),
|
||||||
NEW_NOTIFICATION_WITH_TIMER: type('dspace/notifications/NEW_NOTIFICATION_WITH_TIMER'),
|
|
||||||
REMOVE_ALL_NOTIFICATIONS: type('dspace/notifications/REMOVE_ALL_NOTIFICATIONS'),
|
REMOVE_ALL_NOTIFICATIONS: type('dspace/notifications/REMOVE_ALL_NOTIFICATIONS'),
|
||||||
REMOVE_NOTIFICATION: type('dspace/notifications/REMOVE_NOTIFICATION'),
|
REMOVE_NOTIFICATION: type('dspace/notifications/REMOVE_NOTIFICATION'),
|
||||||
};
|
};
|
||||||
@@ -28,20 +24,6 @@ export class NewNotificationAction implements Action {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* New notification.
|
|
||||||
* @class NewNotificationAction
|
|
||||||
* @implements {Action}
|
|
||||||
*/
|
|
||||||
export class NewNotificationWithTimerAction implements Action {
|
|
||||||
public type: string = NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER;
|
|
||||||
payload: INotification;
|
|
||||||
|
|
||||||
constructor(notification: INotification) {
|
|
||||||
this.payload = notification;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Remove all notifications.
|
* Remove all notifications.
|
||||||
* @class RemoveAllNotificationsAction
|
* @class RemoveAllNotificationsAction
|
||||||
@@ -75,6 +57,5 @@ export class RemoveNotificationAction implements Action {
|
|||||||
*/
|
*/
|
||||||
export type NotificationsActions
|
export type NotificationsActions
|
||||||
= NewNotificationAction
|
= NewNotificationAction
|
||||||
| NewNotificationWithTimerAction
|
|
||||||
| RemoveAllNotificationsAction
|
| RemoveAllNotificationsAction
|
||||||
| RemoveNotificationAction;
|
| RemoveNotificationAction;
|
||||||
|
@@ -1,21 +1,7 @@
|
|||||||
import { Injectable } from '@angular/core';
|
import { Injectable } from '@angular/core';
|
||||||
|
import { Actions } from '@ngrx/effects';
|
||||||
// import @ngrx
|
import { Store } from '@ngrx/store';
|
||||||
import { Effect, Actions } from '@ngrx/effects';
|
|
||||||
import { Action, Store } from '@ngrx/store';
|
|
||||||
|
|
||||||
// import rxjs
|
|
||||||
import { Observable } from 'rxjs/Observable';
|
|
||||||
|
|
||||||
// import services
|
|
||||||
|
|
||||||
// import actions
|
|
||||||
|
|
||||||
import { AppState } from '../../app.reducer';
|
import { AppState } from '../../app.reducer';
|
||||||
import {
|
|
||||||
NewNotificationWithTimerAction, NotificationsActionTypes,
|
|
||||||
RemoveNotificationAction
|
|
||||||
} from './notifications.actions';
|
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class NotificationsEffects {
|
export class NotificationsEffects {
|
||||||
|
@@ -1,10 +1,7 @@
|
|||||||
import { notificationsReducer } from './notifications.reducers';
|
import { notificationsReducer } from './notifications.reducers';
|
||||||
import {
|
import { NewNotificationAction, RemoveAllNotificationsAction, RemoveNotificationAction } from './notifications.actions';
|
||||||
NewNotificationAction, NewNotificationWithTimerAction, RemoveAllNotificationsAction,
|
|
||||||
RemoveNotificationAction
|
|
||||||
} from './notifications.actions';
|
|
||||||
import { NotificationsService } from './notifications.service';
|
import { NotificationsService } from './notifications.service';
|
||||||
import { fakeAsync, inject, TestBed, tick } from '@angular/core/testing';
|
import { fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
|
||||||
import { NotificationsBoardComponent } from './notifications-board/notifications-board.component';
|
import { NotificationsBoardComponent } from './notifications-board/notifications-board.component';
|
||||||
import { StoreModule } from '@ngrx/store';
|
import { StoreModule } from '@ngrx/store';
|
||||||
import { NotificationComponent } from './notification/notification.component';
|
import { NotificationComponent } from './notification/notification.component';
|
||||||
@@ -13,102 +10,131 @@ import { NotificationAnimationsType } from './models/notification-animations-typ
|
|||||||
import { NotificationType } from './models/notification-type';
|
import { NotificationType } from './models/notification-type';
|
||||||
import { Notification } from './models/notification.model';
|
import { Notification } from './models/notification.model';
|
||||||
import { uniqueId } from 'lodash';
|
import { uniqueId } from 'lodash';
|
||||||
|
import { ChangeDetectorRef } from '@angular/core';
|
||||||
|
|
||||||
describe('Notifications reducer', () => {
|
describe('Notifications reducer', () => {
|
||||||
|
|
||||||
let notification1;
|
let notification1;
|
||||||
let notification2;
|
let notification2;
|
||||||
let notification3;
|
let notification3;
|
||||||
let notification4;
|
|
||||||
let notificationHtml;
|
let notificationHtml;
|
||||||
|
let options;
|
||||||
|
let html;
|
||||||
|
|
||||||
beforeEach(async () => {
|
beforeEach(async () => {
|
||||||
TestBed.configureTestingModule({
|
TestBed.configureTestingModule({
|
||||||
declarations: [NotificationComponent, NotificationsBoardComponent],
|
declarations: [NotificationComponent, NotificationsBoardComponent],
|
||||||
providers: [NotificationsService],
|
providers: [NotificationsService],
|
||||||
imports: [
|
imports: [
|
||||||
|
ChangeDetectorRef,
|
||||||
StoreModule.forRoot({notificationsReducer}),
|
StoreModule.forRoot({notificationsReducer}),
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
const options = new NotificationOptions(
|
options = new NotificationOptions(
|
||||||
0,
|
0,
|
||||||
true,
|
true,
|
||||||
NotificationAnimationsType.Rotate);
|
NotificationAnimationsType.Rotate);
|
||||||
notification1 = new Notification(uniqueId(), NotificationType.Success, 'title1', 'content', options, null);
|
notification1 = new Notification(uniqueId(), NotificationType.Success, 'title1', 'content1', options, null);
|
||||||
notification2 = new Notification(uniqueId(), NotificationType.Success, 'title2', 'content', options, null);
|
notification2 = new Notification(uniqueId(), NotificationType.Info, 'title2', 'content2', options, null);
|
||||||
notification3 = new Notification(uniqueId(), NotificationType.Success, 'title3', 'content', options, null);
|
notification3 = new Notification(uniqueId(), NotificationType.Warning, 'title3', 'content3', options, null);
|
||||||
notification4 = new Notification(uniqueId(), NotificationType.Success, 'title4', 'content', options, null);
|
html = '<p>I\'m a mock test</p>';
|
||||||
const html = '<p>I\'m a mock test</p>';
|
notificationHtml = new Notification(uniqueId(), NotificationType.Error, null, null, options, html);
|
||||||
notificationHtml = new Notification(uniqueId(), NotificationType.Success, null, null, options, html);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should handle state for add', (inject([NotificationsService], (service: NotificationsService) => {
|
it('should add 4 notifications and verify fields and length', () => {
|
||||||
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
||||||
expect(state1.length).toEqual(1);
|
const n1 = state1[0];
|
||||||
|
expect(n1.title).toBe('title1');
|
||||||
|
expect(n1.content).toBe('content1');
|
||||||
|
expect(n1.type).toBe(NotificationType.Success);
|
||||||
|
expect(n1.options).toBe(options);
|
||||||
|
expect(n1.html).toBeNull();
|
||||||
|
expect(state1.length).toEqual(1);
|
||||||
|
|
||||||
const state2 = notificationsReducer(state1, new NewNotificationWithTimerAction(notification2));
|
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
||||||
expect(state2.length).toEqual(2);
|
const n2 = state2[1];
|
||||||
|
expect(n2.title).toBe('title2');
|
||||||
|
expect(n2.content).toBe('content2');
|
||||||
|
expect(n2.type).toBe(NotificationType.Info);
|
||||||
|
expect(n2.options).toBe(options);
|
||||||
|
expect(n2.html).toBeNull();
|
||||||
|
expect(state2.length).toEqual(2);
|
||||||
|
|
||||||
const state3 = notificationsReducer(state2, new NewNotificationAction(notificationHtml));
|
const state3 = notificationsReducer(state2, new NewNotificationAction(notification3));
|
||||||
expect(state3.length).toEqual(3);
|
const n3 = state3[2];
|
||||||
})
|
expect(n3.title).toBe('title3');
|
||||||
)
|
expect(n3.content).toBe('content3');
|
||||||
);
|
expect(n3.type).toBe(NotificationType.Warning);
|
||||||
|
expect(n3.options).toBe(options);
|
||||||
|
expect(n3.html).toBeNull();
|
||||||
|
expect(state3.length).toEqual(3);
|
||||||
|
|
||||||
it('should handle state for remove', (inject([NotificationsService], (service: NotificationsService) => {
|
const state4 = notificationsReducer(state3, new NewNotificationAction(notificationHtml));
|
||||||
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
const n4 = state4[3];
|
||||||
expect(state1.length).toEqual(1);
|
expect(n4.title).toBeNull();
|
||||||
|
expect(n4.content).toBeNull();
|
||||||
|
expect(n4.type).toBe(NotificationType.Error);
|
||||||
|
expect(n4.options).toBe(options);
|
||||||
|
expect(n4.html).toBe(html);
|
||||||
|
expect(state4.length).toEqual(4);
|
||||||
|
});
|
||||||
|
|
||||||
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
it('should add 2 notifications and remove only the first', () => {
|
||||||
expect(state2.length).toEqual(2);
|
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
||||||
|
expect(state1.length).toEqual(1);
|
||||||
|
|
||||||
const state3 = notificationsReducer(state2, new RemoveNotificationAction(notification1.id));
|
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
||||||
expect(state3.length).toEqual(1);
|
expect(state2.length).toEqual(2);
|
||||||
|
|
||||||
})
|
const state3 = notificationsReducer(state2, new RemoveNotificationAction(notification1.id));
|
||||||
)
|
expect(state3.length).toEqual(1);
|
||||||
);
|
|
||||||
|
|
||||||
it('should handle state for removeAll', (inject([NotificationsService], (service: NotificationsService) => {
|
});
|
||||||
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
|
||||||
expect(state1.length).toEqual(1);
|
|
||||||
|
|
||||||
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
it('should add 2 notifications and later remove all', () => {
|
||||||
expect(state2.length).toEqual(2);
|
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
||||||
|
expect(state1.length).toEqual(1);
|
||||||
|
|
||||||
const state3 = notificationsReducer(state2, new RemoveAllNotificationsAction());
|
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
||||||
expect(state3.length).toEqual(0);
|
expect(state2.length).toEqual(2);
|
||||||
})
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
it('should handle state for add, remove and removeAll', (inject([NotificationsService], (service: NotificationsService) => {
|
const state3 = notificationsReducer(state2, new RemoveAllNotificationsAction());
|
||||||
const state1 = notificationsReducer(undefined, new NewNotificationAction(notification1));
|
expect(state3.length).toEqual(0);
|
||||||
expect(state1.length).toEqual(1);
|
});
|
||||||
|
|
||||||
const state2 = notificationsReducer(state1, new NewNotificationAction(notification2));
|
it('should create 2 notifications and check they close after different timeout', fakeAsync(() => {
|
||||||
expect(state2.length).toEqual(2);
|
inject([ChangeDetectorRef], (cdr: ChangeDetectorRef) => {
|
||||||
|
const optionsWithTimeout = new NotificationOptions(
|
||||||
|
1000,
|
||||||
|
true,
|
||||||
|
NotificationAnimationsType.Rotate);
|
||||||
|
// Timeout 1000ms
|
||||||
|
const notification = new Notification(uniqueId(), NotificationType.Success, 'title', 'content', optionsWithTimeout, null);
|
||||||
|
const state = notificationsReducer(undefined, new NewNotificationAction(notification));
|
||||||
|
expect(state.length).toEqual(1);
|
||||||
|
|
||||||
const state3 = notificationsReducer(state2, new NewNotificationAction(notification3));
|
// Timeout default 5000ms
|
||||||
expect(state3.length).toEqual(3);
|
const notificationBis = new Notification(uniqueId(), NotificationType.Success, 'title', 'content');
|
||||||
|
const stateBis = notificationsReducer(state, new NewNotificationAction(notification));
|
||||||
|
expect(stateBis.length).toEqual(2);
|
||||||
|
|
||||||
const state4 = notificationsReducer(state3, new NewNotificationAction(notification4));
|
tick(1000);
|
||||||
expect(state4.length).toEqual(4);
|
cdr.detectChanges();
|
||||||
|
|
||||||
const state5 = notificationsReducer(state4, new NewNotificationWithTimerAction(notificationHtml));
|
const action = new NewNotificationAction(notification);
|
||||||
expect(state5.length).toEqual(5);
|
action.type = 'NothingToDo, return only the state';
|
||||||
|
|
||||||
const state6 = notificationsReducer(state5, new RemoveNotificationAction(notification4.id));
|
const lastState = notificationsReducer(stateBis, action);
|
||||||
expect(state6.length).toEqual(4);
|
expect(lastState.length).toEqual(1);
|
||||||
|
|
||||||
const state7 = notificationsReducer(state6, new RemoveNotificationAction(notificationHtml.id));
|
flush();
|
||||||
expect(state7.length).toEqual(3);
|
cdr.detectChanges();
|
||||||
|
|
||||||
const state8 = notificationsReducer(state7, new RemoveAllNotificationsAction());
|
const finalState = notificationsReducer(lastState, action);
|
||||||
expect(state8.length).toEqual(0);
|
expect(finalState.length).toEqual(0);
|
||||||
})
|
});
|
||||||
)
|
|
||||||
);
|
}));
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@@ -1,7 +1,4 @@
|
|||||||
// import actions
|
|
||||||
import { NotificationsActions, NotificationsActionTypes, RemoveNotificationAction } from './notifications.actions';
|
import { NotificationsActions, NotificationsActionTypes, RemoveNotificationAction } from './notifications.actions';
|
||||||
|
|
||||||
// import models
|
|
||||||
import { INotification } from './models/notification.model';
|
import { INotification } from './models/notification.model';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -27,7 +24,6 @@ export function notificationsReducer(state: any = initialState, action: Notifica
|
|||||||
|
|
||||||
switch (action.type) {
|
switch (action.type) {
|
||||||
case NotificationsActionTypes.NEW_NOTIFICATION:
|
case NotificationsActionTypes.NEW_NOTIFICATION:
|
||||||
case NotificationsActionTypes.NEW_NOTIFICATION_WITH_TIMER:
|
|
||||||
return [...state, action.payload];
|
return [...state, action.payload];
|
||||||
|
|
||||||
case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS:
|
case NotificationsActionTypes.REMOVE_ALL_NOTIFICATIONS:
|
||||||
|
@@ -1,19 +1,16 @@
|
|||||||
import { inject, TestBed } from '@angular/core/testing';
|
import { TestBed } from '@angular/core/testing';
|
||||||
import { NotificationsService } from './notifications.service';
|
import { NotificationsService } from './notifications.service';
|
||||||
import { NotificationsBoardComponent } from './notifications-board/notifications-board.component';
|
import { NotificationsBoardComponent } from './notifications-board/notifications-board.component';
|
||||||
import { NotificationComponent } from './notification/notification.component';
|
import { NotificationComponent } from './notification/notification.component';
|
||||||
import { Store, StoreModule } from '@ngrx/store';
|
import { Store, StoreModule } from '@ngrx/store';
|
||||||
import { notificationsReducer } from './notifications.reducers';
|
import { notificationsReducer } from './notifications.reducers';
|
||||||
import { Observable } from 'rxjs/Observable';
|
import { Observable } from 'rxjs/Observable';
|
||||||
// import 'rxjs/add/observable/of';
|
import 'rxjs/add/observable/of';
|
||||||
import {
|
import { NewNotificationAction, RemoveAllNotificationsAction, RemoveNotificationAction } from './notifications.actions';
|
||||||
NewNotificationAction, NewNotificationWithTimerAction, RemoveAllNotificationsAction,
|
|
||||||
RemoveNotificationAction
|
|
||||||
} from './notifications.actions';
|
|
||||||
import { Notification } from './models/notification.model';
|
import { Notification } from './models/notification.model';
|
||||||
import { NotificationType } from './models/notification-type';
|
import { NotificationType } from './models/notification-type';
|
||||||
|
|
||||||
describe('NotificationsService', () => {
|
describe('NotificationsService test', () => {
|
||||||
const store: Store<Notification> = jasmine.createSpyObj('store', {
|
const store: Store<Notification> = jasmine.createSpyObj('store', {
|
||||||
dispatch: {},
|
dispatch: {},
|
||||||
select: Observable.of(true)
|
select: Observable.of(true)
|
||||||
@@ -32,37 +29,37 @@ describe('NotificationsService', () => {
|
|||||||
service = new NotificationsService(store);
|
service = new NotificationsService(store);
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Success notification', () => {
|
it('Success method should dispatch NewNotificationAction with proper parameter', () => {
|
||||||
const notification = service.success('Title', Observable.of('Content'));
|
const notification = service.success('Title', Observable.of('Content'));
|
||||||
expect(notification.type).toBe(NotificationType.Success);
|
expect(notification.type).toBe(NotificationType.Success);
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationWithTimerAction(notification));
|
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationAction(notification));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Warning notification', () => {
|
it('Warning method should dispatch NewNotificationAction with proper parameter', () => {
|
||||||
const notification = service.warning('Title', Observable.of('Content'));
|
const notification = service.warning('Title', Observable.of('Content'));
|
||||||
expect(notification.type).toBe(NotificationType.Warning);
|
expect(notification.type).toBe(NotificationType.Warning);
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationWithTimerAction(notification));
|
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationAction(notification));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Info notification', () => {
|
it('Info method should dispatch NewNotificationAction with proper parameter', () => {
|
||||||
const notification = service.info('Title', Observable.of('Content'));
|
const notification = service.info('Title', Observable.of('Content'));
|
||||||
expect(notification.type).toBe(NotificationType.Info);
|
expect(notification.type).toBe(NotificationType.Info);
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationWithTimerAction(notification));
|
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationAction(notification));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Error notification', () => {
|
it('Error method should dispatch NewNotificationAction with proper parameter', () => {
|
||||||
const notification = service.error('Title', Observable.of('Content'));
|
const notification = service.error('Title', Observable.of('Content'));
|
||||||
expect(notification.type).toBe(NotificationType.Error);
|
expect(notification.type).toBe(NotificationType.Error);
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationWithTimerAction(notification));
|
expect(store.dispatch).toHaveBeenCalledWith(new NewNotificationAction(notification));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Remove notification', () => {
|
it('Remove method should dispatch RemoveNotificationAction with proper id', () => {
|
||||||
const notification = new Notification('1234', NotificationType.Info, 'title...', 'description');
|
const notification = new Notification('1234', NotificationType.Info, 'title...', 'description');
|
||||||
service.remove(notification);
|
service.remove(notification);
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new RemoveNotificationAction(notification.id));
|
expect(store.dispatch).toHaveBeenCalledWith(new RemoveNotificationAction(notification.id));
|
||||||
});
|
});
|
||||||
|
|
||||||
it('Remove all notification', () => {
|
it('RemoveAll method should dispatch RemoveAllNotificationsAction', () => {
|
||||||
service.removeAll();
|
service.removeAll();
|
||||||
expect(store.dispatch).toHaveBeenCalledWith(new RemoveAllNotificationsAction());
|
expect(store.dispatch).toHaveBeenCalledWith(new RemoveAllNotificationsAction());
|
||||||
});
|
});
|
||||||
|
@@ -4,13 +4,7 @@ import { NotificationType } from './models/notification-type';
|
|||||||
import { NotificationOptions } from './models/notification-options.model';
|
import { NotificationOptions } from './models/notification-options.model';
|
||||||
import { uniqueId } from 'lodash';
|
import { uniqueId } from 'lodash';
|
||||||
import { Store } from '@ngrx/store';
|
import { Store } from '@ngrx/store';
|
||||||
import {
|
import { NewNotificationAction, RemoveAllNotificationsAction, RemoveNotificationAction } from './notifications.actions';
|
||||||
NewNotificationAction,
|
|
||||||
NewNotificationWithTimerAction,
|
|
||||||
RemoveAllNotificationsAction,
|
|
||||||
RemoveNotificationAction
|
|
||||||
} from './notifications.actions';
|
|
||||||
import { DomSanitizer } from '@angular/platform-browser';
|
|
||||||
import { Observable } from 'rxjs/Observable';
|
import { Observable } from 'rxjs/Observable';
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
@@ -21,11 +15,7 @@ export class NotificationsService {
|
|||||||
|
|
||||||
private add(notification: Notification) {
|
private add(notification: Notification) {
|
||||||
let notificationAction;
|
let notificationAction;
|
||||||
if (notification.options.timeOut > 0) {
|
notificationAction = new NewNotificationAction(notification);
|
||||||
notificationAction = new NewNotificationWithTimerAction(notification);
|
|
||||||
} else {
|
|
||||||
notificationAction = new NewNotificationAction(notification);
|
|
||||||
}
|
|
||||||
this.store.dispatch(notificationAction);
|
this.store.dispatch(notificationAction);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user