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/entities.ts | 9 +++++ .../user/user-dialog/user-dialog.component.html | 7 ++-- .../app/user/user-dialog/user-dialog.component.ts | 41 ++++++++++------------ Timeline/ClientApp/src/app/user/user-info.ts | 4 --- .../user-login-success.component.ts | 11 +++--- .../app/user/user-login/user-login.component.ts | 20 +++++++---- .../src/app/user/user-service/user.service.spec.ts | 13 ++++--- .../src/app/user/user-service/user.service.ts | 26 +++++++------- Timeline/ClientApp/src/app/user/user.module.ts | 9 ++++- 9 files changed, 81 insertions(+), 59 deletions(-) create mode 100644 Timeline/ClientApp/src/app/user/entities.ts delete mode 100644 Timeline/ClientApp/src/app/user/user-info.ts (limited to 'Timeline/ClientApp/src') diff --git a/Timeline/ClientApp/src/app/user/entities.ts b/Timeline/ClientApp/src/app/user/entities.ts new file mode 100644 index 00000000..6d432ec6 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/entities.ts @@ -0,0 +1,9 @@ +export interface UserCredentials { + username: string; + password: string; +} + +export interface UserInfo { + username: string; + roles: string[]; +} diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html index 50d6ba56..58dff0e4 100644 --- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html +++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.html @@ -1,5 +1,4 @@ -
- - - +
+ +
diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts index 7511de16..0edde924 100644 --- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts +++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts @@ -1,43 +1,40 @@ -import { Component, OnInit } from '@angular/core'; -import { UserInfo } from '../user-info'; +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { UserService } from '../user-service/user.service'; -import { LoginEvent, LoginMessage } from '../user-login/user-login.component'; +import { RouterOutlet, Router, ActivationStart } from '@angular/router'; @Component({ selector: 'app-user-dialog', templateUrl: './user-dialog.component.html', styleUrls: ['./user-dialog.component.css'] }) -export class UserDialogComponent implements OnInit { +export class UserDialogComponent implements OnInit, OnDestroy { - constructor(private userService: UserService) { } + constructor(private userService: UserService, private router: Router) { } - state: 'loading' | 'login' | 'success' = 'loading'; + @ViewChild(RouterOutlet) outlet: RouterOutlet; - loginMessage: LoginMessage; - - displayLoginSuccessMessage = false; - userInfo: UserInfo; + isLoading = true; ngOnInit() { + // this is a workaround for a bug. see https://github.com/angular/angular/issues/20694 + this.router.events.subscribe(e => { + if (e instanceof ActivationStart && e.snapshot.outlet === 'user') { + this.outlet.deactivate(); + } + }); + + this.userService.validateUserLoginState().subscribe(result => { + this.isLoading = false; if (result.state === 'success') { - this.userInfo = result.userInfo; - this.state = 'success'; + this.userService.userRouteNavigate(['success', { reason: 'already' }]); } else { - this.loginMessage = result.state; - this.state = 'login'; + this.userService.userRouteNavigate(['login', { reason: result.state }]); } }); } - login(event: LoginEvent) { - this.userService.tryLogin(event.username, event.password).subscribe(result => { - this.userInfo = result; - this.displayLoginSuccessMessage = true; - this.state = 'success'; - }, (error: Error) => { - this.loginMessage = error.message; - }); + ngOnDestroy() { + this.userService.userRouteNavigate(null); } } diff --git a/Timeline/ClientApp/src/app/user/user-info.ts b/Timeline/ClientApp/src/app/user/user-info.ts deleted file mode 100644 index 490b00ba..00000000 --- a/Timeline/ClientApp/src/app/user/user-info.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface UserInfo { - username: string; - roles: string[]; -} diff --git a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts index 99de5970..d141b3b6 100644 --- a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts +++ b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts @@ -1,5 +1,7 @@ import { Component, OnInit, Input } from '@angular/core'; -import { UserInfo } from '../user-info'; +import { UserInfo } from '../entities'; +import { UserService } from '../user-service/user.service'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-user-login-success', @@ -8,15 +10,14 @@ import { UserInfo } from '../user-info'; }) export class UserLoginSuccessComponent implements OnInit { - @Input() displayLoginSuccessMessage = false; - @Input() userInfo: UserInfo; - constructor() { } + constructor(private route: ActivatedRoute, private userService: UserService) { } ngOnInit() { + this.userInfo = this.userService.userInfo; + this.displayLoginSuccessMessage = this.route.snapshot.paramMap.get('reason') === 'login'; } - } 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 da642cb8..971d57ce 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,5 +1,7 @@ -import { Component, Output, OnInit, EventEmitter, Input } from '@angular/core'; +import { Component, Output, OnInit, EventEmitter } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; +import { UserService } from '../user-service/user.service'; +import { ActivatedRoute } from '@angular/router'; export type LoginMessage = 'nologin' | 'invalidlogin' | string; @@ -13,20 +15,24 @@ export class LoginEvent { templateUrl: './user-login.component.html', styleUrls: ['./user-login.component.css'] }) -export class UserLoginComponent { +export class UserLoginComponent implements OnInit { - @Input() - message: LoginMessage; + constructor(private route: ActivatedRoute, private userService: UserService) { } - @Output() - login = new EventEmitter(); + message: string; form = new FormGroup({ username: new FormControl(''), password: new FormControl('') }); + ngOnInit() { + this.message = this.route.snapshot.paramMap.get('reason'); + } + onLoginButtonClick() { - this.login.emit(this.form.value); + this.userService.tryLogin(this.form.value).subscribe(_ => { + this.userService.userRouteNavigate(['success', { reason: 'login' }]); + }, (error: Error) => this.message = error.message); } } diff --git a/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts b/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts index 0095f031..9effe000 100644 --- a/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts +++ b/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts @@ -2,15 +2,20 @@ import { TestBed } from '@angular/core/testing'; import { HttpRequest } from '@angular/common/http'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; -import { UserInfo } from '../user-info'; +import { UserInfo, UserCredentials } from '../entities'; import { - UserService, UserCredentials, CreateTokenResult, + UserService, CreateTokenResult, UserLoginState, TokenValidationRequest, TokenValidationResult } from './user.service'; describe('UserService', () => { const tokenCreateUrl = '/api/User/CreateToken'; + const mockUserCredentials: UserCredentials = { + username: 'user', + password: 'user' + }; + beforeEach(() => TestBed.configureTestingModule({ imports: [HttpClientTestingModule] })); @@ -35,7 +40,7 @@ describe('UserService', () => { roles: ['user', 'other'] }; - service.tryLogin('user', 'user').subscribe(result => { + service.tryLogin(mockUserCredentials).subscribe(result => { expect(result).toEqual(mockUserInfo); }); @@ -71,7 +76,7 @@ describe('UserService', () => { service = TestBed.get(UserService); httpController = TestBed.get(HttpTestingController); - service.tryLogin('user', 'user').subscribe(); // subscribe to activate login + service.tryLogin(mockUserCredentials).subscribe(); // subscribe to activate login httpController.expectOne(tokenCreateUrl).flush({ token: mockToken, diff --git a/Timeline/ClientApp/src/app/user/user-service/user.service.ts b/Timeline/ClientApp/src/app/user/user-service/user.service.ts index 009e5292..e535537d 100644 --- a/Timeline/ClientApp/src/app/user/user-service/user.service.ts +++ b/Timeline/ClientApp/src/app/user/user-service/user.service.ts @@ -3,12 +3,8 @@ import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Observable, of, throwError } from 'rxjs'; import { map, catchError, retry } from 'rxjs/operators'; -import { UserInfo } from '../user-info'; - -export interface UserCredentials { - username: string; - password: string; -} +import { UserCredentials, UserInfo } from '../entities'; +import { Router } from '@angular/router'; export interface CreateTokenResult { token: string; @@ -53,9 +49,17 @@ export class BadCredentialsException extends Error { export class UserService { private token: string; - private userInfo: UserInfo; + userInfo: UserInfo; - constructor(private httpClient: HttpClient) { } + constructor(private httpClient: HttpClient, private router: Router) { } + + userRouteNavigate(commands: any[]) { + this.router.navigate([{ + outlets: { + user: commands + } + }]); + } validateUserLoginState(): Observable { if (this.token === undefined || this.token === null) { @@ -86,14 +90,12 @@ export class UserService { ); } - tryLogin(username: string, password: string): Observable { + tryLogin(credentials: UserCredentials): Observable { if (this.token) { return throwError(new AlreadyLoginException()); } - return this.httpClient.post('/api/User/CreateToken', { - username, password - }).pipe( + return this.httpClient.post('/api/User/CreateToken', credentials).pipe( catchError((error: HttpErrorResponse) => { if (error.error instanceof ErrorEvent) { console.error('An error occurred when login: ' + error.error.message); 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 76300141a6411c05d585994d5f19938bfe45838e Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 9 Mar 2019 21:36:55 +0800 Subject: Seperate internal and public user service. --- Timeline/ClientApp/src/app/app.component.ts | 9 +- .../src/app/user/internal-user-service/errors.ts | 25 +++++ .../user/internal-user-service/http-entities.ts | 17 +++ .../internal-user.service.spec.ts | 119 +++++++++++++++++++++ .../internal-user-service/internal-user.service.ts | 93 ++++++++++++++++ .../user/user-dialog/user-dialog.component.spec.ts | 22 ++-- .../app/user/user-dialog/user-dialog.component.ts | 10 +- .../user-login-success.component.ts | 9 +- .../app/user/user-login/user-login.component.ts | 7 +- .../src/app/user/user-service/user.service.spec.ts | 119 --------------------- .../src/app/user/user-service/user.service.ts | 118 -------------------- Timeline/ClientApp/src/app/user/user.service.ts | 33 ++++++ 12 files changed, 315 insertions(+), 266 deletions(-) create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/errors.ts create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts delete mode 100644 Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts delete mode 100644 Timeline/ClientApp/src/app/user/user-service/user.service.ts create mode 100644 Timeline/ClientApp/src/app/user/user.service.ts (limited to 'Timeline/ClientApp/src') diff --git a/Timeline/ClientApp/src/app/app.component.ts b/Timeline/ClientApp/src/app/app.component.ts index 0e2a9799..ee02f833 100644 --- a/Timeline/ClientApp/src/app/app.component.ts +++ b/Timeline/ClientApp/src/app/app.component.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; -import { MatDialog } from '@angular/material'; -import { UserDialogComponent } from './user/user-dialog/user-dialog.component'; +import { UserService } from './user/user.service'; @Component({ selector: 'app-root', @@ -9,11 +8,9 @@ import { UserDialogComponent } from './user/user-dialog/user-dialog.component'; }) export class AppComponent { - constructor(private dialog: MatDialog) { } + constructor(private userService: UserService) { } openUserDialog() { - this.dialog.open(UserDialogComponent, { - width: '300px' - }); + this.userService.openUserDialog(); } } diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/errors.ts b/Timeline/ClientApp/src/app/user/internal-user-service/errors.ts new file mode 100644 index 00000000..22e44dd6 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/errors.ts @@ -0,0 +1,25 @@ +export abstract class LoginError extends Error { } + +export class BadNetworkError extends LoginError { + constructor() { + super('Network is bad.'); + } +} + +export class AlreadyLoginError extends LoginError { + constructor() { + super('Internal logical error. There is already a token saved. Please call validateUserLoginState first.'); + } +} + +export class BadCredentialsError extends LoginError { + constructor() { + super('Username or password is wrong.'); + } +} + +export class UnknownError extends LoginError { + constructor(public internalError?: any) { + super('Sorry, unknown error occured!'); + } +} diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts b/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts new file mode 100644 index 00000000..1335b407 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts @@ -0,0 +1,17 @@ +import { UserCredentials, UserInfo } from '../entities'; + +export type CreateTokenRequest = UserCredentials; + +export interface CreateTokenResponse { + token: string; + userInfo: UserInfo; +} + +export interface ValidateTokenRequest { + token: string; +} + +export interface ValidateTokenResponse { + isValid: boolean; + userInfo?: UserInfo; +} diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts new file mode 100644 index 00000000..4a2c78f8 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts @@ -0,0 +1,119 @@ +import { TestBed } from '@angular/core/testing'; +import { HttpRequest } from '@angular/common/http'; +import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; + +import { UserInfo, UserCredentials } from '../entities'; +import { + InternalUserService, CreateTokenResult, + UserLoginState, TokenValidationRequest, TokenValidationResult +} from './internal-user.service'; + +describe('UserService', () => { + const tokenCreateUrl = '/api/User/CreateToken'; + + const mockUserCredentials: UserCredentials = { + username: 'user', + password: 'user' + }; + + beforeEach(() => TestBed.configureTestingModule({ + imports: [HttpClientTestingModule] + })); + + it('should be created', () => { + const service: InternalUserService = TestBed.get(InternalUserService); + expect(service).toBeTruthy(); + }); + + it('should be nologin at first', () => { + const service: InternalUserService = TestBed.get(InternalUserService); + service.refreshAndGetUserState().subscribe(result => { + expect(result.state).toBe('nologin'); + }); + }); + + it('login should work well', () => { + const service: InternalUserService = TestBed.get(InternalUserService); + + const mockUserInfo: UserInfo = { + username: 'user', + roles: ['user', 'other'] + }; + + service.tryLogin(mockUserCredentials).subscribe(result => { + expect(result).toEqual(mockUserInfo); + }); + + const httpController = TestBed.get(HttpTestingController) as HttpTestingController; + + httpController.expectOne((request: HttpRequest) => + request.url === tokenCreateUrl && + request.body.username === 'user' && + request.body.password === 'user').flush({ + token: 'test-token', + userInfo: mockUserInfo + }); + + httpController.verify(); + }); + + describe('validateUserLoginState', () => { + let service: InternalUserService; + let httpController: HttpTestingController; + + const mockUserInfo: UserInfo = { + username: 'user', + roles: ['user', 'other'] + }; + + const mockToken = 'mock-token'; + + const tokenValidateRequestMatcher = (req: HttpRequest) => { + return req.url === '/api/User/ValidateToken' && req.body.token === mockToken; + }; + + beforeEach(() => { + service = TestBed.get(InternalUserService); + httpController = TestBed.get(HttpTestingController); + + service.tryLogin(mockUserCredentials).subscribe(); // subscribe to activate login + + httpController.expectOne(tokenCreateUrl).flush({ + token: mockToken, + userInfo: mockUserInfo + }); + }); + + it('success should work well', () => { + service.refreshAndGetUserState().subscribe((result: UserLoginState) => { + expect(result).toEqual({ + state: 'success', + userInfo: mockUserInfo + }); + }); + + httpController.expectOne(tokenValidateRequestMatcher).flush({ + isValid: true, + userInfo: mockUserInfo + }); + + httpController.verify(); + }); + + it('invalid should work well', () => { + service.refreshAndGetUserState().subscribe((result: UserLoginState) => { + expect(result).toEqual({ + state: 'invalidlogin' + }); + }); + + httpController.expectOne(tokenValidateRequestMatcher).flush({ + isValid: false + }); + + httpController.verify(); + }); + }); + + // TODO: test on error situations. +}); diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts new file mode 100644 index 00000000..f6987d7d --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts @@ -0,0 +1,93 @@ +import { Injectable } from '@angular/core'; +import { HttpClient, HttpErrorResponse } from '@angular/common/http'; +import { Router } from '@angular/router'; + +import { Observable, of, throwError, BehaviorSubject } from 'rxjs'; +import { map, catchError, retry } from 'rxjs/operators'; + +import { AlreadyLoginError, BadCredentialsError, BadNetworkError, UnknownError } from './errors'; +import { CreateTokenRequest, CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse } from './http-entities'; +import { UserCredentials, UserInfo } from '../entities'; + + +export type UserLoginState = 'nologin' | 'invalidlogin' | 'success'; + +/** + * This service is only used internal in user module. + */ +@Injectable({ + providedIn: 'root' +}) +export class InternalUserService { + + private token: string; + private userInfoSubject = new BehaviorSubject(null); + + get currentUserInfo(): UserInfo | null { + return this.userInfoSubject.value; + } + + get userInfo$(): Observable { + return this.userInfoSubject; + } + + constructor(private httpClient: HttpClient, private router: Router) { } + + userRouteNavigate(commands: any[]) { + this.router.navigate([{ + outlets: { + user: commands + } + }]); + } + + refreshAndGetUserState(): Observable { + if (this.token === undefined || this.token === null) { + return of('nologin'); + } + + return this.httpClient.post('/api/User/ValidateToken', { token: this.token }).pipe( + retry(3), + catchError(error => { + console.error('Failed to validate token.'); + return throwError(error); + }), + map(result => { + if (result.isValid) { + this.userInfoSubject.next(result.userInfo); + return 'success'; + } else { + this.token = null; + this.userInfoSubject.next(null); + return 'invalidlogin'; + } + }) + ); + } + + tryLogin(credentials: UserCredentials): Observable { + if (this.token) { + return throwError(new AlreadyLoginError()); + } + + return this.httpClient.post('/api/User/CreateToken', credentials).pipe( + catchError((error: HttpErrorResponse) => { + if (error.error instanceof ErrorEvent) { + console.error('An error occurred when login: ' + error.error.message); + return throwError(new BadNetworkError()); + } else if (error.status === 400) { + console.error('An error occurred when login: wrong credentials.'); + return throwError(new BadCredentialsError()); + } else { + console.error('An unknown error occurred when login: ' + error); + return throwError(new UnknownError(error)); + } + }), + map(result => { + this.token = result.token; + this.userInfoSubject.next(result.userInfo); + return result.userInfo; + }) + ); + } +} 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 d24c0cd2..dd7af6ca 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 @@ -4,9 +4,9 @@ import { By } from '@angular/platform-browser'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; -import { UserInfo } from '../user-info'; +import { UserInfo } from '../entities'; import { UserDialogComponent } from './user-dialog.component'; -import { UserService, UserLoginState } from '../user-service/user.service'; +import { InternalUserService, UserLoginState } from '../internal-user-service/internal-user.service'; import { LoginEvent } from '../user-login/user-login.component'; @Component({ @@ -38,7 +38,7 @@ class UserLoginSuccessStubComponent { } describe('UserDialogComponent', () => { let component: UserDialogComponent; let fixture: ComponentFixture; - let mockUserService: jasmine.SpyObj; + let mockUserService: jasmine.SpyObj; beforeEach(async(() => { mockUserService = jasmine.createSpyObj('UserService', ['validateUserLoginState', 'tryLogin']); @@ -46,7 +46,7 @@ describe('UserDialogComponent', () => { TestBed.configureTestingModule({ declarations: [UserDialogComponent, MatProgressSpinnerStubComponent, UserLoginStubComponent, UserLoginSuccessStubComponent], - providers: [{ provide: UserService, useValue: mockUserService }] + providers: [{ provide: InternalUserService, useValue: mockUserService }] }) .compileComponents(); })); @@ -57,7 +57,7 @@ describe('UserDialogComponent', () => { }); it('progress spinner should work well', fakeAsync(() => { - mockUserService.validateUserLoginState.and.returnValue(of({ state: 'nologin' }).pipe(delay(10))); + mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' }).pipe(delay(10))); fixture.detectChanges(); expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); tick(10); @@ -66,30 +66,30 @@ describe('UserDialogComponent', () => { })); it('nologin should work well', () => { - mockUserService.validateUserLoginState.and.returnValue(of({ state: 'nologin' })); + mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' })); fixture.detectChanges(); - expect(mockUserService.validateUserLoginState).toHaveBeenCalled(); + expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); expect(fixture.debugElement.query(By.css('app-user-login'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeFalsy(); }); it('success should work well', () => { - mockUserService.validateUserLoginState.and.returnValue(of({ state: 'success', userInfo: {} })); + mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'success', userInfo: {} })); fixture.detectChanges(); - expect(mockUserService.validateUserLoginState).toHaveBeenCalled(); + expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); expect(fixture.debugElement.query(By.css('app-user-login'))).toBeFalsy(); expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeTruthy(); }); it('login should work well', () => { - mockUserService.validateUserLoginState.and.returnValue(of({ state: 'nologin' })); + mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' })); fixture.detectChanges(); - expect(mockUserService.validateUserLoginState).toHaveBeenCalled(); + expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); expect(fixture.debugElement.query(By.css('app-user-login'))).toBeTruthy(); expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeFalsy(); diff --git a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts index 0edde924..498ffaa1 100644 --- a/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts +++ b/Timeline/ClientApp/src/app/user/user-dialog/user-dialog.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; -import { UserService } from '../user-service/user.service'; +import { InternalUserService } from '../internal-user-service/internal-user.service'; import { RouterOutlet, Router, ActivationStart } from '@angular/router'; @Component({ @@ -9,7 +9,7 @@ import { RouterOutlet, Router, ActivationStart } from '@angular/router'; }) export class UserDialogComponent implements OnInit, OnDestroy { - constructor(private userService: UserService, private router: Router) { } + constructor(private userService: InternalUserService, private router: Router) { } @ViewChild(RouterOutlet) outlet: RouterOutlet; @@ -24,12 +24,12 @@ export class UserDialogComponent implements OnInit, OnDestroy { }); - this.userService.validateUserLoginState().subscribe(result => { + this.userService.refreshAndGetUserState().subscribe(result => { this.isLoading = false; - if (result.state === 'success') { + if (result === 'success') { this.userService.userRouteNavigate(['success', { reason: 'already' }]); } else { - this.userService.userRouteNavigate(['login', { reason: result.state }]); + this.userService.userRouteNavigate(['login', { reason: result }]); } }); } diff --git a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts index d141b3b6..48e331d6 100644 --- a/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts +++ b/Timeline/ClientApp/src/app/user/user-login-success/user-login-success.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit, Input } from '@angular/core'; -import { UserInfo } from '../entities'; -import { UserService } from '../user-service/user.service'; import { ActivatedRoute } from '@angular/router'; +import { UserInfo } from '../entities'; +import { InternalUserService } from '../internal-user-service/internal-user.service'; + @Component({ selector: 'app-user-login-success', templateUrl: './user-login-success.component.html', @@ -14,10 +15,10 @@ export class UserLoginSuccessComponent implements OnInit { userInfo: UserInfo; - constructor(private route: ActivatedRoute, private userService: UserService) { } + constructor(private route: ActivatedRoute, private userService: InternalUserService) { } ngOnInit() { - this.userInfo = this.userService.userInfo; + this.userInfo = this.userService.currentUserInfo; this.displayLoginSuccessMessage = this.route.snapshot.paramMap.get('reason') === 'login'; } } 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 971d57ce..082f879c 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,8 +1,9 @@ import { Component, Output, OnInit, EventEmitter } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; -import { UserService } from '../user-service/user.service'; import { ActivatedRoute } from '@angular/router'; +import { InternalUserService } from '../internal-user-service/internal-user.service'; + export type LoginMessage = 'nologin' | 'invalidlogin' | string; export class LoginEvent { @@ -17,9 +18,9 @@ export class LoginEvent { }) export class UserLoginComponent implements OnInit { - constructor(private route: ActivatedRoute, private userService: UserService) { } + constructor(private route: ActivatedRoute, private userService: InternalUserService) { } - message: string; + message: LoginMessage; form = new FormGroup({ username: new FormControl(''), diff --git a/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts b/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts deleted file mode 100644 index 9effe000..00000000 --- a/Timeline/ClientApp/src/app/user/user-service/user.service.spec.ts +++ /dev/null @@ -1,119 +0,0 @@ -import { TestBed } from '@angular/core/testing'; -import { HttpRequest } from '@angular/common/http'; -import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; - -import { UserInfo, UserCredentials } from '../entities'; -import { - UserService, CreateTokenResult, - UserLoginState, TokenValidationRequest, TokenValidationResult -} from './user.service'; - -describe('UserService', () => { - const tokenCreateUrl = '/api/User/CreateToken'; - - const mockUserCredentials: UserCredentials = { - username: 'user', - password: 'user' - }; - - beforeEach(() => TestBed.configureTestingModule({ - imports: [HttpClientTestingModule] - })); - - it('should be created', () => { - const service: UserService = TestBed.get(UserService); - expect(service).toBeTruthy(); - }); - - it('should be nologin at first', () => { - const service: UserService = TestBed.get(UserService); - service.validateUserLoginState().subscribe(result => { - expect(result.state).toBe('nologin'); - }); - }); - - it('login should work well', () => { - const service: UserService = TestBed.get(UserService); - - const mockUserInfo: UserInfo = { - username: 'user', - roles: ['user', 'other'] - }; - - service.tryLogin(mockUserCredentials).subscribe(result => { - expect(result).toEqual(mockUserInfo); - }); - - const httpController = TestBed.get(HttpTestingController) as HttpTestingController; - - httpController.expectOne((request: HttpRequest) => - request.url === tokenCreateUrl && - request.body.username === 'user' && - request.body.password === 'user').flush({ - token: 'test-token', - userInfo: mockUserInfo - }); - - httpController.verify(); - }); - - describe('validateUserLoginState', () => { - let service: UserService; - let httpController: HttpTestingController; - - const mockUserInfo: UserInfo = { - username: 'user', - roles: ['user', 'other'] - }; - - const mockToken = 'mock-token'; - - const tokenValidateRequestMatcher = (req: HttpRequest) => { - return req.url === '/api/User/ValidateToken' && req.body.token === mockToken; - }; - - beforeEach(() => { - service = TestBed.get(UserService); - httpController = TestBed.get(HttpTestingController); - - service.tryLogin(mockUserCredentials).subscribe(); // subscribe to activate login - - httpController.expectOne(tokenCreateUrl).flush({ - token: mockToken, - userInfo: mockUserInfo - }); - }); - - it('success should work well', () => { - service.validateUserLoginState().subscribe((result: UserLoginState) => { - expect(result).toEqual({ - state: 'success', - userInfo: mockUserInfo - }); - }); - - httpController.expectOne(tokenValidateRequestMatcher).flush({ - isValid: true, - userInfo: mockUserInfo - }); - - httpController.verify(); - }); - - it('invalid should work well', () => { - service.validateUserLoginState().subscribe((result: UserLoginState) => { - expect(result).toEqual({ - state: 'invalidlogin' - }); - }); - - httpController.expectOne(tokenValidateRequestMatcher).flush({ - isValid: false - }); - - httpController.verify(); - }); - }); - - // TODO: test on error situations. -}); diff --git a/Timeline/ClientApp/src/app/user/user-service/user.service.ts b/Timeline/ClientApp/src/app/user/user-service/user.service.ts deleted file mode 100644 index e535537d..00000000 --- a/Timeline/ClientApp/src/app/user/user-service/user.service.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { Injectable } from '@angular/core'; -import { HttpClient, HttpErrorResponse } from '@angular/common/http'; -import { Observable, of, throwError } from 'rxjs'; -import { map, catchError, retry } from 'rxjs/operators'; - -import { UserCredentials, UserInfo } from '../entities'; -import { Router } from '@angular/router'; - -export interface CreateTokenResult { - token: string; - userInfo: UserInfo; -} - -export interface TokenValidationRequest { - token: string; -} - -export interface TokenValidationResult { - isValid: boolean; - userInfo?: UserInfo; -} - -export interface UserLoginState { - state: 'nologin' | 'invalidlogin' | 'success'; - userInfo?: UserInfo; -} - -export class BadNetworkException extends Error { - constructor() { - super('Network is bad.'); - } -} - -export class AlreadyLoginException extends Error { - constructor() { - super('There is already a token saved. Please call validateUserLoginState first.'); - } -} - -export class BadCredentialsException extends Error { - constructor() { - super(`Username or password is wrong.`); - } -} - -@Injectable({ - providedIn: 'root' -}) -export class UserService { - - private token: string; - userInfo: UserInfo; - - constructor(private httpClient: HttpClient, private router: Router) { } - - userRouteNavigate(commands: any[]) { - this.router.navigate([{ - outlets: { - user: commands - } - }]); - } - - validateUserLoginState(): Observable { - if (this.token === undefined || this.token === null) { - return of({ state: 'nologin' }); - } - - return this.httpClient.post('/api/User/ValidateToken', { token: this.token }).pipe( - retry(3), - catchError(error => { - console.error('Failed to validate token.'); - return throwError(error); - }), - map(result => { - if (result.isValid) { - this.userInfo = result.userInfo; - return { - state: 'success', - userInfo: result.userInfo - }; - } else { - this.token = null; - this.userInfo = null; - return { - state: 'invalidlogin' - }; - } - }) - ); - } - - tryLogin(credentials: UserCredentials): Observable { - if (this.token) { - return throwError(new AlreadyLoginException()); - } - - return this.httpClient.post('/api/User/CreateToken', credentials).pipe( - catchError((error: HttpErrorResponse) => { - if (error.error instanceof ErrorEvent) { - console.error('An error occurred when login: ' + error.error.message); - return throwError(new BadNetworkException()); - } else if (error.status === 400) { - console.error('An error occurred when login: wrong credentials.'); - return throwError(new BadCredentialsException()); - } else { - console.error('An unknown error occurred when login: ' + error); - return throwError(error); - } - }), - map(result => { - this.token = result.token; - this.userInfo = result.userInfo; - return result.userInfo; - }) - ); - } -} diff --git a/Timeline/ClientApp/src/app/user/user.service.ts b/Timeline/ClientApp/src/app/user/user.service.ts new file mode 100644 index 00000000..e876706c --- /dev/null +++ b/Timeline/ClientApp/src/app/user/user.service.ts @@ -0,0 +1,33 @@ +import { Injectable } from '@angular/core'; +import { MatDialog } from '@angular/material'; + +import { Observable } from 'rxjs'; + +import { UserInfo } from './entities'; +import { InternalUserService } from './internal-user-service/internal-user.service'; +import { UserDialogComponent } from './user-dialog/user-dialog.component'; + + +/** + * This service provides public api of user module. + */ +@Injectable({ + providedIn: 'root' +}) +export class UserService { + constructor(private dialog: MatDialog, private internalService: InternalUserService) { } + + get currentUserInfo(): UserInfo | null { + return this.internalService.currentUserInfo; + } + + get userInfo$(): Observable { + return this.internalService.userInfo$; + } + + openUserDialog() { + this.dialog.open(UserDialogComponent, { + width: '300px' + }); + } +} -- cgit v1.2.3 From e72a1cc3f98e45aee6eb29d3281118fa8373233f Mon Sep 17 00:00:00 2001 From: crupest Date: Sat, 9 Mar 2019 23:40:06 +0800 Subject: Half work! --- .../internal-user.service.spec.ts | 40 +++++------ .../mock-internal-user-service.ts | 5 ++ .../ClientApp/src/app/user/mock-activated-route.ts | 43 +++++++++++ .../user/user-dialog/user-dialog.component.spec.ts | 84 ++++++++-------------- .../user/user-login/user-login.component.spec.ts | 11 +++ 5 files changed, 106 insertions(+), 77 deletions(-) create mode 100644 Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.ts create mode 100644 Timeline/ClientApp/src/app/user/mock-activated-route.ts (limited to 'Timeline/ClientApp/src') diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts index 4a2c78f8..8aadd873 100644 --- a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts @@ -1,14 +1,13 @@ import { TestBed } from '@angular/core/testing'; import { HttpRequest } from '@angular/common/http'; import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'; +import { Router } from '@angular/router'; import { UserInfo, UserCredentials } from '../entities'; -import { - InternalUserService, CreateTokenResult, - UserLoginState, TokenValidationRequest, TokenValidationResult -} from './internal-user.service'; +import { CreateTokenRequest, CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse } from './http-entities'; +import { InternalUserService, UserLoginState } from './internal-user.service'; -describe('UserService', () => { +describe('InternalUserService', () => { const tokenCreateUrl = '/api/User/CreateToken'; const mockUserCredentials: UserCredentials = { @@ -17,7 +16,8 @@ describe('UserService', () => { }; beforeEach(() => TestBed.configureTestingModule({ - imports: [HttpClientTestingModule] + imports: [HttpClientTestingModule], + providers: [{ provide: Router, useValue: null }] })); it('should be created', () => { @@ -27,8 +27,9 @@ describe('UserService', () => { it('should be nologin at first', () => { const service: InternalUserService = TestBed.get(InternalUserService); + expect(service.currentUserInfo).toBe(null); service.refreshAndGetUserState().subscribe(result => { - expect(result.state).toBe('nologin'); + expect(result).toBe('nologin'); }); }); @@ -46,14 +47,16 @@ describe('UserService', () => { const httpController = TestBed.get(HttpTestingController) as HttpTestingController; - httpController.expectOne((request: HttpRequest) => + httpController.expectOne((request: HttpRequest) => request.url === tokenCreateUrl && request.body.username === 'user' && - request.body.password === 'user').flush({ + request.body.password === 'user').flush({ token: 'test-token', userInfo: mockUserInfo }); + expect(service.currentUserInfo).toEqual(mockUserInfo); + httpController.verify(); }); @@ -68,7 +71,7 @@ describe('UserService', () => { const mockToken = 'mock-token'; - const tokenValidateRequestMatcher = (req: HttpRequest) => { + const tokenValidateRequestMatcher = (req: HttpRequest) => { return req.url === '/api/User/ValidateToken' && req.body.token === mockToken; }; @@ -78,7 +81,7 @@ describe('UserService', () => { service.tryLogin(mockUserCredentials).subscribe(); // subscribe to activate login - httpController.expectOne(tokenCreateUrl).flush({ + httpController.expectOne(tokenCreateUrl).flush({ token: mockToken, userInfo: mockUserInfo }); @@ -86,13 +89,10 @@ describe('UserService', () => { it('success should work well', () => { service.refreshAndGetUserState().subscribe((result: UserLoginState) => { - expect(result).toEqual({ - state: 'success', - userInfo: mockUserInfo - }); + expect(result).toEqual('success'); }); - httpController.expectOne(tokenValidateRequestMatcher).flush({ + httpController.expectOne(tokenValidateRequestMatcher).flush({ isValid: true, userInfo: mockUserInfo }); @@ -102,14 +102,10 @@ describe('UserService', () => { it('invalid should work well', () => { service.refreshAndGetUserState().subscribe((result: UserLoginState) => { - expect(result).toEqual({ - state: 'invalidlogin' - }); + expect(result).toEqual('invalidlogin'); }); - httpController.expectOne(tokenValidateRequestMatcher).flush({ - isValid: false - }); + httpController.expectOne(tokenValidateRequestMatcher).flush({ isValid: false }); httpController.verify(); }); 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 new file mode 100644 index 00000000..f4a85262 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/internal-user-service/mock-internal-user-service.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/mock-activated-route.ts b/Timeline/ClientApp/src/app/user/mock-activated-route.ts new file mode 100644 index 00000000..9e516e83 --- /dev/null +++ b/Timeline/ClientApp/src/app/user/mock-activated-route.ts @@ -0,0 +1,43 @@ +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 dd7af6ca..ca7c024d 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 @@ -1,13 +1,13 @@ -import { Component, Output, EventEmitter } from '@angular/core'; +import { Component } from '@angular/core'; import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { of } from 'rxjs'; +import { Router, Event } from '@angular/router'; +import { of, Observable } from 'rxjs'; import { delay } from 'rxjs/operators'; -import { UserInfo } from '../entities'; import { UserDialogComponent } from './user-dialog.component'; +import { createMockInternalUserService } from '../internal-user-service/mock-internal-user-service'; import { InternalUserService, UserLoginState } from '../internal-user-service/internal-user.service'; -import { LoginEvent } from '../user-login/user-login.component'; @Component({ /* tslint:disable-next-line:component-selector*/ @@ -17,36 +17,30 @@ import { LoginEvent } from '../user-login/user-login.component'; class MatProgressSpinnerStubComponent { } @Component({ - selector: 'app-user-login', - /* tslint:disable-next-line:use-input-property-decorator*/ - inputs: ['message'], + /* tslint:disable-next-line:component-selector*/ + selector: 'router-outlet', template: '' }) -class UserLoginStubComponent { - @Output() - login = new EventEmitter(); -} +class RouterOutletStubComponent { } -@Component({ - selector: 'app-user-login-success', - /* tslint:disable-next-line:use-input-property-decorator*/ - inputs: ['userInfo', 'displayLoginSuccessMessage'], - template: '' -}) -class UserLoginSuccessStubComponent { } describe('UserDialogComponent', () => { let component: UserDialogComponent; let fixture: ComponentFixture; - let mockUserService: jasmine.SpyObj; + let mockInternalUserService: jasmine.SpyObj; + beforeEach(async(() => { - mockUserService = jasmine.createSpyObj('UserService', ['validateUserLoginState', 'tryLogin']); + mockInternalUserService = createMockInternalUserService(); TestBed.configureTestingModule({ - declarations: [UserDialogComponent, MatProgressSpinnerStubComponent, - UserLoginStubComponent, UserLoginSuccessStubComponent], - providers: [{ provide: InternalUserService, useValue: mockUserService }] + declarations: [UserDialogComponent, MatProgressSpinnerStubComponent, RouterOutletStubComponent], + providers: [{ provide: InternalUserService, useValue: mockInternalUserService }, + { // for the workaround + provide: Router, useValue: { + events: new Observable() + } + }] }) .compileComponents(); })); @@ -57,7 +51,7 @@ describe('UserDialogComponent', () => { }); it('progress spinner should work well', fakeAsync(() => { - mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' }).pipe(delay(10))); + mockInternalUserService.refreshAndGetUserState.and.returnValue(of('nologin').pipe(delay(10))); fixture.detectChanges(); expect(fixture.debugElement.query(By.css('mat-progress-spinner'))).toBeTruthy(); tick(10); @@ -66,49 +60,29 @@ describe('UserDialogComponent', () => { })); it('nologin should work well', () => { - mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' })); + mockInternalUserService.refreshAndGetUserState.and.returnValue(of('nologin')); fixture.detectChanges(); - expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); - expect(fixture.debugElement.query(By.css('app-user-login'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeFalsy(); + expect(mockInternalUserService.refreshAndGetUserState).toHaveBeenCalled(); + expect(mockInternalUserService.userRouteNavigate).toHaveBeenCalledWith(['login', { reason: 'nologin' }]); }); - it('success should work well', () => { - mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'success', userInfo: {} })); + it('invalid login should work well', () => { + mockInternalUserService.refreshAndGetUserState.and.returnValue(of('invalidlogin')); fixture.detectChanges(); - expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); - expect(fixture.debugElement.query(By.css('app-user-login'))).toBeFalsy(); - expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeTruthy(); + expect(mockInternalUserService.refreshAndGetUserState).toHaveBeenCalled(); + expect(mockInternalUserService.userRouteNavigate).toHaveBeenCalledWith(['login', { reason: 'invalidlogin' }]); }); - it('login should work well', () => { - mockUserService.refreshAndGetUserState.and.returnValue(of({ state: 'nologin' })); - - fixture.detectChanges(); - expect(mockUserService.refreshAndGetUserState).toHaveBeenCalled(); - expect(fixture.debugElement.query(By.css('app-user-login'))).toBeTruthy(); - expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeFalsy(); - - mockUserService.tryLogin.withArgs('user', 'user').and.returnValue(of({ - username: 'user', - roles: ['user'] - })); - - (fixture.debugElement.query(By.css('app-user-login')).componentInstance as - UserLoginStubComponent).login.emit({ - username: 'user', - password: 'user' - }); + it('success should work well', () => { + mockInternalUserService.refreshAndGetUserState.and.returnValue(of('success')); fixture.detectChanges(); - expect(mockUserService.tryLogin).toHaveBeenCalledWith('user', 'user'); - - expect(fixture.debugElement.query(By.css('app-user-login'))).toBeFalsy(); - expect(fixture.debugElement.query(By.css('app-user-login-success'))).toBeTruthy(); + expect(mockInternalUserService.refreshAndGetUserState).toHaveBeenCalled(); + expect(mockInternalUserService.userRouteNavigate).toHaveBeenCalledWith(['success', { reason: 'already' }]); }); }); 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 acd13721..3d431ce7 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 @@ -2,16 +2,27 @@ import { NO_ERRORS_SCHEMA } from '@angular/core'; import { async, ComponentFixture, TestBed, fakeAsync, tick } 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 { InternalUserService } from '../internal-user-service/internal-user.service'; describe('UserLoginComponent', () => { let component: UserLoginComponent; let fixture: ComponentFixture; + let mockInternalUserService: jasmine.SpyObj; beforeEach(async(() => { + mockInternalUserService = createMockInternalUserService(); + TestBed.configureTestingModule({ declarations: [UserLoginComponent], + providers: [ + {provide: InternalUserService, useValue: mockInternalUserService}, + {provide: ActivatedRoute, useValue:} // TODO: custom route snapshot param later. + ] imports: [ReactiveFormsModule], schemas: [NO_ERRORS_SCHEMA] }) -- 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') 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 From 66e345c2ef3cdff410bf6f31d54f09ab4e6fe213 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 11 Mar 2019 00:14:48 +0800 Subject: Extract out http entities. --- .../ClientApp/src/app/todo/todo-service/http-entities.ts | 11 +++++++++++ .../src/app/todo/todo-service/todo.service.spec.ts | 8 ++++---- .../ClientApp/src/app/todo/todo-service/todo.service.ts | 14 ++------------ .../src/app/user/internal-user-service/http-entities.ts | 3 +++ .../internal-user-service/internal-user.service.spec.ts | 13 +++++++------ .../user/internal-user-service/internal-user.service.ts | 9 ++++++--- 6 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts (limited to 'Timeline/ClientApp/src') diff --git a/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts b/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts new file mode 100644 index 00000000..3971617c --- /dev/null +++ b/Timeline/ClientApp/src/app/todo/todo-service/http-entities.ts @@ -0,0 +1,11 @@ +export const githubBaseUrl = 'https://api.github.com/repos/crupest/Timeline'; + +export interface IssueResponseItem { + number: number; + title: string; + state: string; + html_url: string; + pull_request?: any; +} + +export type IssueResponse = IssueResponseItem[]; diff --git a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts index b0b35f7b..679dc8b7 100644 --- a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts +++ b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.spec.ts @@ -3,7 +3,8 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/ import { toArray } from 'rxjs/operators'; import { TodoItem } from '../todo-item'; -import { TodoService, IssueResponse } from './todo.service'; +import { TodoService } from './todo.service'; +import { IssueResponse, githubBaseUrl } from './http-entities'; describe('TodoService', () => { @@ -19,8 +20,6 @@ describe('TodoService', () => { it('should work well', () => { const service: TodoService = TestBed.get(TodoService); - const baseUrl = service.baseUrl; - const mockIssueList: IssueResponse = [{ number: 1, title: 'Issue title 1', @@ -47,7 +46,8 @@ describe('TodoService', () => { const httpController: HttpTestingController = TestBed.get(HttpTestingController); - httpController.expectOne(request => request.url === baseUrl + '/issues' && request.params.get('state') === 'all').flush(mockIssueList); + httpController.expectOne(request => request.url === githubBaseUrl + '/issues' && + request.params.get('state') === 'all').flush(mockIssueList); httpController.verify(); }); diff --git a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts index ed1f2cbe..df63636d 100644 --- a/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts +++ b/Timeline/ClientApp/src/app/todo/todo-service/todo.service.ts @@ -3,29 +3,19 @@ import { HttpClient } from '@angular/common/http'; import { Observable, from } from 'rxjs'; import { switchMap, map, filter } from 'rxjs/operators'; +import { IssueResponse, githubBaseUrl } from './http-entities'; import { TodoItem } from '../todo-item'; -export interface IssueResponseItem { - number: number; - title: string; - state: string; - html_url: string; - pull_request?: any; -} - -export type IssueResponse = IssueResponseItem[]; @Injectable({ providedIn: 'root' }) export class TodoService { - readonly baseUrl = 'https://api.github.com/repos/crupest/Timeline'; - constructor(private client: HttpClient) { } getWorkItemList(): Observable { - return this.client.get(`${this.baseUrl}/issues`, { + return this.client.get(`${githubBaseUrl}/issues`, { params: { state: 'all' } diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts b/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts index 1335b407..5664cf7c 100644 --- a/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts +++ b/Timeline/ClientApp/src/app/user/internal-user-service/http-entities.ts @@ -1,5 +1,8 @@ import { UserCredentials, UserInfo } from '../entities'; +export const createTokenUrl = '/api/User/CreateToken'; +export const validateTokenUrl = '/api/User/ValidateToken'; + export type CreateTokenRequest = UserCredentials; export interface CreateTokenResponse { diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts index 8aadd873..4db28768 100644 --- a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.spec.ts @@ -4,12 +4,13 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/ import { Router } from '@angular/router'; import { UserInfo, UserCredentials } from '../entities'; -import { CreateTokenRequest, CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse } from './http-entities'; +import { + createTokenUrl, validateTokenUrl, CreateTokenRequest, + CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse +} from './http-entities'; import { InternalUserService, UserLoginState } from './internal-user.service'; describe('InternalUserService', () => { - const tokenCreateUrl = '/api/User/CreateToken'; - const mockUserCredentials: UserCredentials = { username: 'user', password: 'user' @@ -48,7 +49,7 @@ describe('InternalUserService', () => { const httpController = TestBed.get(HttpTestingController) as HttpTestingController; httpController.expectOne((request: HttpRequest) => - request.url === tokenCreateUrl && + request.url === createTokenUrl && request.body.username === 'user' && request.body.password === 'user').flush({ token: 'test-token', @@ -72,7 +73,7 @@ describe('InternalUserService', () => { const mockToken = 'mock-token'; const tokenValidateRequestMatcher = (req: HttpRequest) => { - return req.url === '/api/User/ValidateToken' && req.body.token === mockToken; + return req.url === validateTokenUrl && req.body.token === mockToken; }; beforeEach(() => { @@ -81,7 +82,7 @@ describe('InternalUserService', () => { service.tryLogin(mockUserCredentials).subscribe(); // subscribe to activate login - httpController.expectOne(tokenCreateUrl).flush({ + httpController.expectOne(createTokenUrl).flush({ token: mockToken, userInfo: mockUserInfo }); diff --git a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts index f6987d7d..91a67e5b 100644 --- a/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts +++ b/Timeline/ClientApp/src/app/user/internal-user-service/internal-user.service.ts @@ -6,7 +6,10 @@ import { Observable, of, throwError, BehaviorSubject } from 'rxjs'; import { map, catchError, retry } from 'rxjs/operators'; import { AlreadyLoginError, BadCredentialsError, BadNetworkError, UnknownError } from './errors'; -import { CreateTokenRequest, CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse } from './http-entities'; +import { + createTokenUrl, validateTokenUrl, CreateTokenRequest, + CreateTokenResponse, ValidateTokenRequest, ValidateTokenResponse +} from './http-entities'; import { UserCredentials, UserInfo } from '../entities'; @@ -46,7 +49,7 @@ export class InternalUserService { return of('nologin'); } - return this.httpClient.post('/api/User/ValidateToken', { token: this.token }).pipe( + return this.httpClient.post(validateTokenUrl, { token: this.token }).pipe( retry(3), catchError(error => { console.error('Failed to validate token.'); @@ -70,7 +73,7 @@ export class InternalUserService { return throwError(new AlreadyLoginError()); } - return this.httpClient.post('/api/User/CreateToken', credentials).pipe( + return this.httpClient.post(createTokenUrl, credentials).pipe( catchError((error: HttpErrorResponse) => { if (error.error instanceof ErrorEvent) { console.error('An error occurred when login: ' + error.error.message); -- cgit v1.2.3 From b26342764046d188d223aa494c3bbbf76deb4927 Mon Sep 17 00:00:00 2001 From: crupest Date: Mon, 11 Mar 2019 19:41:08 +0800 Subject: Configure build config. Specify mock and test files. --- Timeline/ClientApp/src/tsconfig.app.json | 4 +++- Timeline/ClientApp/src/tsconfig.spec.json | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) (limited to 'Timeline/ClientApp/src') diff --git a/Timeline/ClientApp/src/tsconfig.app.json b/Timeline/ClientApp/src/tsconfig.app.json index 722c370d..13151ca4 100644 --- a/Timeline/ClientApp/src/tsconfig.app.json +++ b/Timeline/ClientApp/src/tsconfig.app.json @@ -7,6 +7,8 @@ }, "exclude": [ "src/test.ts", - "**/*.spec.ts" + "**/*.spec.ts", + "**/*.mock.ts", + "**/*.test.ts" ] } diff --git a/Timeline/ClientApp/src/tsconfig.spec.json b/Timeline/ClientApp/src/tsconfig.spec.json index 8f7cedec..6e4460f8 100644 --- a/Timeline/ClientApp/src/tsconfig.spec.json +++ b/Timeline/ClientApp/src/tsconfig.spec.json @@ -14,6 +14,8 @@ ], "include": [ "**/*.spec.ts", - "**/*.d.ts" + "**/*.d.ts", + "**/*.mock.ts", + "**/*.test.ts" ] } -- cgit v1.2.3