fix(testSelDir): Added test for all input types

Author: tishko0

projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.spec.ts

@@ -12,67 +12,122 @@ 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();
 
         const input: DebugElement = fix.debugElement.query(By.css('input'));
         const inputNativeElem = input.nativeElement;
         const inputElem: HTMLElement = input.nativeElement;
 
-        inputElem.click();
+        inputElem.click(); // might need to change to .focus
+        fix.detectChanges();
 
-        fix.whenStable().then(() => {
-            fix.detectChanges();
-            expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
-            expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
-                .toEqual(inputNativeElem.value);
-        });
+        expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length);
+        expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd))
+            .toEqual(inputNativeElem.value);
     });
 
-    it('Shouldn\'t make a selection when the state is set to false', async () => {
+    fit('Should check if the value is selected if based on input type', () => {
         const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent);
-        fix.detectChanges();
+        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': '[email protected]'},
+            {'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']
 
         const input = fix.debugElement.query(By.css('input'));
-        const inputType = (input.nativeElement as HTMLInputElement).type;
-        let inputList = ["email", "number", "password", "tel", "text", "url"];
-        expect(inputList.indexOf(inputType));
+        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();
+
+            inputElem.click();
+            fix.detectChanges();
+
+            if(type !== 'number' && type !== 'tel'){
+                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();
+                console.log(selection);
+                console.log(val)
+                fix.componentInstance.waitForOneSecond().then(() => {
+                    expect(val.toString().lenght).toBe(selection.length);
+                });
+            }
+        });
+
+        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('Should check if the input type is adequate for text selection', async () => {
-        const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent);
+
+
+    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);
     });
 });
 
@@ -87,14 +142,25 @@ class TriggerTextSelectionComponent { }
 @Component({
     template:
         `
-            <input type="text" [igxTextSelection] #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
+            <input #input [type]="inputType" [igxTextSelection]="selectValue" #select="igxTextSelection" (click)="select.trigger()" [value]="inputValue" />
         `
 })
-class TriggerTextSelectionOnClickComponent { }
-@Component({
-    template:
-    `
-        <input type="text" [igxTextSelection]="false" #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
-    `
-})
-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;
+ }

projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts

@@ -108,9 +108,7 @@ export class IgxTextSelectionDirective {
 
     public trigger() {
         if (this.selected && this.nativeElement.value.length) {
-            requestAnimationFrame(() => {
                 this.nativeElement.select();
-            })
         }
     }
 }