From b01ba534a0017ad8bf85ddecff7610a6de6a74e9 Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 9 Mar 2019 01:42:38 +0800 Subject: User named route in dialog. --- Timeline/ClientApp/src/app/user/user.module.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'Timeline/ClientApp/src/app/user/user.module.ts') diff --git a/Timeline/ClientApp/src/app/user/user.module.ts b/Timeline/ClientApp/src/app/user/user.module.ts index 67de90a2..1e70d33d 100644 --- a/Timeline/ClientApp/src/app/user/user.module.ts +++ b/Timeline/ClientApp/src/app/user/user.module.ts @@ -11,14 +11,21 @@ import { UserDialogComponent } from './user-dialog/user-dialog.component'; import { UserLoginComponent } from './user-login/user-login.component'; import { UserLoginSuccessComponent } from './user-login-success/user-login-success.component'; import { UtilityModule } from '../utility/utility.module'; +import { RouterModule } from '@angular/router'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; @NgModule({ declarations: [UserDialogComponent, UserLoginComponent, UserLoginSuccessComponent], imports: [ - CommonModule, HttpClientModule, ReactiveFormsModule, + RouterModule.forChild([ + { path: 'login', component: UserLoginComponent, outlet: 'user' }, + { path: 'success', component: UserLoginSuccessComponent, outlet: 'user' } + ]), + CommonModule, HttpClientModule, ReactiveFormsModule, BrowserAnimationsModule, MatFormFieldModule, MatProgressSpinnerModule, MatDialogModule, MatInputModule, MatButtonModule, UtilityModule ], + exports: [RouterModule], entryComponents: [UserDialogComponent] }) export class UserModule { } -- cgit v1.2.3 From 31199282e1ccf72bb464117ae68668aed91e2530 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 11 Mar 2019 00:07:59 +0800 Subject: Write unit tests. --- .../src/app/test-utilities/activated-route.mock.ts | 66 +++++++++++ .../internal-user.service.mock.ts | 5 + .../mock-internal-user-service.ts | 5 - .../ClientApp/src/app/user/mock-activated-route.ts | 43 ------- .../user/user-dialog/user-dialog.component.spec.ts | 2 +- .../user-login-success.component.spec.ts | 40 ++++++- .../user/user-login/user-login.component.spec.ts | 74 +++++++++--- .../app/user/user-login/user-login.component.ts | 6 +- Timeline/ClientApp/src/app/user/user.module.ts | 2 +- .../app/utilities/debounce-click.directive.spec.ts | 124 +++++++++++++++++++++ .../src/app/utilities/debounce-click.directive.ts | 39 +++++++ .../ClientApp/src/app/utilities/utility.module.ts | 11 ++ .../app/utility/debounce-click.directive.spec.ts | 124 --------------------- .../src/app/utility/debounce-click.directive.ts | 39 ------- .../ClientApp/src/app/utility/utility.module.ts | 11 -- 15 files changed, 344 insertions(+), 247 deletions(-) create mode 100644 Timeline/ClientApp/src/app/test-utilities/activated-route.mock.ts create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.mock.ts delete mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.ts delete mode 100644 Timeline/ClientApp/src/app/user/mock-activated-route.ts create mode 100644 Timeline/ClientApp/src/app/utilities/debounce-click.directive.spec.ts create mode 100644 Timeline/ClientApp/src/app/utilities/debounce-click.directive.ts create mode 100644 Timeline/ClientApp/src/app/utilities/utility.module.ts delete mode 100644 Timeline/ClientApp/src/app/utility/debounce-click.directive.spec.ts delete mode 100644 Timeline/ClientApp/src/app/utility/debounce-click.directive.ts delete mode 100644 Timeline/ClientApp/src/app/utility/utility.module.ts (limited to 'Timeline/ClientApp/src/app/user/user.module.ts') diff --git a/Timeline/ClientApp/src/app/test-utilities/activated-route.mock.ts b/Timeline/ClientApp/src/app/test-utilities/activated-route.mock.ts new file mode 100644 index 00000000..1743e615 --- /dev/null +++ b/Timeline/ClientApp/src/app/test-utilities/activated-route.mock.ts @@ -0,0 +1,66 @@ +import { ParamMap } from '@angular/router'; + +import { Observable, BehaviorSubject } from 'rxjs'; +import { map } from 'rxjs/operators'; + +export interface ParamMapCreator { [name: string]: string | string[]; } + +export class MockActivatedRouteSnapshot { + + private paramMapInternal: ParamMap; + + constructor({ mockParamMap }: { mockParamMap: ParamMapCreator } = { mockParamMap: {} }) { + this.paramMapInternal = { + keys: Object.keys(mockParamMap), + get(name: string): string | null { + const param = mockParamMap[name]; + if (typeof param === 'string') { + return param; + } else if (param instanceof Array) { + if (param.length === 0) { + return null; + } + return param[0]; + } + return null; + }, + getAll(name: string): string[] { + const param = mockParamMap[name]; + if (typeof param === 'string') { + return [param]; + } else if (param instanceof Array) { + return param; + } + return []; + }, + has(name: string): boolean { + return mockParamMap.hasOwnProperty(name); + } + }; + } + + get paramMap(): ParamMap { + return this.paramMapInternal; + } +} + +export class MockActivatedRoute { + + snapshot$ = new BehaviorSubject(new MockActivatedRouteSnapshot()); + + get paramMap(): Observable { + return this.snapshot$.pipe(map(snapshot => snapshot.paramMap)); + } + + get snapshot(): MockActivatedRouteSnapshot { + return this.snapshot$.value; + } + + pushSnapshot(snapshot: MockActivatedRouteSnapshot) { + this.snapshot$.next(snapshot); + } + + pushSnapshotWithParamMap(mockParamMap: ParamMapCreator) { + this.pushSnapshot(new MockActivatedRouteSnapshot({mockParamMap})); + } +} diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.mock.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.mock.ts new file mode 100644 index 00000000..f4a85262 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.mock.ts @@ -0,0 +1,5 @@ +import { InternalUserService } from './internal-user.service'; + +export function createMockInternalUserService(): jasmine.SpyObj { + return jasmine.createSpyObj('InternalUserService', ['userRouteNavigate', 'refreshAndGetUserState', 'tryLogin']); +} diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.ts b/Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.ts deleted file mode 100644 index f4a85262..00000000 --- a/Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { InternalUserService } from './internal-user.service'; - -export function createMockInternalUserService(): jasmine.SpyObj { - return jasmine.createSpyObj('InternalUserService', ['userRouteNavigate', 'refreshAndGetUserState', 'tryLogin']); -} diff --git a/Timeline/ClientApp/src/app/user/mock-activated-route.ts b/Timeline/ClientApp/src/app/user/mock-activated-route.ts deleted file mode 100644 index 9e516e83..00000000 --- a/Timeline/ClientApp/src/app/user/mock-activated-route.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { ParamMap } from '@angular/router'; - -interface MockActivatedRoute { - snapshot: MockActivatedRouteSnapshot; -} - -interface MockActivatedRouteSnapshot { - paramMap: ParamMap; -} - -export function createMockActivatedRoute(mockParamMap: { [name: string]: string | string[] }): MockActivatedRoute { - return { - snapshot: { - paramMap: { - keys: Object.keys(mockParamMap), - get(name: string): string | null { - const param = mockParamMap[name]; - if (typeof param === 'string') { - return param; - } else if (param instanceof Array) { - if (param.length === 0) { - return null; - } - return param[0]; - } - return null; - }, - getAll(name: string): string[] { - const param = mockParamMap[name]; - if (typeof param === 'string') { - return [param]; - } else if (param instanceof Array) { - return param; - } - return []; - }, - has(name: string): boolean { - return mockParamMap.hasOwnProperty(name); - } - } - } - } -} diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.spec.ts b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.spec.ts index ca7c024d..c56e1ed1 100644 --- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.spec.ts +++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.spec.ts @@ -6,7 +6,7 @@ import { of, Observable } from 'rxjs'; import { delay } from 'rxjs/operators'; import { UserDialogComponent } from './user-dialog.component'; -import { createMockInternalUserService } from '../internal-user-service/mock-internal-user-service'; +import { createMockInternalUserService } from '../internal-user-service/internal-user.service.mock'; import { InternalUserService, UserLoginState } from '../internal-user-service/internal-user.service'; @Component({ diff --git a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.spec.ts b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.spec.ts index ba015ae6..1efbb5c7 100644 --- a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.spec.ts +++ b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.spec.ts @@ -1,20 +1,39 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { ActivatedRoute } from '@angular/router'; + +import { MockActivatedRoute } from 'src/app/test-utilities/activated-route.mock'; +import { createMockInternalUserService } from '../internal-user-service/internal-user.service.mock'; import { UserLoginSuccessComponent } from './user-login-success.component'; -import { By } from '@angular/platform-browser'; +import { InternalUserService } from '../internal-user-service/internal-user.service'; + describe('UserLoginSuccessComponent', () => { let component: UserLoginSuccessComponent; let fixture: ComponentFixture; + let mockInternalUserService: jasmine.SpyObj; + let mockActivatedRoute: MockActivatedRoute; + const mockUserInfo = { username: 'crupest', roles: ['superman', 'coder'] }; beforeEach(async(() => { + mockInternalUserService = createMockInternalUserService(); + mockActivatedRoute = new MockActivatedRoute(); + + // mock currentUserInfo property. because it only has a getter so cast it to any first. + (mockInternalUserService).currentUserInfo = mockUserInfo; + TestBed.configureTestingModule({ - declarations: [UserLoginSuccessComponent] + declarations: [UserLoginSuccessComponent], + providers: [ + { provide: InternalUserService, useValue: mockInternalUserService }, + { provide: ActivatedRoute, useValue: mockActivatedRoute } + ] }) .compileComponents(); })); @@ -22,18 +41,29 @@ describe('UserLoginSuccessComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(UserLoginSuccessComponent); component = fixture.componentInstance; - component.userInfo = mockUserInfo; - fixture.detectChanges(); }); it('should create', () => { + fixture.detectChanges(); expect(component).toBeTruthy(); }); - it('should work well', () => { + it('user info should work well', () => { + fixture.detectChanges(); + + expect((fixture.debugElement.query(By.css('p.login-success-message')))).toBeFalsy(); + expect((fixture.debugElement.query(By.css('span.username')).nativeElement as HTMLSpanElement).textContent) .toBe(mockUserInfo.username); expect((fixture.debugElement.query(By.css('span.roles')).nativeElement as HTMLSpanElement).textContent) .toBe(mockUserInfo.roles.join(', ')); }); + + it('login success message should display well', () => { + mockActivatedRoute.pushSnapshotWithParamMap({ reason: 'login' }); + + fixture.detectChanges(); + + expect((fixture.debugElement.query(By.css('p.login-success-message')))).toBeTruthy(); + }); }); diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts b/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts index 3d431ce7..9c9ee1dc 100644 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts +++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts @@ -1,28 +1,33 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { ActivatedRoute } from '@angular/router'; -import { createMockInternalUserService } from '../internal-user-service/mock-internal-user-service'; -import { createMockActivatedRoute } from '../mock-activated-route'; -import { UserLoginComponent, LoginEvent } from './user-login.component'; +import { of, throwError } from 'rxjs'; + +import { createMockInternalUserService } from '../internal-user-service/internal-user.service.mock'; +import { MockActivatedRoute } from '../../test-utilities/activated-route.mock'; +import { UserLoginComponent } from './user-login.component'; import { InternalUserService } from '../internal-user-service/internal-user.service'; +import { UserInfo } from '../entities'; describe('UserLoginComponent', () => { let component: UserLoginComponent; let fixture: ComponentFixture; let mockInternalUserService: jasmine.SpyObj; + let mockActivatedRoute: MockActivatedRoute; beforeEach(async(() => { mockInternalUserService = createMockInternalUserService(); + mockActivatedRoute = new MockActivatedRoute(); TestBed.configureTestingModule({ declarations: [UserLoginComponent], providers: [ - {provide: InternalUserService, useValue: mockInternalUserService}, - {provide: ActivatedRoute, useValue:} // TODO: custom route snapshot param later. - ] + { provide: InternalUserService, useValue: mockInternalUserService }, + { provide: ActivatedRoute, useValue: mockActivatedRoute } + ], imports: [ReactiveFormsModule], schemas: [NO_ERRORS_SCHEMA] }) @@ -32,14 +37,16 @@ describe('UserLoginComponent', () => { beforeEach(() => { fixture = TestBed.createComponent(UserLoginComponent); component = fixture.componentInstance; - fixture.detectChanges(); }); it('should create', () => { + fixture.detectChanges(); expect(component).toBeTruthy(); }); it('reactive form should work well', () => { + fixture.detectChanges(); + const usernameInput = fixture.debugElement.query(By.css('input[type=text]')).nativeElement as HTMLInputElement; const passwordInput = fixture.debugElement.query(By.css('input[type=password]')).nativeElement as HTMLInputElement; @@ -56,16 +63,57 @@ describe('UserLoginComponent', () => { }); }); - it('login event should work well', fakeAsync(() => { - let userCredential: LoginEvent; - component.login.subscribe((e: LoginEvent) => { userCredential = e; }); + it('login should work well', () => { fixture.detectChanges(); + const mockValue = { username: 'user', password: 'user' }; + + mockInternalUserService.tryLogin.withArgs(mockValue).and.returnValue(of({ username: 'user', roles: ['user'] })); + component.form.setValue(mockValue); component.onLoginButtonClick(); - expect(userCredential).toEqual(mockValue); - })); + + expect(mockInternalUserService.tryLogin).toHaveBeenCalledWith(mockValue); + expect(mockInternalUserService.userRouteNavigate).toHaveBeenCalledWith(['success', { reason: 'login' }]); + }); + + describe('message display', () => { + it('nologin reason should display', () => { + mockActivatedRoute.pushSnapshotWithParamMap({ reason: 'nologin' }); + fixture.detectChanges(); + expect(component.message).toBe('nologin'); + expect((fixture.debugElement.query(By.css('p.mat-body')).nativeElement as + HTMLParagraphElement).textContent).toBe('You haven\'t login.'); + }); + + it('invalid login reason should display', () => { + mockActivatedRoute.pushSnapshotWithParamMap({ reason: 'invalidlogin' }); + fixture.detectChanges(); + expect(component.message).toBe('invalidlogin'); + expect((fixture.debugElement.query(By.css('p.mat-body')).nativeElement as + HTMLParagraphElement).textContent).toBe('Your login is no longer valid.'); + }); + + it('custom error message should display', () => { + const customMessage = 'custom message'; + + fixture.detectChanges(); + + const mockValue = { + username: 'user', + password: 'user' + }; + mockInternalUserService.tryLogin.withArgs(mockValue).and.returnValue(throwError(new Error(customMessage))); + component.form.setValue(mockValue); + component.onLoginButtonClick(); + + fixture.detectChanges(); + expect(component.message).toBe(customMessage); + expect((fixture.debugElement.query(By.css('p.mat-body')).nativeElement as + HTMLParagraphElement).textContent).toBe(customMessage); + }); + }); }); diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts b/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts index 082f879c..79a788de 100644 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts +++ b/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts @@ -1,4 +1,4 @@ -import { Component, Output, OnInit, EventEmitter } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; import { ActivatedRoute } from '@angular/router'; @@ -6,10 +6,6 @@ import { InternalUserService } from '../internal-user-service/internal-user.serv export type LoginMessage = 'nologin' | 'invalidlogin' | string; -export class LoginEvent { - username: string; - password: string; -} @Component({ selector: 'app-user-login', diff --git a/Timeline/ClientApp/src/app/user/user.module.ts b/Timeline/ClientApp/src/app/user/user.module.ts index 1e70d33d..c399c9e0 100644 --- a/Timeline/ClientApp/src/app/user/user.module.ts +++ b/Timeline/ClientApp/src/app/user/user.module.ts @@ -10,7 +10,7 @@ import { import { UserDialogComponent } from './user-dialog/user-dialog.component'; import { UserLoginComponent } from './user-login/user-login.component'; import { UserLoginSuccessComponent } from './user-login-success/user-login-success.component'; -import { UtilityModule } from '../utility/utility.module'; +import { UtilityModule } from '../utilities/utility.module'; import { RouterModule } from '@angular/router'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; diff --git a/Timeline/ClientApp/src/app/utilities/debounce-click.directive.spec.ts b/Timeline/ClientApp/src/app/utilities/debounce-click.directive.spec.ts new file mode 100644 index 00000000..75710d0c --- /dev/null +++ b/Timeline/ClientApp/src/app/utilities/debounce-click.directive.spec.ts @@ -0,0 +1,124 @@ +import { Component, ViewChild } from '@angular/core'; +import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; + +import { DebounceClickDirective } from './debounce-click.directive'; + +interface TestComponent { + clickHandler: () => void; +} + +@Component({ + selector: 'app-default-test', + template: '' +}) +class DefaultDebounceTimeTestComponent { + @ViewChild(DebounceClickDirective) + directive: DebounceClickDirective; + + clickHandler: () => void = () => { }; +} + +@Component({ + selector: 'app-default-test', + template: '' +}) +class CustomDebounceTimeTestComponent { + debounceTime: number; + + @ViewChild(DebounceClickDirective) + directive: DebounceClickDirective; + + clickHandler: () => void = () => { }; +} + + +describe('DebounceClickDirective', () => { + let counter: number; + + function initComponent(component: TestComponent) { + component.clickHandler = () => counter++; + } + + beforeEach(() => { + counter = 0; + }); + + describe('default debounce time', () => { + let component: DefaultDebounceTimeTestComponent; + let componentFixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DebounceClickDirective, DefaultDebounceTimeTestComponent] + }).compileComponents(); + })); + + beforeEach(() => { + componentFixture = TestBed.createComponent(DefaultDebounceTimeTestComponent); + component = componentFixture.componentInstance; + initComponent(component); + }); + + it('should create an instance', () => { + componentFixture.detectChanges(); + expect(component.directive).toBeTruthy(); + }); + + it('should work well', fakeAsync(() => { + function click() { + (componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click')); + } + componentFixture.detectChanges(); + expect(counter).toBe(0); + click(); + tick(300); + expect(counter).toBe(0); + click(); + tick(); + expect(counter).toBe(0); + tick(500); + expect(counter).toBe(1); + })); + }); + + + describe('custom debounce time', () => { + let component: CustomDebounceTimeTestComponent; + let componentFixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [DebounceClickDirective, CustomDebounceTimeTestComponent] + }).compileComponents(); + })); + + beforeEach(() => { + componentFixture = TestBed.createComponent(CustomDebounceTimeTestComponent); + component = componentFixture.componentInstance; + initComponent(component); + component.debounceTime = 600; + }); + + it('should create an instance', () => { + componentFixture.detectChanges(); + expect(component.directive).toBeTruthy(); + }); + + it('should work well', fakeAsync(() => { + function click() { + (componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click')); + } + componentFixture.detectChanges(); + expect(counter).toBe(0); + click(); + tick(300); + expect(counter).toBe(0); + click(); + tick(); + expect(counter).toBe(0); + tick(600); + expect(counter).toBe(1); + })); + }); +}); diff --git a/Timeline/ClientApp/src/app/utilities/debounce-click.directive.ts b/Timeline/ClientApp/src/app/utilities/debounce-click.directive.ts new file mode 100644 index 00000000..feb0404e --- /dev/null +++ b/Timeline/ClientApp/src/app/utilities/debounce-click.directive.ts @@ -0,0 +1,39 @@ +import { Directive, Output, Input, EventEmitter, ElementRef, OnInit, OnDestroy } from '@angular/core'; +import { fromEvent, Subscription } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; + +@Directive({ + selector: '[appDebounceClick]' +}) +export class DebounceClickDirective implements OnInit, OnDestroy { + + private subscription: Subscription; + + @Output('appDebounceClick') clickEvent = new EventEmitter(); + + // tslint:disable-next-line:no-input-rename + @Input('appDebounceClickTime') + set debounceTime(value: number) { + if (this.subscription) { + this.subscription.unsubscribe(); + } + this.subscription = fromEvent(this.element.nativeElement, 'click').pipe( + debounceTime(value) + ).subscribe(o => this.clickEvent.emit(o)); + } + + constructor(private element: ElementRef) { + } + + ngOnInit() { + if (!this.subscription) { + this.subscription = fromEvent(this.element.nativeElement, 'click').pipe( + debounceTime(500) + ).subscribe(o => this.clickEvent.emit(o)); + } + } + + ngOnDestroy() { + this.subscription.unsubscribe(); + } +} diff --git a/Timeline/ClientApp/src/app/utilities/utility.module.ts b/Timeline/ClientApp/src/app/utilities/utility.module.ts new file mode 100644 index 00000000..dd686bf7 --- /dev/null +++ b/Timeline/ClientApp/src/app/utilities/utility.module.ts @@ -0,0 +1,11 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { DebounceClickDirective } from './debounce-click.directive'; + +@NgModule({ + declarations: [DebounceClickDirective], + imports: [CommonModule], + exports: [DebounceClickDirective] +}) +export class UtilityModule { } diff --git a/Timeline/ClientApp/src/app/utility/debounce-click.directive.spec.ts b/Timeline/ClientApp/src/app/utility/debounce-click.directive.spec.ts deleted file mode 100644 index 75710d0c..00000000 --- a/Timeline/ClientApp/src/app/utility/debounce-click.directive.spec.ts +++ /dev/null @@ -1,124 +0,0 @@ -import { Component, ViewChild } from '@angular/core'; -import { async, TestBed, ComponentFixture, fakeAsync, tick } from '@angular/core/testing'; -import { By } from '@angular/platform-browser'; - -import { DebounceClickDirective } from './debounce-click.directive'; - -interface TestComponent { - clickHandler: () => void; -} - -@Component({ - selector: 'app-default-test', - template: '' -}) -class DefaultDebounceTimeTestComponent { - @ViewChild(DebounceClickDirective) - directive: DebounceClickDirective; - - clickHandler: () => void = () => { }; -} - -@Component({ - selector: 'app-default-test', - template: '' -}) -class CustomDebounceTimeTestComponent { - debounceTime: number; - - @ViewChild(DebounceClickDirective) - directive: DebounceClickDirective; - - clickHandler: () => void = () => { }; -} - - -describe('DebounceClickDirective', () => { - let counter: number; - - function initComponent(component: TestComponent) { - component.clickHandler = () => counter++; - } - - beforeEach(() => { - counter = 0; - }); - - describe('default debounce time', () => { - let component: DefaultDebounceTimeTestComponent; - let componentFixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [DebounceClickDirective, DefaultDebounceTimeTestComponent] - }).compileComponents(); - })); - - beforeEach(() => { - componentFixture = TestBed.createComponent(DefaultDebounceTimeTestComponent); - component = componentFixture.componentInstance; - initComponent(component); - }); - - it('should create an instance', () => { - componentFixture.detectChanges(); - expect(component.directive).toBeTruthy(); - }); - - it('should work well', fakeAsync(() => { - function click() { - (componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click')); - } - componentFixture.detectChanges(); - expect(counter).toBe(0); - click(); - tick(300); - expect(counter).toBe(0); - click(); - tick(); - expect(counter).toBe(0); - tick(500); - expect(counter).toBe(1); - })); - }); - - - describe('custom debounce time', () => { - let component: CustomDebounceTimeTestComponent; - let componentFixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [DebounceClickDirective, CustomDebounceTimeTestComponent] - }).compileComponents(); - })); - - beforeEach(() => { - componentFixture = TestBed.createComponent(CustomDebounceTimeTestComponent); - component = componentFixture.componentInstance; - initComponent(component); - component.debounceTime = 600; - }); - - it('should create an instance', () => { - componentFixture.detectChanges(); - expect(component.directive).toBeTruthy(); - }); - - it('should work well', fakeAsync(() => { - function click() { - (componentFixture.debugElement.query(By.css('button')).nativeElement).dispatchEvent(new MouseEvent('click')); - } - componentFixture.detectChanges(); - expect(counter).toBe(0); - click(); - tick(300); - expect(counter).toBe(0); - click(); - tick(); - expect(counter).toBe(0); - tick(600); - expect(counter).toBe(1); - })); - }); -}); diff --git a/Timeline/ClientApp/src/app/utility/debounce-click.directive.ts b/Timeline/ClientApp/src/app/utility/debounce-click.directive.ts deleted file mode 100644 index feb0404e..00000000 --- a/Timeline/ClientApp/src/app/utility/debounce-click.directive.ts +++ /dev/null @@ -1,39 +0,0 @@ -import { Directive, Output, Input, EventEmitter, ElementRef, OnInit, OnDestroy } from '@angular/core'; -import { fromEvent, Subscription } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; - -@Directive({ - selector: '[appDebounceClick]' -}) -export class DebounceClickDirective implements OnInit, OnDestroy { - - private subscription: Subscription; - - @Output('appDebounceClick') clickEvent = new EventEmitter(); - - // tslint:disable-next-line:no-input-rename - @Input('appDebounceClickTime') - set debounceTime(value: number) { - if (this.subscription) { - this.subscription.unsubscribe(); - } - this.subscription = fromEvent(this.element.nativeElement, 'click').pipe( - debounceTime(value) - ).subscribe(o => this.clickEvent.emit(o)); - } - - constructor(private element: ElementRef) { - } - - ngOnInit() { - if (!this.subscription) { - this.subscription = fromEvent(this.element.nativeElement, 'click').pipe( - debounceTime(500) - ).subscribe(o => this.clickEvent.emit(o)); - } - } - - ngOnDestroy() { - this.subscription.unsubscribe(); - } -} diff --git a/Timeline/ClientApp/src/app/utility/utility.module.ts b/Timeline/ClientApp/src/app/utility/utility.module.ts deleted file mode 100644 index dd686bf7..00000000 --- a/Timeline/ClientApp/src/app/utility/utility.module.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; - -import { DebounceClickDirective } from './debounce-click.directive'; - -@NgModule({ - declarations: [DebounceClickDirective], - imports: [CommonModule], - exports: [DebounceClickDirective] -}) -export class UtilityModule { } -- cgit v1.2.3