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();
}
}
}