Recently delved into the world of Angular and now focusing on automating tests. I've created a simple app with a basic form prompting users to input their email. There's a required validator attached to the email field, ensuring that users must enter text. If no text is entered, a message appears below the input field indicating that the form is mandatory. While trying to test this in Protractor, I encountered an error. I believe it's a minor issue in my code. Currently using the latest version of Angular and Jasmine. Any help or advice would be greatly appreciated, as resources for Angular2+ seem scarce.
HTML:
<div *ngIf="!email; else forminfo">
<form [formGroup]="rForm" (ngSubmit)="submitEmail(rForm.value)">
<div class="form-container">
<div class="row columns">
<h1>{{title}}</h1>
<label>Email
<input type="text" formControlName="email">
</label>
<div class="alert" *ngIf="!rForm.controls['email'].valid && rForm.controls['email'].touched">{{ titleAlert }}</div>
<input type="submit" class="button expanded" value="Submit Form" [disabled]="!rForm.valid">
<button (click)="clickBtn()">test</button>
<br>
<p>{{msg}}</p>
</div>
</div>
</form>
</div>
<ng-template #forminfo>
<div class="form-container">
<div class="row columns">
<h1>Thank you for subscribing!</h1>
<p>Email you have subscribed with: {{ email }}</p> <br>
</div>
</div>
</ng-template>
Component Class
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import {Location} from '@angular/common';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Enter email to subscribe';
private location: Location;
rForm: FormGroup;
submit: any;
email:string = '';
titleAlert:string = 'This field is required';
titleEmail:string = "Email required";
titleLength: string = 'Min of 7 Characters'
msg: string;
constructor(private fb: FormBuilder) {
this.rForm = fb.group( {
'email': [null, [Validators.required, Validators.minLength(7),Validators.email]]
})
}
points = 1;
ngOnInit() {
}
clickBtn() {
this.msg = 'test'
}
submitEmail(submit) {
this.email = submit.email;
}
}
Object Class
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo() {
return browser.get('/');
}
getTitle() {
return element(by.css('h1')).getText();
}
getTestBtn() {
return element(by.cssContainingText('button', 'test'));
}
getErrorMsg() {
return element(by.cssContainingText('div', 'alert')).getText();
}
getInputField() {
return element(by.cssContainingText('input', 'email'));
}
}
Spec Class
import { AppPage } from './app.po';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('Should display the correct title', () => {
page.navigateTo();
expect(page.getTitle()).toEqual('Enter email to subscribe')
});
it('should display an input field', () => {
page.navigateTo();
expect(page.getInputField()).toBeTruthy();
})
it('return an error if text box is left empty', () => {
page.navigateTo();
page.getInputField().sendKeys('');
page.getTestBtn().click();
expect(page.getErrorMsg()).toBeTruthy();
})
});
Edit: Got it working by doing this:
Object Class
titleAlert = element(by.className('alert');
}
Spec Class
expect(page.titleAlert.isDisplayed()).toBe(true);
Appreciate your assistance tehbeardedone