1
- import { Component , DebugElement , ViewChild } from '@angular/core' ;
1
+ import { Component , DebugElement , Directive , ElementRef , HostListener , ViewChild } from '@angular/core' ;
2
2
import { fakeAsync , TestBed , tick , waitForAsync } from '@angular/core/testing' ;
3
3
import { By } from '@angular/platform-browser' ;
4
4
import { IgxTextSelectionModule } from './text-selection.directive' ;
@@ -12,24 +12,26 @@ describe('IgxSelection', () => {
12
12
declarations : [
13
13
TriggerTextSelectionComponent ,
14
14
TriggerTextSelectionOnClickComponent ,
15
+ TextSelectionWithMultipleFocusHandlersComponent ,
16
+ IgxTestFocusDirective
15
17
] ,
16
18
imports : [ IgxTextSelectionModule ]
17
19
} ) ;
18
20
} ) ) ;
19
21
20
22
21
- it ( 'Should select the text which is into the input' , ( ) => {
23
+ it ( 'Should select the text which is into the input' , fakeAsync ( ( ) => {
22
24
const fix = TestBed . createComponent ( TriggerTextSelectionComponent ) ;
23
25
fix . detectChanges ( ) ;
24
26
25
27
const input = fix . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
26
28
input . focus ( ) ;
27
-
29
+ tick ( 16 ) ;
28
30
expect ( input . selectionEnd ) . toEqual ( input . value . length ) ;
29
31
expect ( input . value . substring ( input . selectionStart , input . selectionEnd ) ) . toEqual ( input . value ) ;
30
- } ) ;
32
+ } ) ) ;
31
33
32
- it ( 'Should select the text when the input is clicked' , ( ) => {
34
+ it ( 'Should select the text when the input is clicked' , fakeAsync ( ( ) => {
33
35
const fix = TestBed . createComponent ( TriggerTextSelectionOnClickComponent ) ;
34
36
fix . detectChanges ( ) ;
35
37
@@ -39,11 +41,11 @@ describe('IgxSelection', () => {
39
41
40
42
inputElem . click ( ) ; // might need to change to .focus
41
43
fix . detectChanges ( ) ;
42
-
44
+ tick ( 16 ) ;
43
45
expect ( inputNativeElem . selectionEnd ) . toEqual ( inputNativeElem . value . length ) ;
44
46
expect ( inputNativeElem . value . substring ( inputNativeElem . selectionStart , inputNativeElem . selectionEnd ) )
45
47
. toEqual ( inputNativeElem . value ) ;
46
- } ) ;
48
+ } ) ) ;
47
49
48
50
it ( 'Should check if the value is selected if based on input type' , fakeAsync ( ( ) => {
49
51
const fix = TestBed . createComponent ( TriggerTextSelectionOnClickComponent ) ;
@@ -81,6 +83,7 @@ describe('IgxSelection', () => {
81
83
82
84
inputElem . click ( ) ;
83
85
fix . detectChanges ( ) ;
86
+ tick ( 16 ) ;
84
87
85
88
if ( type !== 'number' ) {
86
89
expect ( inputNativeElem . selectionEnd ) . toEqual ( inputNativeElem . value . length ) ;
@@ -104,6 +107,7 @@ describe('IgxSelection', () => {
104
107
105
108
inputElem . focus ( ) ;
106
109
fix . detectChanges ( ) ;
110
+ tick ( 16 ) ;
107
111
expect ( inputNativeElem . selectionStart ) . toEqual ( inputNativeElem . selectionEnd ) ;
108
112
} ) ;
109
113
} ) ) ;
@@ -126,6 +130,17 @@ describe('IgxSelection', () => {
126
130
fix . detectChanges ( ) ;
127
131
expect ( inputNativeElem . selectionStart ) . toEqual ( inputNativeElem . selectionEnd ) ;
128
132
} ) ;
133
+
134
+ it ( 'should apply selection properly if present on an element with multiple focus handlers' , fakeAsync ( ( ) => {
135
+ const fix = TestBed . createComponent ( TextSelectionWithMultipleFocusHandlersComponent ) ;
136
+ fix . detectChanges ( ) ;
137
+
138
+ const input = fix . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
139
+ input . focus ( ) ;
140
+ tick ( 16 ) ;
141
+ expect ( input . selectionEnd ) . toEqual ( input . value . length ) ;
142
+ expect ( input . value . substring ( input . selectionStart , input . selectionEnd ) ) . toEqual ( input . value ) ;
143
+ } ) ) ;
129
144
} ) ;
130
145
131
146
@Component ( {
@@ -158,6 +173,23 @@ class TriggerTextSelectionOnClickComponent {
158
173
}
159
174
}
160
175
161
- interface Types {
162
- [ key : string ] : any ;
176
+ @Component ( {
177
+ template : `<input #input type="text" igxTestFocusDirective [igxTextSelection]="true" [value]="inputValue" />`
178
+ } )
179
+ class TextSelectionWithMultipleFocusHandlersComponent {
180
+ public inputValue : any = "12-34-56" ;
163
181
}
182
+
183
+ @Directive ( { selector : '[igxTestFocusDirective]' } )
184
+ class IgxTestFocusDirective {
185
+ constructor ( private element : ElementRef ) { }
186
+
187
+ @HostListener ( 'focus' )
188
+ public onFocus ( ) {
189
+ this . element . nativeElement . value = `$${ this . element . nativeElement . value } ` ;
190
+ }
191
+ }
192
+
193
+ interface Types {
194
+ [ key : string ] : any ;
195
+ }
0 commit comments