Мне нужна ваша поддержка для моего вопроса, пожалуйста.Я хочу проверить свое приложение для входа.
- Мой проект на Angular 5, Jasmine2.6.4
- Чтобы войти в систему, я следую этому коду:
Step1.Компонент Html
<div id="container">
<div id="login_card_container">
<div id="login_card" class="card col s12">
<form [formGroup]="loginForm" (ngSubmit)="onLogin()" class="col s12">
<h1 id="form_title">Login</h1>
<div class="row">
<div class="input-field col s12">
<input formControlName="username" id="username" type="text" class="validate" [ngClass]="{invalid: invalidCredentials}">
<label for="username">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input formControlName="password" id="password" type="password" class="validate" [ngClass]="{invalid: invalidCredentials}">
<label for="password" data-error="Your username/password combination is invalid">Password</label>
</div>
</div>
<div id="login_button_container" class="row">
<button id="login_button" type="submit" class="btn waves-effect waves-light" [disabled]="!loginForm.valid">
<i class="fa fa-sign-in left"></i>
Login
</button>
</div>
</form>
</div>
</div>
</div>
Шаг 2: Компонент TS
onLogin() {
this.loading = true;
this.auth.loginByUsernameAndPassword(
this.loginForm.controls['username'].value,
this.loginForm.controls['password'].value)
.subscribe(
result => {
if (result === true) {
this.router.navigate(['/']);
} else {
this.loading = false;
this.invalidCredentials = true;
}
},
error => {
this.loading = false;
this.invalidCredentials = true;
}
);
}
Шаг 3. Сервис
export class AuthService {
private static readonly CURRENT_USER = 'currentUser';
constructor(private http: Http, private router: Router) {
this.currentUser = this.loadCurrentUser();
}
public loginByUsernameAndPassword(username: string, password: string): Observable<boolean> {
let urlSearchParams = new URLSearchParams();
urlSearchParams.append('username', username);
urlSearchParams.append('password', password);
urlSearchParams.append('user_uniqueIdid', '0');
urlSearchParams.append('session_id', '0');
let body = urlSearchParams.toString();
let headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');
return this.http.post(Api.getUrl(Api.URLS.Login), body, {
headers: headers
})
.map((response: Response) => {
let res = response.json();
if (res.StatusCode === 0 && res.Token) {
this.currentUser = {
username: username,
token: res.Token,
role: res.StatusDescription.Role
}
localStorage.setItem(AuthService.CURRENT_USER, JSON.stringify(this.currentUser));
return true;
}else {
return false;
}
});
}
public isAuthenticated(): boolean {
let currentUser: any = localStorage.getItem(AuthService.CURRENT_USER);
if (currentUser !== null) {
try {
currentUser = JSON.parse(currentUser);
if (!currentUser.username !== undefined &&
!currentUser.token !== undefined &&
!currentUser.permission !== undefined) {
return true;
}
} catch (ex) {
}
}
return false;
}
public getCurrentUser(): any {
return this.currentUser;
}
private loadCurrentUser(): any {
let currentUser: any = localStorage.getItem(AuthService.CURRENT_USER);
if (currentUser !== null) {
try {
currentUser = JSON.parse(currentUser);
if (!currentUser.username !== undefined &&
!currentUser.token !== undefined &&
!currentUser.permission !== undefined) {
return currentUser;
}
} catch (ex) {
}
}
return null;
}
}
Этот код отлично работает, как это проверить?
Это моя первая попытка, но очень плохая.
Показывать только: выполнено 0 из 0 ОШИБКА (0,04 с / 0 с)
describe('Component: Login', () => {
let comp: LoginComponent
let fixture: ComponentFixture<LoginComponent>;
let de: DebugElement;
let el: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
RouterTestingModule
]
}).compileComponents().then(() => {
fixture = TestBed.createComponent(LoginComponent);
comp = fixture.componentInstance;
de = fixture.debugElement.query(By.css('form'));
el = de.nativeElement;
});
}));
});
ОБНОВЛЕНИЕ:
Этот код выполнен успешно, ноЯ не могу опубликовать имя пользователя и пароль.Как разместить и имя пользователя: 'user' пароль: '123'?
describe('Component: Login', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
beforeEach(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule, FormsModule, HttpModule, RouterTestingModule],
declarations: [LoginComponent],
providers: [AuthService],
});
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
component.ngOnInit();
});
it('should call auth login method', async(() => {
let loginElement: DebugElement;
let debugElement = fixture.debugElement;
let authService = debugElement.injector.get(AuthService);
let loginSpy = spyOn(authService, 'loginByUsernameAndPassword').and.callThrough();
loginElement = fixture.debugElement.query(By.css('form'));
loginElement.triggerEventHandler('ngSubmit', null);
expect(loginSpy).toHaveBeenCalledTimes(1);
}));
});