1
+ import { expect } from "chai" ;
2
+ import { createVueField , trigger } from "../util" ;
3
+
4
+ import Vue from "vue" ;
5
+ import FieldChecklist from "src/fields/fieldChecklist.vue" ;
6
+
7
+ Vue . component ( "FieldChecklist" , FieldChecklist ) ;
8
+
9
+ let el , vm , field ;
10
+
11
+ function createField ( schema = { } , model = null , disabled = false , options ) {
12
+ [ el , vm , field ] = createVueField ( "fieldChecklist" , schema , model , disabled , options ) ;
13
+ }
14
+
15
+ describe ( "fieldChecklist.vue" , ( ) => {
16
+
17
+ describe ( "check listbox template" , ( ) => {
18
+
19
+ describe ( "check template with static string array" , ( ) => {
20
+ let schema = {
21
+ type : "checklist" ,
22
+ label : "Skills" ,
23
+ model : "skills" ,
24
+ listBox : true ,
25
+ values : [
26
+ "HTML5" ,
27
+ "Javascript" ,
28
+ "CSS3" ,
29
+ "CoffeeScript" ,
30
+ "AngularJS" ,
31
+ "ReactJS" ,
32
+ "VueJS"
33
+ ]
34
+ } ;
35
+ let model = { skills : [ "Javascript" , "VueJS" ] } ;
36
+ let listbox ;
37
+ let checkboxes ;
38
+
39
+ function isChecked ( idx ) {
40
+ return ( checkboxes [ idx ] . checked ) ;
41
+ }
42
+
43
+ before ( ( ) => {
44
+ createField ( schema , model , false ) ;
45
+ listbox = el . querySelector ( ".listbox" ) ;
46
+ checkboxes = listbox . querySelectorAll ( "input[type=checkbox]" ) ;
47
+ } ) ;
48
+
49
+ it ( "should contain a .listbox element" , ( ) => {
50
+ expect ( field ) . to . be . exist ;
51
+ expect ( field . $el ) . to . be . exist ;
52
+
53
+ expect ( listbox ) . to . be . defined ;
54
+ expect ( listbox . classList . contains ( "form-control" ) ) . to . be . true ;
55
+ } ) ;
56
+
57
+ it ( "should contain 7 items" , ( ) => {
58
+ expect ( checkboxes . length ) . to . be . equal ( 7 ) ;
59
+ } ) ;
60
+
61
+ it ( "should checked the values" , ( ) => {
62
+ expect ( isChecked ( 0 ) ) . to . be . false ;
63
+ expect ( isChecked ( 1 ) ) . to . be . true ;
64
+ expect ( isChecked ( 6 ) ) . to . be . true ;
65
+ } ) ;
66
+
67
+ /*it("should set disabled", (done) => {
68
+ field.disabled = true;
69
+ vm.$nextTick( () => {
70
+ expect(listbox.disabled).to.be.true;
71
+ done();
72
+ });
73
+ });*/
74
+
75
+ it ( "listbox value should be the model value after changed" , ( done ) => {
76
+ model . skills = [ "ReactJS" ] ;
77
+ vm . $nextTick ( ( ) => {
78
+ expect ( isChecked ( 0 ) ) . to . be . false ;
79
+ expect ( isChecked ( 1 ) ) . to . be . false ;
80
+ expect ( isChecked ( 6 ) ) . to . be . false ;
81
+ expect ( isChecked ( 5 ) ) . to . be . true ;
82
+ done ( ) ;
83
+ } ) ;
84
+
85
+ } ) ;
86
+
87
+ it ( "model value should be the listbox value if changed" , ( done ) => {
88
+ checkboxes [ 0 ] . checked = true ;
89
+ trigger ( checkboxes [ 0 ] , "change" ) ;
90
+
91
+ vm . $nextTick ( ( ) => {
92
+ expect ( model . skills ) . to . be . deep . equal ( [ "ReactJS" , "HTML5" ] ) ;
93
+ done ( ) ;
94
+ } ) ;
95
+
96
+ } ) ;
97
+
98
+ } ) ;
99
+
100
+ describe ( "check static values with { id, name } objects" , ( ) => {
101
+ let schema = {
102
+ type : "checklist" ,
103
+ label : "Skills" ,
104
+ model : "skills" ,
105
+ listBox : true ,
106
+ values : [
107
+ { id : 1 , name : "HTML5" } ,
108
+ { id : 2 , name : "Javascript" } ,
109
+ { id : 3 , name : "CSS3" } ,
110
+ { id : 4 , name : "CoffeeScript" } ,
111
+ { id : 5 , name : "AngularJS" } ,
112
+ { id : 6 , name : "ReactJS" } ,
113
+ { id : 7 , name : "VueJS" }
114
+ ]
115
+ } ;
116
+ let model = { skills : [ 2 , 7 ] } ;
117
+ let listbox ;
118
+ let checkboxes ;
119
+
120
+ function isChecked ( idx ) {
121
+ return ( checkboxes [ idx ] . checked ) ;
122
+ }
123
+
124
+ before ( ( ) => {
125
+ createField ( schema , model , false ) ;
126
+ listbox = el . querySelector ( ".listbox" ) ;
127
+ checkboxes = listbox . querySelectorAll ( "input[type=checkbox]" ) ;
128
+ } ) ;
129
+
130
+ it ( "should contain items" , ( ) => {
131
+ expect ( checkboxes . length ) . to . be . equal ( 7 ) ;
132
+ } ) ;
133
+
134
+ it ( "should checked the values" , ( ) => {
135
+ expect ( isChecked ( 0 ) ) . to . be . false ;
136
+ expect ( isChecked ( 1 ) ) . to . be . true ;
137
+ expect ( isChecked ( 6 ) ) . to . be . true ;
138
+ } ) ;
139
+
140
+ it ( "listbox value should be the model value after changed" , ( done ) => {
141
+ model . skills = [ 3 ] ;
142
+ vm . $nextTick ( ( ) => {
143
+ expect ( isChecked ( 0 ) ) . to . be . false ;
144
+ expect ( isChecked ( 1 ) ) . to . be . false ;
145
+ expect ( isChecked ( 2 ) ) . to . be . true ;
146
+ done ( ) ;
147
+ } ) ;
148
+
149
+ } ) ;
150
+
151
+ it ( "model value should be the listbox value if changed" , ( done ) => {
152
+ checkboxes [ 0 ] . checked = true ;
153
+ trigger ( checkboxes [ 0 ] , "change" ) ;
154
+
155
+ vm . $nextTick ( ( ) => {
156
+ expect ( model . skills ) . to . be . deep . equal ( [ 3 , 1 ] ) ;
157
+ done ( ) ;
158
+ } ) ;
159
+
160
+ } ) ;
161
+
162
+ } ) ;
163
+
164
+ describe ( "check function values" , ( ) => {
165
+ let schema = {
166
+ type : "checklist" ,
167
+ label : "Skills" ,
168
+ model : "skills" ,
169
+ listBox : true ,
170
+ values ( ) {
171
+ return [
172
+ { id : 1 , name : "HTML5" } ,
173
+ { id : 2 , name : "Javascript" } ,
174
+ { id : 3 , name : "CSS3" } ,
175
+ { id : 4 , name : "CoffeeScript" } ,
176
+ { id : 5 , name : "AngularJS" } ,
177
+ { id : 6 , name : "ReactJS" } ,
178
+ { id : 7 , name : "VueJS" }
179
+ ]
180
+ }
181
+ } ;
182
+ let model = { skills : [ 2 , 7 ] } ;
183
+ let listbox ;
184
+ let checkboxes ;
185
+
186
+ function isChecked ( idx ) {
187
+ return ( checkboxes [ idx ] . checked ) ;
188
+ }
189
+
190
+ before ( ( ) => {
191
+ createField ( schema , model , false ) ;
192
+ listbox = el . querySelector ( ".listbox" ) ;
193
+ checkboxes = listbox . querySelectorAll ( "input[type=checkbox]" ) ;
194
+ } ) ;
195
+
196
+ it ( "should contain items" , ( ) => {
197
+ expect ( checkboxes . length ) . to . be . equal ( 7 ) ;
198
+ } ) ;
199
+
200
+ it ( "should checked the values" , ( ) => {
201
+ expect ( isChecked ( 0 ) ) . to . be . false ;
202
+ expect ( isChecked ( 1 ) ) . to . be . true ;
203
+ expect ( isChecked ( 6 ) ) . to . be . true ;
204
+ } ) ;
205
+
206
+ it ( "listbox value should be the model value after changed" , ( done ) => {
207
+ model . skills = [ 3 ] ;
208
+ vm . $nextTick ( ( ) => {
209
+ expect ( isChecked ( 0 ) ) . to . be . false ;
210
+ expect ( isChecked ( 1 ) ) . to . be . false ;
211
+ expect ( isChecked ( 2 ) ) . to . be . true ;
212
+ done ( ) ;
213
+ } ) ;
214
+
215
+ } ) ;
216
+
217
+ it ( "model value should be the listbox value if changed" , ( done ) => {
218
+ checkboxes [ 0 ] . checked = true ;
219
+ trigger ( checkboxes [ 0 ] , "change" ) ;
220
+
221
+ vm . $nextTick ( ( ) => {
222
+ expect ( model . skills ) . to . be . deep . equal ( [ 3 , 1 ] ) ;
223
+ done ( ) ;
224
+ } ) ;
225
+
226
+ } ) ;
227
+
228
+ } ) ;
229
+
230
+ } ) ;
231
+
232
+ describe ( "check combobox template" , ( ) => {
233
+
234
+ describe ( "check template" , ( ) => {
235
+ let schema = {
236
+ type : "checklist" ,
237
+ label : "Skills" ,
238
+ model : "skills" ,
239
+ values : [
240
+ "HTML5" ,
241
+ "Javascript" ,
242
+ "CSS3" ,
243
+ "CoffeeScript" ,
244
+ "AngularJS" ,
245
+ "ReactJS" ,
246
+ "VueJS"
247
+ ]
248
+ } ;
249
+ let model = { skills : [ "Javascript" , "VueJS" ] } ;
250
+ let combobox ;
251
+ let dropList ;
252
+ let mainRow ;
253
+ let checkboxes ;
254
+
255
+ function isChecked ( idx ) {
256
+ return ( checkboxes [ idx ] . checked ) ;
257
+ }
258
+
259
+ before ( ( ) => {
260
+ createField ( schema , model , false ) ;
261
+ combobox = el . querySelector ( ".combobox" ) ;
262
+ dropList = combobox . querySelector ( ".dropList" ) ;
263
+ mainRow = combobox . querySelector ( ".mainRow" ) ;
264
+ } ) ;
265
+
266
+ it ( "should contain a .combobox element" , ( ) => {
267
+ expect ( field ) . to . be . exist ;
268
+ expect ( field . $el ) . to . be . exist ;
269
+
270
+ expect ( combobox ) . to . be . defined ;
271
+ expect ( combobox . classList . contains ( "form-control" ) ) . to . be . true ;
272
+ } ) ;
273
+
274
+ it ( "should contain a .dropList element" , ( ) => {
275
+ expect ( dropList ) . to . be . defined ;
276
+ checkboxes = dropList . querySelectorAll ( "input[type=checkbox]" ) ;
277
+ expect ( checkboxes ) . to . be . length ( 0 ) ; // collapsed
278
+ } ) ;
279
+
280
+ it ( "should contain a .mainRow element" , ( ) => {
281
+ expect ( mainRow ) . to . be . defined ;
282
+ expect ( mainRow . querySelector ( ".info" ) ) . to . be . defined ;
283
+ expect ( mainRow . querySelector ( ".info" ) . textContent ) . to . be . equal ( "2 selected" ) ;
284
+ expect ( mainRow . querySelector ( ".arrow" ) ) . to . be . defined ;
285
+ } ) ;
286
+
287
+ it ( "should contain 7 checkbox it expanded " , ( done ) => {
288
+ mainRow . click ( ) ;
289
+ vm . $nextTick ( ( ) => {
290
+ checkboxes = dropList . querySelectorAll ( "input[type=checkbox]" ) ;
291
+ expect ( checkboxes . length ) . to . be . equal ( 7 ) ;
292
+ done ( ) ;
293
+ } ) ;
294
+ } ) ;
295
+
296
+ it ( "should checked the values" , ( ) => {
297
+ expect ( isChecked ( 0 ) ) . to . be . false ;
298
+ expect ( isChecked ( 1 ) ) . to . be . true ;
299
+ expect ( isChecked ( 6 ) ) . to . be . true ;
300
+ } ) ;
301
+
302
+ it ( "dropList value should be the model value after changed" , ( done ) => {
303
+ model . skills = [ "ReactJS" ] ;
304
+ vm . $nextTick ( ( ) => {
305
+ expect ( isChecked ( 0 ) ) . to . be . false ;
306
+ expect ( isChecked ( 1 ) ) . to . be . false ;
307
+ expect ( isChecked ( 6 ) ) . to . be . false ;
308
+ expect ( isChecked ( 5 ) ) . to . be . true ;
309
+ done ( ) ;
310
+ } ) ;
311
+
312
+ } ) ;
313
+
314
+ it ( "model value should be the dropList value if changed (add)" , ( done ) => {
315
+ checkboxes [ 0 ] . checked = true ;
316
+ trigger ( checkboxes [ 0 ] , "change" ) ;
317
+
318
+ vm . $nextTick ( ( ) => {
319
+ expect ( model . skills ) . to . be . deep . equal ( [ "ReactJS" , "HTML5" ] ) ;
320
+ done ( ) ;
321
+ } ) ;
322
+
323
+ } ) ;
324
+
325
+ it ( "model value should be the checklist value if changed (remove)" , ( done ) => {
326
+ checkboxes [ 0 ] . checked = false ;
327
+ trigger ( checkboxes [ 0 ] , "change" ) ;
328
+
329
+ vm . $nextTick ( ( ) => {
330
+ expect ( model . skills ) . to . be . deep . equal ( [ "ReactJS" ] ) ;
331
+ done ( ) ;
332
+ } ) ;
333
+
334
+ } ) ;
335
+
336
+ it ( "model value should be the dropList value if changed (null)" , ( done ) => {
337
+ model . skills = null ;
338
+ checkboxes [ 0 ] . checked = true ;
339
+ trigger ( checkboxes [ 0 ] , "change" ) ;
340
+
341
+ vm . $nextTick ( ( ) => {
342
+ expect ( model . skills ) . to . be . deep . equal ( [ "HTML5" ] ) ;
343
+ done ( ) ;
344
+ } ) ;
345
+
346
+ } ) ;
347
+
348
+ } ) ;
349
+
350
+ } ) ;
351
+
352
+ } ) ;
0 commit comments