Fourth step: Login component

Author: JPBlancoDB

src/app/login/login.component.css

@@ -1 +1,11 @@
-<p>login works!</p>
+<form[formGroup]="form" (ngSubmit)="onSubmit()">
+<inputid="email" type="email" placeholder="Your email" />
+<span*ngIf="submitted && form.controls.email.invalid" id="email-error">
+ Please enter a valid email.
+</span>
+<inputid="password" type="password" placeholder="********" />
+<span*ngIf="submitted && form.controls.password.invalid" id="password-error">
+ Please enter a valid password.
+</span>
+<buttontype="submit">Sign in</button>
+</form>

src/app/login/login.component.html

@@ -1,16 +1,17 @@
 import{async,ComponentFixture,TestBed}from'@angular/core/testing';
 
 import{LoginComponent}from'./login.component';
+import{ReactiveFormsModule}from'@angular/forms';
 
 describe('LoginComponent',()=>{
 letcomponent: LoginComponent;
 letfixture: ComponentFixture<LoginComponent>;
 
 beforeEach(async(()=>{
 TestBed.configureTestingModule({
-declarations: [LoginComponent]
-})
-.compileComponents();
+declarations: [LoginComponent],
+imports: [ReactiveFormsModule]
+}).compileComponents();
 }));
 
 beforeEach(()=>{
@@ -22,4 +23,77 @@ describe('LoginComponent', () =>{
 it('should create',()=>{
 expect(component).toBeTruthy();
 });
+
+it('should render form with email and password inputs',()=>{
+constelement=fixture.nativeElement;
+
+expect(element.querySelector('form')).toBeTruthy();
+expect(element.querySelector('#email')).toBeTruthy();
+expect(element.querySelector('#password')).toBeTruthy();
+expect(element.querySelector('button')).toBeTruthy();
+});
+
+it('should return model invalid when form is empty',()=>{
+expect(component.form.valid).toBeFalsy();
+});
+
+it('should validate email input as required',()=>{
+constemail=component.form.controls.email;
+
+expect(email.valid).toBeFalsy();
+expect(email.errors.required).toBeTruthy();
+});
+
+it('should validate password input as required',()=>{
+constpassword=component.form.controls.password;
+
+expect(password.valid).toBeFalsy();
+expect(password.errors.required).toBeTruthy();
+});
+
+it('should validate email format',()=>{
+constemail=component.form.controls.email;
+email.setValue('test');
+consterrors=email.errors;
+
+expect(errors.required).toBeFalsy();
+expect(errors.pattern).toBeTruthy();
+expect(email.valid).toBeFalsy();
+});
+
+it('should validate email format correctly',()=>{
+constemail=component.form.controls.email;
+email.setValue('[email protected]');
+consterrors=email.errors||{};
+
+expect(email.valid).toBeTruthy();
+expect(errors.required).toBeFalsy();
+expect(errors.pattern).toBeFalsy();
+});
+
+it('should render email validation message when formControl is submitted and invalid',()=>{
+constelements: HTMLElement=fixture.nativeElement;
+expect(elements.querySelector('#email-error')).toBeFalsy();
+
+elements.querySelector('button').click();
+
+fixture.detectChanges();
+expect(elements.querySelector('#email-error')).toBeTruthy();
+expect(elements.querySelector('#email-error').textContent).toContain(
+'Please enter a valid email.'
+);
+});
+
+it('should render password validation message when formControl is submitted and invalid',()=>{
+constelements: HTMLElement=fixture.nativeElement;
+expect(elements.querySelector('#password-error')).toBeFalsy();
+
+elements.querySelector('button').click();
+
+fixture.detectChanges();
+expect(elements.querySelector('#password-error')).toBeTruthy();
+expect(elements.querySelector('#password-error').textContent).toContain(
+'Please enter a valid password.'
+);
+});
 });

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

@@ -1,15 +1,24 @@
 import{Component,OnInit}from'@angular/core';
+import{FormGroup,FormBuilder,Validators}from'@angular/forms';
 
 @Component({
 selector: 'app-login',
-templateUrl: './login.component.html',
-styleUrls: ['./login.component.css']
+templateUrl: './login.component.html'
 })
 exportclassLoginComponentimplementsOnInit{
+form: FormGroup;
+submitted=false;
 
-constructor(){}
+constructor(privateformBuilder: FormBuilder){}
 
 ngOnInit(){
+this.form=this.formBuilder.group({
+email: ['',[Validators.required,Validators.pattern('[^ @]*@[^ @]*')]],
+password: ['',Validators.required]
+});
 }
 
+onSubmit(){
+this.submitted=true;
+}
 }

src/app/login/login.component.ts

@@ -3,13 +3,10 @@ import{CommonModule } from '@angular/common'
 
 import{LoginRoutingModule}from'./login-routing.module';
 import{LoginComponent}from'./login.component';
-
+import{ReactiveFormsModule}from'@angular/forms';
 
 @NgModule({
 declarations: [LoginComponent],
-imports: [
-CommonModule,
-LoginRoutingModule
-]
+imports: [CommonModule,LoginRoutingModule,ReactiveFormsModule]
 })
-exportclassLoginModule{}
+exportclassLoginModule{}