inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2999] readded form validation icon (#3367)

Browse Source 
* [ADF-2999] readded form validation icon

* [ADF-2999] fixed broken test
This commit is contained in:
Vito
2018-05-23 12:01:21 +01:00
committed by Eugenio Romano
parent 86f4c23afa
commit 86ec482843
4 changed files with 212 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/core/form/components/form.component.html
View File

@@ -7,6 +7,12 @@
<mat-card-header>
<mat-card-title>
<h4 *ngIf="isTitleEnabled()">
<div *ngIf="showValidationIcon" class="adf-form-validation-button">
<i id="adf-valid-form-icon" class="material-icons" *ngIf="form.isValid; else no_valid_form">check_circle</i>
<ng-template #no_valid_form>
<i id="adf-invalid-form-icon" class="material-icons invalid-color">error</i>
</ng-template>
</div>
<div *ngIf="showRefreshButton" class="adf-form-reload-button">
<button mat-icon-button (click)="onRefreshClicked()">
<mat-icon>refresh</mat-icon>

59
lib/core/form/components/form.component.scss
View File

@@ -1,25 +1,27 @@
@mixin adf-form-component-theme($theme) {
$config: mat-typography-config();
$warn: map-get($theme, warn);
$accent: map-get($theme, accent);
.adf {
&-form-container {
max-width: 100% !important;
max-height: 100% !important;
& .mat-card {
padding: 16px 24px;
overflow: hidden;
}
& .mat-card-header-text {
margin: 0px !important;
}
& .mat-tab-body-content {
overflow: hidden;
}
& .mat-tab-label {
font-size: mat-font-size($config, subheading-2);
line-height: mat-line-height($config, headline);
@@ -28,47 +30,58 @@
color: rgba(0, 0, 0, 0.54);
text-transform: uppercase;
}
& .mat-ink-bar {
height: 4px;
}
& .mat-input-wrapper {
margin: 0px 12px 0px 0px;
}
}
}
&-form-title {
font-size: mat-font-size($alfresco-typography, title);
}
&-form-debug-container {
padding: 10px;
}
&-form-debug-container .debug-toggle-text {
padding-left: 15px;
cursor: pointer;
}
&-form-debug-container .debug-toggle-text:hover {
font-weight: bold;
}
&-form-reload-button {
position: absolute;
right: 12px;
top: 30px;
}
&-form-validation-button {
position: absolute;
right: 50px;
top: 39px;
color: mat-color($accent);
& .invalid-color {
color: mat-color($warn);
}
}
&-form-hide-button {
display: none !important;
}
&-task-title {
text-align: center
}
&-label {
width: 32px;
height: 16px;
@@ -77,18 +90,18 @@
text-align: left;
white-space: nowrap;
}
&-form-mat-card-actions {
float: right;
padding-bottom: 25px !important;
padding-right: 25px !important;
padding-right: 25px !important;
& .mat-button {
height: 36px;
border-radius: 5px;
}
& .mat-button-wrapper {
width: 58px;
height: 20px;
@@ -98,15 +111,15 @@
}
}
}
form-field {
width: 100%;
.mat-input-element {
font-size: mat-font-size($config, body-2);
padding-top: 8px;
line-height: normal;
}
}
}

57
lib/core/form/components/form.component.visibility.spec.ts
View File

@@ -22,7 +22,7 @@ import { Observable } from 'rxjs/Observable';
import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { formDefinitionDropdownField, formDefinitionTwoTextFields } from '../../mock';
import { formDefinitionDropdownField, formDefinitionTwoTextFields, formDefinitionRequiredField } from '../../mock';
import { formReadonlyTwoTextFields } from '../../mock';
import { formDefVisibilitiFieldDependsOnNextOne, formDefVisibilitiFieldDependsOnPreviousOne } from '../../mock';
import { FormService } from './../services/form.service';
@@ -72,6 +72,45 @@ describe('FormComponent UI and visibility', () => {
expect(fixture.componentInstance instanceof FormComponent).toBe(true, 'should create FormComponent');
});
describe('Validation icon', () => {
it('should display valid icon for valid form', () => {
spyOn(service, 'getTask').and.returnValue(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionTwoTextFields));
let change = new SimpleChange(null, 1, true);
component.ngOnChanges({ 'taskId': change });
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeDefined();
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).not.toBeNull();
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
});
it('should display invalid icon for valid form', () => {
spyOn(service, 'getTask').and.returnValue(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionRequiredField));
let change = new SimpleChange(null, 1, true);
component.ngOnChanges({ 'taskId': change });
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeDefined();
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).not.toBeNull();
});
it('should NOT display validation icon when [showValidationIcon] is false', () => {
spyOn(service, 'getTask').and.returnValue(Observable.of({}));
spyOn(service, 'getTaskForm').and.returnValue(Observable.of(formDefinitionTwoTextFields));
let change = new SimpleChange(null, 1, true);
component.ngOnChanges({ 'taskId': change });
component.showValidationIcon = false;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('#adf-valid-form-icon'))).toBeNull();
expect(fixture.debugElement.query(By.css('#adf-invalid-form-icon'))).toBeNull();
});
});
describe('form definition', () => {
it('should display two text fields form definition', () => {
@@ -105,16 +144,16 @@ describe('FormComponent UI and visibility', () => {
const dropdown = fixture.debugElement.queryAll(By.css('#country'));
expect(dropdown).toBeDefined();
expect(dropdown).not.toBeNull();
const options = fixture.debugElement.queryAll(By.css('mat-option'));
const optOne = options[1];
const optTwo = options[2];
const optThree = options[3];
const optOne = fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'));
const optTwo = fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'));
const optThree = fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'));
expect(optOne.nativeElement.innerText.trim()).toEqual('united kingdom');
expect(optTwo.nativeElement.innerText.trim()).toEqual('italy');
expect(optThree.nativeElement.innerText.trim()).toEqual('france');
expect(optOne[0].nativeElement.innerText.trim()).toEqual('united kingdom');
expect(optTwo[0].nativeElement.innerText.trim()).toEqual('italy');
expect(optThree[0].nativeElement.innerText.trim()).toEqual('france');
optTwo[0].nativeElement.click();
optTwo.nativeElement.click();
fixture.detectChanges();
expect(dropdown[0].nativeElement.innerText.trim()).toEqual('italy');
tick(SELECT_CLOSE_ANIMATION);