Add authService to login component

Author: JPBlancoDB

src/app/login/auth.service.spec.ts

@@ -0,0 +1,3 @@
+import{AuthService}from'./auth.service';
+
+describe('AuthService',()=>{});

src/app/login/auth.service.ts

@@ -0,0 +1,11 @@
+import{Injectable}from'@angular/core';
+import{Observable}from'rxjs';
+
+@Injectable()
+exportclassAuthService{
+constructor(){}
+
+login(email: string,password: string): Observable<string>{
+thrownewError('not implemented');
+}
+}

src/app/login/login.component.spec.ts

@@ -1,16 +1,28 @@
 import{async,ComponentFixture,TestBed}from'@angular/core/testing';
+import{ReactiveFormsModule}from'@angular/forms';
+import{of}from'rxjs';
 
 import{LoginComponent}from'./login.component';
-import{ReactiveFormsModule}from'@angular/forms';
+import{AuthService}from'./auth.service';
 
 describe('LoginComponent',()=>{
 letcomponent: LoginComponent;
 letfixture: ComponentFixture<LoginComponent>;
+constauthServiceStub: jasmine.SpyObj<AuthService>=jasmine.createSpyObj(
+'authService',
+['login']
+);
 
 beforeEach(async(()=>{
 TestBed.configureTestingModule({
 declarations: [LoginComponent],
-imports: [ReactiveFormsModule]
+imports: [ReactiveFormsModule],
+providers: [
+{
+provide: AuthService,
+useValue: authServiceStub
+}
+]
 }).compileComponents();
 }));
 
@@ -96,4 +108,20 @@ describe('LoginComponent', () =>{
 'Please enter a valid password.'
 );
 });
+
+it('should invoke auth service when form is valid',()=>{
+constemail=component.form.controls.email;
+email.setValue('[email protected]');
+constpassword=component.form.controls.password;
+password.setValue('123456');
+authServiceStub.login.and.returnValue(of());
+
+fixture.nativeElement.querySelector('button').click();
+
+expect(authServiceStub.login.calls.any()).toBeTruthy();
+expect(authServiceStub.login).toHaveBeenCalledWith(
+email.value,
+password.value
+);
+});
 });

src/app/login/login.component.ts

@@ -1,5 +1,6 @@
 import{Component,OnInit}from'@angular/core';
 import{FormGroup,FormBuilder,Validators}from'@angular/forms';
+import{AuthService}from'./auth.service';
 
 @Component({
 selector: 'app-login',
@@ -9,7 +10,10 @@ export class LoginComponent implements OnInit{
 form: FormGroup;
 submitted=false;
 
-constructor(privateformBuilder: FormBuilder){}
+constructor(
+privateformBuilder: FormBuilder,
+privateauthService: AuthService
+){}
 
 ngOnInit(){
 this.form=this.formBuilder.group({
@@ -20,5 +24,14 @@ export class LoginComponent implements OnInit{
 
 onSubmit(){
 this.submitted=true;
+
+if(this.form.valid){
+this.authService
+.login(this.form.value.email,this.form.value.password)
+.subscribe(
+res=>console.log(res),
+error=>console.log(error)
+);
+}
 }
 }

src/app/login/login.module.ts

@@ -4,9 +4,11 @@ import{CommonModule } from '@angular/common'
 import{LoginRoutingModule}from'./login-routing.module';
 import{LoginComponent}from'./login.component';
 import{ReactiveFormsModule}from'@angular/forms';
+import{AuthService}from'./auth.service';
 
 @NgModule({
 declarations: [LoginComponent],
-imports: [CommonModule,LoginRoutingModule,ReactiveFormsModule]
+imports: [CommonModule,LoginRoutingModule,ReactiveFormsModule],
+providers: [AuthService]
 })
 exportclassLoginModule{}