Having some trouble testing the login feature. Specifically, I want to make sure the submit button is disabled when all input fields are empty. However, the test is throwing an error: "Expected false to be truthy." The strange thing is that this works fine for other scenarios.
Login Component HTML
<form #loginForm="ngForm" (ngSubmit)="onSubmit()">
<div class="container">
<div class="row form-group">
<label for="email" class="col-md-2">Email:</label>
<input type="email" class="col-md-4 form-control" id="email" name="email" ngModel required/>
</div>
<br />
<div class="row form-group">
<label for="password" class="col-md-2">Password:</label>
<input type="password" class="col-md-4 form-control" id="password" name="password" required ngModel minlength="6"/>
</div>
<br />
<div>
<button id="submit" class="btn btn-dark" type="submit" [disabled]="!loginForm.valid">
{{ isLoginMode ? "Login" : "Sign Up" }}
</button>
</div>
</div>
</form>
================================= Login Component TS
import { Component, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { LoginService } from './login.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
isLoginMode = false;
alertMessage: string = null;
@ViewChild('loginForm', { static: false }) loginForm: NgForm;
constructor(private loginService: LoginService, private router: Router, private route: ActivatedRoute) { }
ngOnInit(): void {
}
}
===================================== Login Component Spec TS
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { DebugElement } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { RouterTestingModule } from '@angular/router/testing';
import { LoginComponent } from './login.component';
import { LoginService } from './login.service';
describe('LoginComponent', () => {
let component: LoginComponent;
let fixture: ComponentFixture<LoginComponent>;
let submitEl: DebugElement;
let loginService: LoginService;
let loginFormEl: DebugElement;
let email: HTMLInputElement;
let password: HTMLInputElement;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LoginComponent ],
imports: [FormsModule , HttpClientTestingModule, RouterTestingModule]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent);
component = fixture.componentInstance;
fixture.detectChanges();
loginFormEl = fixture.debugElement.query(By.css("form"));
submitEl = fixture.debugElement.query(By.css('button'));
email = fixture.nativeElement.querySelector('input[type=email]');
password = fixture.nativeElement.querySelector('input[type=password]');
});
it('should ensure initial input fields are empty', () => {
fixture.detectChanges();
expect(email.value).toBe('');
expect(password.value).toBe('');
});
// Issue Here (Error: Expected false to be truthy.)
xit('should verify that submit button is disabled when form is invalid -- Required fields are empty', () => {
fixture.detectChanges();
fixture.whenStable().then( () => {
component.loginForm.form.controls['email'].setValue("");
component.loginForm.form.controls['password'].setValue("");
})
expect(submitEl.nativeElement.disabled).toBeTruthy();
});
it('should validate if submit button is enabled when the form is valid',() => {
fixture.detectChanges();
fixture.whenStable().then( () => {
component.loginForm.form.controls['email'].setValue("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="354150464175415046411b565a58">[email protected]</a>");
component.loginForm.form.controls['password'].setValue("123456789");
})
expect(submitEl.nativeElement.disabled).toBeFalsy();
});
});