From 69af3983beefdb905ef6dfa2235ca96200bd96ab Mon Sep 17 00:00:00 2001 From: tishko Date: Wed, 19 Jan 2022 12:23:49 +0200 Subject: [PATCH 1/5] fix(selectionDirective): adden number selection --- .../text-selection/text-selection.directive.spec.ts | 10 ++++++++++ .../text-selection/text-selection.directive.ts | 5 ++++- 2 files changed, 14 insertions(+), 1 deletion(-) 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..3258142f19b 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 @@ -51,6 +51,16 @@ describe('IgxSelection', () => { }); it('Shouldn\'t make a selection when the state is set to false', async () => { + const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent); + fix.detectChanges(); + + 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)); + }); + + fit('Should check if the input type is adequate for text selection', async () => { const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent); fix.detectChanges(); 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..0ee7e3860ad 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,12 @@ export class IgxTextSelectionDirective { * } * ``` */ + public trigger() { if (this.selected && this.nativeElement.value.length) { - requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length)); + requestAnimationFrame(() => { + this.nativeElement.select(); + }) } } } From 14333329077f8e08bfb39867e7efa7a30112a0f4 Mon Sep 17 00:00:00 2001 From: tishko Date: Wed, 19 Jan 2022 12:49:24 +0200 Subject: [PATCH 2/5] fix(selectionDirective): removed fit from a test --- .../directives/text-selection/text-selection.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 3258142f19b..37646d895cc 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 @@ -60,7 +60,7 @@ describe('IgxSelection', () => { expect(inputList.indexOf(inputType)); }); - fit('Should check if the input type is adequate for text selection', async () => { + it('Should check if the input type is adequate for text selection', async () => { const fix = TestBed.createComponent(TriggerTextSelectionFalseOnClickComponent); fix.detectChanges(); From 4f3bc02f613963d0164f5593c104bb6cea522ab6 Mon Sep 17 00:00:00 2001 From: tishko Date: Tue, 25 Jan 2022 11:43:34 +0200 Subject: [PATCH 3/5] fix(testSelDir): Added test for all input types --- .../text-selection.directive.spec.ts | 136 +++++++++++++----- .../text-selection.directive.ts | 2 - 2 files changed, 101 insertions(+), 37 deletions(-) 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 37646d895cc..99ec5f7accc 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 @@ -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,39 +37,97 @@ describe('IgxSelection', () => { 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': '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'] 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: ` - + ` }) -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 0ee7e3860ad..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 @@ -108,9 +108,7 @@ export class IgxTextSelectionDirective { public trigger() { if (this.selected && this.nativeElement.value.length) { - requestAnimationFrame(() => { this.nativeElement.select(); - }) } } } From 4900544622996caf6065342c0d890651e436fcd4 Mon Sep 17 00:00:00 2001 From: tishko Date: Tue, 25 Jan 2022 15:37:11 +0200 Subject: [PATCH 4/5] fix(textSelDir): removed f from a test --- .../directives/text-selection/text-selection.directive.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 99ec5f7accc..91b12c306b7 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 @@ -45,7 +45,7 @@ describe('IgxSelection', () => { .toEqual(inputNativeElem.value); }); - fit('Should check if the value is selected if based on input type', () => { + it('Should check if the value is selected if based on input type', () => { const fix = TestBed.createComponent(TriggerTextSelectionOnClickComponent); const selectableTypes: Types[] = [ { "text" : "Some Values!" }, From 9c8a3434456b35f6cede792b9cd2097d25ea1e98 Mon Sep 17 00:00:00 2001 From: tishko Date: Wed, 26 Jan 2022 12:18:32 +0200 Subject: [PATCH 5/5] fix(TextSelDir): made test fakeasync and test tel --- .../text-selection.directive.spec.ts | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) 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 91b12c306b7..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'; @@ -45,7 +45,7 @@ describe('IgxSelection', () => { .toEqual(inputNativeElem.value); }); - it('Should check if the value is selected if based on input type', () => { + 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!" }, @@ -82,7 +82,7 @@ describe('IgxSelection', () => { inputElem.click(); fix.detectChanges(); - if(type !== 'number' && type !== 'tel'){ + if(type !== 'number'){ expect(inputNativeElem.selectionEnd).toEqual(inputNativeElem.value.length); expect(inputNativeElem.value.substring(inputNativeElem.selectionStart, inputNativeElem.selectionEnd)) .toEqual(val); @@ -90,11 +90,8 @@ describe('IgxSelection', () => { 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); - }); + tick(1000); + expect((String(val)).length).toBe(selection.length); } }); @@ -109,7 +106,7 @@ describe('IgxSelection', () => { fix.detectChanges(); expect(inputNativeElem.selectionStart).toEqual(inputNativeElem.selectionEnd); }); - }); + }));