diff --git a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts index a83ac974735..6f1de07e232 100644 --- a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts @@ -1,5 +1,5 @@ import { Component, DebugElement, ViewChild } from '@angular/core'; -import { TestBed, waitForAsync } from '@angular/core/testing'; +import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { IgxTextSelectionModule } from './text-selection.directive'; @@ -12,27 +12,24 @@ describe('IgxSelection', () => { declarations: [ TriggerTextSelectionComponent, TriggerTextSelectionOnClickComponent, - TriggerTextSelectionFalseOnClickComponent ], imports: [IgxTextSelectionModule] }); })); - it('Should select the text which is into the input', async () => { + + it('Should select the text which is into the input', () => { const fix = TestBed.createComponent(TriggerTextSelectionComponent); fix.detectChanges(); const input = fix.debugElement.query(By.css('input')).nativeElement; input.focus(); - fix.whenStable().then(() => { - fix.detectChanges(); - expect(input.selectionEnd).toEqual(input.value.length); - expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value); - }); + expect(input.selectionEnd).toEqual(input.value.length); + expect(input.value.substring(input.selectionStart, input.selectionEnd)).toEqual(input.value); }); - it('Should select the text when the input is clicked', async () => { + it('Should select the text when the input is clicked', ()=> { const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent); fix.detectChanges(); @@ -40,29 +37,94 @@ describe('IgxSelection', () => { const inputNativeElem = input.nativeElement; const inputElem: HTMLElement = input.nativeElement; - inputElem.click(); + inputElem.click(); // might need to change to .focus + fix.detectChanges(); + + expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length); + expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)) + .toEqual(inputNativeElem.value); + }); + + it('Should check if the value is selected if based on input type', fakeAsync(() => { + const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent); + const selectableTypes: Types[] = [ + { "text" : "Some Values!" }, + { "search": "Search!" }, + { "password": "********" }, + { "tel": '+(359)554-587-415' }, + { "url": "www.infragistics.com" }, + { "number": 2136512312 } + ]; + + const nonSelectableTypes: Types[] = [ + {'date': new Date() }, + {'datetime-local': "2018-06-12T19:30" }, + {'email': 'JohnSmith@gmail.com'}, + {'month': "2018-05" }, + {'time': "13:30"}, + {'week': "2017-W01"} + ]; + + //skipped on purpose, if needed feel free to add to any of the above categories + //const irrelevantTypes = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'] - fix.whenStable().then(() => { + const input = fix.debugElement.query(By.css('input')); + const inputNativeElem = input.nativeElement; + const inputElem: HTMLElement = input.nativeElement; + + selectableTypes.forEach( el => { + let type = Object.keys(el)[0]; + let val = el[type]; + fix.componentInstance.inputType = type; + fix.componentInstance.inputValue = val; fix.detectChanges(); - expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length); - expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)) - .toEqual(inputNativeElem.value); + + inputElem.click(); + fix.detectChanges(); + + if(type !== 'number'){ + expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length); + expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)) + .toEqual(val); + } + + if(type === 'number'){ + let selection = document.getSelection().toString(); + tick(1000); + expect((String(val)).length).toBe(selection.length); + } }); - }); - it('Shouldn\'t make a selection when the state is set to false', async () => { - const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent); + nonSelectableTypes.forEach( el => { + let type = Object.keys(el)[0]; + let val = el[type]; + fix.componentInstance.inputType = type; + fix.componentInstance.inputValue = val; + fix.detectChanges(); + + inputElem.focus(); + fix.detectChanges(); + expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd); + }); + })); + + + + it('Shouldn\'t make a selection when the state is set to false', () => { + const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent); + fix.componentInstance.selectValue = false; + fix.componentInstance.inputType = "text"; + fix.componentInstance.inputValue = "4444444"; fix.detectChanges(); const input = fix.debugElement.query(By.css('input')); const inputNativeElem = input.nativeElement; const inputElem: HTMLElement = input.nativeElement; - inputElem.click(); - fix.detectChanges(); - expect(inputNativeElem.selectionEnd).toEqual(0); - expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)).toEqual(''); + inputElem.focus(); + fix.detectChanges(); + expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd); }); }); @@ -77,14 +139,25 @@ class TriggerTextSelectionComponent { } @Component({ template: ` - + ` }) -class TriggerTextSelectionOnClickComponent { } -@Component({ - template: - ` - - ` -}) -class TriggerTextSelectionFalseOnClickComponent { } +class TriggerTextSelectionOnClickComponent { + public selectValue = true; + public inputType: any = "text"; + public inputValue: any = "Some custom V!" + + @ViewChild('input',{read: HTMLInputElement, static:true}) public input: HTMLInputElement; + + public waitForOneSecond() { + return new Promise(resolve => { + setTimeout(() => { + resolve("I promise to return after one second!"); + }, 1000); + }); + } + } + + interface Types { + [key: string]: any; + } diff --git a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts index ca7df42780b..1d93fb2be89 100644 --- a/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts @@ -105,9 +105,10 @@ export class IgxTextSelectionDirective { * } * ``` */ + public trigger() { if (this.selected && this.nativeElement.value.length) { - requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length)); + this.nativeElement.select(); } } }