From ff76b5ed0aa91d5fdf9dc4f95e8b20f91ed9d072 Mon Sep 17 00:00:00 2001 From: "Sonsino, Ofir (os0695)" Date: Tue, 10 Jul 2018 15:57:37 +0300 Subject: New Angular UI from 1806 Change-Id: I39c160db0e0a6ec2e587ccf007ee1b23c6a08666 Issue-ID: VID-208 Signed-off-by: Sonsino, Ofir (os0695) --- .../inputPreventionPattern.directive.spec.ts | 66 ++++++++++++++++++++++ .../inputPreventionPattern.directive.ts | 24 ++++++++ 2 files changed, 90 insertions(+) create mode 100644 vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts create mode 100644 vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts (limited to 'vid-webpack-master/src/app/shared/directives/inputPrevention') 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 new file mode 100644 index 000000000..846ff70f2 --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.spec.ts @@ -0,0 +1,66 @@ +import {TestBed, ComponentFixture} from '@angular/core/testing'; +import {Component, DebugElement} from "@angular/core"; +import {By} from "@angular/platform-browser"; +import { InputPreventionPatternDirective } from './inputPreventionPattern.directive'; + +@Component({ + template: `` +}) +class TestHoverFocusComponent { +} + + +describe('InputPrevention Pattern Directive', () => { + + let component: TestHoverFocusComponent; + let fixture: ComponentFixture; + let directiveInstance : InputPreventionPatternDirective; + let inputEl: DebugElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestHoverFocusComponent, InputPreventionPatternDirective] + }); + fixture = TestBed.createComponent(TestHoverFocusComponent); + component = fixture.componentInstance; + inputEl = fixture.debugElement.query(By.css('input')); + directiveInstance = inputEl.injector.get(InputPreventionPatternDirective); + }); + + it('directive should be defined', () => { + expect(directiveInstance).toBeDefined(); + }); + + it('pattern exists', () => { + expect(inputEl.nativeElement.pattern).toEqual('^[a-zA-Z0-9_]*$'); + }); + + it('kepress legal input', () => { + fixture.detectChanges(); + inputEl.nativeElement.value = "legalInput"; + expect(new RegExp(inputEl.nativeElement.pattern).test(inputEl.nativeElement.value)).toBeTruthy(); + }); + + it('kepress illegal input', () => { + inputEl.triggerEventHandler('kepress', " "); + fixture.detectChanges(); + expect(inputEl.nativeElement.value).toBe(''); + }); + + it('kepress event legal input should return event', () => { + const event = { key: 'A' }; + inputEl.nativeElement.value = "legalInput"; + let result = directiveInstance.onKeypress(event); + expect(result).toBe(event); + }); + + it('kepress event illegal input should prevent default', () => { + const event = {key: '-', preventDefault : function () {} }; + 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 new file mode 100644 index 000000000..dada09bef --- /dev/null +++ b/vid-webpack-master/src/app/shared/directives/inputPrevention/inputPreventionPattern.directive.ts @@ -0,0 +1,24 @@ +import {Directive, ElementRef} from '@angular/core'; + +@Directive({ + selector: '[patternInput]', + host: { + '(keypress)': 'onKeypress($event)' + } +}) +export class InputPreventionPatternDirective{ + inputElement : ElementRef; + constructor(el: ElementRef) { + this.inputElement = el; + } + + onKeypress(event: KeyboardEvent) { + const pattern = new RegExp(this.inputElement.nativeElement.pattern); + if(pattern){ + if(!pattern.test(event['key'])){ + event.preventDefault(); + } + } + return event; + } +} -- cgit 1.2.3-korg