1
1
import { Component , DebugElement , ViewChild } from '@angular/core' ;
2
- import { TestBed , waitForAsync } from '@angular/core/testing' ;
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' ;
5
5
@@ -12,57 +12,119 @@ describe('IgxSelection', () => {
12
12
declarations : [
13
13
TriggerTextSelectionComponent ,
14
14
TriggerTextSelectionOnClickComponent ,
15
- TriggerTextSelectionFalseOnClickComponent
16
15
] ,
17
16
imports : [ IgxTextSelectionModule ]
18
17
} ) ;
19
18
} ) ) ;
20
19
21
- it ( 'Should select the text which is into the input' , async ( ) => {
20
+
21
+ it ( 'Should select the text which is into the input' , ( ) => {
22
22
const fix = TestBed . createComponent ( TriggerTextSelectionComponent ) ;
23
23
fix . detectChanges ( ) ;
24
24
25
25
const input = fix . debugElement . query ( By . css ( 'input' ) ) . nativeElement ;
26
26
input . focus ( ) ;
27
27
28
- fix . whenStable ( ) . then ( ( ) => {
29
- fix . detectChanges ( ) ;
30
- expect ( input . selectionEnd ) . toEqual ( input . value . length ) ;
31
- expect ( input . value . substring ( input . selectionStart , input . selectionEnd ) ) . toEqual ( input . value ) ;
32
- } ) ;
28
+ expect ( input . selectionEnd ) . toEqual ( input . value . length ) ;
29
+ expect ( input . value . substring ( input . selectionStart , input . selectionEnd ) ) . toEqual ( input . value ) ;
33
30
} ) ;
34
31
35
- it ( 'Should select the text when the input is clicked' , async ( ) => {
32
+ it ( 'Should select the text when the input is clicked' , ( ) => {
36
33
const fix = TestBed . createComponent ( TriggerTextSelectionOnClickComponent ) ;
37
34
fix . detectChanges ( ) ;
38
35
39
36
const input : DebugElement = fix . debugElement . query ( By . css ( 'input' ) ) ;
40
37
const inputNativeElem = input . nativeElement ;
41
38
const inputElem : HTMLElement = input . nativeElement ;
42
39
43
- inputElem . click ( ) ;
40
+ inputElem . click ( ) ; // might need to change to .focus
41
+ fix . detectChanges ( ) ;
42
+
43
+ expect ( inputNativeElem . selectionEnd ) . toEqual ( inputNativeElem . value . length ) ;
44
+ expect ( inputNativeElem . value . substring ( inputNativeElem . selectionStart , inputNativeElem . selectionEnd ) )
45
+ . toEqual ( inputNativeElem . value ) ;
46
+ } ) ;
47
+
48
+ it ( 'Should check if the value is selected if based on input type' , fakeAsync ( ( ) => {
49
+ const fix = TestBed . createComponent ( TriggerTextSelectionOnClickComponent ) ;
50
+ const selectableTypes : Types [ ] = [
51
+ { "text" : "Some Values!" } ,
52
+ { "search" : "Search!" } ,
53
+ { "password" : "********" } ,
54
+ { "tel" : '+(359)554-587-415' } ,
55
+ { "url" : "www.infragistics.com" } ,
56
+ { "number" : 2136512312 }
57
+ ] ;
58
+
59
+ const nonSelectableTypes : Types [ ] = [
60
+ { 'date' : new Date ( ) } ,
61
+ { 'datetime-local' : "2018-06-12T19:30" } ,
62
+
63
+ { 'month' : "2018-05" } ,
64
+ { 'time' : "13:30" } ,
65
+ { 'week' : "2017-W01" }
66
+ ] ;
67
+
68
+ //skipped on purpose, if needed feel free to add to any of the above categories
69
+ //const irrelevantTypes = ['button', 'checkbox', 'color', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit']
44
70
45
- fix . whenStable ( ) . then ( ( ) => {
71
+ const input = fix . debugElement . query ( By . css ( 'input' ) ) ;
72
+ const inputNativeElem = input . nativeElement ;
73
+ const inputElem : HTMLElement = input . nativeElement ;
74
+
75
+ selectableTypes . forEach ( el => {
76
+ let type = Object . keys ( el ) [ 0 ] ;
77
+ let val = el [ type ] ;
78
+ fix . componentInstance . inputType = type ;
79
+ fix . componentInstance . inputValue = val ;
46
80
fix . detectChanges ( ) ;
47
- expect ( inputNativeElem . selectionEnd ) . toEqual ( inputNativeElem . value . length ) ;
48
- expect ( inputNativeElem . value . substring ( inputNativeElem . selectionStart , inputNativeElem . selectionEnd ) )
49
- . toEqual ( inputNativeElem . value ) ;
81
+
82
+ inputElem . click ( ) ;
83
+ fix . detectChanges ( ) ;
84
+
85
+ if ( type !== 'number' ) {
86
+ expect ( inputNativeElem . selectionEnd ) . toEqual ( inputNativeElem . value . length ) ;
87
+ expect ( inputNativeElem . value . substring ( inputNativeElem . selectionStart , inputNativeElem . selectionEnd ) )
88
+ . toEqual ( val ) ;
89
+ }
90
+
91
+ if ( type === 'number' ) {
92
+ let selection = document . getSelection ( ) . toString ( ) ;
93
+ tick ( 1000 ) ;
94
+ expect ( ( String ( val ) ) . length ) . toBe ( selection . length ) ;
95
+ }
50
96
} ) ;
51
- } ) ;
52
97
53
- it ( 'Shouldn\'t make a selection when the state is set to false' , async ( ) => {
54
- const fix = TestBed . createComponent ( TriggerTextSelectionFalseOnClickComponent ) ;
98
+ nonSelectableTypes . forEach ( el => {
99
+ let type = Object . keys ( el ) [ 0 ] ;
100
+ let val = el [ type ] ;
101
+ fix . componentInstance . inputType = type ;
102
+ fix . componentInstance . inputValue = val ;
103
+ fix . detectChanges ( ) ;
104
+
105
+ inputElem . focus ( ) ;
106
+ fix . detectChanges ( ) ;
107
+ expect ( inputNativeElem . selectionStart ) . toEqual ( inputNativeElem . selectionEnd ) ;
108
+ } ) ;
109
+ } ) ) ;
110
+
111
+
112
+
113
+ it ( 'Shouldn\'t make a selection when the state is set to false' , ( ) => {
114
+ const fix = TestBed . createComponent ( TriggerTextSelectionOnClickComponent ) ;
115
+ fix . componentInstance . selectValue = false ;
116
+ fix . componentInstance . inputType = "text" ;
117
+ fix . componentInstance . inputValue = "4444444" ;
55
118
fix . detectChanges ( ) ;
56
119
57
120
const input = fix . debugElement . query ( By . css ( 'input' ) ) ;
58
121
const inputNativeElem = input . nativeElement ;
59
122
const inputElem : HTMLElement = input . nativeElement ;
60
123
61
- inputElem . click ( ) ;
62
- fix . detectChanges ( ) ;
63
124
64
- expect ( inputNativeElem . selectionEnd ) . toEqual ( 0 ) ;
65
- expect ( inputNativeElem . value . substring ( inputNativeElem . selectionStart , inputNativeElem . selectionEnd ) ) . toEqual ( '' ) ;
125
+ inputElem . focus ( ) ;
126
+ fix . detectChanges ( ) ;
127
+ expect ( inputNativeElem . selectionStart ) . toEqual ( inputNativeElem . selectionEnd ) ;
66
128
} ) ;
67
129
} ) ;
68
130
@@ -77,14 +139,25 @@ class TriggerTextSelectionComponent { }
77
139
@Component ( {
78
140
template :
79
141
`
80
- <input type="text " [igxTextSelection] #select="igxTextSelection" (click)="select.trigger()" value="Some custom value! " />
142
+ <input #input [ type]="inputType " [igxTextSelection]="selectValue" #select="igxTextSelection" (click)="select.trigger()" [ value]="inputValue " />
81
143
`
82
144
} )
83
- class TriggerTextSelectionOnClickComponent { }
84
- @Component ( {
85
- template :
86
- `
87
- <input type="text" [igxTextSelection]="false" #select="igxTextSelection" (click)="select.trigger()" value="Some custom value!" />
88
- `
89
- } )
90
- class TriggerTextSelectionFalseOnClickComponent { }
145
+ class TriggerTextSelectionOnClickComponent {
146
+ public selectValue = true ;
147
+ public inputType : any = "text" ;
148
+ public inputValue : any = "Some custom V!"
149
+
150
+ @ViewChild ( 'input' , { read : HTMLInputElement , static :true } ) public input : HTMLInputElement ;
151
+
152
+ public waitForOneSecond ( ) {
153
+ return new Promise ( resolve => {
154
+ setTimeout ( ( ) => {
155
+ resolve ( "I promise to return after one second!" ) ;
156
+ } , 1000 ) ;
157
+ } ) ;
158
+ }
159
+ }
160
+
161
+ interface Types {
162
+ [ key : string ] : any ;
163
+ }
0 commit comments