diff options
author | crupest <crupest@outlook.com> | 2019-04-13 13:03:18 +0800 |
---|---|---|
committer | crupest <crupest@outlook.com> | 2019-04-13 13:03:18 +0800 |
commit | 72890735ced2edc8ccecfed811393e951de5c091 (patch) | |
tree | 39cf181a18a3dc443dbab5669a04d0a23cdefd00 /Timeline/ClientApp/src/app/user/user-login | |
parent | 19cae15eba2bcede41b818e1b8ab7fd5ac92eb05 (diff) | |
download | timeline-72890735ced2edc8ccecfed811393e951de5c091.tar.gz timeline-72890735ced2edc8ccecfed811393e951de5c091.tar.bz2 timeline-72890735ced2edc8ccecfed811393e951de5c091.zip |
Init separate.
Diffstat (limited to 'Timeline/ClientApp/src/app/user/user-login')
4 files changed, 0 insertions, 204 deletions
diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.css b/Timeline/ClientApp/src/app/user/user-login/user-login.component.css deleted file mode 100644 index 8bf6b408..00000000 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.css +++ /dev/null @@ -1,24 +0,0 @@ -form { - display: flex; - flex-wrap: wrap; -} - -div.w-100 { - width: 100%; -} - -.login-button { - margin-left: auto; -} - -.no-login-message { - color: blue; -} - -.invalid-login-message { - color: red; -} - -.error-message { - color: red; -} diff --git a/Timeline/ClientApp/src/app/user/user-login/user-login.component.html b/Timeline/ClientApp/src/app/user/user-login/user-login.component.html deleted file mode 100644 index 7398ece7..00000000 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.html +++ /dev/null @@ -1,19 +0,0 @@ -<form [formGroup]="form"> - <ng-container *ngIf="message" [ngSwitch]="message"> - <p *ngSwitchCase="'nologin'" class="mat-h3 no-login-message">You haven't login.</p> - <p *ngSwitchCase="'invalidlogin'" class="mat-h3 invalid-login-message">Your login is no longer valid.</p> - <p *ngSwitchDefault class="mat-h3 error-message">{{ message }}</p> - </ng-container> - <mat-form-field> - <mat-label>Username</mat-label> - <input formControlName="username" matInput type="text" /> - </mat-form-field> - <div class="w-100"></div> - <mat-form-field> - <mat-label>Password</mat-label> - <input formControlName="password" matInput type="password" /> - </mat-form-field> - <mat-checkbox formControlName="rememberMe">Remember me!</mat-checkbox> - <div class="w-100"></div> - <button mat-flat-button class="login-button" (appDebounceClick)="onLoginButtonClick()">Login</button> -</form> 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 deleted file mode 100644 index f010e4b7..00000000 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.spec.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { NO_ERRORS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ReactiveFormsModule } from '@angular/forms'; -import { By } from '@angular/platform-browser'; - -import { of, throwError } from 'rxjs'; - -import { createMockInternalUserService } from '../internal-user-service/internal-user.service.mock'; -import { UserLoginComponent } from './user-login.component'; -import { InternalUserService } from '../internal-user-service/internal-user.service'; -import { UserInfo } from '../entities'; -import { MatCheckboxModule } from '@angular/material'; - -describe('UserLoginComponent', () => { - let component: UserLoginComponent; - let fixture: ComponentFixture<UserLoginComponent>; - let mockInternalUserService: jasmine.SpyObj<InternalUserService>; - - beforeEach(async(() => { - mockInternalUserService = createMockInternalUserService(); - - // mock property - (<any>mockInternalUserService).currentUserInfo = null; - - TestBed.configureTestingModule({ - declarations: [UserLoginComponent], - providers: [ - { provide: InternalUserService, useValue: mockInternalUserService } - ], - imports: [ReactiveFormsModule, MatCheckboxModule], - schemas: [NO_ERRORS_SCHEMA] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(UserLoginComponent); - component = fixture.componentInstance; - }); - - 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; - const rememberMeCheckbox = fixture.debugElement.query(By.css('input[type=checkbox]')).nativeElement as HTMLInputElement; - - usernameInput.value = 'user'; - usernameInput.dispatchEvent(new Event('input')); - passwordInput.value = 'user'; - passwordInput.dispatchEvent(new Event('input')); - rememberMeCheckbox.dispatchEvent(new MouseEvent('click')); - - fixture.detectChanges(); - - expect(component.form.value).toEqual({ - username: 'user', - password: 'user', - rememberMe: true - }); - }); - - it('login should work well', () => { - fixture.detectChanges(); - - const mockValue = { - username: 'user', - password: 'user', - rememberMe: true - }; - - mockInternalUserService.tryLogin.withArgs(mockValue).and.returnValue(of(<UserInfo>{ username: 'user', roles: ['user'] })); - - component.form.setValue(mockValue); - component.onLoginButtonClick(); - - expect(mockInternalUserService.tryLogin).toHaveBeenCalledWith(mockValue); - expect(mockInternalUserService.userRouteNavigate).toHaveBeenCalledWith(['success', { fromlogin: 'true' }]); - }); - - describe('message display', () => { - it('nologin reason should display', () => { - fixture.detectChanges(); - component.message = 'nologin'; - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('p')).nativeElement as - HTMLParagraphElement).textContent).toBe('You haven\'t login.'); - }); - - it('invalid login reason should display', () => { - fixture.detectChanges(); - component.message = 'invalidlogin'; - fixture.detectChanges(); - expect((fixture.debugElement.query(By.css('p')).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', - rememberMe: false - }; - 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')).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 deleted file mode 100644 index 4395c5cf..00000000 --- a/Timeline/ClientApp/src/app/user/user-login/user-login.component.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { FormGroup, FormControl } from '@angular/forms'; - -import { InternalUserService } from '../internal-user-service/internal-user.service'; - - -export type LoginMessage = 'nologin' | 'invalidlogin' | string | null | undefined; - -@Component({ - selector: 'app-user-login', - templateUrl: './user-login.component.html', - styleUrls: ['./user-login.component.css'] -}) -export class UserLoginComponent implements OnInit { - - constructor(private userService: InternalUserService) { } - - message: LoginMessage; - - form = new FormGroup({ - username: new FormControl(''), - password: new FormControl(''), - rememberMe: new FormControl(false) - }); - - ngOnInit() { - if (this.userService.currentUserInfo) { - throw new Error('Route error! Already login!'); - } - this.message = 'nologin'; - } - - onLoginButtonClick() { - this.userService.tryLogin(this.form.value).subscribe(_ => { - this.userService.userRouteNavigate(['success', { fromlogin: 'true' }]); - }, (error: Error) => this.message = error.message); - } -} |