merge from ecomp a88f0072 - Modern UI

Issue-ID: VID-378
Change-Id: Ibcb23dd27f550cf32ce2fe0239f0f496ae014ff6
Signed-off-by: Ittay Stern <ittay.stern@att.com>

2 files changed, 40 insertions, 27 deletions

diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
index 846ff70f2..ec5bfd8f3 100644
--- a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts
@@ -1,19 +1,18 @@
-import {TestBed, ComponentFixture} from '@angular/core/testing';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component, DebugElement} from "@angular/core";
 import {By} from "@angular/platform-browser";
-import { InputPreventionPatternDirective } from './inputPreventionPattern.directive';
+import {InputPreventionPatternDirective} from './inputPreventionPattern.directive';
 
 @Component({
-  template: `<input 
+  template: `<input
     patternInput
-    pattern="^[a-zA-Z0-9_]*$">`
+    pattern="^[a-zA-Z0-9._-]*$">`
 })
 class TestHoverFocusComponent {
 }
 
 
 describe('InputPrevention Pattern Directive', () => {
-
   let component: TestHoverFocusComponent;
   let fixture: ComponentFixture<TestHoverFocusComponent>;
   let directiveInstance : InputPreventionPatternDirective;
@@ -29,37 +28,54 @@ describe('InputPrevention Pattern Directive', () => {
     directiveInstance = inputEl.injector.get(InputPreventionPatternDirective);
   });
 
-  it('directive should be defined', () => {
+  test('directive should be defined', () => {
     expect(directiveInstance).toBeDefined();
   });
 
-  it('pattern exists', () => {
-    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$');
+  test('pattern exists', () => {
+    expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9._-]*$');
   });
 
-  it('kepress legal input', () => {
+  test('kepress legal input', () => {
     fixture.detectChanges();
     inputEl.nativeElement.value = "legalInput";
     expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy();
   });
 
-  it('kepress illegal input', () => {
+  test('kepress illegal input', () => {
     inputEl.triggerEventHandler('kepress', " ");
     fixture.detectChanges();
     expect(inputEl.nativeElement.value).toBe('');
   });
 
-  it('kepress event legal input should return event', () => {
-    const event = <any>{ key: 'A' };
+
+  test('kepress event legal input should return event', () => {
+    const event = <any>{ key: 'A'};
+    inputEl.nativeElement.value = "legalInput";
+    let result = directiveInstance.onKeypress(event);
+    expect(result).toBe(event);
+  });
+
+
+  test('kepress event legal(-) input should return event', () => {
+    const event = <any>{ key: '-'};
     inputEl.nativeElement.value = "legalInput";
     let result = directiveInstance.onKeypress(event);
     expect(result).toBe(event);
   });
 
-  it('kepress event illegal input should prevent default', () => {
-    const event = <any>{key: '-', preventDefault : function () {} };
-    spyOn(event, 'preventDefault');
-    inputEl.nativeElement.value = "-";
+  test('kepress event legal (.) input should return event', () => {
+    const event = <any>{ key: '.'};
+    inputEl.nativeElement.value = "legalInput";
+    let result = directiveInstance.onKeypress(event);
+    expect(result).toBe(event);
+  });
+
+
+  test('kepress event illegal input should prevent default', () => {
+    const event = <any>{key: '$', preventDefault : function () {} };
+    jest.spyOn(event, 'preventDefault');
+    inputEl.nativeElement.value = "$";
     let result = directiveInstance.onKeypress(event);
     expect(event.preventDefault).toHaveBeenCalled();
   });
diff --git a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
index dada09bef..d00c52502 100644
--- a/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
+++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts
@@ -1,18 +1,10 @@
-import {Directive, ElementRef} from '@angular/core';
+import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';
 
 @Directive({
-  selector: '[patternInput]',
-  host: {
-    '(keypress)': 'onKeypress($event)'
-  }
+  selector: '[patternInput]'
 })
 export class InputPreventionPatternDirective{
-  inputElement : ElementRef;
-  constructor(el: ElementRef) {
-    this.inputElement = el;
-  }
-
-  onKeypress(event: KeyboardEvent) {
+  @HostListener('keypress', ['$event']) onKeypress(event: KeyboardEvent) {
     const pattern = new RegExp(this.inputElement.nativeElement.pattern);
     if(pattern){
       if(!pattern.test(event['key'])){
@@ -21,4 +13,9 @@ export class InputPreventionPatternDirective{
     }
     return event;
   }
+
+  inputElement : ElementRef;
+  constructor(el: ElementRef) {
+    this.inputElement = el;
+  }
 }