mirror of https://github.com/abpframework/abp.git
Mehmet Erim
6 years ago
committed by
GitHub
GitHub
9 changed files with 294 additions and 170 deletions
@ -0,0 +1,8 @@ |
|||
import { NgModule } from '@angular/core'; |
|||
import { LocalizationPipe } from './pipes/localization.pipe'; |
|||
|
|||
@NgModule({ |
|||
exports: [LocalizationPipe], |
|||
declarations: [LocalizationPipe], |
|||
}) |
|||
export class LocalizationModule {} |
|||
@ -1,74 +1,101 @@ |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { Component } from '@angular/core'; |
|||
import { RouterTestingModule } from '@angular/router/testing'; |
|||
import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { fakeAsync, tick } from '@angular/core/testing'; |
|||
import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; |
|||
import { NgxsModule } from '@ngxs/store'; |
|||
import { ConfirmationService } from '../services/confirmation.service'; |
|||
import { ThemeSharedModule } from '../theme-shared.module'; |
|||
import { OAuthModule, OAuthService } from 'angular-oauth2-oidc'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-dummy', |
|||
template: ` |
|||
<abp-confirmation></abp-confirmation> |
|||
`,
|
|||
import { timer } from 'rxjs'; |
|||
import { take } from 'rxjs/operators'; |
|||
import { ConfirmationComponent } from '../components'; |
|||
import { Confirmation } from '../models'; |
|||
import { ConfirmationService } from '../services'; |
|||
|
|||
@NgModule({ |
|||
exports: [ConfirmationComponent], |
|||
entryComponents: [ConfirmationComponent], |
|||
declarations: [ConfirmationComponent], |
|||
imports: [CoreModule.forTest()], |
|||
}) |
|||
class DummyComponent { |
|||
constructor(public confirmation: ConfirmationService) {} |
|||
} |
|||
export class MockModule {} |
|||
|
|||
describe('ConfirmationService', () => { |
|||
let spectator: Spectator<DummyComponent>; |
|||
let spectator: SpectatorService<ConfirmationService>; |
|||
let service: ConfirmationService; |
|||
const createComponent = createComponentFactory({ |
|||
component: DummyComponent, |
|||
imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot(), RouterTestingModule], |
|||
mocks: [OAuthService], |
|||
const createService = createServiceFactory({ |
|||
service: ConfirmationService, |
|||
imports: [NgxsModule.forRoot(), CoreModule.forTest(), MockModule], |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
spectator = createComponent(); |
|||
service = spectator.get(ConfirmationService); |
|||
spectator = createService(); |
|||
service = spectator.service; |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
clearElements(); |
|||
}); |
|||
|
|||
test.skip('should display a confirmation popup', () => { |
|||
service.info('test', 'title'); |
|||
test('should display a confirmation popup', fakeAsync(() => { |
|||
service.show('MESSAGE', 'TITLE'); |
|||
|
|||
spectator.detectChanges(); |
|||
tick(); |
|||
|
|||
expect(spectator.query('div.confirmation .title')).toHaveText('title'); |
|||
expect(spectator.query('div.confirmation .message')).toHaveText('test'); |
|||
expect(selectConfirmationContent('.title')).toBe('TITLE'); |
|||
expect(selectConfirmationContent('.message')).toBe('MESSAGE'); |
|||
})); |
|||
|
|||
test.each` |
|||
type | selector | icon |
|||
${'info'} | ${'.info'} | ${'.fa-info-circle'} |
|||
${'success'} | ${'.success'} | ${'.fa-check-circle'} |
|||
${'warn'} | ${'.warning'} | ${'.fa-exclamation-triangle'} |
|||
${'error'} | ${'.error'} | ${'.fa-times-circle'} |
|||
`('should display $type confirmation popup', async ({ type, selector, icon }) => {
|
|||
service[type]('MESSAGE', 'TITLE'); |
|||
|
|||
await timer(0).toPromise(); |
|||
|
|||
expect(selectConfirmationContent('.title')).toBe('TITLE'); |
|||
expect(selectConfirmationContent('.message')).toBe('MESSAGE'); |
|||
expect(selectConfirmationElement(selector)).toBeTruthy(); |
|||
expect(selectConfirmationElement(icon)).toBeTruthy(); |
|||
}); |
|||
|
|||
test.skip('should close with ESC key', done => { |
|||
service.info('test', 'title').subscribe(() => { |
|||
setTimeout(() => { |
|||
spectator.detectComponentChanges(); |
|||
expect(spectator.query('div.confirmation')).toBeFalsy(); |
|||
test('should close with ESC key', done => { |
|||
service |
|||
.info('', '') |
|||
.pipe(take(1)) |
|||
.subscribe(status => { |
|||
expect(status).toBe(Confirmation.Status.dismiss); |
|||
done(); |
|||
}, 0); |
|||
}); |
|||
}); |
|||
|
|||
spectator.detectChanges(); |
|||
expect(spectator.query('div.confirmation')).toBeTruthy(); |
|||
spectator.dispatchKeyboardEvent('div.confirmation', 'keyup', 'Escape'); |
|||
const escape = new KeyboardEvent('keyup', { key: 'Escape' }); |
|||
document.dispatchEvent(escape); |
|||
}); |
|||
|
|||
test.skip('should close when click cancel button', done => { |
|||
service.info('test', 'title', { yesText: 'Sure', cancelText: 'Exit' }).subscribe(() => { |
|||
spectator.detectComponentChanges(); |
|||
setTimeout(() => { |
|||
expect(spectator.query('div.confirmation')).toBeFalsy(); |
|||
done(); |
|||
}, 0); |
|||
test('should close when click cancel button', async done => { |
|||
service.info('', '', { yesText: 'Sure', cancelText: 'Exit' }).subscribe(status => { |
|||
expect(status).toBe(Confirmation.Status.reject); |
|||
done(); |
|||
}); |
|||
|
|||
spectator.detectChanges(); |
|||
await timer(0).toPromise(); |
|||
|
|||
expect(spectator.query('div.confirmation')).toBeTruthy(); |
|||
expect(spectator.query('button#cancel')).toHaveText('Exit'); |
|||
expect(spectator.query('button#confirm')).toHaveText('Sure'); |
|||
expect(selectConfirmationContent('button#cancel')).toBe('Exit'); |
|||
expect(selectConfirmationContent('button#confirm')).toBe('Sure'); |
|||
|
|||
spectator.click('button#cancel'); |
|||
selectConfirmationElement<HTMLButtonElement>('button#cancel').click(); |
|||
}); |
|||
}); |
|||
|
|||
function clearElements(selector = '.confirmation') { |
|||
document.querySelectorAll(selector).forEach(element => element.parentNode.removeChild(element)); |
|||
} |
|||
|
|||
function selectConfirmationContent(selector = '.confirmation'): string { |
|||
return selectConfirmationElement(selector).textContent.trim(); |
|||
} |
|||
|
|||
function selectConfirmationElement<T extends HTMLElement>(selector = '.confirmation'): T { |
|||
return document.querySelector(selector); |
|||
} |
|||
|
|||
@ -1,87 +1,122 @@ |
|||
import { CoreModule } from '@abp/ng.core'; |
|||
import { Component } from '@angular/core'; |
|||
import { RouterTestingModule } from '@angular/router/testing'; |
|||
import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { createServiceFactory, SpectatorService } from '@ngneat/spectator/jest'; |
|||
import { NgxsModule } from '@ngxs/store'; |
|||
import { timer } from 'rxjs'; |
|||
import { ToastContainerComponent } from '../components/toast-container/toast-container.component'; |
|||
import { ToastComponent } from '../components/toast/toast.component'; |
|||
import { ToasterService } from '../services/toaster.service'; |
|||
import { ThemeSharedModule } from '../theme-shared.module'; |
|||
import { OAuthService } from 'angular-oauth2-oidc'; |
|||
|
|||
@Component({ |
|||
selector: 'abp-dummy', |
|||
template: ` |
|||
<abp-toast-container></abp-toast-container> |
|||
`,
|
|||
|
|||
@NgModule({ |
|||
exports: [ToastContainerComponent], |
|||
entryComponents: [ToastContainerComponent], |
|||
declarations: [ToastContainerComponent, ToastComponent], |
|||
imports: [CoreModule.forTest()], |
|||
}) |
|||
class DummyComponent { |
|||
constructor(public toaster: ToasterService) {} |
|||
} |
|||
export class MockModule {} |
|||
|
|||
describe('ToasterService', () => { |
|||
let spectator: Spectator<DummyComponent>; |
|||
let spectator: SpectatorService<ToasterService>; |
|||
let service: ToasterService; |
|||
const createComponent = createComponentFactory({ |
|||
component: DummyComponent, |
|||
imports: [CoreModule, ThemeSharedModule.forRoot(), NgxsModule.forRoot(), RouterTestingModule], |
|||
mocks: [OAuthService], |
|||
const createService = createServiceFactory({ |
|||
service: ToasterService, |
|||
imports: [NgxsModule.forRoot(), CoreModule.forTest(), MockModule], |
|||
}); |
|||
|
|||
beforeEach(() => { |
|||
spectator = createComponent(); |
|||
service = spectator.get(ToasterService); |
|||
spectator = createService(); |
|||
service = spectator.service; |
|||
}); |
|||
|
|||
afterEach(() => { |
|||
clearElements(); |
|||
}); |
|||
|
|||
test.skip('should display an error toast', () => { |
|||
service.error('test', 'title'); |
|||
test('should display a toast', async () => { |
|||
service.show('MESSAGE', 'TITLE'); |
|||
|
|||
spectator.detectChanges(); |
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
expect(spectator.query('div.toast')).toBeTruthy(); |
|||
expect(spectator.query('.toast-icon i')).toHaveClass('fa-times-circle'); |
|||
expect(spectator.query('div.toast-title')).toHaveText('title'); |
|||
expect(spectator.query('p.toast-message')).toHaveText('test'); |
|||
expect(selectToasterElement('.fa-exclamation-circle')).toBeTruthy(); |
|||
expect(selectToasterContent('.toast-title')).toBe('TITLE'); |
|||
expect(selectToasterContent('.toast-message')).toBe('MESSAGE'); |
|||
}); |
|||
|
|||
test.skip('should display a warning toast', () => { |
|||
service.warn('test', 'title'); |
|||
spectator.detectChanges(); |
|||
expect(spectator.query('.toast-icon i')).toHaveClass('fa-exclamation-triangle'); |
|||
test.each` |
|||
type | selector | icon |
|||
${'info'} | ${'.toast-info'} | ${'.fa-info-circle'} |
|||
${'success'} | ${'.toast-success'} | ${'.fa-check-circle'} |
|||
${'warn'} | ${'.toast-warning'} | ${'.fa-exclamation-triangle'} |
|||
${'error'} | ${'.toast-error'} | ${'.fa-times-circle'} |
|||
`('should display $type toast', async ({ type, selector, icon }) => {
|
|||
service[type]('MESSAGE', 'TITLE'); |
|||
|
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
expect(selectToasterContent('.toast-title')).toBe('TITLE'); |
|||
expect(selectToasterContent('.toast-message')).toBe('MESSAGE'); |
|||
expect(selectToasterElement()).toBe(document.querySelector(selector)); |
|||
expect(selectToasterElement(icon)).toBeTruthy(); |
|||
}); |
|||
|
|||
test.skip('should display a success toast', () => { |
|||
service.success('test', 'title'); |
|||
spectator.detectChanges(); |
|||
expect(spectator.query('.toast-icon i')).toHaveClass('fa-check-circle'); |
|||
test('should display multiple toasts', async () => { |
|||
service.show('MESSAGE_1', 'TITLE_1'); |
|||
service.show('MESSAGE_2', 'TITLE_2'); |
|||
|
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
const titles = document.querySelectorAll('.toast-title'); |
|||
expect(titles.length).toBe(2); |
|||
|
|||
const messages = document.querySelectorAll('.toast-message'); |
|||
expect(messages.length).toBe(2); |
|||
}); |
|||
|
|||
test.skip('should display an info toast', () => { |
|||
service.info('test', 'title'); |
|||
spectator.detectChanges(); |
|||
expect(spectator.query('.toast-icon i')).toHaveClass('fa-info-circle'); |
|||
test('should remove a toast when remove is called', async () => { |
|||
service.show('MESSAGE'); |
|||
service.remove(0); |
|||
|
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
expect(selectToasterElement()).toBeNull(); |
|||
}); |
|||
|
|||
test.skip('should display multiple toasts', () => { |
|||
service.info('detail1', 'summary1'); |
|||
service.info('detail2', 'summary2'); |
|||
|
|||
spectator.detectChanges(); |
|||
expect(spectator.queryAll('div.toast-title').map(node => node.textContent.trim())).toEqual([ |
|||
'summary1', |
|||
'summary2', |
|||
]); |
|||
expect(spectator.queryAll('p.toast-message').map(node => node.textContent.trim())).toEqual([ |
|||
'detail1', |
|||
'detail2', |
|||
]); |
|||
test('should remove toasts when clear is called', async () => { |
|||
service.show('MESSAGE'); |
|||
service.clear(); |
|||
|
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
expect(selectToasterElement()).toBeNull(); |
|||
}); |
|||
|
|||
test.skip('should remove the opened toasts', () => { |
|||
service.info('test', 'title'); |
|||
spectator.detectChanges(); |
|||
expect(spectator.query('div.toast')).toBeTruthy(); |
|||
test('should remove toasts based on containerKey when clear is called with key', async () => { |
|||
service.show('MESSAGE_1', 'TITLE_1', 'neutral', { containerKey: 'x' }); |
|||
service.show('MESSAGE_2', 'TITLE_2', 'neutral', { containerKey: 'y' }); |
|||
service.clear('x'); |
|||
|
|||
service.clear(); |
|||
spectator.detectChanges(); |
|||
expect(spectator.query('p-div.toast')).toBeFalsy(); |
|||
await timer(0).toPromise(); |
|||
service['containerComponentRef'].changeDetectorRef.detectChanges(); |
|||
|
|||
expect(selectToasterElement('.fa-exclamation-circle')).toBeTruthy(); |
|||
expect(selectToasterContent('.toast-title')).toBe('TITLE_2'); |
|||
expect(selectToasterContent('.toast-message')).toBe('MESSAGE_2'); |
|||
}); |
|||
}); |
|||
|
|||
function clearElements(selector = '.toast') { |
|||
document.querySelectorAll(selector).forEach(element => element.parentNode.removeChild(element)); |
|||
} |
|||
|
|||
function selectToasterContent(selector = '.toast'): string { |
|||
return selectToasterElement(selector).textContent.trim(); |
|||
} |
|||
|
|||
function selectToasterElement<T extends HTMLElement>(selector = '.toast'): T { |
|||
return document.querySelector(selector); |
|||
} |
|||
|
|||
Loading…
Reference in new issue