#17 Added data-automation-id attribute

This commit is contained in:
mauriziovitale84
2016-05-09 14:07:56 +01:00
parent ed7c9d39d0
commit 2f30ae687b
4 changed files with 16 additions and 7 deletions

View File

@@ -6,24 +6,24 @@
<div class="mdl-card__supporting-text"> <div class="mdl-card__supporting-text">
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label "> <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.username)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label ">
<label for="username" class="mdl-textfield__label">{{'username' | translate }}</label> <label for="username" class="mdl-textfield__label">{{'username' | translate }}</label>
<input type="text" class="mdl-textfield__input" id="username" ngControl="username" tabindex="1" /> <input type="text" class="mdl-textfield__input" id="username" data-automation-id="username" ngControl="username" tabindex="1" />
<span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username"> <span class="mdl-tooltip mdl-tooltip--validation" for="username" *ngIf="formError.username">
<span id="username-error">{{formError.username | translate }}</span> <span id="username-error" data-automation-id="username-error">{{formError.username | translate }}</span>
</span> </span>
</div> </div>
<div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <div [ngClass]="{'is-invalid': isErrorStyle(form.controls.password)}" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label for="password" class="mdl-textfield__label">{{'password' | translate }}</label> <label for="password" class="mdl-textfield__label">{{'password' | translate }}</label>
<input type="password" class="mdl-textfield__input" id="password" ngControl="password" tabindex="2" /> <input type="password" class="mdl-textfield__input" id="password" data-automation-id="password" ngControl="password" tabindex="2" />
<span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="formError.password"> <span class="mdl-tooltip mdl-tooltip--validation" for="password" *ngIf="formError.password">
<span id="password-required">{{formError.password | translate }}</span> <span id="password-required" data-automation-id="password-required">{{formError.password | translate }}</span>
</span> </span>
</div> </div>
</div> </div>
<div class="mdl-card__actions mdl-card--border"> <div class="mdl-card__actions mdl-card--border">
<button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">{{'login-button' | translate }}</button> <button type="submit" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored" [disabled]="!form.valid">{{'login-button' | translate }}</button>
<div *ngIf="error" id="login-error" class="mdl-card__supporting-text" style="color: red;">{{'login-error-message' | translate }}</div> <div *ngIf="error" id="login-error" data-automation-id="login-error" class="mdl-card__supporting-text" style="color: red;">{{'login-error-message' | translate }}</div>
<div *ngIf="success" id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'login-success-message' | translate }}</div> <div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'login-success-message' | translate }}</div>
</div> </div>
<div class="mdl-card__menu"> <div class="mdl-card__menu">
<div class="mdl-spinner mdl-js-spinner"></div> <div class="mdl-spinner mdl-js-spinner"></div>

View File

@@ -254,6 +254,7 @@ System.register(['angular2/platform/testing/browser', 'angular2/testing', 'angul
component.form.controls.username._value = 'fake-username'; component.form.controls.username._value = 'fake-username';
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
var nativeElement = fixture.nativeElement; var nativeElement = fixture.nativeElement;
var button = nativeElement.querySelector('button'); var button = nativeElement.querySelector('button');
button.dispatchEvent(new Event('click')); button.dispatchEvent(new Event('click'));
@@ -275,6 +276,7 @@ System.register(['angular2/platform/testing/browser', 'angular2/testing', 'angul
component.form.controls.username._value = 'fake-wrong-username'; component.form.controls.username._value = 'fake-wrong-username';
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
// trigger the click // trigger the click
var nativeElement = fixture.nativeElement; var nativeElement = fixture.nativeElement;
var button = nativeElement.querySelector('button'); var button = nativeElement.querySelector('button');

File diff suppressed because one or more lines are too long

View File

@@ -190,6 +190,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'my password'; component.form.controls.password._value = 'my password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
expect(compiled.querySelector('input[type="password"]').value).toEqual('my password'); expect(compiled.querySelector('input[type="password"]').value).toEqual('my password');
expect(compiled.querySelector('input[type="text"]').value).toEqual('my username'); expect(compiled.querySelector('input[type="text"]').value).toEqual('my username');
@@ -213,6 +214,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
compiled.querySelector('button').click(); compiled.querySelector('button').click();
@@ -238,6 +240,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
compiled.querySelector('button').click(); compiled.querySelector('button').click();
@@ -263,6 +266,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-wrong-password'; component.form.controls.password._value = 'fake-wrong-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
compiled.querySelector('button').click(); compiled.querySelector('button').click();
@@ -289,6 +293,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-wrong-password'; component.form.controls.password._value = 'fake-wrong-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
compiled.querySelector('button').click(); compiled.querySelector('button').click();
@@ -316,6 +321,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
let nativeElement = fixture.nativeElement; let nativeElement = fixture.nativeElement;
let button = nativeElement.querySelector('button'); let button = nativeElement.querySelector('button');
@@ -345,6 +351,7 @@ describe('AlfrescoLogin', () => {
component.form.controls.password._value = 'fake-password'; component.form.controls.password._value = 'fake-password';
fixture.detectChanges(); fixture.detectChanges();
component.onValueChanged();
// trigger the click // trigger the click
let nativeElement = fixture.nativeElement; let nativeElement = fixture.nativeElement;