diff options
author | Ittay Stern <ittay.stern@att.com> | 2018-08-29 17:01:32 +0300 |
---|---|---|
committer | Ittay Stern <ittay.stern@att.com> | 2019-02-18 18:35:30 +0200 |
commit | 6f900cc45d7dd7f97430812b86b5c1d1693c8ae3 (patch) | |
tree | 936005c364dc5a7264d6304d4777c3d83494db22 /vid-webpack-master/src/app/shared/components/formControls/component/input | |
parent | 67d99f816cc583643c35193197594cf78d8ce60a (diff) |
merge from ecomp a88f0072 - Modern UI
Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>
Diffstat (limited to 'vid-webpack-master/src/app/shared/components/formControls/component/input')
4 files changed, 111 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html new file mode 100644 index 000000000..90ac7c698 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.html @@ -0,0 +1,25 @@ +<div class="details-item" *ngIf="data?.isVisible"> + <label + [tooltip]="data?.tooltip ? data.tooltip : null" + id="{{data?.dataTestId}}-label" + [ngClass]="{'required' : data?.isRequired()}"> + {{data?.displayName}}: </label> + <input + #customInput + + [disabled]="data?.isDisabled ? data.isDisabled : false" + [type]="data?.inputType ? data?.inputType : 'text'" + [attr.data-tests-id]="data?.dataTestId" + class="form-control input-text" + id="{{data?.dataTestId}}" + [placeholder]="data?.placeHolder ? data?.placeHolder : ''" + [formControl]="form?.controls[data?.controlName]" + [ngClass]="{'error-style' : form?.controls[data?.controlName]?.touched && form?.controls[data?.controlName]?.errors}" + minlength="{{data?.minLength}}" + maxlength="{{data?.maxLength}}" + (blur)="data.onBlur($event, form)" + (keypress)="data?.onKeypress($event)"> +</div> + + + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.scss diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts new file mode 100644 index 000000000..84d379d1a --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.spec.ts @@ -0,0 +1,68 @@ +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core' +import {InputFormControlComponent} from "./input.formControl.component"; +import {CommonModule} from "@angular/common"; +import {FormBuilder, FormControl, ReactiveFormsModule, Validators} from "@angular/forms"; +import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model"; +import {ValidatorModel, ValidatorOptions} from "../../../../models/formControlModels/formControl.model"; +import {FormControlMessageErrorComponent} from "../../errorMessage/formControlMessageError.component"; +import {BrowserModule} from "@angular/platform-browser"; +import {TooltipModule} from "ngx-tooltip"; + +describe('Input Form Control Component', () => { + let component: InputFormControlComponent; + let fixture: ComponentFixture<InputFormControlComponent>; + let fb: FormBuilder; + + beforeAll(done => (async () => { + TestBed.configureTestingModule({ + imports: [CommonModule, BrowserModule, ReactiveFormsModule, TooltipModule], + providers: [FormBuilder], + declarations: [InputFormControlComponent, FormControlMessageErrorComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }); + await TestBed.compileComponents(); + + fixture = TestBed.createComponent(InputFormControlComponent); + component = fixture.componentInstance; + fb = TestBed.get(FormBuilder); + + })().then(done).catch(done.fail)); + + test('component should initialize basic parameters', () => { + component.data = new InputFormControl({ + value: "value", + displayName: "display Name", + validations: [new ValidatorModel(ValidatorOptions.required, 'is required')], + dataTestId: "data-test-id", + placeHolder: "place holder", + controlName: 'testInstanceName' + }); + + component.data.hasErrors = function () { + return this.formGroup.controls[this.controlName].touched && this.formGroup.controls[this.controlName].errors ? ['error-style'] : []; + }; + + component.data.onBlur = function () { + component.form.controls['testInstanceName'].setValue('onBlur'); + }; + + component.form = fb.group({ + 'testInstanceName': new FormControl({ + value: component.data.value, + disabled: false + }, Validators.compose(component.data.validations.map(item => item.validator))) + }); + + + component.form.controls['testInstanceName'].setValue('newValue'); + expect(component.form.controls['testInstanceName'].errors).toBeFalsy(); + component.form.controls['testInstanceName'].setValue(''); + expect(component.form.controls['testInstanceName'].errors.required).toBeTruthy(); + component.data.onBlur(); + expect(component.form.controls['testInstanceName'].value).toEqual('onBlur'); + expect(component.form.controls['testInstanceName'].errors).toBeFalsy(); + } + ) +}); + diff --git a/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts new file mode 100644 index 000000000..1e8c28104 --- /dev/null +++ b/vid-webpack-master/src/app/shared/components/formControls/component/input/input.formControl.component.ts @@ -0,0 +1,18 @@ +import {Component, ElementRef, Input, ViewChild} from "@angular/core"; +import {InputFormControl} from "../../../../models/formControlModels/inputFormControl.model"; +import {FormGroup} from "@angular/forms"; + +@Component({ + selector : 'form-control-input', + templateUrl : './input.formControl.component.html', + styleUrls : ['./input.formControl.component.scss'] +}) + +export class InputFormControlComponent{ + @ViewChild('customInput') element:ElementRef; + @Input() data: InputFormControl = null; + @Input() form: FormGroup; + + + +} |